@extends('admin.layouts.app')

@section('title', __('admin.menu.equipment'))
@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="description" :record="$record" type="textarea" />

        <x-admin.select name="equipment_category_id" :label="__('admin.fields.category')" :options="$categories" :selected="$record->equipment_category_id" required col="col-md-4" />
        <x-admin.input name="code" :label="__('admin.fields.code')" :value="$record->code" required col="col-md-4" />
        <x-admin.input name="quantity" type="number" min="1" :label="__('admin.fields.quantity_available')" :value="$record->quantity ?? 1" required col="col-md-4" />

        <x-admin.input name="hourly_rate" type="number" step="0.01" min="0" :label="__('admin.fields.hourly_rate')" :value="$record->hourly_rate" col="col-md-3" />
        <x-admin.input name="daily_rate" type="number" step="0.01" min="0" :label="__('admin.fields.daily_rate')" :value="$record->daily_rate ?? 0" required col="col-md-3" />
        <x-admin.input name="weekly_rate" type="number" step="0.01" min="0" :label="__('admin.fields.weekly_rate')" :value="$record->weekly_rate" col="col-md-3" />
        <x-admin.input name="monthly_rate" type="number" step="0.01" min="0" :label="__('admin.fields.monthly_rate')" :value="$record->monthly_rate" col="col-md-3" />

        <x-admin.input name="deposit" type="number" step="0.01" min="0" :label="__('admin.fields.deposit')" :value="$record->deposit ?? 0" col="col-md-3" />
        <x-admin.input name="driver_fee_per_day" type="number" step="0.01" min="0" :label="__('admin.fields.driver_fee_per_day')" :value="$record->driver_fee_per_day" 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.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="driver_available" :label="__('admin.fields.driver_available')" :checked="$record->driver_available" />
        <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/equipment/images') }}/' + id,
                method: 'POST',
                data: { _method: 'DELETE' },
                success: () => $('#gallery-image-' + id).remove(),
            });
        }
    </script>
@endpush