@extends('layouts.master')

@section('body')
    <div class="flex justify-between">
        <div class="flex items-center">
            <h3 class="text-orange-400 text-base md:text-3xl font-medium">Texniki dəstək</h3>
            <form class="ml-4">
                <button
                    class="w-full text-xs md:text-base px-1 py-2 md:!px-4 md:!py-2 bg-green-500 border-2 border-green-500 text-white rounded-md hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400"
                    type="button" onclick="printToExcel(event)">Çap et (Excel)
                </button>
            </form>
        </div>
        @permission('create_support')
            <div class="flex">
                <a href="{{ route('technical-support.create') }}"
                    class="flex items-center justify-center text-xs md:text-base px-1 py-2 md:!px-4 md:!py-2 bg-orange-500 text-white rounded-lg">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="10"
                        height="10">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4" />
                    </svg>
                    Yenisini yarat
                </a>
            </div>
        @endpermission
    </div>
    <div class="flex flex-col mt-8">
        <div>
            <button id="toggleFilters"
                class="mb-2 text-blue-400 hover:text-blue-600">
                Filterlər
            </button>
        </div>
        <div id="filtersContainer" style="display: none">
            <form action="{{ route('technical-support.index') }}" method="get">
                <div class="grid md:grid-cols-3 gap-3 mb-4">
                    <div>
                        <label class="mb-2 text-gray-700" for="tractor_highway">Şassi nömrəsi</label>
                        <select id="tractor_highway" name="tractor_highway_ids[]" multiple
                            class="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                            @foreach ($tractorHighways as $highway)
                                <option
                                    value="{{ $highway->id }}">{{ $highway->code }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="mb-2 text-gray-700" for="seal">Möhür nömrəsi</label>
                        <select id="seal" name="seal_ids[]" multiple
                            class="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                            @foreach ($seals as $seal)
                                <option
                                    value="{{ $seal->id }}">{{ $seal->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="text-gray-700" for="survey">Sorğu sahəsi</label>
                        <select id="survey" name="survey_name"
                            class="mt-2 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                            <option value="" selected>Sorğu sahəsi seçin</option>
                            <option {{ $survey_name && $survey_name == "gps" ? 'selected' : '' }} value="gps">GPS</option>
                            <option {{ $survey_name && $survey_name == "it" ? 'selected' : '' }} value="it">IT</option>
                        </select>
                    </div>
                    <div>
                        <label class="text-gray-700" for="status_id">Status</label>
                        <select name="status_id" id="status_id" class="mt-2 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5">
                            <option value="" selected>Status seçin</option>
                            @foreach ($statuses as $status)
                                <option {{ $status_id && $status_id == $status->id ? 'selected' : '' }} value="{{ $status->id }}">{{ $status->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="self-end">
                        <button type="submit"
                            class="w-full px-4 py-2 bg-green-500 border-2 border-green-500 text-white rounded-md hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-green-400">Axtar</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="relative">
            <div id="tableWrapper" class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8 hide-scrollbar">
                @permission('support_admin')
                    <div>
                        Ümumi sorğu sayı: {{ $total }}, Gözləmədə: {{ $waiting }}, İcra olunur: <span class="text-yellow-600">{{ $processing }},</span> İcra olunmuş: <span class="text-green-600">{{ $completed }},</span> İcra olunmamış: <span class="text-red-600">{{ $rejected }}</span>
                    </div>
                @endpermission
                <div class="align-middle min-h-[300px] max-h-[75vh] overflow-y-auto inline-block min-w-full shadow sm:rounded-lg border-b border-gray-200">
                    <table class="min-w-full text-center">
                        <thead class="sticky top-0 z-10">
                            <tr>
                                <th
                                    class="px-2 py-2 md:!px-6 md:!py-4 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-normal md:font-medium text-gray-500 normal-case md:uppercase tracking-wider">
                                    @php
                                        $current = $sorts['technical_support.id'] ?? null;
                                        
                                        if ($current === null) {
                                            $dir = 'asc';
                                        } elseif ($current === 'asc') {
                                            $dir = 'desc';
                                        } elseif ($current === 'desc') {
                                            $dir = null;
                                        }

                                        $newSorts = $sorts;
                                        if ($dir) {
                                            $newSorts['technical_support.id'] = $dir;
                                        } else {
                                            unset($newSorts['technical_support.id']);
                                        }
                                    @endphp
                                    <a href="{{ route('technical-support.index', ['sort' => $newSorts]) }}">
                                        №
                                        @if($current === 'asc')
                                            ↑
                                        @elseif($current === 'desc')
                                            ↓
                                        @else
                                            ⋯
                                        @endif
                                    </a>
                                </th>
                                <th
                                    class="px-2 py-2 md:!px-6 md:!py-4 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-normal md:font-medium text-gray-500 normal-case md:uppercase tracking-wider">
                                    Sorğu sahəsi
                                </th>
                                <th
                                    class="px-2 py-2 md:!px-6 md:!py-4 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-normal md:font-medium text-gray-500 normal-case md:uppercase tracking-wider">
                                    Sorğu göndərən əməkdaş
                                </th>
                                <th
                                    class="px-2 py-2 md:!px-6 md:!py-4 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-normal md:font-medium text-gray-500 normal-case md:uppercase tracking-wider">
                                    Sorğunun yaranma tarixi
                                </th>
                                <th
                                    class="px-2 py-2 md:!px-6 md:!py-4 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-normal md:font-medium text-gray-500 normal-case md:uppercase tracking-wider">
                                    İcraçı
                                </th>
                                <th
                                    class="px-2 py-2 md:!px-6 md:!py-4 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-normal md:font-medium text-gray-500 normal-case md:uppercase tracking-wider">
                                    Sorğunun qəbul tarixi
                                </th>
                                <th
                                    class="px-2 py-2 md:!px-6 md:!py-4 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-normal md:font-medium text-gray-500 normal-case md:uppercase tracking-wider">
                                    Filial adı
                                </th>
                                <th
                                    class="px-2 py-2 md:!px-6 md:!py-4 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-normal md:font-medium text-gray-500 normal-case md:uppercase tracking-wider">
                                    Şassi nömrəsi / Bar kod
                                </th>
                                <th
                                    class="px-2 py-2 md:!px-6 md:!py-4 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-normal md:font-medium text-gray-500 normal-case md:uppercase tracking-wider">
                                    Möhürlər
                                </th>
                                <th
                                    class="px-2 py-2 md:!px-6 md:!py-4 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-normal md:font-medium text-gray-500 normal-case md:uppercase tracking-wider">
                                    Sorğunu bitirmə tarixi
                                </th>
                                <th
                                    class="px-2 py-2 md:!px-6 md:!py-4 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-normal md:font-medium text-gray-500 normal-case md:uppercase tracking-wider">
                                    Status
                                </th>
                                <th
                                    class="px-2 py-2 md:!px-6 md:!py-4 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-normal md:font-medium text-gray-500 normal-case md:uppercase tracking-wider">
                                    Sorğunun açıqlaması
                                </th>
                                <th
                                    class="px-2 py-2 md:!px-6 md:!py-4 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-normal md:font-medium text-gray-500 normal-case md:uppercase tracking-wider">
                                    Sorğu sənədi
                                </th>
                                @permission('support_admin')
                                    <th
                                        class="px-2 py-2 md:!px-6 md:!py-4 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-normal md:font-medium text-gray-500 normal-case md:uppercase tracking-wider">
                                        İcra et
                                    </th>
                                @endpermission
                                <th
                                    class="px-2 py-2 md:!px-6 md:!py-4 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-normal md:font-medium text-gray-500 normal-case md:uppercase tracking-wider">
                                    Sorğunun cavabı
                                </th>
                                <th
                                    class="px-2 py-2 md:!px-6 md:!py-4 border-b border-gray-200 bg-gray-50 text-xs leading-4 font-normal md:font-medium text-gray-500 normal-case md:uppercase tracking-wider">
                                    Tənzimlə
                                </th>
                            </tr>
                        </thead>

                        <tbody class="bg-white">
                            @foreach ($data as $item)
                                <tr>
                                    <td
                                        class="px-2 py-2 md:!px-6 md:!py-4 text-xs md:text-base whitespace-no-wrap border-b border-gray-200 leading-5 md:font-bold">
                                        {{ ($data->currentPage() - 1) * 15 + 1 + $loop->index }}
                                    </td>
                                    <td
                                        class="px-2 py-2 md:!px-6 md:!py-4 text-xs md:text-base whitespace-no-wrap border-b border-gray-200 leading-5 md:font-bold">
                                        {{ strtoupper($item->survey_name) }}
                                    </td>
                                    <td
                                        class="px-2 py-2 md:!px-6 md:!py-4 text-xs md:text-base whitespace-no-wrap border-b border-gray-200 leading-5 md:font-bold">
                                        {{ $item->author_name }}
                                    </td>
                                    <td
                                        class="px-2 py-2 md:!px-6 md:!py-4 text-xs md:text-base whitespace-no-wrap border-b border-gray-200 leading-5 md:font-bold">
                                        {{ $item->created_at }}
                                    </td>
                                    <td
                                        class="px-2 py-2 md:!px-6 md:!py-4 text-xs md:text-base whitespace-no-wrap border-b border-gray-200 leading-5 md:font-bold">
                                        {{ $item->assigned_name }}
                                    </td>
                                    <td
                                        class="px-2 py-2 md:!px-6 md:!py-4 text-xs md:text-base whitespace-no-wrap border-b border-gray-200 leading-5 md:font-bold">
                                        {{ $item->admission_date ?? null }}
                                    </td>
                                    <td
                                        class="px-2 py-2 md:!px-6 md:!py-4 text-xs md:text-base whitespace-no-wrap border-b border-gray-200 leading-5 md:font-bold">
                                        {{ $item->branch_name }}
                                    </td>
                                    <td
                                        class="px-2 py-2 md:!px-6 md:!py-4 text-xs md:text-base whitespace-no-wrap border-b border-gray-200 leading-5 md:font-bold">
                                        {{ $item->tractor_highway_code ?? $item->bar_code }}
                                    </td>
                                    <td
                                        class="px-2 py-2 md:!px-6 md:!py-4 text-xs md:text-base whitespace-no-wrap border-b border-gray-200 leading-5 md:font-bold">
                                        @if ($item->tractor_highway && count($item->tractor_highway->seals))
                                            <a class="text-indigo-400 underline" href="/seals/{{ $item->tractor_highway_id }}" target="_blank">Göstər</a>
                                        @endif
                                    </td>
                                    <td
                                        class="px-2 py-2 md:!px-6 md:!py-4 text-xs md:text-base whitespace-no-wrap border-b border-gray-200 leading-5 md:font-bold">
                                        {{ $item->completion_date ?? null }}
                                    </td>
                                    <td @class([
                                        'px-2 py-2 md:!px-6 md:!py-4 text-xs md:text-base whitespace-no-wrap border-b border-gray-200 leading-5 md:font-bold',
                                        'bg-yellow-400' => $item->status_name == 'processing',
                                        'bg-green-400' => $item->status_name == 'completed',
                                        'bg-red-400' => $item->status_name == 'rejected',
                                    ])>
                                        {{ $item->status_name == 'waiting' ? 'Gözləmədə' : ($item->status_name == 'processing' ? 'İcra olunur' : ($item->status_name == 'completed' ? 'İcra olundu' : 'İcra olunmadı')) }}
                                    </td>
                                    <td
                                        class="px-2 py-2 md:!px-6 md:!py-4 text-xs md:text-base whitespace-no-wrap border-b border-gray-200 leading-5 md:font-bold">
                                        {{ $item->description ?? null }}
                                    </td>
                                    <td
                                        class="px-2 py-2 md:!px-6 md:!py-4 text-xs md:text-base whitespace-no-wrap border-b border-gray-200 leading-5 md:font-bold">
                                        @if ($item->file_path)
                                            <a class="text-blue-400 underline" href="/storage/{{ $item->file_path }}"
                                                target="_blank">Göstər</a>
                                        @endif
                                    </td>
                                    @permission('support_admin')
                                        <td
                                            class="px-2 py-2 md:!px-6 md:!py-4 text-xs md:text-base whitespace-no-wrap border-b border-gray-200 leading-5 md:font-bold">
                                            @if (!$item->assigned_to)
                                                <span onclick="confirmSupport({{ $item->id }})"
                                                    class="text-indigo-400 cursor-pointer">
                                                    İcra et
                                                </span>
                                            @endif
                                        </td>
                                    @endpermission
                                    <td
                                        class="px-2 py-2 md:!px-6 md:!py-4 text-xs md:text-base whitespace-no-wrap border-b border-gray-200 leading-5 md:font-bold">
                                        {{ $item->response ?? null }}
                                    </td>
                                    <td class="px-2 py-2 md:!px-6 md:!py-4 text-xs md:text-base whitespace-no-wrap border-b border-gray-200 leading-5">
                                        @permission('support_admin')
                                            @if ($item->assigned_to && !$item->completion_date)
                                                <a href="{{ route('technical-support.edit', $item->id) }}">
                                                    Bitir /
                                                </a>
                                            @endif
                                        @endpermission
                                        @permission('delete_support')
                                            <form action="{{ route('technical-support.destroy', $item->id) }}" method="POST"
                                                class="inline-block">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" onclick="return confirm('Silmək istədiyinizdən əminsiniz?')"
                                                    class="text-red-500 hover:text-red-700 text-xs md:text-base">
                                                    Sil
                                                </button>
                                            </form>
                                        @endpermission
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <div class="flex items-center justify-center my-2">
                        @include('components.pagination', ['paginator' => $data])
                    </div>
                </div>
            </div>
            <div class="sticky bottom-0 left-0 right-0 bg-white border-t border-gray-200" style="z-index: 50;">
                <div id="stickyScroll" class="overflow-x-auto">
                    <div class="h-1"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- Confirmation Modal -->
    <div id="confirmModal" class="hidden fixed inset-0 bg-gray-800/60 flex items-center justify-center z-50">
        <div class="bg-white rounded-lg shadow-lg p-6 w-96 text-center">
            <h2 class="text-lg font-semibold mb-4">Icra etmək istədiyinizdən əminsiniz?</h2>
            <div class="flex justify-center gap-4">
                <button id="confirmYes" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 transition">
                    Bəli
                </button>
                <button id="confirmNo" class="bg-gray-300 text-gray-700 px-4 py-2 rounded hover:bg-gray-400 transition">
                    Xeyr
                </button>
            </div>
        </div>
    </div>
@endsection


@section('script')
    <script>
        @if (session('success'))
            toastr.options = {
                "progressBar": true,
                "closeButton": true
            }
            toastr.success("{{ session('success') }}", "Uğurlu!");
        @endif
        @if (session('error'))
            toastr.options = {
                "progressBar": true,
                "closeButton": true
            }
            toastr.error("{{ session('error') }}", "Xəta!");
        @endif

        const toggleFilterBtn = document.getElementById('toggleFilters');
        const filterContainer = document.getElementById('filtersContainer');

        (function () {
            const tableWrapper = document.getElementById('tableWrapper');
            const stickyScroll = document.getElementById('stickyScroll');

            if (!tableWrapper || !stickyScroll) return;

            const inner = stickyScroll.firstElementChild;

            function syncWidths() {
                // Width of fake scrollbar should match scrollable width of the table container
                inner.style.width = tableWrapper.scrollWidth + 'px';
            }

            syncWidths();
            window.addEventListener('resize', syncWidths);

            // Sticky scrollbar controls table
            stickyScroll.addEventListener('scroll', function () {
                tableWrapper.scrollLeft = stickyScroll.scrollLeft;
            });

            // Table scroll (native bottom bar) controls sticky bar
            tableWrapper.addEventListener('scroll', function () {
                stickyScroll.scrollLeft = tableWrapper.scrollLeft;
            });
        })();

        toggleFilterBtn.addEventListener('click', () => {
            if (filterContainer.style.display === 'none' || filterContainer.style.display === '') {
                filterContainer.style.display = 'block';
            } else {
                filterContainer.style.display = 'none';
            }
        });

        $(document).ready(function() {
            $('#tractor_highway').select2({
                width: '100%'
            });
            const selectedHighways = @json($tractor_highway_ids);
            $('#tractor_highway').val(selectedHighways).trigger('change');

            $('#seal').select2({
                width: '100%'
            });
            const selectedSeals = @json($seal_ids);
            $('#seal').val(selectedSeals).trigger('change');
        })

        function confirmSupport(supportId) {
            currentSupportId = supportId;
            document.getElementById('confirmModal').classList.remove('hidden');
        }

        function printToExcel(event) {
            event.preventDefault();
            const params = new URLSearchParams(window.location.search);
            const actionUrl = `{{ route('export.supportExcel') }}?${params.toString()}`;
            window.location.href = actionUrl;
        }

        document.getElementById('confirmNo').addEventListener('click', () => {
            document.getElementById('confirmModal').classList.add('hidden');
            currentSupportId = null;
        });

        document.getElementById('confirmYes').addEventListener('click', () => {
            document.getElementById('confirmModal').classList.add('hidden');

            if (currentSupportId) {
                fetch(`/technical-support/${currentSupportId}/confirm-support`, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({})
                    })
                    .then(res => res.json())
                    .then(data => {
                        location.reload();
                    })
                    .catch(err => console.error('Error:', err));
            }
        });
    </script>
@endsection