@section("title", "BizMan | Accurate Implementation Calendar")
<x-app-layout>
    <x-slot name="header">
        <div>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ __('Implementation Calendar') }}
            </h2>
            <p class="text-gray-500 text-sm">{{ date('l, d M Y') }}</p> 
        </div>
    </x-slot>

    <div class="space-y-6" x-data="calendarData()">
        <!-- Success Message -->
        @if (session('success'))
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg flex items-center justify-between">
                <span>{{ session('success') }}</span>
                <button onclick="this.parentElement.remove()" class="text-green-700 hover:text-green-900">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
        @endif

        <!-- Filter Section -->
        <div class="flex max-sm:flex-col max-sm:gap-3 max-sm:items-start items-center justify-between bg-white rounded-xl shadow-sm p-6">
            <div class="flex items-center space-x-4">
                <div class="flex items-center space-x-2 text-gray-700">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                    </svg>
                    <span class="font-medium">Implementator:</span>
                </div>
                <div class="flex-1 max-w-xs">
                    <select x-model="selectedImplementator" @change="filterEvents()"
                        class="w-full border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring-blue-500">
                        <option value="all">📋 All Implementators</option>
                        <template x-for="implementator in implementators" :key="implementator.id">
                            <option :value="implementator.name" x-text="implementator.name"></option>
                        </template>
                    </select>
                </div>
            </div>
            <button @click="openScheduleModal = true" class="max-sm:w-full bg-yellow-500 hover:bg-yellow-600 text-white font-semibold py-2.5 px-6 rounded-lg flex items-center space-x-2 transition-colors duration-200">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                </svg>
                <span>Schedule Visit</span>
            </button>
        </div>

        <!-- Stats Cards -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- Scheduled Visits Card -->
            <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl shadow-lg p-6 text-white">
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <div class="flex items-center space-x-3 mb-2">
                            <div class="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center">
                                <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z">
                                    </path>
                                </svg>
                            </div>
                        </div>
                        <p class="text-sm font-medium opacity-90">Scheduled Visits</p>
                    </div>
                    <div class="text-5xl font-bold" x-text="getStats().scheduled"></div>
                </div>
            </div>

            <!-- Completed Visits Card -->
            <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-xl shadow-lg p-6 text-white">
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <div class="flex items-center space-x-3 mb-2">
                            <div class="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center">
                                <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z">
                                    </path>
                                </svg>
                            </div>
                        </div>
                        <p class="text-sm font-medium opacity-90">Completed Visits</p>
                    </div>
                    <div class="text-5xl font-bold" x-text="getStats().completed"></div>
                </div>
            </div>

            <!-- Cancelled Visits Card -->
            <div class="bg-gradient-to-br from-red-500 to-red-600 rounded-xl shadow-lg p-6 text-white">
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <div class="flex items-center space-x-3 mb-2">
                            <div class="w-12 h-12 bg-white bg-opacity-20 rounded-lg flex items-center justify-center">
                                <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                            </div>
                        </div>
                        <p class="text-sm font-medium opacity-90">Cancelled Visits</p>
                    </div>
                    <div class="text-5xl font-bold" x-text="getStats().cancelled"></div>
                </div>
            </div>
        </div>

        <!-- FullCalendar -->
        <div class="bg-white rounded-xl shadow-sm p-6">
            <div id="calendar"></div>
        </div>

        <!-- Schedule Visit Modal -->
        <div x-show="openScheduleModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title"
            role="dialog" aria-modal="true">
            <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                <div x-show="openScheduleModal" x-transition:enter="ease-out duration-300"
                    x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
                    x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100"
                    x-transition:leave-end="opacity-0"
                    class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
                    @click="openScheduleModal = false"></div>

                <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

                <div x-show="openScheduleModal" x-transition:enter="ease-out duration-300"
                    x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                    x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                    x-transition:leave="ease-in duration-200"
                    x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                    x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                    class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle max-sm:w-full sm:max-w-lg sm:w-full">
                    <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-lg font-semibold text-gray-900">Schedule New Visit</h3>
                            <button @click="openScheduleModal = false" class="text-gray-400 hover:text-gray-500">
                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                            </button>
                        </div>

                        <form action="{{ route('implementation-calendar.store') }}" method="POST" class="space-y-4">
                            @csrf
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Project</label>
                                <select name="implementation_project_id" required
                                    class="w-full border-gray-300 rounded-lg shadow-sm focus:border-yellow-500 focus:ring-yellow-500">
                                    <option value="">Select Project</option>
                                    @foreach($projects as $project)
                                        <option value="{{ $project->id }}">{{ $project->project_name }} - {{ $project->client_name }}</option>
                                    @endforeach
                                </select>
                                @error('implementation_project_id')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Implementator</label>
                                <select name="implementator_id" required
                                    class="w-full border-gray-300 rounded-lg shadow-sm focus:border-yellow-500 focus:ring-yellow-500">
                                    <option value="">Select Implementator</option>
                                    @foreach($implementators as $implementator)
                                        <option value="{{ $implementator->id }}">{{ $implementator->name }}</option>
                                    @endforeach
                                </select>
                                @error('implementator_id')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Date</label>
                                <input type="date" name="visit_date" required min="{{ date('Y-m-d') }}"
                                    class="w-full border-gray-300 rounded-lg shadow-sm focus:border-yellow-500 focus:ring-yellow-500">
                                @error('visit_date')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Time</label>
                                <input type="time" name="visit_time" required
                                    class="w-full border-gray-300 rounded-lg shadow-sm focus:border-yellow-500 focus:ring-yellow-500">
                                @error('visit_time')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Notes (Optional)</label>
                                <textarea name="notes" rows="3"
                                    class="w-full border-gray-300 rounded-lg shadow-sm focus:border-yellow-500 focus:ring-yellow-500"></textarea>
                                @error('notes')
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>

                            <div class="flex justify-end space-x-3 pt-4">
                                <button type="button" @click="openScheduleModal = false"
                                    class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors duration-200">
                                    Cancel
                                </button>
                                <button type="submit"
                                    class="px-4 py-2 bg-yellow-500 hover:bg-yellow-600 text-white rounded-lg font-semibold transition-colors duration-200">
                                    <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                    </svg>
                                    Schedule Visit
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.js'></script>
        <script>
            window.initCalendar = function(visits) {
                const calendarEl = document.getElementById('calendar');

                const calendar = new FullCalendar.Calendar(calendarEl, {
                    initialView: 'dayGridMonth',
                    headerToolbar: window.innerWidth < 768 ? {
                        left: 'prev,next',
                        center: 'title',
                        right: 'dayGridMonth,listMonth'
                    } : {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth,listMonth'
                    },
                    buttonText: {
                        today: 'Today',
                        month: 'Month',
                        list: 'List'
                    },
                    titleFormat: window.innerWidth < 768 ? {
                        year: 'numeric',
                        month: 'short'
                    } : {
                        year: 'numeric',
                        month: 'long'
                    },
                    initialDate: '2025-12-20',
                    locale: 'id',
                    height: 'auto',
                    events: visits.map(visit => ({
                        id: visit.id,
                        title: `${visit.time} - ${visit.implementator}\n${visit.project}`,
                        start: visit.date + 'T' + visit.time,
                        backgroundColor: visit.status === 'completed' ? '#10B981' : visit.status ===
                            'cancelled' ? '#EF4444' : '#3B82F6',
                        borderColor: visit.status === 'completed' ? '#059669' : visit.status ===
                            'cancelled' ? '#DC2626' : '#2563EB',
                        extendedProps: {
                            implementator: visit.implementator,
                            project: visit.project,
                            status: visit.status,
                            notes: visit.notes
                        }
                    })),
                    eventClick: function(info) {
                        const visit = info.event;
                        Swal.fire({
                            title: visit.extendedProps.project,
                            html: `
                            <div class="text-left space-y-2">
                                <p><strong>Implementator:</strong> ${visit.extendedProps.implementator}</p>
                                <p><strong>Date:</strong> ${visit.start.toLocaleDateString('id-ID')}</p>
                                <p><strong>Time:</strong> ${visit.start.toLocaleTimeString('id-ID', {hour: '2-digit', minute: '2-digit'})}</p>
                                <p><strong>Status:</strong> <span class="capitalize ${
                                    visit.extendedProps.status === 'completed' ? 'text-green-600' : 
                                    visit.extendedProps.status === 'cancelled' ? 'text-red-600' : 
                                    'text-blue-600'
                                }">${visit.extendedProps.status}</span></p>
                                ${visit.extendedProps.notes ? `<p><strong>Notes:</strong> ${visit.extendedProps.notes}</p>` : ''}
                            </div>
                        `,
                            showCancelButton: true,
                            showDenyButton: visit.extendedProps.status === 'scheduled',
                            confirmButtonText: 'Close',
                            denyButtonText: 'Mark Completed',
                            cancelButtonText: 'Delete',
                            confirmButtonColor: '#3B82F6',
                            denyButtonColor: '#10B981',
                            cancelButtonColor: '#EF4444',
                        }).then((result) => {
                            if (result.isDenied) {
                                // Create and submit form to update status
                                const form = document.createElement('form');
                                form.method = 'POST';
                                form.action = `/implementation-calendar/${visit.id}/status`;
                                
                                const csrfToken = document.createElement('input');
                                csrfToken.type = 'hidden';
                                csrfToken.name = '_token';
                                csrfToken.value = '{{ csrf_token() }}';
                                
                                const methodField = document.createElement('input');
                                methodField.type = 'hidden';
                                methodField.name = '_method';
                                methodField.value = 'PATCH';
                                
                                const statusField = document.createElement('input');
                                statusField.type = 'hidden';
                                statusField.name = 'status';
                                statusField.value = 'completed';
                                
                                form.appendChild(csrfToken);
                                form.appendChild(methodField);
                                form.appendChild(statusField);
                                document.body.appendChild(form);
                                form.submit();
                            } else if (result.dismiss === Swal.DismissReason.cancel) {
                                Swal.fire({
                                    title: 'Are you sure?',
                                    text: "You won't be able to revert this!",
                                    icon: 'warning',
                                    showCancelButton: true,
                                    confirmButtonColor: '#EF4444',
                                    cancelButtonColor: '#6B7280',
                                    confirmButtonText: 'Yes, delete it!'
                                }).then((result) => {
                                    if (result.isConfirmed) {
                                        // Create and submit form to delete
                                        const form = document.createElement('form');
                                        form.method = 'POST';
                                        form.action = `/implementation-calendar/${visit.id}`;
                                        
                                        const csrfToken = document.createElement('input');
                                        csrfToken.type = 'hidden';
                                        csrfToken.name = '_token';
                                        csrfToken.value = '{{ csrf_token() }}';
                                        
                                        const methodField = document.createElement('input');
                                        methodField.type = 'hidden';
                                        methodField.name = '_method';
                                        methodField.value = 'DELETE';
                                        
                                        form.appendChild(csrfToken);
                                        form.appendChild(methodField);
                                        document.body.appendChild(form);
                                        form.submit();
                                    }
                                });
                            }
                        });
                    },
                    eventContent: function(arg) {
                        const lines = arg.event.title.split('\n');
                        return {
                            html: `
                            <div class="fc-event-main-frame p-1">
                                <div class="fc-event-time text-xs font-semibold">${lines[0]}</div>
                                <div class="fc-event-title text-xs truncate">${lines[1]}</div>
                            </div>
                        `
                        };
                    },
                    dayCellDidMount: function(info) {
                        if (info.date.toDateString() === new Date(2025, 11, 20).toDateString()) {
                            info.el.style.backgroundColor = '#FEF3C7';
                        }
                    }
                });

                calendar.render();
                window.calendarInstance = calendar;
                return calendar;
            };
        </script>

        <script>
            function calendarData() {
                return {
                    selectedImplementator: 'all',
                    openScheduleModal: false,
                    calendar: null,
                    implementators: @json($implementators),
                    newVisit: {
                        project: '',
                        implementator: '',
                        date: '',
                        time: '',
                        notes: ''
                    },
                    visits: @json($visits),

                    init() {
                        this.$nextTick(() => {
                            this.calendar = window.initCalendar(this.visits);
                            window.calendarDataInstance = this;
                        });
                    },

                    getFilteredVisits() {
                        if (this.selectedImplementator === 'all') {
                            return this.visits;
                        }
                        return this.visits.filter(v => v.implementator === this.selectedImplementator);
                    },

                    filterEvents() {
                        if (this.calendar) {
                            const filtered = this.getFilteredVisits();
                            this.calendar.removeAllEvents();
                            this.calendar.addEventSource(filtered.map(visit => ({
                                id: visit.id,
                                title: `${visit.time} - ${visit.implementator}\n${visit.project}`,
                                start: visit.date + 'T' + visit.time,
                                backgroundColor: visit.status === 'completed' ? '#10B981' : visit.status ===
                                    'cancelled' ? '#EF4444' : '#3B82F6',
                                borderColor: visit.status === 'completed' ? '#059669' : visit.status ===
                                    'cancelled' ? '#DC2626' : '#2563EB',
                                extendedProps: {
                                    implementator: visit.implementator,
                                    project: visit.project,
                                    status: visit.status,
                                    notes: visit.notes
                                }
                            })));
                        }
                    },

                    getStats() {
                        const filtered = this.getFilteredVisits();
                        return {
                            scheduled: filtered.filter(v => v.status === 'scheduled').length,
                            completed: filtered.filter(v => v.status === 'completed').length,
                            cancelled: filtered.filter(v => v.status === 'cancelled').length
                        };
                    },

                    updateStats() {
                        this.$nextTick(() => {
                            this.visits = [...this.visits];
                        });
                    }
                }
            }
        </script>
    @endpush
</x-app-layout>