@extends('admin.layouts.admin')

@section('admin_content') 
    <div class="row">
        <div class="page-title-heading">Edit Product</div>

        {{-- Success / Error Messages --}}
        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        @if (session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif

        {{-- Validation Errors --}}
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" enctype="multipart/form-data" action="{{ route('admin.products.update', $product->id) }}">
            @csrf
            @method('PUT')

            {{-- Category --}}
            <div class="mb-3">
                <label>Category</label>
                <select name="category_id" class="form-control" required onchange="generateSlug()">
                    @foreach ($categories as $cat)
                        <option value="{{ $cat->id }}"
                            {{ $product->category_id == $cat->id || old('category_id') == $cat->id ? 'selected' : '' }}>
                            {{ $cat->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            {{-- Category Slug --}}
            <div class="mb-3">
                <label>Category Slug</label>
                <input type="text" id="slug" class="form-control" value="{{ $product->category->slug ?? '' }}"
                    readonly>
            </div>

            {{-- Item Name --}}
            <div class="mb-3">
                <label>Item Name</label>
                <input type="text" name="name" id="itemname" class="form-control"
                    value="{{ old('name', $product->name) }}" required>
            </div>

            {{-- Item Slug --}}
            <div class="mb-3">
                <label>Item Slug</label>
                <input type="text" id="itemslug" name="slug" class="form-control"
                    value="{{ old('slug', $product->slug) }}" readonly>
            </div>

            {{-- Description --}}
            <div class="mb-3">
                <label>Description</label>
                <textarea name="description" class="form-control" rows="4">{{ old('description', $product->description) }}</textarea>
            </div>

            {{-- Existing Thumbnail --}}
            @if ($product->thumbnail)
                <div class="mb-3">
                    <label>Current Image</label>
                    <div>
                        <img src="{{ asset($product->thumbnail) }}" alt="Product Image" width="120">
                    </div>
                </div>
            @endif

            {{-- New Thumbnail --}}
            <div class="mb-3">
                <label>Change Image</label>
                <input type="file" name="thumbnail" class="form-control">
            </div>

            {{-- Quantity --}}
            <div class="mb-3">
                <label>Quantity</label>
                <input type="number" name="stock" class="form-control" value="{{ old('stock', $product->stock) }}">
            </div>

            {{-- Price --}}
            <div class="mb-3">
                <label>Price</label>
                <input type="text" name="price" class="form-control" value="{{ old('price', $product->price) }}">
            </div>

            {{-- SEO Fields --}}
            <div class="mb-3">
                <label>SEO Title</label>
                <input type="text" name="title_seo" class="form-control"
                    value="{{ old('title_seo', $product->title_seo) }}">
            </div>

            <div class="mb-3">
                <label>SEO Description</label>
                <textarea name="description_seo" class="form-control" rows="4">{{ old('description_seo', $product->description_seo) }}</textarea>
            </div>

            <div class="mb-3">
                <label>SEO Keywords</label>
                <input type="text" name="keywords_seo" class="form-control"
                    value="{{ old('keywords_seo', $product->keywords_seo) }}">
            </div>

            <button type="submit" class="btn btn-primary">Update Product</button>
        </form>

    </div>

    {{-- Slug generation --}}
    <script>
        function generateSlug() {
            let cat = document.querySelector('[name="category_id"]');
            let catText = cat.options[cat.selectedIndex].text.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
            let item = document.getElementById('itemname').value.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g,
                '');
            document.getElementById('slug').value = catText;
            document.getElementById('itemslug').value = item;
        }

        document.getElementById('itemname').addEventListener('input', generateSlug);
        document.querySelector('[name="category_id"]').addEventListener('change', generateSlug);
    </script>
@endsection