@extends('frontend::layouts.app')

@push('styles')
    <link rel="stylesheet" href="{{ asset('modules/frontend/assets/css/personalinformation.css') }}">
@endpush

@section('content')
    <!-- Flash Messages -->
    @if (session()->has('success'))
        <div 
            id="alert-success"
            class="flex items-end sm:items-end p-4 mb-4 text-sm text-fg-success-strong rounded-base bg-success-soft absolute top-0 right-0"
            role="alert" style="z-index: 200;">
            <div class="bg-teal-100 border-t-4 border-teal-500 rounded-b text-teal-900 px-4 py-3 shadow-md" role="alert">
                <div class="flex">
                    <div class="py-1">
                        <svg class="fill-current h-6 w-6 text-green-500 mr-4" xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 20 20">
                            <path
                                d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1.41-4.59l-3.3-3.29a1 1 0 1 1 1.42-1.42l2.29 2.3 4.3-4.3a1 1 0 0 1 1.42 1.42l-5 5a1 1 0 0 1-1.42 0z" />
                        </svg>
                    </div>
                    <div>
                        <p class="font-bold">{{ session('success') }}</p>
                    </div>
                </div>
            </div>
        </div>
        <script>
            setTimeout(function() {
                var s = document.getElementById('alert-success');
                if(s) s.style.display = 'none';
            }, 3500);
        </script>
    @endif

    @if (session()->has('error'))
        <div
            id="alert-error"
            class="flex items-end sm:items-end p-4 mb-4 text-sm text-fg-danger-strong rounded-base bg-danger-soft absolute top-0 right-0"
            role="alert" style="z-index: 200;">
            <div class="bg-red-100 border-t-4 border-red-500 rounded-b text-red-900 px-4 py-3 shadow-md" role="alert">
                <div class="flex">
                    <div class="py-1">
                        <svg class="fill-current h-6 w-6 text-red-500 mr-4" xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 20 20">
                            <path
                                d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z" />
                        </svg>
                    </div>
                    <div>
                        <p class="font-bold">{{ session('error') }}</p>
                    </div>
                </div>
            </div>
        </div>
        <script>
            setTimeout(function() {
                var e = document.getElementById('alert-error');
                if(e) e.style.display = 'none';
            }, 3500);
        </script>
    @endif
    @livewire('frontend::list-personal', ['member' => auth()->guard('member')->user()])
@endsection

@push('scripts')
    <!-- SweetAlert2 JS -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        const GOOGLE_API_KEY = "{{ env('GOOGLE_MAPS_KEY') }}"; // ใช้ key จาก .env
        let currentCheckin = null;

        // ฟังก์ชัน กรองประวัติ
        function filterHistory() {
            const start = document.getElementById("filterStart").value;
            const end = document.getElementById("filterEnd").value;

            if (!start || !end) {
                document.getElementById("timeAlertModal").style.display = "flex";
                return;
            }

            const rows = document.querySelectorAll("#history-body tr");
            rows.forEach((row) => {
                const dateText = row.cells[1].textContent.trim();
                const timeIn = row.cells[2].textContent.trim();
                const rowDateTime = new Date(dateText + " " + timeIn);

                const startDate = new Date(start);
                const endDate = new Date(end);

                if (rowDateTime >= startDate && rowDateTime <= endDate) {
                    row.style.display = "";
                } else {
                    row.style.display = "none";
                }
            });
        }

        // Modal ควบคุม
        function sendReport() {
            document.getElementById("reportModal").style.display = "flex";
        }

        function closeReportModal() {
            document.getElementById("reportModal").style.display = "none";
        }

        function closeTimeAlertModal() {
            document.getElementById("timeAlertModal").style.display = "none";
        }

        // Export PDF
        function exportPDF(start_date, end_date) {
            window.open("{{ route('frontend.personalinformation.export') }}?start_date=" + start_date + "&end_date=" +
                end_date, "_blank");
        }

        // Auto-hide flash messages after 5 seconds
        document.addEventListener('DOMContentLoaded', function() {
            const alerts = document.querySelectorAll('.alert-success, .alert-danger');
            alerts.forEach(alert => {
                setTimeout(() => {
                    alert.classList.add('alert-fade');
                    alert.style.opacity = '0';
                    setTimeout(() => {
                        alert.remove();
                    }, 500);
                }, 5000);
            });
        });

        // Google Places Autocomplete
        function initAutocomplete() {
            const input = document.getElementById("placeName");
            if (input) {
                new google.maps.places.Autocomplete(input);
                new google.maps.places.Autocomplete(document.getElementById("currentPlace"));
            }
        }
    </script>

    <script
        src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_KEY') }}&libraries=places&callback=initAutocomplete"
        async defer></script>
@endpush