@section("title", "BizMan | Create Appointment")

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Create Appointment') }}
        </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 items-center justify-between gap-2">
                <div class="flex flex-col gap-1">
                    <p class="font-semibold text-3xl max-sm:text-2xl text-black">Create Appointment</p>
                    <p>Buat jadwal pertemuan/perjanjian dengan stakeholder terkait.</p>
                </div>
                <a href="{{ route('appointments.index') }}"
                    class="bg-gray-500 whitespace-nowrap hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
                    Back
                </a>
            </div>
            
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    <form action="{{ route('appointments.store') }}" method="POST">
                        @csrf
                        <div class="mb-4">
                            <label for="customer_id" class="block text-sm font-medium text-gray-700">
                                Customer <span class="text-red-500">*</span>
                            </label>
                            <select name="customer_id" 
                                    id="customer_id"
                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 @error('customer_id') border-red-500 @enderror">
                                <option value="">-- Select Customer --</option>
                                @foreach($customers as $customer)
                                    <option value="{{ $customer->id }}" 
                                            data-name="{{ $customer->name }}"
                                            data-company="{{ $customer->company_name }}"
                                            data-email="{{ $customer->email }}"
                                            data-phone="{{ $customer->phone }}"
                                            {{ old('customer_id') == $customer->id ? 'selected' : '' }}>
                                        {{ $customer->name }} - {{ $customer->company_name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('customer_id')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div id="customer-info" class="mb-4 p-4 bg-blue-50 border border-blue-200 rounded-lg" style="display: none;">
                            <h4 class="font-semibold text-gray-700 mb-3">Customer Information</h4>
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <p class="text-sm text-gray-600">Name</p>
                                    <p class="font-medium text-gray-900" id="display-name">-</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-600">Company</p>
                                    <p class="font-medium text-gray-900" id="display-company">-</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-600">Email</p>
                                    <p class="font-medium text-gray-900" id="display-email">-</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-600">Phone</p>
                                    <p class="font-medium text-gray-900" id="display-phone">-</p>
                                </div>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label for="title" class="block text-sm font-medium text-gray-700">
                                Appointment Title <span class="text-red-500">*</span>
                            </label>
                            <input type="text" 
                                   name="title" 
                                   id="title" 
                                   value="{{ old('title') }}"
                                   placeholder="e.g., Sales Meeting - Product Demo"
                                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 @error('title') border-red-500 @enderror">
                            @error('title')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="grid max-sm:grid-cols-1 max-sm:gap-0 grid-cols-3 gap-4">
                            <div class="mb-4">
                                <label for="scheduled_at" class="block text-sm font-medium text-gray-700">
                                    Date <span class="text-red-500">*</span>
                                </label>
                                <input type="date" 
                                       name="scheduled_at" 
                                       id="scheduled_at" 
                                       value="{{ old('scheduled_at', date('Y-m-d')) }}"
                                       class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 @error('scheduled_at') border-red-500 @enderror">
                                @error('scheduled_at')
                                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <div class="mb-4">
                                <label for="time" class="block text-sm font-medium text-gray-700">
                                    Time <span class="text-red-500">*</span>
                                </label>
                                <input type="time" 
                                       name="time" 
                                       id="time" 
                                       value="{{ old('time', '10:00') }}"
                                       class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 @error('time') border-red-500 @enderror">
                                @error('time')
                                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <div class="mb-4">
                                <label for="duration" class="block text-sm font-medium text-gray-700">
                                    Duration (minutes) <span class="text-red-500">*</span>
                                </label>
                                <select name="duration" 
                                        id="duration"
                                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 @error('duration') border-red-500 @enderror">
                                    <option value="15" {{ old('duration') == 15 ? 'selected' : '' }}>15 minutes</option>
                                    <option value="30" {{ old('duration') == 30 ? 'selected' : '' }}>30 minutes</option>
                                    <option value="45" {{ old('duration') == 45 ? 'selected' : '' }}>45 minutes</option>
                                    <option value="60" {{ old('duration', 60) == 60 ? 'selected' : '' }}>1 hour</option>
                                    <option value="90" {{ old('duration') == 90 ? 'selected' : '' }}>1.5 hours</option>
                                    <option value="120" {{ old('duration') == 120 ? 'selected' : '' }}>2 hours</option>
                                    <option value="180" {{ old('duration') == 180 ? 'selected' : '' }}>3 hours</option>
                                </select>
                                @error('duration')
                                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-6">
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Team Members <span class="text-gray-400 text-xs">(Optional)</span>
                            </label>
                            <p class="text-sm text-gray-500 mb-3">You ({{ auth()->user()->name }}) will be automatically assigned to this appointment.</p>
                            
                            <div class="border border-gray-200 rounded-lg p-4 bg-gray-50">
                                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
                                    @foreach($users as $user)
                                        @if($user->id !== auth()->id())
                                        <label class="flex items-center gap-2 p-2 bg-white border border-gray-200 rounded-lg hover:bg-purple-50 hover:border-purple-300 cursor-pointer transition-colors">
                                            <input type="checkbox" 
                                                   name="members[]" 
                                                   value="{{ $user->id }}"
                                                   {{ in_array($user->id, old('members', [])) ? 'checked' : '' }}
                                                   class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
                                            <div class="flex items-center gap-2">
                                                <svg class="w-4 h-4 text-gray-500" 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="flex-1 text-sm font-medium text-gray-700">{{ $user->name }}</span>
                                            </div>
                                        </label>
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                            @error('members')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div id="selected-members" class="mb-6 p-4 bg-purple-50 border border-purple-200 rounded-lg" style="display: none;">
                            <div class="flex items-center gap-2 mb-2">
                                <svg class="w-5 h-5 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">Selected Team Members:</span>
                            </div>
                            <div id="member-badges" class="flex flex-wrap gap-2">
                                <span class="inline-flex items-center gap-1 px-3 py-1 bg-purple-600 text-white border border-purple-700 rounded-full text-sm font-medium">
                                    <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>
                                    {{ auth()->user()->name }} (You)
                                </span>
                            </div>
                        </div>

                        <div class="mb-6">
                            <label for="notes" class="block text-sm font-medium text-gray-700">
                                Meeting Notes <span class="text-gray-400 text-xs">(Optional)</span>
                            </label>
                            <textarea name="notes" 
                                      id="notes" 
                                      rows="4"
                                      placeholder="Agenda, discussion points, preparation needed..."
                                      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 @error('notes') border-red-500 @enderror">{{ old('notes') }}</textarea>
                            @error('notes')
                                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="mb-6 p-4 bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-200 rounded-lg">
                            <h4 class="font-semibold text-gray-800 mb-3 flex items-center gap-2">
                                <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                                </svg>
                                Appointment Summary
                            </h4>
                            <div class="space-y-2 text-sm">
                                <div class="flex items-center gap-2">
                                    <svg class="w-4 h-4 text-gray-500" 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 class="text-gray-600">Scheduled:</span>
                                    <span id="summary-datetime" class="font-medium text-gray-900">-</span>
                                </div>
                                <div class="flex items-center gap-2">
                                    <svg class="w-4 h-4 text-gray-500" 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 class="text-gray-600">Duration:</span>
                                    <span id="summary-duration" class="font-medium text-gray-900">60 minutes</span>
                                </div>
                                <div class="flex items-center gap-2">
                                    <svg class="w-4 h-4 text-gray-500" 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="text-gray-600">Team Members:</span>
                                    <span id="summary-members" class="font-medium text-gray-900">1</span>
                                </div>
                            </div>
                        </div>

                        <div class="flex items-center justify-between">
                            <a href="{{ route('appointments.index') }}"
                                class="bg-gray-400 hover:bg-gray-500 text-white font-bold py-2 px-6 rounded-lg">
                                Cancel
                            </a>
                            <button type="submit"
                                class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg flex items-center gap-2">
                                <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="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>
                                Create Appointment
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const customerSelect = document.getElementById('customer_id');
            const customerInfoDiv = document.getElementById('customer-info');
            const selectedMembersDiv = document.getElementById('selected-members');
            const memberBadges = document.getElementById('member-badges');
            const memberCheckboxes = document.querySelectorAll('input[name="members[]"]');
            
            const dateInput = document.getElementById('scheduled_at');
            const timeInput = document.getElementById('time');
            const durationSelect = document.getElementById('duration');

            function displayCustomerInfo() {
                const selectedOption = customerSelect.options[customerSelect.selectedIndex];
                
                if (selectedOption.value) {
                    const name = selectedOption.getAttribute('data-name');
                    const company = selectedOption.getAttribute('data-company');
                    const email = selectedOption.getAttribute('data-email');
                    const phone = selectedOption.getAttribute('data-phone');

                    document.getElementById('display-name').textContent = name;
                    document.getElementById('display-company').textContent = company;
                    document.getElementById('display-email').textContent = email;
                    document.getElementById('display-phone').textContent = phone;

                    customerInfoDiv.style.display = 'block';
                } else {
                    customerInfoDiv.style.display = 'none';
                }
            }

            function updateSelectedMembers() {
                const checkedBoxes = Array.from(memberCheckboxes).filter(cb => cb.checked);
                const masterAdminBadge = memberBadges.querySelector('.bg-purple-600');
                memberBadges.innerHTML = '';
                memberBadges.appendChild(masterAdminBadge);
                
                if (checkedBoxes.length > 0) {
                    selectedMembersDiv.style.display = 'block';
                    
                    checkedBoxes.forEach(checkbox => {
                        const label = checkbox.closest('label');
                        const userName = label.querySelector('span').textContent;
                        
                        const badge = document.createElement('span');
                        badge.className = 'inline-flex items-center gap-1 px-3 py-1 bg-white border border-purple-200 rounded-full text-sm text-purple-700';
                        badge.innerHTML = `
                            <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>
                            ${userName}
                        `;
                        memberBadges.appendChild(badge);
                    });
                } else {
                    selectedMembersDiv.style.display = 'block'; 
                }
                updateSummary();
            }

            function updateSummary() {
                const date = dateInput.value;
                const time = timeInput.value;
                const duration = durationSelect.value;
                const memberCount = Array.from(memberCheckboxes).filter(cb => cb.checked).length + 1; // +1 for master admin
                
                if (date && time) {
                    const dateObj = new Date(date + 'T' + time);
                    const formattedDate = dateObj.toLocaleDateString('id-ID', { 
                        weekday: 'long', 
                        year: 'numeric', 
                        month: 'long', 
                        day: 'numeric' 
                    });
                    const formattedTime = dateObj.toLocaleTimeString('id-ID', { 
                        hour: '2-digit', 
                        minute: '2-digit' 
                    });
                    
                    document.getElementById('summary-datetime').textContent = `${formattedDate}, ${formattedTime}`;
                } else {
                    document.getElementById('summary-datetime').textContent = '-';
                }
                
                document.getElementById('summary-duration').textContent = `${duration} minutes`;
                document.getElementById('summary-members').textContent = memberCount;
            }

            customerSelect.addEventListener('change', displayCustomerInfo);            
            memberCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', updateSelectedMembers);
            });

            dateInput.addEventListener('change', updateSummary);
            timeInput.addEventListener('change', updateSummary);
            durationSelect.addEventListener('change', updateSummary);

            if (customerSelect.value) {
                displayCustomerInfo();
            }
            selectedMembersDiv.style.display = 'block';
            updateSelectedMembers();
            updateSummary();
        });
    </script>
    @endpush
</x-app-layout>