@include('attendance.updateshift')

<x-app-layout>
    <x-slot name="header">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-5">
                <div class="flex items-center">
                    <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
                        {{ __('form.Attendance') }}
                    </h2>
                </div>

                <div class="flex items-center space-x-4">
                    <x-dropdown>
                        <x-slot name="trigger">
                            <button type="button" class="px-3 py-2 text-sm font-medium text-center inline-flex items-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                                <svg class="w-3 h-3 text-white dark:text-white me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                                </svg>
                                {{ __('form.More') }}
                            </button>
                        </x-slot>
                        <x-slot name="content">
                            <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
                                <a href="{{ route('shift.index') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100" role="menuitem">{{ __('form.Attendance-Configuration') }}</a>
                                <a href="{{ route('location.index') }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100" role="menuitem">{{ __('form.Location') }}</a>
                                {{-- <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100" role="menuitem">Log Activity</a> --}}
                                {{-- <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100" role="menuitem">Attendance Report</a> --}}
                            </div>
                        </x-slot>
                    </x-dropdown>

                    <x-dropdown>
                        <x-slot name="trigger">
                            <button type="button" class="px-3 py-2 text-sm font-medium text-center inline-flex items-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
                                <svg class="w-3 h-3 text-white dark:text-white me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                                </svg>
                                {{ __('form.scan') }}
                            </button>
                        </x-slot>
                        <x-slot name="content">
                            <div class="py-1">
                                <span class="block px-4 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400">{{ __('form.Scan-New-Data') }}</span>
                                <a href="#" onclick="startScan(1, 'new')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700">{{ __('form.Cirebon-Machine-Attendance') }}</a>
                                <a href="#" onclick="startScan(2, 'new')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700">{{ __('form.Bandung-Machine-Attendance') }}</a>
                                <a href="#" onclick="startScan(3, 'new')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700">{{ __('form.Madiun-Machine-Attendance') }}</a>
                                <a href="#" onclick="startScan(4, 'new')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700">{{ __('form.Soreang-Machine-Attendance') }}</a>

                                <span class="block px-4 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400">{{ __('form.Scan-All-Data') }}</span>
                                <a href="#" onclick="startScan(1, 'all')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700">{{ __('form.Cirebon-Machine-Attendance') }}</a>
                                <a href="#" onclick="startScan(2, 'all')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700">{{ __('form.Bandung-Machine-Attendance') }}</a>
                                <a href="#" onclick="startScan(3, 'all')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700">{{ __('form.Madiun-Machine-Attendance') }}</a>
                                <a href="#" onclick="startScan(4, 'all')" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700">{{ __('form.Soreang-Machine-Attendance') }}</a>
                            </div>
                        </x-slot>
                    </x-dropdown>


                    <script>
                        function startScan(mesinId, urlType) {
                            Swal.fire({
                                title: 'Memproses Scan...',
                                text: 'Mohon tunggu, proses sedang berjalan di latar belakang.' + mesinId,
                                icon: 'info',
                                allowOutsideClick: false,
                                showConfirmButton: false,
                                // toast: true,
                                // position: 'top-end',
                                // iconColor: 'white',
                                // customClass: {
                                //     popup: 'colored-toast', // Custom CSS class
                                // },
                                // timerProgressBar: true,
                                didOpen: () => {
                                    Swal.showLoading(); // Tampilkan loading spinner
                                }
                            });

                            fetch("{{ route('attendance.scan') }}", {
                                    method: "POST",
                                    headers: {
                                        "Content-Type": "application/json",
                                        "X-CSRF-TOKEN": "{{ csrf_token() }}"
                                    },
                                    body: JSON.stringify({
                                        mesin_id: mesinId,
                                        url_type: urlType
                                    })
                                })
                                .then(response => response.json())
                                .then(data => {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Scan Berhasil!',
                                        text: data.message,
                                        showConfirmButton: false,
                                        timer: 3000,
                                        toast: true,
                                        position: 'top-end',
                                        iconColor: 'white',
                                        customClass: {
                                            popup: 'colored-toast', // Custom CSS class
                                        },
                                        timerProgressBar: true,
                                    });
                                })
                                .catch(error => {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Terjadi Kesalahan!',
                                        text: "Gagal memproses scan. Silakan coba lagi!",
                                        showConfirmButton: false,
                                        timer: 3000,
                                        toast: true,
                                        position: 'top-end',
                                        iconColor: 'white',
                                        customClass: {
                                            popup: 'colored-toast', // Custom CSS class
                                        },
                                        timerProgressBar: true,
                                    });
                                    console.error("Error:", error);
                                });
                        }
                    </script>

                    {{-- <x-primary-button x-data="" x-on:click.prevent="$dispatch('open-modal', 'updateholiday')" class="mr-2"> --}}
                    <x-primary-button x-data="" x-on:click.prevent="$dispatch('open-modal', 'updateshift')" class="mr-2">
                        <svg class="w-3 h-3 text-white dark:text-black me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7 7V5" />
                        </svg>
                        {{ __('form.Update-Shift') }}
                    </x-primary-button>
                </div>
            </div>
        </div>
    </x-slot>

    <div class="max-w-full mx-auto sm:px-6 lg:px-8">
        <!-- Breadcrumb -->
        <x-breadcrumb :items="[
            ['label' => 'Home', 'url' => '/'],
            ['label' => __('form.Attendance'), 'url' => null],
        ]" />
        <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
            <input type="hidden" id="select-date-text" value="{{ __('navbar.Select-Date') }}">
            <input type="hidden" id="search" value="{{ __('navbar.Search') }}">
            <input type="hidden" id="labels" value="{{ __('navbar.Labels') }}">
            <div class="p-6 text-gray-900 dark:text-gray-100">
                <div class="overflow-x-auto">
                    <table id="search-table" class="border-collapse border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 w-full">
                        <thead>
                            <tr>
                                <!-- Sticky Code Column -->
                                <th class="sticky left-0 z-20 bg-gray-200 dark:bg-gray-600 border border-gray-300 text-gray-900 dark:text-gray-100">
                                    <span class="flex items-center justify-center">{{ __('table.Code') }}</span>
                                </th>
                                <!-- Sticky Employees Column -->
                                <th class="sticky left-24 z-20 bg-gray-200 dark:bg-gray-600 border border-gray-300 text-gray-900 dark:text-gray-100">
                                    <span class="flex items-center justify-center">{{ __('table.Employee-Name') }}</span>
                                </th>
                                @foreach($dates as $date)
                                <th class="border border-gray-300 text-gray-900 dark:text-gray-100 bg-gray-200 dark:bg-gray-600">
                                    <span class="flex items-center justify-center">{{ $date->format('d M') }}</span>
                                </th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($employees as $employee)
                            <tr>
                                <!-- Sticky Code Column -->
                                <td class="sticky left-0 z-10 bg-white dark:bg-gray-800 border border-gray-300 text-start">
                                    <a href="{{ route('attendance.edit', $employee->id) }}"
                                        class="font-medium text-blue-600 dark:text-blue-500 hover:underline flex items-center justify-start">
                                        {{ $employee->code }}
                                    </a>
                                </td>
                                <!-- Sticky Employees Column -->
                                <td class="sticky left-24 z-10 bg-white dark:bg-gray-800 border border-gray-300 text-start">
                                    <a href="{{ route('attendance.show', $employee->id) }}"
                                        class="flex items-center space-x-3 font-medium text-blue-600 dark:text-blue-500 hover:underline pr-9">
                                        <img class="w-8 h-8 rounded-full object-cover"
                                            src="{{ optional($employee)->foto ?? 'https://api.dicebear.com/9.x/initials/svg?seed=' . urlencode($employee?->fullname) }}"
                                            alt="user photo">
                                        <span>{{ $employee?->fullname ?? '-' }}</span>
                                    </a>
                                </td>
                                @foreach($dates as $date)
                                @php
                                $dayName = $date->format('l');
                                $dateStr = $date->format('Y-m-d');
                                $key = $employee->id . '_' . $dateStr;
                                $pattern = $indexedSchedule[$key] ?? null;
                                $bgColor = $pattern && $pattern->shift && $pattern->shift->shift_color
                                ? 'background-color: ' . $pattern->shift->shift_color . ';'
                                : '';
                                @endphp
                                <td class="border border-gray-300 text-center dark:text-white" style="{{ $bgColor }}">
                                    <span class="flex items-center justify-center">
                                        {{ $pattern->shift->code ?? 'N/A' }}
                                        {{ $pattern->shift->name ?? '' }}
                                    </span>
                                </td>
                                @endforeach
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>