@extends('layouts.master')

@section('body')
    @permission('view_jobs')
    <div class="flex justify-between">
        <div class="flex items-center">
            <h3 class="text-orange-400 text-base md:text-3xl font-medium">Görülmüş işlər</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_job')
            <a href="{{ route('dashboard.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>
        @endpermission
    </div>
    <div class="flex flex-col">
        <div>
            <button id="toggleFilters"
                class="mb-2 text-blue-400 hover:text-blue-600">
                Filterlər /
            </button>
            <button id="toggleColumns"
                class="mb-2 text-blue-400 hover:text-blue-600">
                Cədvəl
            </button>
        </div>
        <div id="filtersContainer" style="display: none">
            <form action="{{ route('dashboard.index') }}" method="get">
                <div class="grid md:grid-cols-3 mt-4 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">
                            {{-- <option value="" selected>Şassi nömrəsi seçin</option> --}}
                            @foreach ($tractorHighways as $highway)
                                <option
                                    value="{{ $highway->id }}">{{ $highway->code }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="mb-2 text-gray-700" for="fin">Fermerin FIN kodu</label>
                        <select id="fin" name="farmer_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">
                            {{-- <option value="" selected>FIN kod seçin</option> --}}
                            @foreach ($farmers as $farmer)
                                <option
                                    value="{{ $farmer->id }}">{{ $farmer->fin }}</option>
                            @endforeach
                        </select>
                    </div>
                    @permission('filter_jobs_branch')
                        <div>
                            <label class="mb-2 text-gray-700" for="branch">Filial</label>
                            <input type="text" id="branch" name="branch" value="{{ old('branch', $branch) }}" 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">
                        </div>
                    @endpermission
                    <div>
                        <label class="text-gray-700" for="category">Xidmət</label>
                        <select id="category" name="category_id"
                            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>Xidmət seçin</option>
                            @foreach ($categories as $category)
                                <option {{ $category_id && $category_id == $category->id ? 'selected' : '' }}
                                    value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    @permission('filter_work_ha')
                        <div>
                            <label class="text-gray-700">Gündəlik görülmüş iş (HA)</label>
                            <div class="flex items-center">
                                <input step="any" class="mt-2 w-1/2 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-orange-500 focus:border-orange-500 p-2.5" type="number" name="min_ha" placeholder="Minimum iş ha" value="{{ request('min_ha') }}">
                                <span>-</span>
                                <input step="any" class="mt-2 w-1/2 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-orange-500 focus:border-orange-500 p-2.5" type="number" name="max_ha" placeholder="Maximum iş ha" value="{{ request('max_ha') }}">
                            </div>
                        </div>
                    @endpermission
                    @permission('filter_work_km')
                        <div>
                            <label class="text-gray-700">Filial (KM)</label>
                            <div class="flex items-center">
                                <input step="any" class="mt-2 w-1/2 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-orange-500 focus:border-orange-500 p-2.5" type="number" name="min_km" placeholder="Minimum iş km" value="{{ request('min_km') }}">
                                <span>-</span>
                                <input step="any" class="mt-2 w-1/2 bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-orange-500 focus:border-orange-500 p-2.5" type="number" name="max_km" placeholder="Maximum iş km" value="{{ request('max_km') }}">
                            </div>
                        </div>
                    @endpermission
                    @permission('filter_work_difference')
                        <div>
                            <label class="text-gray-700" for="work_difference">Gündəlik görülmüş iş fərqi</label>
                            <select id="work_difference" name="work_difference"
                                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>Seçin</option>
                                <option value="1" {{ $work_difference == 1 ? 'selected' : '' }}>Fərqli</option>
                                <option value="2" {{ $work_difference == 2 ? 'selected' : '' }}>Fərqsiz</option>
                            </select>
                        </div>
                    @endpermission
                    <div>
                        <label class="text-gray-700" for="assignment">Təyinat</label>
                        <select id="assignment" name="assignment_id"
                            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>Təyinat seçin</option>
                            @foreach ($assignments as $assignment)
                                <option {{ $assignment_id && $assignment_id == $assignment->id ? 'selected' : '' }}
                                    value="{{ $assignment->id }}">{{ $assignment->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    @permission('filter_jobs_confirm_status')
                        <div>
                            <label class="text-gray-700" for="confirm_status">Təsdiq status</label>
                            <select id="confirm_status" name="confirm_status"
                                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>Status seçin</option>
                                <option value="1" {{ $confirm_status == 1 ? 'selected' : '' }}>Təsdiq olunmuş</option>
                                <option value="2" {{ $confirm_status == 2 ? 'selected' : '' }}>Təsdiq olunmamış</option>
                            </select>
                        </div>
                    @endpermission
                    @permission('filter_jobs_confirm_status_admin')
                        <div>
                            <label class="text-gray-700" for="confirm_status_admin">Təsdiq status (admin)</label>
                            <select id="confirm_status_admin" name="confirm_status_admin"
                                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>Status seçin</option>
                                <option value="1" {{ $confirm_status_admin == 1 ? 'selected' : '' }}>Təsdiq olunmuş</option>
                                <option value="2" {{ $confirm_status_admin == 2 ? 'selected' : '' }}>Təsdiq olunmamış</option>
                            </select>
                        </div>
                    @endpermission
                    <div>
                        <label class="text-gray-700" for="start_date">Tarixdən</label>
                        <input value="{{ $start_date ? $start_date : '' }}" name="start_date" id="start_date" 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" type="date">
                    </div>
                    <div>
                        <label class="text-gray-700" for="end_date">Tarixədək</label>
                        <input value="{{ $end_date ? $end_date : '' }}" name="end_date" id="end_date" 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" type="date">
                    </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">
                <div id="columnsContainer" class="mb-3 overflow-hidden transition-all duration-300" style="display: none">
                    @foreach($columns as $col)
                        @if (!empty($col['permission']))
                            @permission($col['permission'])
                                <label class="mr-4 inline-block">
                                    <input type="checkbox" class="column-toggle" value="{{ $col['key'] }}" checked>
                                    {{ $col['name'] }}
                                </label>
                            @endpermission
                        @else
                            <label class="mr-4 inline-block">
                                <input type="checkbox" class="column-toggle" value="{{ $col['key'] }}" checked>
                                {{ $col['name'] }}
                            </label>
                        @endif
                    @endforeach
                </div>

                <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>
                                @foreach ($columns as $col)
                                    @if (!empty($col['permission']))
                                        @permission($col['permission'])
                                            <th data-col="{{ $col['key'] }}" 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">
                                                @if (empty($col['sort']))
                                                    {{ $col['name'] }}
                                                @else
                                                    @php
                                                        $current = $sorts[$col['sort']] ?? null;
                                
                                                        if ($current === null) {
                                                            $dir = 'asc';
                                                        } elseif ($current === 'asc') {
                                                            $dir = 'desc';
                                                        } elseif ($current === 'desc') {
                                                            $dir = null;
                                                        }
                                
                                                        $newSorts = $sorts;
                                                        if ($dir) {
                                                            $newSorts[$col['sort']] = $dir;
                                                        } else {
                                                            unset($newSorts[$col['sort']]);
                                                        }
                                                    @endphp
                                                    <a href="{{ route('dashboard.index', ['sort' => $newSorts]) }}">
                                                        {{ $col['name'] }}
                                                        @if($current === 'asc')
                                                            <span class="text-green-500">↑</span>
                                                        @elseif($current === 'desc')
                                                            <span class="text-red-500">↓</span>
                                                        @else
                                                            ⋯
                                                        @endif
                                                    </a>
                                                @endif
                                            </th>
                                        @endpermission
                                    @else
                                        <th data-col="{{ $col['key'] }}" 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">
                                            @if (empty($col['sort']))
                                                {{ $col['name'] }}
                                            @else
                                                @php
                                                    $current = $sorts[$col['sort']] ?? null;
                                
                                                    if ($current === null) {
                                                        $dir = 'asc';
                                                    } elseif ($current === 'asc') {
                                                        $dir = 'desc';
                                                    } elseif ($current === 'desc') {
                                                        $dir = null;
                                                    }
                                
                                                    $newSorts = $sorts;
                                                    if ($dir) {
                                                        $newSorts[$col['sort']] = $dir;
                                                    } else {
                                                        unset($newSorts[$col['sort']]);
                                                    }
                                                @endphp
                                                <a href="{{ route('dashboard.index', ['sort' => $newSorts]) }}">
                                                    {{ $col['name'] }}
                                                    @if($current === 'asc')
                                                        <span class="text-green-500">↑</span>
                                                    @elseif($current === 'desc')
                                                        <span class="text-red-500">↓</span>
                                                    @else
                                                        ⋯
                                                    @endif
                                                </a>
                                            @endif
                                        </th>
                                    @endif
                                @endforeach
                            </tr>
                        </thead>

                        <tbody class="bg-white">
                            @foreach ($jobRecords as $jobRecord)
                                <tr>
                                    <td data-col="id"
                                        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">
                                        {{ ($jobRecords->currentPage() - 1) * 50 + 1 + $loop->index }}
                                    </td>
                                    <td data-col="highway_code"
                                        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">
                                        {{ $jobRecord->tractor_higway_code }}
                                    </td>
                                    <td data-col="branch"
                                        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">
                                        {{ $jobRecord->tractor_higway_branch }}
                                    </td>
                                    <td data-col="tractor_number"
                                        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">
                                        {{ $jobRecord->tractor_higway_number }}
                                    </td>
                                    <td data-col="tractor_brand"
                                        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">
                                        {{ $jobRecord->tractor_higway_brand }}
                                    </td>
                                    <td data-col="date"
                                        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">
                                        {{ $jobRecord->date ? \Carbon\Carbon::parse($jobRecord->date)->format('Y-m-d') : '' }}
                                    </td>
                                    <td data-col="mechanic"
                                        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">
                                        {{ $jobRecord->mechanic_name }}
                                    </td>
                                    <td data-col="category"
                                        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">
                                        {{ $jobRecord->category_name ?? '' }}
                                    </td>
                                    <td data-col="fin"
                                        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">
                                        {{ $jobRecord->farmer_fin }}
                                    </td>
                                    <td data-col="farmer_full_name"
                                        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">
                                        {{ $jobRecord->farmer_name }}
                                    </td>
                                    <td data-col="farmer_id"
                                        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 (isset($jobRecord->farmer->photos))
                                            @foreach ($jobRecord->farmer->photos as $photo)
                                                <a class="text-blue-400 underline"
                                                    href="/storage/{{ $photo->photo }}" target="_blank">Göstər_{{ $loop->index + 1 }}</a>
                                            @endforeach
                                        @endif
                                    </td>
                                    <td data-col="lands"
                                        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">
                                        <a class="text-indigo-400 underline"
                                            href="/job-records/{{ $jobRecord->id }}/lands" target="_blank">Göstər</a>
                                    </td>
                                    <td data-col="daily_work_ha_branch"
                                        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">
                                        {{ $jobRecord->daily_work_ha_branch ?? 0 }}
                                    </td>
                                    <td data-col="daily_work_ha_office"
                                        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">
                                        {{ $jobRecord->daily_work_ha_office ?? 0 }}
                                    </td>
                                    <td data-col="daily_work_ha_difference"
                                        @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' => ($jobRecord->daily_work_ha_office ?? 0) - ($jobRecord->daily_work_ha_branch ?? 0) != 0
                                        ])>
                                        {{ ($jobRecord->daily_work_ha_office ?? 0) - $jobRecord->daily_work_ha_branch ?? 0 }}
                                    </td>
                                    @permission('confirm_ha_job')
                                        <td data-col="confirm_ha" onclick="confirmStatus({{ $jobRecord->id }}, 'ha', {{ $jobRecord->branch_status_ha }})" @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 cursor-pointer',
                                            'bg-red-400' => !$jobRecord->branch_status_ha,
                                            'bg-green-400' => $jobRecord->branch_status_ha,
                                        ])>
                                            {{ $jobRecord->branch_status_ha ? 'Təsdiq edildi' : 'Təsdiq et' }}
                                        </td>
                                    @endpermission
                                    <td data-col="branch_status_ha_conf_at"
                                        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">
                                        {{ $jobRecord->branch_status_ha_conf_at }}
                                    </td>
                                    <td data-col="branch_km"
                                        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">
                                        {{ $jobRecord->branch_km ?? 0 }}
                                    </td>
                                    <td data-col="office_km"
                                        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">
                                        {{ $jobRecord->office_km ?? 0 }}
                                    </td>
                                    <td data-col="daily_work_km_difference"
                                        @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' => ($jobRecord->office_km ?? 0) - ($jobRecord->branch_km ?? 0) != 0
                                        ])>
                                        {{ ($jobRecord->office_km ?? 0) - $jobRecord->branch_km ?? 0 }}
                                    </td>
                                    {{-- @permission('confirm_km_job')
                                        <td data-col="confirm_km" onclick="confirmStatus({{ $jobRecord->id }}, 'km', {{ $jobRecord->branch_status_km }})" @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 cursor-pointer',
                                            'bg-red-400' => !$jobRecord->branch_status_km,
                                            'bg-green-400' => $jobRecord->branch_status_km,
                                        ])>
                                            {{ $jobRecord->branch_status_km ? 'Təsdiq edildi' : 'Təsdiq et' }}
                                        </td>
                                    @endpermission
                                    <td data-col="branch_status_km_conf_at"
                                        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">
                                        {{ $jobRecord->branch_status_km_conf_at }}
                                    </td> --}}
                                    <td data-col="assignment"
                                        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">
                                        {{ $jobRecord->assignment_name ?? '' }}
                                    </td>
                                    @permission('view_job_notes')
                                        <td data-col="notes"
                                            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">
                                            {{ $jobRecord->notes }}
                                        </td>
                                    @endpermission
                                    @permission('confirm_job_admin')
                                        <td data-col="confirm_job_admin" onclick="confirmAdminStatus({{ $jobRecord->id }}, {{ !!($jobRecord->office_status_ha && $jobRecord->office_status_km) }})" @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 cursor-pointer',
                                            'bg-red-400' => !($jobRecord->office_status_ha && $jobRecord->office_status_km),
                                            'bg-green-400' => $jobRecord->office_status_ha && $jobRecord->office_status_km,
                                        ])>
                                            {{ $jobRecord->office_status_ha && $jobRecord->office_status_km ? 'Təsdiq edildi' : 'Təsdiq et' }}
                                        </td>
                                    @endpermission
                                    <td data-col="office_status_ha_conf_at"
                                        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">
                                        {{ $jobRecord->office_status_ha_conf_at }}
                                    </td>
                                    @permission('allow_edit_job')
                                        <td data-col="allow_edit" 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 (!($jobRecord->office_status_ha && $jobRecord->office_status_km) || Auth::user()->role->name === 'superadmin')
                                                <form action="{{ route('accessEdit', $jobRecord->id) }}" method="POST" class="inline-block">
                                                    @csrf
                                                    <button type="submit" onclick="return confirm('İcazə vermək istədiyinizdən əminsiniz?')" 
                                                            class="text-green-500 hover:text-green-700">
                                                        İcazə ver
                                                    </button>
                                                </form>
                                            @endif
                                        </td>
                                    @endpermission
                                    <td data-col="edit" 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('edit_job')
                                            @if ($jobRecord->is_editable)
                                                <a href="{{ route('dashboard.edit', $jobRecord->id) }}"
                                                    class="text-blue-500 hover:text-blue-700 mr-2">
                                                    Düzəliş et
                                                </a>
                                            @endif
                                        @endpermission
                                        @permission('edit_job_admin')
                                            @if (auth()->user()->role->name == 'superadmin')
                                                <a href="{{ route('dashboard.superadmin-edit', $jobRecord->id) }}"
                                                    class="text-blue-500 hover:text-blue-700 mr-2">
                                                    Düzəliş et
                                                </a>
                                            @elseif (!($jobRecord->office_status_ha && $jobRecord->office_status_km))
                                                <a href="{{ route('dashboard.admin-edit', $jobRecord->id) }}"
                                                    class="text-blue-500 hover:text-blue-700 mr-2">
                                                    Düzəliş et
                                                </a>
                                            @endif
                                        @endpermission
                                        @permission('delete_job')
                                            @if ($jobRecord->branch_status_ha && $jobRecord->branch_status_km)
                                                <form action="{{ route('dashboard.destroy', $jobRecord->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">
                                                        Sil
                                                    </button>
                                                </form>
                                            @endif
                                        @endpermission
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <div class="flex items-center justify-center my-2">
                        @include('components.pagination', ['paginator' => $jobRecords])
                    </div>
                </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>
    <!-- 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">Təsdiq 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>
    @endpermission
