@extends('content')

@section('filters')

<x-index.filters-component filtersRoute="{{ route('office.cases') }}">

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

        <div class="col-span-12 md:col-span-6 2xl:col-span-2">
            <x-forms.input-component
                inputType="text"
                inputName="t2-car_brand|like|%%"
                inputValue="{{ request('t2-car_brand|like|%%') }}"
                inputLabel="{{ __('filters.car_brand') }}"
                inputClass="input_sm input_filters"
            />
        </div>

        <div class="col-span-12 md:col-span-6 2xl:col-span-2">
            <x-forms.input-component
                inputType="text"
                inputName="t2-car_model|like|%%"
                inputValue="{{ request('t2-car_model|like|%%') }}"
                inputLabel="{{ __('filters.car_model') }}"
                inputClass="input_sm input_filters"
            />
        </div>

        <div class="col-span-12 md:col-span-6 2xl:col-span-2">
            <x-forms.input-component
                inputType="text"
                inputName="t2-plate_number|like|%%"
                inputValue="{{ request('t2-plate_number|like|%%') }}"
                inputLabel="{{ __('filters.plate_number') }}"
                inputClass="input_sm input_filters"
            />
        </div>

{{--        <div class="col-span-12 md:col-span-6 2xl:col-span-2">--}}
{{--            <x-forms.input-component--}}
{{--                inputType="text"--}}
{{--                inputName="t3-phone|like|%%"--}}
{{--                inputValue="{{ request('t3-phone|like|%%') }}"--}}
{{--                inputLabel="{{ __('filters.phone') }}"--}}
{{--                inputClass="input_sm input_filters"--}}
{{--            />--}}
{{--        </div>--}}

        <div class="col-span-12 md:col-span-6 2xl:col-span-2">
            <x-forms.input-component
                inputType="text"
                inputName="t3-company_name|like|%%"
                inputValue="{{ request('t3-company_name|like|%%') }}"
                inputLabel="{{ __('filters.company_name') }}"
                inputClass="input_sm input_filters"
            />
        </div>

        <div class="col-span-12 md:col-span-6 2xl:col-span-2">
            <x-forms.input-component
                inputType="text"
                inputName="t3-last_name|like|%%"
                inputValue="{{ request('t3-last_name|like|%%') }}"
                inputLabel="{{ __('filters.last_name') }}"
                inputClass="input_sm input_filters"
            />
        </div>

        <div class="col-span-12 md:col-span-6 2xl:col-span-2">
            <x-forms.select-alpine-component
                whichData="case_status"
                defaultValue="{{ request('t1-status|=') }}"
                inputName="t1-status|="
                searchInput="false"
                selectAlpineClass="select_alpine_filters"
                label="case_status"
            />
        </div>

    </div>

</x-index.filters-component>

@endsection


@section('page-title')
    <div>{{ __('vehicle.list.header') }}</div>
    <div>
        @cansee('office.cases.insert')
        <a href="{{ route('office.cases.insert.create') }}" class="btn_md btn_gray">{{ __('main.add') }}</a>
        @endcansee
    </div>
@endsection


@section('page-content')

    <x-wrapper-component>

    <x-filters.filter-badges/>

