@extends('layouts.admin')

@php
    $vehicleLabels = match(app()->getLocale()) {
        'en' => [
            'add' => 'Add another vehicle',
            'remove' => 'Remove',
            'make' => 'Vehicle make',
            'model' => 'Vehicle model',
            'year_from' => 'Year from',
            'year_to' => 'Year to',
            'engine_capacity' => 'Engine capacity',
            'engine_code' => 'Engine code',
            'optional' => 'Optional',
            'description' => 'Enter every vehicle compatible with this product.',
            'arabic_notice' => 'Enter the product name and description in Arabic only. The system will translate them automatically.',
            'currency_notice' => 'Enter the JOD price only. The USD price is calculated automatically.',
            'calculated' => 'Calculated automatically from the JOD price.',
        ],

        'es' => [
            'add' => 'Añadir otro vehículo',
            'remove' => 'Eliminar',
            'make' => 'Marca del vehículo',
            'model' => 'Modelo del vehículo',
            'year_from' => 'Año desde',
            'year_to' => 'Año hasta',
            'engine_capacity' => 'Cilindrada',
            'engine_code' => 'Código del motor',
            'optional' => 'Opcional',
            'description' => 'Introduzca cada vehículo compatible con este producto.',
            'arabic_notice' => 'Introduzca el nombre y la descripción del producto solo en árabe. El sistema los traducirá automáticamente.',
            'currency_notice' => 'Introduzca solo el precio en JOD. El precio en USD se calcula automáticamente.',
            'calculated' => 'Calculado automáticamente a partir del precio en JOD.',
        ],

        'tr' => [
            'add' => 'Başka araç ekle',
            'remove' => 'Kaldır',
            'make' => 'Araç markası',
            'model' => 'Araç modeli',
            'year_from' => 'Başlangıç yılı',
            'year_to' => 'Bitiş yılı',
            'engine_capacity' => 'Motor hacmi',
            'engine_code' => 'Motor kodu',
            'optional' => 'İsteğe bağlı',
            'description' => 'Bu ürünle uyumlu her aracı girin.',
            'arabic_notice' => 'Ürün adını ve açıklamasını yalnızca Arapça girin. Sistem bunları otomatik olarak çevirecektir.',
            'currency_notice' => 'Yalnızca JOD fiyatını girin. USD fiyatı otomatik hesaplanır.',
            'calculated' => 'JOD fiyatından otomatik olarak hesaplanır.',
        ],

        'it' => [
            'add' => 'Aggiungi un altro veicolo',
            'remove' => 'Rimuovi',
            'make' => 'Marca del veicolo',
            'model' => 'Modello del veicolo',
            'year_from' => 'Anno iniziale',
            'year_to' => 'Anno finale',
            'engine_capacity' => 'Cilindrata',
            'engine_code' => 'Codice motore',
            'optional' => 'Facoltativo',
            'description' => 'Inserisci ogni veicolo compatibile con questo prodotto.',
            'arabic_notice' => 'Inserisci il nome e la descrizione del prodotto solo in arabo. Il sistema li tradurrà automaticamente.',
            'currency_notice' => 'Inserisci solo il prezzo in JOD. Il prezzo in USD viene calcolato automaticamente.',
            'calculated' => 'Calcolato automaticamente dal prezzo in JOD.',
        ],

        default => [
            'add' => 'إضافة سيارة أخرى',
            'remove' => 'حذف السيارة',
            'make' => 'ماركة السيارة',
            'model' => 'موديل السيارة',
            'year_from' => 'من سنة',
            'year_to' => 'إلى سنة',
            'engine_capacity' => 'سعة المحرك',
            'engine_code' => 'كود المحرك',
            'optional' => 'اختياري',
            'description' => 'أدخل كل سيارة تتوافق مع هذه القطعة.',
            'arabic_notice' => 'اكتب اسم المنتج ووصفه بالعربية فقط، وسيترجمهما النظام تلقائيًا.',
            'currency_notice' => 'أدخل سعر الدينار فقط، وسيحسب النظام سعر الدولار تلقائيًا.',
            'calculated' => 'يُحسب تلقائيًا من سعر الدينار.',
        ],
    };

    $editLabels = match(app()->getLocale()) {
        'en' => [
            'title' => 'Edit product',
            'save' => 'Save changes',
            'current_images' => 'Current images',
            'delete_image' => 'Delete this image',
        ],
        'es' => [
            'title' => 'Editar producto',
            'save' => 'Guardar cambios',
            'current_images' => 'Imágenes actuales',
            'delete_image' => 'Eliminar esta imagen',
        ],
        'tr' => [
            'title' => 'Ürünü düzenle',
            'save' => 'Değişiklikleri kaydet',
            'current_images' => 'Mevcut görseller',
            'delete_image' => 'Bu görseli sil',
        ],
        'it' => [
            'title' => 'Modifica prodotto',
            'save' => 'Salva modifiche',
            'current_images' => 'Immagini attuali',
            'delete_image' => 'Elimina questa immagine',
        ],
        default => [
            'title' => 'تعديل المنتج',
            'save' => 'حفظ التعديلات',
            'current_images' => 'الصور الحالية',
            'delete_image' => 'حذف هذه الصورة',
        ],
    };

    $arabicTranslation = $product->translations
        ->firstWhere('locale', 'ar');

    $jodPrice = $product->basePrices
        ->firstWhere('currency', 'JOD');

    $usdPrice = $product->basePrices
        ->firstWhere('currency', 'USD');

    $savedVehicles = $product->vehicleVariants
        ->map(function ($variant): array {
            return [
                'make' => $variant->model?->make?->name ?? '',
                'model' => $variant->model?->name ?? '',
                'year_from' => $variant->year_from ?? '',
                'year_to' => $variant->year_to ?? '',
                'engine_capacity' => $variant->engine_capacity ?? '',
                'engine_code' => $variant->engine_code ?? '',
            ];
        })
        ->values()
        ->all();

    if ($savedVehicles === []) {
        $savedVehicles = [[
            'make' => '',
            'model' => '',
            'year_from' => '',
            'year_to' => '',
            'engine_capacity' => '',
            'engine_code' => '',
        ]];
    }

    $initialVehicles = old('vehicles', $savedVehicles);
