@extends('content')

@section('meta')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endsection

@section('page-title')
    {{ __('vehicle.repair.add.header') }}
@endsection

@section('page-content')

    {{--    <pre>{{ json_encode(old(), JSON_PRETTY_PRINT) }}</pre>--}}

    <x-forms.form-wrapper-component formRoute="{{ route('office.cases.insert.store') }}"
                                    formLabel="{{ __('vehicle.repair.add.add_new_repair_item') }}" fullPage="true">

        {{-- GRID --------------------------------------------------------------------------------------------------------- --}}
        <div class="grid grid-cols-12 gap-8">
            <div class="col-span-6">

                {{-- WYSZUKIWANIE POJAZDU --------------------------------------------------------------------------------- --}}
                <div x-data="vehicleSearch()" x-init="initOldData('{{ old('vehicle_id') }}')" class="mx-auto">

                    <label for="vehicle_search_label" class="block mb-1 ml-4 text-lg pt-2 text-bold"
                           x-text="!manualVehicle ? '{{ __('vehicle.repair.add.vehicle_searcher') }}' : '{{ __('vehicle.repair.add.vehicle_form') }}'">
                    </label>

                    <div class="border border-stone-300 p-4 rounded-xl" id="vehicle_search_label">
                        {{--                @change="{vehicleData = null, input_vehicle_id = !input_vehicle_id}"--}}
                        <label class="flex items-center mb-2">
                            <input type="checkbox"
                                   x-model="manualVehicle"
                                   @change="VehicleCheckBoxSet"
                                   name="manual_vehicle_checkbox"
                                   class="mr-2"/>
                            {{ __('vehicle.repair.add.vehicle_form') }}
                        </label>

                        {{-- WYSZUKIWARKA AJAXOWA POJAZDÓW ---------------------------------------------------------------- --}}
                        <input type="text"
                               x-show="!manualVehicle"
                               x-model="query"
                               @input.debounce.500ms="search"
                               @keydown.arrow-down.prevent="arrowDown"
                               @keydown.arrow-up.prevent="arrowUp"
                               @keydown.enter.prevent="enterSelect"
                               placeholder="{{ __('vehicle.repair.add.vehicle_search') }}"
                               class="border p-2 w-full rounded"
                        >

                        {{-- Ukryte pole z ID pojazdu (jeśli wybrano z listy) --------------------------------------------- --}}
                        <template x-if="input_vehicle_id">
                            <input type="hidden" name="vehicle_id" :value="selectedVehicle?.id"
                                   :disabled="manualVehicle"/>
                        </template>

                        {{-- PRELOADER ------------------------------------------------------------------------------------ --}}
                        <div x-show="loading && !manualVehicle" x-cloak class="mt-2 flex items-center text-gray-600">
                            <!-- Prosty spinner SVG z Tailwind animate-spin -->
                            <svg class="animate-spin h-5 w-5 mr-2" viewBox="0 0 24 24" fill="none">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                        stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor"
                                      d="M4 12a8 8 0 018-8v4l3-3-3-3v4a12 12 0 00-12 12h4z"/>
                            </svg>
                            <span>Ładowanie…</span>
                        </div>

                        {{-- WYNIKI WYSZUKIWANIA POJAZDÓW ----------------------------------------------------------------- --}}
                        <ul class="mt-4 divide-y" x-show="results.length > 0 && !manualVehicle">
                            <template x-for="(vehicle, index) in results" :key="vehicle.id">
                                <li
                                    @click="selectVehicle(vehicle)"
                                    :class="{
                'bg-gray-200': selectedIndex === index,
                'hover:bg-gray-100 cursor-pointer': true
            }"
                                    class="px-4 py-2"
                                    style="list-style-type: none; padding: 4px"
                                >
                                    <span x-text="vehicle.car_brand"></span>
                                    <span x-text="' ' + vehicle.car_model"></span>
                                    <span class="text-gray-500" x-text="' ' + vehicle.plate_number"></span>
                                </li>
                            </template>
                        </ul>

                        {{-- POLA FORMULARZA DO DODANIA POJAZDU ----------------------------------------------------------- --}}
                        <div class="space-y-2 grid grid-cols-2 gap-x-2" x-show="manualVehicle">
                            <div class="col-span-2">
                                <label for="car_brand">{{ __('vehicle.repair.add.marka') }}</label>
                                <input type="text" x-model="manualVehicleData.car_brand" name="vehicle[car_brand]"
                                       id="car_brand" placeholder="{{ __('vehicle.repair.add.marka') }}"
                                       class="border p-2 w-full rounded" autocomplete="off">
                            </div>
                            <div class="col-span-2">
                                <label for="car_model">{{ __('vehicle.repair.add.model') }}</label>
                                <input type="text" x-model="manualVehicleData.car_model" name="vehicle[car_model]"
                                       id="car_model" placeholder="{{ __('vehicle.repair.add.model') }}"
                                       class="border p-2 w-full rounded" autocomplete="off">
                            </div>
                            <div class="col-span-2 md:col-span-1">
                                <label for="plate_number">{{ __('vehicle.repair.add.plate_number') }}</label>
                                <input type="text" x-model="manualVehicleData.plate_number" name="vehicle[plate_number]"
                                       id="plate_number" placeholder="{{ __('vehicle.repair.add.plate_number') }}"
                                       class="border p-2 w-full rounded" autocomplete="off">
                            </div>
                            <div class="col-span-2 md:col-span-1">
                                <label for="vin">{{ __('vehicle.repair.add.vin') }}</label>
                                <input type="text" x-model="manualVehicleData.vin" maxlength="17" name="vehicle[vin]"
                                       id="vin" placeholder="{{ __('vehicle.repair.add.vin') }}"
                                       class="border p-2 w-full rounded" autocomplete="off">
                            </div>
                            <div class="col-span-2 md:col-span-1">
                                <label for="kilometers">{{ __('vehicle.repair.add.kilometers') }}</label>
                                <input type="text" x-model="manualVehicleData.kilometers" maxlength="7"
                                       name="vehicle[kilometers]" id="kilometers"
                                       placeholder="{{ __('vehicle.repair.add.kilometers') }}"
                                       class="border p-2 w-full rounded" autocomplete="off">
                            </div>
                        </div>

                        {{-- Dane pojazdu po wyborze z listy wyszukiwania ------------------------------------------------- --}}
                        <div class="mt-4 p-4 border rounded bg-gray-50" x-show="selectedVehicle && !manualVehicle">
                            <template x-if="selectedVehicle && !manualVehicle">
                                <div>
                                    <h2 class="font-bold mb-2">{{ __('vehicle.repair.add.vehicle_data') }}:</h2>
                                    <p><strong>{{ __('vehicle.repair.add.marka') }}:</strong> <span
                                            x-text="selectedVehicle.car_brand"></span></p>
                                    <p><strong>{{ __('vehicle.repair.add.model') }}:</strong> <span
                                            x-text="selectedVehicle.car_model"></span></p>
                                    <p><strong>{{ __('vehicle.repair.add.plate_number') }}:</strong> <span
                                            x-text="selectedVehicle.plate_number"></span></p>
                                    <p><strong>{{ __('vehicle.repair.add.vin') }}:</strong> <span
                                            x-text="selectedVehicle.vin"></span></p>
                                    {{--                                    <p><strong>{{ __('vehicle.repair.add.kilometers') }}:</strong> <span x-text="selectedVehicle.kilometers"></span></p>--}}
                                    <p>
                                        <strong>{{ __('vehicle.repair.add.kilometers') }}:</strong>
                                        <input
                                            type="number"
                                            class="border p-2 rounded w-32"
                                            name="vehicle[kilometers]"
                                            x-model="selectedVehicle.kilometers"
                                            :disabled="manualVehicle"
                                        >
                                    </p>

                                </div>
                            </template>
                        </div>
                    </div>


                    {{-- WYSZUKIWARKA KLIENTÓW / FIRM --------------------------------------------------------------------- --}}
                    <label for="vehicle_search_label" class="block mt-2 mb-1 ml-4 text-lg pt-2 text-bold"
                           x-text="!manualVehicle ? '{{ __('vehicle.repair.add.client_searcher') }}' : '{{ __('vehicle.repair.add.client_form') }}'">
                    </label>
                    <div class="border border-stone-300 p-4 rounded-xl" id="vehicle_search_label">

                        <label class="flex items-center mb-2">
                            <input type="checkbox"
                                   x-model="manualClient"
                                   @change="if(!manualClient) clientData = clientData || null"
                                   name="manual_client_checkbox"
                                   class="mr-2"
                            >{{ __('vehicle.repair.add.client_form') }}
                        </label>

                        <!-- Input do wyszukiwania klientów -->
                        <input
                            type="text"
                            x-show="!manualClient"
                            x-model="clientQuery"
                            @input.debounce.500ms="searchClient"
                            @keydown.arrow-down.prevent="arrowDownClient"
                            @keydown.arrow-up.prevent="arrowUpClient"
                            @keydown.enter.prevent="enterSelectClient"
                            placeholder="{{ __('vehicle.repair.add.client_search') }}"
                            class="border p-2 w-full rounded"
                        />

                        <div x-show="loading2 && !manualClient" x-cloak class="mt-2 flex items-center text-gray-600">
                            <!-- Prosty spinner SVG z Tailwind animate-spin -->
                            <svg class="animate-spin h-5 w-5 mr-2" viewBox="0 0 24 24" fill="none">
                                <circle class="opacity-25" cx="12" cy="12" r="10"
                                        stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor"
                                      d="M4 12a8 8 0 018-8v4l3-3-3-3v4a12 12 0 00-12 12h4z"/>
                            </svg>
                            <span>Ładowanie…</span>
                        </div>

                        <ul class="mt-4 divide-y" x-show="clientResults.length > 0 && !manualClient">
                            <template x-for="(client, index) in clientResults" :key="client.id">
                                <li
                                    @click="selectClient(client)"
                                    :class="{
        'bg-gray-200': selectedClientIndex === index,
        'hover:bg-gray-100 cursor-pointer': true
    }"
                                    class="px-4 py-2 hover:bg-gray-100 cursor-pointer hover:bg-gray-300"
                                    style="list-style-type: none; padding: 4px"
                                >
                                    <span
                                        x-text="(client.company_name ? client.company_name + ' ' : '') + (client.last_name ? client.name + ' ' + client.last_name : '') "></span>
                                    <span class="text-gray-500" x-text="' - ' + client.phone"></span>
                                </li>

                            </template>
                        </ul>

                        <!-- Ręczne dane klienta -->
                        <div class="mt-4 space-y-2" x-show="manualClient">
                            <label for="client_name">{{ __('vehicle.repair.add.name') }}</label>
                            <input type="text" name="client[name]" x-model="manualClientData.name" id="client_name"
                                   placeholder="{{ __('vehicle.repair.add.name') }}" class="border p-2 w-full rounded">
                            <label for="client_last_name">{{ __('vehicle.repair.add.last_name') }}</label>
                            <input type="text" name="client[last_name]" x-model="manualClientData.last_name"
                                   id="last_name" placeholder="{{ __('vehicle.repair.add.last_name') }}"
                                   class="border p-2 w-full rounded">
                            <label for="client_phone">{{ __('vehicle.repair.add.phone') }}</label>
                            <input type="text" name="client[phone]" x-model="manualClientData.phone" id="client_phone"
                                   placeholder="{{ __('vehicle.repair.add.phone') }}" class="border p-2 w-full rounded">
                            <label for="client_email">{{ __('vehicle.repair.add.email') }}</label>
                            <input type="email" name="client[email]" x-model="manualClientData.email" id="client_email"
                                   placeholder="{{ __('vehicle.repair.add.email') }}" class="border p-2 w-full rounded">
                        </div>

                        <!-- Dane klienta po wyborze -->
                        <template x-if="clientData && !manualClient">
                            <div class="mt-4 p-4 border rounded bg-gray-50" id="client_data">
                                <h2 class="font-bold mb-2">{{ __('vehicle.repair.add.client_data') }}:</h2>
                                <p><strong>{{ __('vehicle.repair.add.name_and_last_name') }}:</strong> <span
                                        x-text="(clientData.name!==null ? clientData.name : '') + ' ' + (clientData.last_name!==null ? clientData.last_name : '')"></span>
                                </p>
                                <p><strong>{{ __('vehicle.repair.add.email') }}:</strong> <span
                                        x-text="clientData.email"></span></p>
                                <p><strong>{{ __('vehicle.repair.add.phone') }}:</strong> <span
                                        x-text="clientData.phone"></span></p>
                            </div>
                        </template>

                        <!-- Ukryte pole z ID klienta -->
                        {{--                 --}}
                        <template x-if="!manualClient">
                            <input type="hidden" name="client_id" :value="clientData?.id">
                        </template>
                    </div>
                </div>


                {{-- GRID ----------------------------------------------------------------------------------------------------- --}}
            </div>
            <div class="col-span-6">

                {{-- DODAWNIE POZYCJI ZGŁOSZENIA -------------------------------------------------------------------------- --}}
                <x-new-case.add-case-items-component :mechanics="$mechanics"/>

                <div class="mt-4">
                    <x-forms.select-alpine-component whichData="mechanics" defaultValue="{{ old('employee_id') }}"
                                                     inputName="employee_id" label="mechanics"/>
                </div>

                <div class="grid grid-cols-12 gap-2 mt-4">

                    <div class="col-span-8">
                        <div class="flex items-center">
                            <label for="priority"
                                   class="text-gray-700 px-3 text-lg">{{ __('office.case_priority') }}</label>
                            <select name="case_status"
                                    class="mt-1 p-2 block w-ful border border-gray-300 rounded-md w-auto" required>
                                @foreach(config('page.case_priorities') as $priority)
                                    <option value="{{ $priority }}"
                                            @if(old('case_status')==$priority) selected @endif>{{ $priority }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-span-4">
                        <button type="submit"
                                class="btn_lg btn_gray mt-1">{{ __('vehicle.repair.add.save_new_case') }}</button>
                    </div>

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

    </x-forms.form-wrapper-component>

    <div class="text-center">
        <a href="{{ route('office.cases') }}" class="btn_lg btn_gray">&laquo; {{ __('main.return') }}</a>
    </div>

@endsection


@push('custom-js')
    <script>
        function vehicleSearch() {
            return {
                // ===================== POJAZDY =====================
                query: '',
                results: [],
                selectedIndex: -1,
                loading: false,
                selectedVehicle: null,
                manualVehicle: {{ old('manual_vehicle_checkbox') ? 'true' : 'false' }},
                manualVehicleData: {
                    car_brand: '{{ old('vehicle.car_brand') }}',
                    car_model: '{{ old('vehicle.car_model') }}',
                    plate_number: '{{ old('vehicle.plate_number') }}',
                    vin: '{{ old('vehicle.vin') }}',
                    kilometers: '{{ old('vehicle.kilometers') }}',
                },
                input_vehicle_id: true,

                // ===================== KLIENCI =====================
                clientQuery: '',
                clientResults: [],
                selectedClientIndex: -1,
                loading2: false,
                clientData: null,
                manualClient: {{ old('manual_client_checkbox') ? 'true' : 'false' }},
                manualClientData: {
                    name: '{{ old('client.name') }}',
                    last_name: '{{ old('client.last_name') }}',
                    phone: '{{ old('client.phone') }}',
                    email: '{{ old('client.email') }}',
                },

                // ===================== FUNKCJE INICJALIZACJI =====================
                VehicleCheckBoxSet() {
                    this.vehicleData = null;
                    this.input_vehicle_id = !this.input_vehicle_id;
                },

                initOldData(vehicleId) {
                    if (!vehicleId || isNaN(parseInt(vehicleId))) return;

                    fetch('/office/cases/ajax-search/vehicles', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        },
                        body: JSON.stringify({vehicle_id: vehicleId})
                    })
                        .then(res => res.json())
                        .then(vehicle => {
                            this.selectVehicle(vehicle);
                            this.manual_vehicle_checkbox = false;
                            this.selectedVehicle = vehicle;
                            this.clientData = vehicle.client ?? null;
                        });
                },

                // ===================== POJAZDY — KLAWIATURA =====================
                arrowDown() {
                    if (this.results.length === 0) return;
                    this.selectedIndex = (this.selectedIndex + 1) % this.results.length;
                },

                arrowUp() {
                    if (this.results.length === 0) return;
                    this.selectedIndex = (this.selectedIndex - 1 + this.results.length) % this.results.length;
                },

                enterSelect() {
                    if (this.selectedIndex >= 0 && this.results[this.selectedIndex]) {
                        this.selectVehicle(this.results[this.selectedIndex]);
                    }
                },

                // ===================== POJAZDY — WYSZUKIWARKA =====================
                search() {
                    if (this.query.length < 3) {
                        this.results = [];
                        return;
                    }
                    this.loading = true;

                    fetch('/office/cases/ajax-search/vehicles', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        },
                        body: JSON.stringify({query: this.query})
                    })
                        .then(res => res.json())
                        .then(data => {
                            this.results = data;
                            this.loading = false;
                            this.selectedIndex = -1;
                        })
                        .catch(() => {
                            this.loading = false;
                        });
                },

                selectVehicle(vehicle) {
                    this.selectedVehicle = vehicle;
                    this.clientData = vehicle.client ?? null;
                    this.results = [];
                    this.query = '';
                    this.selectedIndex = -1;
                },

                // ===================== KLIENCI — KLAWIATURA =====================
                arrowDownClient() {
                    if (this.clientResults.length === 0) return;
                    this.selectedClientIndex = (this.selectedClientIndex + 1) % this.clientResults.length;
                },

                arrowUpClient() {
                    if (this.clientResults.length === 0) return;
                    this.selectedClientIndex = (this.selectedClientIndex - 1 + this.clientResults.length) % this.clientResults.length;
                },

                enterSelectClient() {
                    if (this.selectedClientIndex >= 0 && this.clientResults[this.selectedClientIndex]) {
                        this.selectClient(this.clientResults[this.selectedClientIndex]);
                    }
                },

                // ===================== KLIENCI — WYSZUKIWARKA =====================
                searchClient() {
                    if (this.clientQuery.length < 3) {
                        this.clientResults = [];
                        return;
                    }

                    this.loading2 = true;

                    fetch('/office/cases/ajax-search/clients', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        },
                        body: JSON.stringify({query: this.clientQuery})
                    })
                        .then(res => res.json())
                        .then(data => {
                            this.clientResults = data;
                            this.loading2 = false;
                            this.selectedClientIndex = -1;
                        })
                        .catch(() => {
                            this.loading2 = false;
                        });
                },

                selectClient(client) {
                    this.clientData = client;
                    this.clientResults = [];
                    this.clientQuery = '';
                    this.selectedClientIndex = -1;
                }
            }
        }
    </script>

@endpush