<div class="overflow-x-auto">

    <table class="warsztat-table table-auto">
        <thead>
        <tr>
            <th>#</th>
            <th></th>
            <th>@sortable('vehicle.list.marka', 't2.car_brand')</th>
            <th>@sortable('vehicle.list.model', 't2.car_model')</th>
            <th>@sortable('vehicle.list.plate_number', 't2.plate_number')</th>
            <th>@sortable('vehicle.list.keychain', 't1.keychain')</th>
            <th>{{ __('vehicle.list.company') }}</th>
            <th>@sortable('vehicle.list.phone', 't3.phone')</th>
            <th>@sortable('vehicle.list.status', 't1.status')</th>
{{--            <th>{{ __('vehicle.list.mechanic') }}</th>--}}
            <th>@sortable('vehicle.list.register_data', 't1.created_at')</th>
            <th></th>
            <th></th>
            <th></th>

            {{--
            <div class="icon_calendar_lg absolute top-3 right-4"></div>
            --}}
        </tr>
        </thead>
        <tbody id="sortable-tbody">
        @if( !empty($items))
            @foreach($items as $index => $item)
                <tr data-id="{{ $item->id }}">
                    <td class="so_center row-number">{{ ($items->currentPage() - 1) * $items->perPage() + $loop->iteration }}.</td>
                    <td><div class="drag_and_drop mx-auto"></div></td>
                    <td>{{ $item->car_brand }}</td>
                    <td>{{ $item->car_model }}</td>
                    <td>{{ $item->plate_number }}</td>
                    <td class="text-center"><div class="border px-2 w-fit mx-auto rounded-xl">{{ $item->keychain }}</div></td>
                    <td>{{ $item->client }}</td>
                    <td class="text-right">{{ $item->phone }}</td>
                    <td class="text-center">
                        <span class="px-2 pb-1 status-color{{ $item->status }}">
                                {{ __('workshop.case_status.'.$item->status) }}
                        </span>
                    </td>
{{--                    <td>{{ $item->mechanic }}</td>--}}
                    <td class="text-center">{{ \Carbon\Carbon::parse($item->created_at)->format('Y-m-d H:i') }}</td>

                    <td class="text-center">
                        @cansee('office.cases.update')
                            @if($item->status < \App\Models\Cases::STATUS_VERIFIED)
                                <a href="{{ route('office.cases.update.details', ['case' => $item->id]) }}" class="btn_md btn_green">{{ __('office.buttons.edit') }}</a>
                            @endif
                        @endcansee
                    </td>

                    <td class="text-center">
                        @cansee('office.cases.update')
                            @if($item->status >= \App\Models\Cases::STATUS_DONE)
                                <a href="{{ route('office.cases.update.summary', ['case' => $item->id]) }}" class="btn_md btn_blue">{{ __('office.buttons.summary') }}</a>
                            @endif
                        @endcansee
                    </td>

                    <td class="text-center">
                        @cansee('office.cases.update')
                            @if($item->status === \App\Models\Cases::STATUS_CLOSED)
                                <a class="btn_md btn_red archive_confirm_button" data-id_key="{{ $item->id }}"
                                   data-display_text="{{ $item->car_brand }} {{ $item->car_model }} {{ $item->plate_number }}"
                                >{{ __('office.buttons.archive') }}</a>
                            @endif
                        @endcansee
                    </td>
                </tr>
            @endforeach
        @endif
        </tbody>
    </table>

</div>

    {{ $items->links() }}
{{--    <x-items-per-site />--}}
    </x-wrapper-component>
@endsection

@push('custom-js')
<script src="{{ asset('js/Sortable.min.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
    const tbody = document.getElementById('sortable-tbody');
    const sortable = new Sortable(tbody, {
        animation: 150,
        handle: '.drag_and_drop',
        onEnd: async function () {
            // Zablokuj dalsze przeciąganie
            sortable.option("disabled", true);

            let order = {};
            tbody.querySelectorAll('tr').forEach((row, index) => {
                const numberCell = row.querySelector('.row-number');
                if (numberCell) numberCell.textContent = (index + 1) + '.';
                order[row.dataset.id] = index + 1;
            });

            try {
                const response = await fetch("{{ route('office.cases.update.sort') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    },
                    body: JSON.stringify(order)
                });

                const data = await response.json();

                if (data.success) {
                    console.log('Kolejność zapisana');
                } else {
                    console.error('Błąd zapisu sortowania', data.message);
                }
            } catch (error) {
                console.error('Błąd sieci:', error);
            } finally {
                // Odblokuj przeciąganie
                sortable.option("disabled", false);
            }
        }
    });
});
</script>
@endpush



@push('modal')

    @cansee('office.cases.update')

    <x-modal.modal-archive-confirm-component modalRoute="{{ route('office.cases.delete.archive') }}" />

    @endcansee

@endpush