@endphp

@section('title', $editLabels['title'])

@push('styles')
    .product-form {
        display: flex;
        flex-direction: column;
        gap: 22px;
    }

    .section-title {
        margin: 0 0 18px;
        color: #0756a3;
        font-size: 20px;
    }

    .form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .form-group {
        min-width: 0;
    }

    .form-group.full-width {
        grid-column: 1 / -1;
    }

    .form-group label {
        display: block;
        margin-bottom: 7px;
        color: #344054;
        font-weight: 700;
    }

    .form-control {
        width: 100%;
        padding: 11px 12px;
        border: 1px solid #d0d9e4;
        border-radius: 8px;
        background: #ffffff;
        font: inherit;
    }

    .form-control:focus {
        border-color: #0756a3;
        outline: none;
        box-shadow: 0 0 0 3px rgba(7, 86, 163, 0.1);
    }

    .readonly-control {
        background: #eef3f8;
        color: #475467;
        cursor: not-allowed;
    }

    textarea.form-control {
        min-height: 120px;
        resize: vertical;
    }

    .required-mark {
        color: #b42318;
    }

    .checkboxes {
        display: flex;
        gap: 25px;
        flex-wrap: wrap;
    }

    .checkbox-label {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        font-weight: 700;
    }

    .checkbox-label input {
        width: 18px;
        height: 18px;
    }

    .notice {
        padding: 13px 15px;
        margin-bottom: 18px;
        border-radius: 9px;
        background: #eaf3fc;
        color: #0756a3;
        line-height: 1.7;
    }

    .language-card,
    .vehicle-row {
        padding: 18px;
        border: 1px solid #dce5ef;
        border-radius: 10px;
        background: #f9fbfd;
    }

    .language-title {
        margin: 0 0 15px;
        color: #0756a3;
        font-size: 17px;
    }

    .vehicle-row {
        position: relative;
        margin-bottom: 14px;
    }

    .vehicle-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .remove-vehicle {
        margin-top: 14px;
        padding: 8px 12px;
        border: 0;
        border-radius: 7px;
        background: #b42318;
        color: #ffffff;
        font-weight: 700;
        cursor: pointer;
    }

    .add-vehicle {
        padding: 10px 15px;
        border: 0;
        border-radius: 8px;
        background: #17803d;
        color: #ffffff;
        font-weight: 700;
        cursor: pointer;
    }

    .help-text {
        display: block;
        margin-top: 7px;
        color: #667085;
        font-size: 13px;
    }

    .form-actions {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }

    @media (max-width: 900px) {
        .vehicle-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 700px) {
        .form-grid,
        .vehicle-grid {
            grid-template-columns: 1fr;
        }
    }
