@extends('app')

@section('title', 'Jadual Kerja')

@section('content')
    <!-- Page Header -->
    <div class="mb-6">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold text-gray-900">Jadual Kerja</h1>
                <p class="mt-1 text-sm text-gray-600">Manage company work schedules and shifts</p>
            </div>
            <button onclick="openCreateModal()" class="btn btn-primary">
                <i data-lucide="plus" class="w-4 h-4"></i>
                Add Schedule
            </button>
        </div>
    </div>

    <!-- Search and Filter -->
    <div class="bg-white rounded-lg shadow mb-6 p-6">
        <div class="flex items-center gap-4">
            <div class="flex-1">
                <input type="text" id="searchInput" class="input w-full" placeholder="Search by company or days name...">
            </div>
            <button onclick="loadSchedules()" class="btn btn-secondary">
                <i data-lucide="search" class="w-4 h-4"></i>
                Search
            </button>
        </div>
    </div>

    <!-- Schedules Table -->
    <div class="bg-white rounded-lg shadow">
        <div class="p-6">
            <div class="overflow-x-auto">
                <table class="table w-full">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Syarikat</th>
                            <th>Days Name</th>
                            <th>Masa Mula</th>
                            <th>Masa Tamat</th>
                            <th>Tempoh</th>
                            <th>Tindakan</th>
                        </tr>
                    </thead>
                    <tbody id="schedulesTableBody">
                        <tr>
                            <td colspan="7" class="text-center">
                                <span class="loading loading-spinner loading-lg"></span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <div class="flex items-center justify-between mt-6">
                <div class="text-sm text-gray-600" id="paginationInfo">
                    Showing 0 daripada 0 schedules
                </div>
                <div class="flex gap-2" id="paginationControls">
                    <!-- Pagination buttons will be added dynamically -->
                </div>
            </div>
        </div>
    </div>

    <!-- Create/Edit Modal -->
    <dialog id="scheduleModal" class="modal">
        <div class="modal-box max-w-2xl">
            <h3 class="font-bold text-lg" id="modalTajuk">Tambah Jadual Kerja</h3>
            <form id="scheduleForm" class="mt-4">
                <input type="hidden" id="scheduleId">

                <div class="mb-4">
                    <label for="companyId" class="label font-semibold">
                        Company <span class="text-red-500">*</span>
                    </label>
                    <select id="companyId" class="select w-full select2-modal" required>
                        <option value="">Pilih Syarikat</option>
                    </select>
                    <span id="error-id_company" class="text-red-500 text-sm hidden"></span>
                    <span id="error-company_id" class="text-red-500 text-sm hidden"></span>
                </div>

                <div class="mb-4">
                    <label for="daysName" class="label font-semibold">
                        Days Name <span class="text-red-500">*</span>
                    </label>
                    <input type="text" id="daysName" class="input w-full"
                        placeholder="e.g., Senin, Selasa, Rabu" required>
                    <span id="error-days_name" class="text-red-500 text-sm hidden"></span>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="mb-4">
                        <label for="startTime" class="label font-semibold">
                            Masa Mula <span class="text-red-500">*</span>
                        </label>
                        <input type="time" id="startTime" class="input w-full" required>
                        <span id="error-start_time" class="text-red-500 text-sm hidden"></span>
                    </div>

                    <div class="mb-4">
                        <label for="endTime" class="label font-semibold">
                            Masa Tamat <span class="text-red-500">*</span>
                        </label>
                        <input type="time" id="endTime" class="input w-full" required>
                        <span id="error-end_time" class="text-red-500 text-sm hidden"></span>
                    </div>
                </div>

                <div class="modal-action">
                    <button type="button" onclick="closeModal()" class="btn">Batal</button>
                    <button type="submit" id="submitBtn" class="btn btn-primary">
                        <span id="submitBtnText">Save Schedule</span>
                        <span id="submitBtnLoading" class="loading loading-spinner hidden"></span>
                    </button>
                </div>
            </form>
        </div>
        <form method="dialog" class="modal-backdrop">
            <button>close</button>
        </form>
    </dialog>

    <!-- View Details Modal -->
    <dialog id="viewModal" class="modal">
        <div class="modal-box max-w-3xl">
            <h3 class="font-bold text-lg mb-4">Jadual Kerja Details</h3>
            <div id="scheduleDetails">
                <div class="flex justify-center py-8">
                    <span class="loading loading-spinner loading-lg"></span>
                </div>
            </div>
            <div class="modal-action">
                <button onclick="closeViewModal()" class="btn">Tutup</button>
            </div>
        </div>
        <form method="dialog" class="modal-backdrop">
            <button>close</button>
        </form>
    </dialog>
