@section("title", "BizMan | Appointments")

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Appointments Management') }}
        </h2>
        <p class="text-gray-500 text-sm">{{ date('l, d M Y') }}</p>
    </x-slot>
    <div>
        <div class="max-w-7xl flex flex-col gap-5 mx-auto sm:px-6 lg:px-8">
            <div class="flex max-sm:items-start max-sm:flex-col items-center justify-between gap-2 max-sm:mb-5">
                <div class="flex flex-col gap-1">
                    <p class="font-semibold text-3xl max-sm:text-2xl text-black">Manage Your Appointments</p>
                    <p class="text-gray-600">Schedule meetings and automatically create deals</p>
                </div>
                <a href="{{ route('appointments.create') }}"
                    class="bg-blue-500 whitespace-nowrap hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                    Add New Appointment
                </a>
            </div>

            @if (session('success'))
                <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
                    {{ session('success') }}
                </div>
            @endif

            @if (session('error'))
                <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
                    {{ session('error') }}
                </div>
            @endif

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl p-6 text-white shadow-lg">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="flex items-center gap-3 mb-2">
                                <svg class="w-12 h-12 opacity-80" 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>
                            <p class="text-white opacity-90 text-lg">Total Appointments</p>
                        </div>
                        <p class="text-6xl font-bold">{{ $totalAppointments }}</p>
                    </div>
                </div>

                <div class="bg-gradient-to-br from-green-500 to-green-600 rounded-2xl p-6 text-white shadow-lg">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="flex items-center gap-3 mb-2">
                                <svg class="w-12 h-12 opacity-80" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                            </div>
                            <p class="text-white opacity-90 text-lg">Upcoming</p>
                        </div>
                        <p class="text-6xl font-bold">{{ $upcomingAppointments }}</p>
                    </div>
                </div>

                <div class="bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl p-6 text-white shadow-lg">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="flex items-center gap-3 mb-2">
                                <svg class="w-12 h-12 opacity-80" 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>
                            </div>
                            <p class="text-white opacity-90 text-lg">Completed</p>
                        </div>
                        <p class="text-6xl font-bold">{{ $completedAppointments }}</p>
                    </div>
                </div>
            </div>

            <div class="flex items-center gap-2 mt-4">
                <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <h2 class="text-xl font-semibold text-gray-900">Upcoming Appointments</h2>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                @forelse($appointments->where('status', 'scheduled') as $appointment)
                    <div class="bg-white border border-gray-200 rounded-2xl shadow-sm hover:shadow-md transition-all p-6 cursor-pointer"
                        onclick="window.location.href = '{{ route('appointments.show', $appointment) }}'">
                        <div class="flex justify-between items-start mb-4">
                            <h3 class="text-lg font-semibold text-gray-900">{{ $appointment->title }}</h3>
                            <span class="px-3 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                                {{ $appointment->status }}
                            </span>
                        </div>

                        <div class="flex items-center gap-2 text-gray-700 mb-2">
                            <svg class="w-4 h-4" 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">{{ $appointment->customer->name }}</span>
                        </div>

                        <div class="flex items-center gap-2 text-gray-600 mb-4">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
                                </path>
                            </svg>
                            <span>{{ $appointment->customer->email }}</span>
                        </div>

                        <div class="flex items-center gap-4 mb-4">
                            <div class="flex items-center gap-2 text-gray-700">
                                <svg class="w-4 h-4" 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>
                                <span>{{ \Carbon\Carbon::parse($appointment->scheduled_at)->format('d/m/Y') }}</span>
                            </div>
                            <div class="flex items-center gap-2 text-gray-700">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                <span>{{ \Carbon\Carbon::parse($appointment->scheduled_at)->format('H:i') }}
                                    ({{ $appointment->duration }} min)</span>
                            </div>
                        </div>

                        @if ($appointment->notes)
                            <div class="bg-gray-50 rounded-lg p-3 mb-4">
                                <div class="flex items-start gap-2">
                                    <svg class="w-4 h-4 text-gray-500 mt-0.5" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
                                        </path>
                                    </svg>
                                    <p class="text-sm text-gray-700">{{ $appointment->notes }}</p>
                                </div>
                            </div>
                        @endif

                        @if ($appointment->members->count() > 0)
                            <div class="bg-purple-50 rounded-lg p-3 mb-4">
                                <div class="flex items-center gap-2 mb-2">
                                    <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z">
                                        </path>
                                    </svg>
                                    <span class="font-semibold text-purple-900">Team Members:</span>
                                </div>
                                <div class="flex flex-wrap gap-2">
                                    @foreach ($appointment->members as $member)
                                        <span
                                            class="inline-flex items-center gap-1 px-3 py-1 bg-white border border-purple-200 rounded-full text-sm text-purple-700">
                                            <svg class="w-3 h-3" 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>
                                            {{ $member->name }}
                                        </span>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        <div class="flex gap-2">
                            <button onclick="completeAppointment(event, {{ $appointment->id }})"
                                class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-2 bg-green-500 hover:bg-green-600 text-white text-sm font-semibold rounded-lg transition-colors">
                                <svg class="w-4 h-4" 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>
                                Complete
                            </button>
                            <button onclick="cancelAppointment(event, {{ $appointment->id }})"
                                class="flex-1 inline-flex items-center justify-center gap-2 px-4 py-2 bg-red-500 hover:bg-red-600 text-white text-sm font-semibold rounded-lg transition-colors">
                                <svg class="w-4 h-4" 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>
                                Cancel
                            </button>
                            <button onclick="deleteAppointment(event, {{ $appointment->id }})"
                                class="inline-flex items-center justify-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-semibold rounded-lg transition-colors">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16">
                                    </path>
                                </svg>
                                Delete
                            </button>
                        </div>
                    </div>
                @empty
                    <div class="col-span-2 bg-white border border-gray-200 rounded-2xl shadow-sm p-8 text-center">
                        <svg class="w-16 h-16 mx-auto text-gray-400 mb-4" 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>
                        <p class="text-gray-500 text-lg">No upcoming appointments</p>
                    </div>
                @endforelse
            </div>

            @if ($appointments->whereIn('status', ['completed', 'cancelled'])->count() > 0)
                <div class="flex items-center gap-2 mt-8">
                    <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <h2 class="text-xl font-semibold text-gray-900">Past Appointments</h2>
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                    @foreach ($appointments->whereIn('status', ['completed', 'cancelled']) as $appointment)
                        <div class="bg-white cursor-pointer border border-gray-200 rounded-2xl shadow-sm p-6 opacity-75" onclick="window.location.href = '{{ route('appointments.show', $appointment) }}'">
                            <div class="flex justify-between items-start mb-4">
                                <h3 class="text-lg font-semibold text-gray-900">{{ $appointment->title }}</h3>
                                <div class="flex items-center gap-2">
                                    @if ($appointment->status == 'completed')
                                        <span
                                            class="px-3 py-1 text-xs font-semibold rounded-full bg-purple-100 text-purple-800">
                                            completed
                                        </span>
                                    @else
                                        <span class="px-3 py-1 text-xs font-semibold rounded-full bg-red-100 text-red-800">
                                            cancelled
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div class="flex items-center gap-2 text-gray-700 mb-2">
                                <svg class="w-4 h-4" 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">{{ $appointment->customer->name }}</span>
                            </div>

                            <div class="flex items-center gap-4 mb-4">
                                <div class="flex items-center gap-2 text-gray-700">
                                    <svg class="w-4 h-4" 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>
                                    <span>{{ \Carbon\Carbon::parse($appointment->scheduled_at)->format('d/m/Y') }}</span>
                                </div>
                                <div class="flex items-center gap-2 text-gray-700">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    <span>{{ \Carbon\Carbon::parse($appointment->scheduled_at)->format('H:i') }}
                                        ({{ $appointment->duration }} min)</span>
                                </div>
                            </div>

                            @if ($appointment->status == 'completed' && !$appointment->deal)
                                <div class="mt-4 pt-4 border-t border-gray-200" onclick="event.stopPropagation()">
                                    <button onclick="createDeal({{ $appointment->id }})" 
                                        class="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-gradient-to-r from-indigo-500 to-indigo-600 hover:from-indigo-600 hover:to-indigo-700 text-white font-semibold rounded-lg transition-all shadow-sm hover:shadow">
                                        <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 6v6m0 0v6m0-6h6m-6 0H6"></path>
                                        </svg>
                                        Create Deal (Lead)
                                    </button>
                                </div>
                            @elseif($appointment->status == 'completed' && $appointment->deal)
                                <div class="mt-4 pt-4 border-t border-gray-200">
                                    <div class="flex items-center gap-2 text-sm text-green-600 bg-green-50 px-3 py-2 rounded-lg">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                        </svg>
                                        <span class="font-medium">Deal sudah dibuat (Stage: {{ ucfirst($appointment->deal->stage) }})</span>
                                    </div>
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </div>

    @push('scripts')
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script>
            function completeAppointment(event, id) {
                event.stopPropagation();
                Swal.fire({
                    title: 'Complete Appointment',
                    text: 'Mark this appointment as completed?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#10b981',
                    cancelButtonColor: '#6b7280',
                    confirmButtonText: 'Yes, Complete!',
                    cancelButtonText: 'Cancel'
                }).then((result) => {
                    if (result.isConfirmed) {
                        submitStatusChange(id, 'completed');
                    }
                });
            }

            function cancelAppointment(event, id) {
                event.stopPropagation();
                Swal.fire({
                    title: 'Cancel Appointment',
                    text: 'Are you sure you want to cancel this appointment?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#ef4444',
                    cancelButtonColor: '#6b7280',
                    confirmButtonText: 'Yes, Cancel!',
                    cancelButtonText: 'No'
                }).then((result) => {
                    if (result.isConfirmed) {
                        submitStatusChange(id, 'cancelled');
                    }
                });
            }

            function deleteAppointment(event, id) {
                event.stopPropagation();
                Swal.fire({
                    title: 'Delete Appointment',
                    text: 'This action cannot be undone!',
                    icon: 'error',
                    showCancelButton: true,
                    confirmButtonColor: '#ef4444',
                    cancelButtonColor: '#6b7280',
                    confirmButtonText: 'Yes, Delete!',
                    cancelButtonText: 'Cancel'
                }).then((result) => {
                    if (result.isConfirmed) {
                        const form = document.createElement('form');
                        form.method = 'POST';
                        form.action = `/appointments/${id}`;

                        const csrf = document.createElement('input');
                        csrf.type = 'hidden';
                        csrf.name = '_token';
                        csrf.value = '{{ csrf_token() }}';

                        const method = document.createElement('input');
                        method.type = 'hidden';
                        method.name = '_method';
                        method.value = 'DELETE';

                        form.appendChild(csrf);
                        form.appendChild(method);
                        document.body.appendChild(form);
                        form.submit();
                    }
                });
            }

            function submitStatusChange(id, status) {
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = `/appointments/${id}/status`;

                const csrf = document.createElement('input');
                csrf.type = 'hidden';
                csrf.name = '_token';
                csrf.value = '{{ csrf_token() }}';

                const method = document.createElement('input');
                method.type = 'hidden';
                method.name = '_method';
                method.value = 'PATCH';

                const statusField = document.createElement('input');
                statusField.type = 'hidden';
                statusField.name = 'status';
                statusField.value = status;

                form.appendChild(csrf);
                form.appendChild(method);
                form.appendChild(statusField);
                document.body.appendChild(form);
                form.submit();
            }

            function createDeal(appointmentId) {
                Swal.fire({
                    title: 'Create Deal from Appointment',
                    html: `
                        <div class="text-left space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Deal Title</label>
                                <input type="text" id="deal-title" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="e.g., Website Development Project">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Deal Value (Rp)</label>
                                <input type="number" id="deal-value" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="0">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Category</label>
                                <input type="text" id="deal-category" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="e.g., Software Development">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Notes</label>
                                <textarea id="deal-note" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Additional notes about this deal..."></textarea>
                            </div>
                            <div class="bg-indigo-50 p-3 rounded-lg">
                                <p class="text-sm text-indigo-800"><strong>Info:</strong> Deal will be created with stage <strong>"Lead"</strong></p>
                            </div>
                        </div>
                    `,
                    icon: 'info',
                    showCancelButton: true,
                    confirmButtonColor: '#6366f1',
                    cancelButtonColor: '#6b7280',
                    confirmButtonText: 'Create Deal',
                    cancelButtonText: 'Cancel',
                    width: '600px',
                    preConfirm: () => {
                        const title = document.getElementById('deal-title').value;
                        const value = document.getElementById('deal-value').value;
                        const category = document.getElementById('deal-category').value;
                        const note = document.getElementById('deal-note').value;

                        if (!title) {
                            Swal.showValidationMessage('Please enter a deal title');
                            return false;
                        }

                        return {
                            title: title,
                            deal_value: value || null,
                            category: category,
                            note: note
                        };
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        const form = document.createElement('form');
                        form.method = 'POST';
                        form.action = `/appointments/${appointmentId}/create-deal`;

                        const csrf = document.createElement('input');
                        csrf.type = 'hidden';
                        csrf.name = '_token';
                        csrf.value = '{{ csrf_token() }}';

                        const titleInput = document.createElement('input');
                        titleInput.type = 'hidden';
                        titleInput.name = 'title';
                        titleInput.value = result.value.title;

                        const valueInput = document.createElement('input');
                        valueInput.type = 'hidden';
                        valueInput.name = 'deal_value';
                        valueInput.value = result.value.deal_value || '';

                        const categoryInput = document.createElement('input');
                        categoryInput.type = 'hidden';
                        categoryInput.name = 'category';
                        categoryInput.value = result.value.category;

                        const noteInput = document.createElement('input');
                        noteInput.type = 'hidden';
                        noteInput.name = 'note';
                        noteInput.value = result.value.note;

                        form.appendChild(csrf);
                        form.appendChild(titleInput);
                        form.appendChild(valueInput);
                        form.appendChild(categoryInput);
                        form.appendChild(noteInput);
                        document.body.appendChild(form);
                        form.submit();
                    }
                });
            }
        </script>
    @endpush
</x-app-layout>