@extends('layouts.seller')

@section('title', 'Edit Product')

@section('content')

<div class="page-header">
    <div>
        <h4 class="page-title">Edit Product</h4>
        <p class="text-muted mb-0">Update product details for {{ $product->name }}</p>
    </div>
    <a href="{{ route('seller.products.index') }}" class="btn btn-light">
        <i class="bi bi-arrow-left me-1"></i> Back to Products
    </a>
</div>

<div class="card">
    <div class="card-header bg-white py-3 border-bottom">
        <h6 class="fw-bold mb-0 text-primary">
            <i class="bi bi-pencil me-2"></i>Product Details
        </h6>
    </div>

    <div class="card-body p-4">

        {{-- IMPORTANT: update route should exist --}}
        <form action="{{ route('seller.products.update', $product->id) }}"
              method="POST"
              enctype="multipart/form-data">

            @csrf
            @method('PUT')

            <div class="row g-4 mb-4">

                <div class="col-md-8">
                    <label class="form-label fw-bold">Product Name *</label>
                    <input type="text" class="form-control form-control-lg"
                           name="name"
                           value="{{ old('name', $product->name) }}"
                           required>
                </div>

                <div class="col-md-4">
                    <label class="form-label fw-bold">Category *</label>
                    <select class="form-select form-select-lg" name="category_id" required>
                        @foreach($categories as $category)
                            <option value="{{ $category->id }}"
                                {{ old('category_id', $product->category_id) == $category->id ? 'selected' : '' }}>
                                {{ $category->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-12">
                    <label class="form-label fw-bold">Description *</label>
                    <textarea class="form-control" name="description" rows="5" required>
                        {{ old('description', $product->description) }}
                    </textarea>
                </div>

                <div class="col-md-6">
                    <label class="form-label fw-bold">Price *</label>
                    <div class="input-group">
                        <select class="form-select" name="currency" style="max-width: 100px;">
                            <option value="INR" {{ $product->currency == 'INR' ? 'selected' : '' }}>₹ INR</option>
                            <option value="USD" {{ $product->currency == 'USD' ? 'selected' : '' }}>$ USD</option>
                        </select>
                        <input type="number" class="form-control"
                               name="price"
                               value="{{ old('price', $product->price) }}"
                               step="0.01" required>
                    </div>
                </div>

                <div class="col-md-6">
                    <label class="form-label fw-bold">Stock *</label>
                    <input type="number" class="form-control"
                           name="stock"
                           value="{{ old('stock', $product->stock) }}"
                           min="0" required>
                </div>

                <div class="col-md-6">
                    <label class="form-label fw-bold">MOQ *</label>
                    <input type="number" class="form-control"
                           name="moq"
                           value="{{ old('moq', $product->moq) }}"
                           min="{{ $minMoq }}"
                           max="{{ $maxMoq }}"
                           required>
                    <small class="text-muted">
                        Allowed: {{ $minMoq }} - {{ $maxMoq }}
                    </small>
                </div>

            </div>

            <hr>

            {{-- SPECIFICATIONS --}}
            <h6 class="fw-bold text-primary mb-3">Specifications</h6>

            <div id="specifications-container">

                @php
                    $specs = $product->specifications ?? [];
                    if (is_string($specs)) {
                        $specs = json_decode($specs, true) ?? [];
                    }
                @endphp

                @forelse($specs as $key => $value)
                    <div class="row g-2 mb-2 spec-row">
                        <div class="col-5">
                            <input type="text" class="form-control"
                                   name="specifications[{{ $loop->index }}][key]"
                                   value="{{ $key }}"
                                   placeholder="Key">
                        </div>
                        <div class="col-5">
                            <input type="text" class="form-control"
                                   name="specifications[{{ $loop->index }}][value]"
                                   value="{{ $value }}"
                                   placeholder="Value">
                        </div>
                        <div class="col-2">
                            <button type="button" class="btn btn-danger w-100 remove-spec">X</button>
                        </div>
                    </div>
                @empty
                    <div class="row g-2 mb-2 spec-row">
                        <div class="col-5">
                            <input type="text" class="form-control" name="specifications[0][key]" placeholder="Key">
                        </div>
                        <div class="col-5">
                            <input type="text" class="form-control" name="specifications[0][value]" placeholder="Value">
                        </div>
                        <div class="col-2">
                            <button type="button" class="btn btn-danger w-100 remove-spec" disabled>X</button>
                        </div>
                    </div>
                @endforelse

            </div>

            <button type="button" class="btn btn-light mt-2 mb-4" id="add-spec-btn">
                + Add Specification
            </button>

            <hr>

            {{-- IMAGES --}}
            <h6 class="fw-bold text-primary mb-3">Images</h6>

            @if($product->images_json)
                <div class="row mb-3">

                    @foreach($product->images_json as $index => $image)
                        @php
                            $img = is_array($image) ? ($image['thumbnail'] ?? '') : $image;
                        @endphp

                        <div class="col-md-2 col-4">
                            <img src="{{ asset('storage/' . $img) }}"
                                 style="width:100%;height:100px;object-fit:cover;border-radius:8px;">

                            <div class="text-center mt-1">
                                <input type="checkbox"
                                       name="delete_images[]"
                                       value="{{ $index }}">
                                Delete
                            </div>
                        </div>
                    @endforeach

                </div>
            @endif

            <div class="mb-4">
                <label class="form-label fw-bold">
                    Add More Images (Max {{ $imageLimit ?? 4 }} total)
                </label>

                <input type="file" class="form-control"
                       name="images[]" multiple>
            </div>

            <div class="text-end">
                <button type="submit" class="btn btn-primary">
                    Update Product
                </button>
            </div>

        </form>
    </div>
</div>

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {

    let index = 10;
    const container = document.getElementById('specifications-container');

    document.getElementById('add-spec-btn').addEventListener('click', function () {
        let row = document.createElement('div');
        row.classList.add('row','g-2','mb-2','spec-row');

        row.innerHTML = `
            <div class="col-5">
                <input type="text" class="form-control" name="specifications[${index}][key]" placeholder="Key">
            </div>
            <div class="col-5">
                <input type="text" class="form-control" name="specifications[${index}][value]" placeholder="Value">
            </div>
            <div class="col-2">
                <button type="button" class="btn btn-danger w-100 remove-spec">X</button>
            </div>
        `;

        container.appendChild(row);
        index++;
    });

    container.addEventListener('click', function (e) {
        if (e.target.classList.contains('remove-spec')) {
            e.target.closest('.spec-row').remove();
        }
    });

});
</script>
@endpush