@endsection

@push('scripts')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script>
        let currentPage = 1;
        let perPage = 10;
        let companiesList = [];

        // Toastr configuration
        toastr.options = {
            "closeButton": true,
            "progressBar": true,
            "positionClass": "toast-top-right",
            "timeOut": "3000"
        };

        $(document).ready(function() {
            loadCompanies();
            loadSchedules();
            initializeSelect2();

            // Search on enter key
            $('#searchInput').on('keypress', function(e) {
                if (e.which === 13) {
                    loadSchedules();
                }
            });

            // Form submit
            $('#scheduleForm').on('submit', function(e) {
                e.preventDefault();
                saveSchedule();
            });
        });

        function initializeSelect2() {
            $('#companyId').select2({
                dropdownParent: $('#scheduleModal'),
                allowClear: true,
                placeholder: 'Pilih Syarikat',
                width: '100%'
            });
        }

        function loadCompanies() {
            window.apiRequest('/api/companies?per_page=1000', {
                    method: 'GET'
                })
                .then(function(response) {
                    const paginationData = response.data;
                    companiesList = paginationData.data || [];

                    let options = '<option value="">Pilih Syarikat</option>';
                    companiesList.forEach(function(company) {
                        options += `<option value="${company.id}">${company.name}</option>`;
                    });

                    $('#companyId').html(options);
                })
                .catch(function(error) {
                    console.error('Error loading companies:', error);
                    toastr.error('Failed to load companies');
                });
        }

        function loadSchedules(page = 1) {
            currentPage = page;
            const search = $('#searchInput').val();

            const params = new URLSearchParams({
                page: currentPage,
                per_page: perPage,
                ...(search && {
                    search
                })
            });

            window.apiRequest(`/api/work-schedules?${params}`, {
                    method: 'GET'
                })
                .then(function(response) {
                    const paginationData = response.data;
                    const schedulesArray = paginationData.data || [];

                    renderSchedules(schedulesArray);
                    renderPagination(paginationData);

                    // Refresh icons
                    setTimeout(function() {
                        if (window.lucide && typeof window.lucide.createIcons === 'function') {
                            window.lucide.createIcons();
                        }
                    }, 50);
                })
                .catch(function(error) {
                    console.error('Error loading schedules:', error);
                    toastr.error('Failed to load work schedules');
                    $('#schedulesTableBody').html(
                        '<tr><td colspan="7" class="text-center text-red-500">Failed to load schedules</td></tr>'
                    );
                });
        }

        function renderSchedules(schedules) {
            if (!schedules || schedules.length === 0) {
                $('#schedulesTableBody').html(
                    '<tr><td colspan="7" class="text-center text-gray-500">No schedules found</td></tr>'
                );
                return;
            }

            let html = '';
            schedules.forEach(function(schedule) {
                const companyName = schedule.company ? schedule.company.name : '-';
                const duration = calculateTempoh(schedule.start_time, schedule.end_time);

                html += `
                    <tr>
                        <td>${schedule.id}</td>
                        <td>
                            <div>
                                <p class="font-medium">${companyName}</p>
                            </div>
                        </td>
                        <td><span class="badge badge-primary">${schedule.days_name || '-'}</span></td>
                        <td><span class="font-mono text-sm">${schedule.start_time || '-'}</span></td>
                        <td><span class="font-mono text-sm">${schedule.end_time || '-'}</span></td>
                        <td><span class="text-sm">${duration}</span></td>
                        <td>
                            <div class="flex gap-2">
                                <button onclick="viewSchedule(${schedule.id})" class="btn btn-sm btn-info" title="View">
                                    <i data-lucide="eye" class="w-4 h-4"></i>
                                </button>
                                <button onclick="editSchedule(${schedule.id})" class="btn btn-sm btn-warning" title="Edit">
                                    <i data-lucide="edit" class="w-4 h-4"></i>
                                </button>
                                <button onclick="deleteSchedule(${schedule.id})" class="btn btn-sm btn-error" title="Delete">
                                    <i data-lucide="trash-2" class="w-4 h-4"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                `;
            });

            $('#schedulesTableBody').html(html);
        }

        function renderPagination(response) {
            const {
                current_page,
                last_page,
                from,
                to,
                total
            } = response;

            $('#paginationInfo').text(`Showing ${from || 0} to ${to || 0} daripada ${total} schedules`);

            let paginationHtml = '';
            if (last_page > 1) {
                // Sebelum button
                paginationHtml += `
                    <button onclick="loadSchedules(${current_page - 1})"
                        class="btn btn-sm" ${current_page === 1 ? 'disabled' : ''}>
                        Sebelum
                    </button>
                `;

                // Page numbers
                for (let i = 1; i <= last_page; i++) {
                    if (i === 1 || i === last_page || (i >= current_page - 1 && i <= current_page + 1)) {
                        paginationHtml += `
                            <button onclick="loadSchedules(${i})"
                                class="btn btn-sm ${i === current_page ? 'btn-primary' : ''}">
                                ${i}
                            </button>
                        `;
                    } else if (i === current_page - 2 || i === current_page + 2) {
                        paginationHtml += `<span class="px-2">...</span>`;
                    }
                }

                // Seterusnya button
                paginationHtml += `
                    <button onclick="loadSchedules(${current_page + 1})"
                        class="btn btn-sm" ${current_page === last_page ? 'disabled' : ''}>
                        Seterusnya
                    </button>
                `;
            }

            $('#paginationControls').html(paginationHtml);
        }

        function calculateTempoh(startTime, endTime) {
            if (!startTime || !endTime) return '-';

            try {
                const start = new Date(`2000-01-01T${startTime}`);
                const end = new Date(`2000-01-01T${endTime}`);
                let diff = (end - start) / (1000 * 60); // in minutes

                if (diff < 0) {
                    diff += 24 * 60; // Handle overnight shifts
                }

                const hours = Math.floor(diff / 60);
                const minutes = diff % 60;

                return `${hours}h ${minutes}m`;
            } catch (e) {
                return '-';
            }
        }

        function openCreateModal() {
            $('#modalTajuk').text('Tambah Jadual Kerja');
            $('#scheduleId').val('');
            $('#scheduleForm')[0].reset();
            clearErrors();
            document.getElementById('scheduleModal').showModal();

            // Reinitialize Select2
            setTimeout(function() {
                initializeSelect2();
            }, 100);
        }

        function viewSchedule(id) {
            $('#scheduleDetails').html(`
                <div class="flex justify-center py-8">
                    <span class="loading loading-spinner loading-lg"></span>
                </div>
            `);
            document.getElementById('viewModal').showModal();

            window.apiRequest(`/api/work-schedules/${id}`, {
                    method: 'GET'
                })
                .then(function(response) {
                    const schedule = response.data.data || response.data;
                    const companyName = schedule.company ? schedule.company.name : '-';
                    const duration = calculateTempoh(schedule.start_time, schedule.end_time);

                    let html = `
                        <div class="space-y-4">
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <p class="text-sm text-gray-600">Syarikat</p>
                                    <p class="font-medium">${companyName}</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-600">Days Name</p>
                                    <p class="font-medium">${schedule.days_name}</p>
                                </div>
                            </div>

                            <div class="grid grid-cols-3 gap-4">
                                <div>
                                    <p class="text-sm text-gray-600">Masa Mula</p>
                                    <p class="font-medium font-mono">${schedule.start_time || '-'}</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-600">Masa Tamat</p>
                                    <p class="font-medium font-mono">${schedule.end_time || '-'}</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-600">Tempoh</p>
                                    <p class="font-medium">${duration}</p>
                                </div>
                            </div>
                        </div>
                    `;

                    $('#scheduleDetails').html(html);
                })
                .catch(function(error) {
                    $('#scheduleDetails').html(
                        '<p class="text-center text-red-500">Failed to load schedule details</p>');
                    toastr.error('Failed to load schedule details');
                });
        }

        function editSchedule(id) {
            $('#modalTajuk').text('Edit Jadual Kerja');
            clearErrors();

            window.apiRequest(`/api/work-schedules/${id}`, {
                    method: 'GET'
                })
                .then(function(response) {
                    const schedule = response.data.data || response.data;
                    $('#scheduleId').val(schedule.id);
                    $('#companyId').val(schedule.id_company).trigger('change');
                    $('#daysName').val(schedule.days_name);

                    // Strip seconds from time for input (H:i:s -> H:i)
                    const startTime = schedule.start_time ? schedule.start_time.substring(0, 5) : '';
                    const endTime = schedule.end_time ? schedule.end_time.substring(0, 5) : '';
                    $('#startTime').val(startTime);
                    $('#endTime').val(endTime);

                    document.getElementById('scheduleModal').showModal();

                    // Reinitialize Select2
                    setTimeout(function() {
                        initializeSelect2();
                    }, 100);
                })
                .catch(function(error) {
                    toastr.error('Failed to load schedule data');
                });
        }

        function saveSchedule() {
            const id = $('#scheduleId').val();
            const data = {
                id_company: $('#companyId').val(),
                days_name: $('#daysName').val(),
                start_time: $('#startTime').val() ? $('#startTime').val() + ':00' : '',
                end_time: $('#endTime').val() ? $('#endTime').val() + ':00' : ''
            };

            const url = id ? `/api/work-schedules/${id}` : '/api/work-schedules';
            const method = id ? 'PUT' : 'POST';

            // Show loading
            $('#submitBtn').prop('disabled', true);
            $('#submitBtnText').addClass('hidden');
            $('#submitBtnLoading').removeClass('hidden');

            window.apiRequest(url, {
                    method: method,
                    data: JSON.stringify(data),
                    contentType: 'application/json'
                })
                .then(function(response) {
                    toastr.success(response.data.message || 'Schedule saved successfully');
                    closeModal();
                    loadSchedules(currentPage);
                })
                .catch(function(error) {
                    if (error.xhr && error.xhr.status === 400) {
                        const errors = error.xhr.responseJSON.data;
                        displayErrors(errors);
                        toastr.error('Validation failed. Please check the form.');
                    } else {
                        toastr.error('Failed to save schedule');
                    }
                })
                .finally(function() {
                    $('#submitBtn').prop('disabled', false);
                    $('#submitBtnText').removeClass('hidden');
                    $('#submitBtnLoading').addClass('hidden');
                });
        }

        function deleteSchedule(id) {
            if (!confirm('Are you sure you want to delete this work schedule?')) {
                return;
            }

            window.apiRequest(`/api/work-schedules/${id}`, {
                    method: 'DELETE'
                })
                .then(function(response) {
                    toastr.success('Schedule deleted successfully');
                    loadSchedules(currentPage);
                })
                .catch(function(error) {
                    if (error.xhr && error.xhr.status === 400) {
                        toastr.error(error.xhr.responseJSON.message);
                    } else {
                        toastr.error('Failed to delete schedule');
                    }
                });
        }

        function closeModal() {
            document.getElementById('scheduleModal').close();
            clearErrors();
        }

        function closeViewModal() {
            document.getElementById('viewModal').close();
        }

        function displayErrors(errors) {
            clearErrors();
            for (const [field, messages] of Object.entries(errors)) {
                const errorElement = $(`#error-${field}`);
                if (errorElement.length) {
                    errorElement.text(messages[0]).removeClass('hidden');
                }
            }
        }

        function clearErrors() {
            $('[id^="error-"]').addClass('hidden').text('');
        }
    </script>
@endpush