@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');

        const toggleBtn = document.getElementById('toggleColumns');
        const container = document.getElementById('columnsContainer');
        const checkboxes = document.querySelectorAll('.column-toggle');
        const savedColumns = JSON.parse(localStorage.getItem('selectedColumns')) || [];

        (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;
            });
        })();

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

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

        checkboxes.forEach(cb => {
            cb.checked = savedColumns.length ? savedColumns.includes(cb.value) : true;
            const cells = document.querySelectorAll(`[data-col="${cb.value}"]`);
            cells.forEach(cell => {
                cell.style.display = cb.checked ? '' : 'none';
            });
            cb.addEventListener('change', function () {
                const key = this.value;
                const cells = document.querySelectorAll(`[data-col="${key}"]`);

                cells.forEach(cell => {
                    cell.style.display = this.checked ? '' : 'none';
                });
                // Save localStorage
                const checkedCols = Array.from(checkboxes)
                    .filter(c => c.checked)
                    .map(c => c.value);

                localStorage.setItem('selectedColumns', JSON.stringify(checkedCols));
            });
        });

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

        let currentRecordId = null;
        let currentConfirmType = null;
        let isAdminConfirmed = null;

        function confirmStatus(recordId, type, status) {
            if(status) return;
            currentConfirmType = type == "ha" ? "ha" : "km";
            currentRecordId = recordId;
            document.getElementById('confirmModal').classList.remove('hidden');
        }

        function confirmAdminStatus(recordId, status) {
            if(status) return;
            isAdminConfirmed = true;
            currentRecordId = recordId;
            document.getElementById('confirmModal').classList.remove('hidden');
        }

        function printToExcel(event) {
            event.preventDefault();
            const params = new URLSearchParams(window.location.search);
            const actionUrl = `{{ route('export.dashboardExcel') }}?${params.toString()}`;
            window.location.href = actionUrl;
        }
        
        document.getElementById('confirmNo').addEventListener('click', () => {
            document.getElementById('confirmModal').classList.add('hidden');
            currentRecordId = null;
            currentConfirmType = null;
            isAdminConfirmed = null;
        });

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

            if (currentRecordId && currentConfirmType) {
                fetch(`/job-records/${currentRecordId}/confirm-status`, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            "type": currentConfirmType
                        })
                    })
                    .then(res => res.json())
                    .then(data => {
                        location.reload();
                    })
                    .catch(err => console.error('Error:', err));
            }else if(isAdminConfirmed){
                fetch(`/job-records/${currentRecordId}/confirm-status-admin`, {
                        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