@endpush

@section('content')
    <div class="page-header">
        <h1 class="page-title">
            {{ $editLabels['title'] }}
        </h1>

        <a
            class="button button-secondary"
            href="{{ route('admin.products.index') }}"
        >
            {{ __('product_form.cancel') }}
        </a>
    </div>

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

        <section class="card">
            <h2 class="section-title">
                {{ __('product_form.basic_information') }}
            </h2>

            <div class="form-grid">
                <div class="form-group">
                    <label for="part_brand">
                        {{ __('product_form.brand') }}
                    </label>

                    <input
                        class="form-control"
                        id="part_brand"
                        type="text"
                        name="part_brand"
                        value="{{ old('part_brand', $product->part_brand) }}"
                        maxlength="150"
                        placeholder="{{ __('product_form.brand_example') }}"
                    >
                </div>

                <div class="form-group">
                    <label for="weight">
                        {{ __('product_form.weight') }}
                    </label>

                    <input
                        class="form-control"
                        id="weight"
                        type="number"
                        name="weight"
                        value="{{ old('weight', $product->weight) }}"
                        min="0"
                        step="0.001"
                    >
                </div>

                <div class="form-group">
                    <label for="stock_quantity">
                        {{ __('product_form.quantity') }}
                        <span class="required-mark">*</span>
                    </label>

                    <input
                        class="form-control"
                        id="stock_quantity"
                        type="number"
                        name="stock_quantity"
                        value="{{ old('stock_quantity', $product->stock_quantity) }}"
                        min="0"
                        max="1000000"
                        required
                    >
                </div>

                <div class="form-group full-width">
                    <div class="checkboxes">
                        <label class="checkbox-label">
                            <input
                                type="checkbox"
                                name="can_be_ordered"
                                value="1"
                                @checked(old('can_be_ordered', $product->can_be_ordered))
                            >

                            {{ __('product_form.can_be_ordered') }}
                        </label>

                        <label class="checkbox-label">
                            <input
                                type="checkbox"
                                name="is_active"
                                value="1"
                                @checked(old('is_active', $product->is_active))
                            >

                            {{ __('product_form.is_active') }}
                        </label>
                    </div>
                </div>
            </div>
        </section>

        <section class="card">
            <h2 class="section-title">
                {{ __('product_form.translations') }}
            </h2>

            <div class="notice">
                {{ $vehicleLabels['arabic_notice'] }}
            </div>

            <div class="language-card">
                <h3 class="language-title">
                    العربية
                    <span class="required-mark">*</span>
                </h3>

                <div class="form-group">
                    <label for="name_ar">
                        {{ __('product_form.name') }}
                        <span class="required-mark">*</span>
                    </label>

                    <input
                        class="form-control"
                        id="name_ar"
                        type="text"
                        name="translations[ar][name]"
                        value="{{ old('translations.ar.name', $arabicTranslation?->name) }}"
                        maxlength="255"
                        required
                        dir="rtl"
                    >
                </div>

                <div class="form-group">
                    <label for="description_ar">
                        {{ __('product_form.description') }}
                    </label>

                    <textarea
                        class="form-control"
                        id="description_ar"
                        name="translations[ar][description]"
                        maxlength="10000"
                        dir="rtl"
                    >{{ old('translations.ar.description', $arabicTranslation?->description) }}</textarea>
                </div>
            </div>
        </section>

        <section class="card">
            <h2 class="section-title">
                {{ __('product_form.prices') }}
            </h2>

            <div class="notice">
                {{ $vehicleLabels['currency_notice'] }}

                1 JOD =
                {{ number_format(
                    config('aswarco.currency.jod_to_usd_rate'),
                    4
                ) }}
                USD
            </div>

            <div class="form-grid">
                <div class="form-group">
                    <label for="price_jod">
                        {{ __('product_form.price_jod') }}
                        <span class="required-mark">*</span>
                    </label>

                    <input
                        class="form-control"
                        id="price_jod"
                        type="number"
                        name="prices[JOD]"
                        value="{{ old('prices.JOD', $jodPrice?->amount) }}"
                        min="0"
                        step="0.001"
                        required
                    >
                </div>

                <div class="form-group">
                    <label for="price_usd">
                        {{ __('product_form.price_usd') }}
                    </label>

                    <input
                        class="form-control readonly-control"
                        id="price_usd"
                        type="number"
                        name="prices[USD]"
                        value="{{ old('prices.USD', $usdPrice?->amount) }}"
                        min="0"
                        step="0.001"
                        readonly
                        required
                    >

                    <span class="help-text">
                        {{ $vehicleLabels['calculated'] }}
                    </span>
                </div>
            </div>
        </section>

        <section class="card">
            <h2 class="section-title">
                {{ __('product_form.vehicles') }}
            </h2>

            <div class="notice">
                {{ $vehicleLabels['description'] }}
            </div>

            <div id="vehicles-container">
                @foreach($initialVehicles as $index => $vehicle)
                    <div
                        class="vehicle-row"
                        data-vehicle-row
                    >
                        <div class="vehicle-grid">
                            <div class="form-group">
                                <label>
                                    {{ $vehicleLabels['make'] }}
                                    <span class="required-mark">*</span>
                                </label>

                                <input
                                    class="form-control"
                                    type="text"
                                    name="vehicles[{{ $index }}][make]"
                                    value="{{ $vehicle['make'] ?? '' }}"
                                    maxlength="150"
                                    required
                                >
                            </div>

                            <div class="form-group">
                                <label>
                                    {{ $vehicleLabels['model'] }}
                                    <span class="required-mark">*</span>
                                </label>

                                <input
                                    class="form-control"
                                    type="text"
                                    name="vehicles[{{ $index }}][model]"
                                    value="{{ $vehicle['model'] ?? '' }}"
                                    maxlength="150"
                                    required
                                >
                            </div>

                            <div class="form-group">
                                <label>
                                    {{ $vehicleLabels['engine_capacity'] }}
                                    <span class="required-mark">*</span>
                                </label>

                                <input
                                    class="form-control"
                                    type="text"
                                    name="vehicles[{{ $index }}][engine_capacity]"
                                    value="{{ $vehicle['engine_capacity'] ?? '' }}"
                                    maxlength="50"
                                    placeholder="1600 CC"
                                    required
                                >
                            </div>

                            <div class="form-group">
                                <label>
                                    {{ $vehicleLabels['year_from'] }}
                                </label>

                                <input
                                    class="form-control"
                                    type="number"
                                    name="vehicles[{{ $index }}][year_from]"
                                    value="{{ $vehicle['year_from'] ?? '' }}"
                                    min="1900"
                                    max="2100"
                                >
                            </div>

                            <div class="form-group">
                                <label>
                                    {{ $vehicleLabels['year_to'] }}
                                </label>

                                <input
                                    class="form-control"
                                    type="number"
                                    name="vehicles[{{ $index }}][year_to]"
                                    value="{{ $vehicle['year_to'] ?? '' }}"
                                    min="1900"
                                    max="2100"
                                >
                            </div>

                            <div class="form-group">
                                <label>
                                    {{ $vehicleLabels['engine_code'] }}
                                    ({{ $vehicleLabels['optional'] }})
                                </label>

                                <input
                                    class="form-control"
                                    type="text"
                                    name="vehicles[{{ $index }}][engine_code]"
                                    value="{{ $vehicle['engine_code'] ?? '' }}"
                                    maxlength="100"
                                >
                            </div>
                        </div>

                        <button
                            class="remove-vehicle"
                            type="button"
                            data-remove-vehicle
                        >
                            {{ $vehicleLabels['remove'] }}
                        </button>
                    </div>
                @endforeach
            </div>

            <button
                class="add-vehicle"
                id="add-vehicle"
                type="button"
            >
                {{ $vehicleLabels['add'] }}
            </button>
        </section>

        <section class="card">
            <h2 class="section-title">
                {{ __('product_form.images') }}
            </h2>

            @if($product->media->isNotEmpty())
                <div class="language-card" style="margin-bottom: 18px;">
                    <h3 class="language-title">
                        {{ $editLabels['current_images'] }}
                    </h3>

                    <div class="form-grid">
                        @foreach($product->media as $media)
                            <label class="checkbox-label">
                                @if($media->file_path)
                                    <img
                                        src="{{ asset('storage/' . $media->file_path) }}"
                                        alt="{{ $media->original_name ?? $product->internal_code }}"
                                        style="width: 90px; height: 90px; object-fit: cover; border-radius: 8px;"
                                    >
                                @endif

                                <input
                                    type="checkbox"
                                    name="delete_media_ids[]"
                                    value="{{ $media->id }}"
                                >

                                {{ $editLabels['delete_image'] }}
                            </label>
                        @endforeach
                    </div>
                </div>
            @endif

            <div class="form-group">
                <input
                    class="form-control"
                    type="file"
                    name="images[]"
                    accept=".jpg,.jpeg,.png,.webp"
                    multiple
                >

                <span class="help-text">
                    {{ __('product_form.images_help') }}
                </span>
            </div>
        </section>

        <div class="form-actions">
            <button
                class="button"
                type="submit"
            >
                {{ $editLabels['save'] }}
            </button>

            <a
                class="button button-secondary"
                href="{{ route('admin.products.index') }}"
            >
                {{ __('product_form.cancel') }}
            </a>
        </div>
    </form>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const jodInput = document.getElementById('price_jod');
        const usdInput = document.getElementById('price_usd');

        const conversionRate = Number(
            @json(config('aswarco.currency.jod_to_usd_rate'))
        );

        function updateUsdPrice() {
            const jodPrice = Number(jodInput.value);

            if (
                jodInput.value === ''
                || Number.isNaN(jodPrice)
                || jodPrice < 0
            ) {
                usdInput.value = '';

                return;
            }

            usdInput.value = (
                jodPrice * conversionRate
            ).toFixed(3);
        }

        jodInput.addEventListener(
            'input',
            updateUsdPrice
        );

        updateUsdPrice();

        const container = document.getElementById(
            'vehicles-container'
        );

        const addButton = document.getElementById(
            'add-vehicle'
        );

        const labels = @json($vehicleLabels);

        let vehicleIndex = container.querySelectorAll(
            '[data-vehicle-row]'
        ).length;

        function vehicleTemplate(index) {
            return `
                <div class="vehicle-row" data-vehicle-row>
                    <div class="vehicle-grid">
                        <div class="form-group">
                            <label>
                                ${labels.make}
                                <span class="required-mark">*</span>
                            </label>

                            <input
                                class="form-control"
                                type="text"
                                name="vehicles[${index}][make]"
                                maxlength="150"
                                required
                            >
                        </div>

                        <div class="form-group">
                            <label>
                                ${labels.model}
                                <span class="required-mark">*</span>
                            </label>

                            <input
                                class="form-control"
                                type="text"
                                name="vehicles[${index}][model]"
                                maxlength="150"
                                required
                            >
                        </div>

                        <div class="form-group">
                            <label>
                                ${labels.engine_capacity}
                                <span class="required-mark">*</span>
                            </label>

                            <input
                                class="form-control"
                                type="text"
                                name="vehicles[${index}][engine_capacity]"
                                maxlength="50"
                                placeholder="1600 CC"
                                required
                            >
                        </div>

                        <div class="form-group">
                            <label>${labels.year_from}</label>

                            <input
                                class="form-control"
                                type="number"
                                name="vehicles[${index}][year_from]"
                                min="1900"
                                max="2100"
                            >
                        </div>

                        <div class="form-group">
                            <label>${labels.year_to}</label>

                            <input
                                class="form-control"
                                type="number"
                                name="vehicles[${index}][year_to]"
                                min="1900"
                                max="2100"
                            >
                        </div>

                        <div class="form-group">
                            <label>
                                ${labels.engine_code}
                                (${labels.optional})
                            </label>

                            <input
                                class="form-control"
                                type="text"
                                name="vehicles[${index}][engine_code]"
                                maxlength="100"
                            >
                        </div>
                    </div>

                    <button
                        class="remove-vehicle"
                        type="button"
                        data-remove-vehicle
                    >
                        ${labels.remove}
                    </button>
                </div>
            `;
        }

        addButton.addEventListener(
            'click',
            function () {
                container.insertAdjacentHTML(
                    'beforeend',
                    vehicleTemplate(vehicleIndex)
                );

                vehicleIndex++;
            }
        );

        container.addEventListener(
            'click',
            function (event) {
                const removeButton = event.target.closest(
                    '[data-remove-vehicle]'
                );

                if (! removeButton) {
                    return;
                }

                const row = removeButton.closest(
                    '[data-vehicle-row]'
                );

                row.remove();
            }
        );
    });
</script>
@endpush