@extends('admin.layouts.app')

@section('title', __('admin.menu.products'))
@section('page-title', $record->exists ? __('admin.actions.edit').' — '.$record->name : __('admin.actions.create'))

@section('content')
    <x-admin.form :record="$record" :route="$route">
        <x-admin.translatable name="name" :record="$record" required />
        <x-admin.translatable name="short_description" :record="$record" :label="__('admin.fields.description')" type="textarea" :rows="2" />
        <x-admin.translatable name="description" :record="$record" type="textarea" :rows="5" />

        <x-admin.input name="sku" :label="__('admin.fields.sku')" :value="$record->sku" required col="col-md-4" />
        <x-admin.select name="sector_id" :label="__('admin.fields.sector')" :options="$sectors" :selected="$record->sector_id" required col="col-md-4" />
        <x-admin.select name="category_id" :label="__('admin.fields.category')" :options="$categories" :selected="$record->category_id" col="col-md-4" />

        <x-admin.select name="brand_id" :label="__('admin.fields.brand')" :options="$brands" :selected="$record->brand_id" col="col-md-4" />
        <x-admin.input name="price" type="number" step="0.01" min="0" :label="__('admin.fields.price')" :value="$record->price ?? 0" required col="col-md-4" />
        <x-admin.input name="compare_price" type="number" step="0.01" min="0" :label="__('admin.fields.compare_price')" :value="$record->compare_price" col="col-md-4" />

        <x-admin.input name="stock" type="number" min="0" :label="__('admin.fields.stock')" :value="$record->stock ?? 0" required col="col-md-3" />
        <x-admin.input name="min_order_qty" type="number" min="1" :label="__('admin.fields.min_order_qty')" :value="$record->min_order_qty ?? 1" col="col-md-3" />
        <x-admin.input name="currency" :label="__('admin.fields.currency')" :value="$record->currency ?? config('shop.currency')" col="col-md-3" />
        <x-admin.input name="sort_order" type="number" :label="__('admin.fields.sort_order')" :value="$record->sort_order ?? 0" col="col-md-3" />

        <x-admin.translatable name="unit" :record="$record" col="col-md-3" />

        <x-admin.image name="image" :label="__('admin.fields.image')" :current="$record->exists ? $record->image_url : null" />

        <div class="col-md-8">
            <label class="form-label" for="gallery">{{ __('admin.fields.images') }}</label>
            <input type="file" name="gallery[]" id="gallery" multiple accept="image/*" class="form-control">

            @if ($record->exists && $record->images->isNotEmpty())
                <div class="d-flex flex-wrap gap-2 mt-2">
                    @foreach ($record->images as $image)
                        <div class="position-relative" id="gallery-image-{{ $image->id }}">
                            <img src="{{ $image->url }}" class="image-preview" alt="">
                            <button type="button" class="btn btn-sm btn-danger position-absolute top-0 end-0"
                                    onclick="removeGalleryImage({{ $image->id }})">
                                <i class="bi bi-x"></i>
                            </button>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>

        @include('admin.partials.specs', ['specs' => $record->specs ?? []])

        <x-admin.switcher name="is_featured" :label="__('admin.fields.is_featured')" :checked="$record->is_featured" />
        <x-admin.switcher name="is_active" :label="__('admin.fields.is_active')" :checked="$record->exists ? $record->is_active : true" />
    </x-admin.form>
@endsection

@push('scripts')
    <script>
        function removeGalleryImage(id) {
            $.ajax({
                url: '{{ url('admin/products/images') }}/' + id,
                method: 'POST',
                data: { _method: 'DELETE' },
                success: () => $('#gallery-image-' + id).remove(),
            });
        }
    </script>
@endpush