@extends('layouts.app')

@section('title', 'Create Appointment')
@section('no-page-header')

@section('content')
<div class="space-y-4">
    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
        <div class="px-4 py-3 border-b border-gray-200 bg-gray-50 rounded-t-lg">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <h5 class="text-lg font-semibold text-gray-900">Create New Appointment</h5>
                <div class="flex flex-col sm:flex-row gap-2">
                    <a href="{{ route('appointments.index') }}" class="inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                        <i class="fas fa-arrow-left mr-2"></i>Back to Appointments
                    </a>
                </div>
            </div>
        </div>

        <div class="p-4">
            <form action="{{ route('appointments.store') }}" method="POST" class="space-y-4">
                @csrf

                <!-- Basic Information -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="client_id" class="block text-sm font-medium text-gray-700">Client *</label>
                        <select id="client_id" name="client_id" class="client-search mt-1 block w-full" required>
                            <option value="">Select a client</option>
                            @foreach($clients as $client)
                                <option value="{{ $client->id }}">{{ $client->name }}</option>
                            @endforeach
                        </select>
                        @error('client_id')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="appointment_title" class="block text-sm font-medium text-gray-700">Appointment Title *</label>
                        <input type="text" id="appointment_title" name="appointment_title" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 uppercase" placeholder="e.g., Team Meeting" required>
                        @error('appointment_title')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="appointment_date_display" class="block text-sm font-medium text-gray-700">Date *</label>
                        <input type="hidden" id="appointment_date" name="appointment_date" value="{{ date('Y-m-d') }}" required>

                        <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('appointment_date') border-red-500 @enderror" id="appointment_date_display"
                                    value="" placeholder="dd-mm-yyyy" autocomplete="off">
                        @error('appointment_date')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="appointment_time" class="block text-sm font-medium text-gray-700">Time *</label>
                        <input type="time" id="appointment_time" name="appointment_time" value="{{ date('H:i') }}" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500" required>
                        @error('appointment_time')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="no_of_persons" class="block text-sm font-medium text-gray-700">Number of Persons *</label>
                        <input type="number" id="no_of_persons" name="no_of_persons" value="{{ old('no_of_persons') }}" min="1" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 disabled:bg-gray-100 disabled:cursor-not-allowed" placeholder="Select a client first" required disabled>
                        <p id="persons-limit-help" class="mt-1 text-xs text-gray-500">Select a client to load its members.</p>
                        @error('no_of_persons')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- <div>
                        <label for="contact" class="block text-sm font-medium text-gray-700">Contact Number</label>
                        <input type="text" id="contact" name="contact" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500" placeholder="Phone or email">
                        @error('contact')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div> -->
                    <div>
    <label for="contact" class="block text-sm font-medium text-gray-700">
        Contact Number
    </label>
    <input
        type="text" id="contact" name="contact" minlength="10" maxlength="11" pattern="[0-9]{10,11}" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500" placeholder="Enter contact number">
    @error('contact')
        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
    @enderror
</div>

<script>
    document.getElementById('contact').addEventListener('input', function () {
        // Only numbers allowed
        this.value = this.value.replace(/\D/g, '');

        // Max 11 digits
        if (this.value.length > 11) {
            this.value = this.value.slice(0, 11);
        }
    });
</script>

                </div>

                <!-- Notes -->
                <div>
                    <label for="notes" class="block text-sm font-medium text-gray-700">Notes</label>
                    <textarea id="notes" name="notes" rows="2" class="mt-1 block w-full px-3 py-2 border border-gray-300 bg-white text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 uppercase" placeholder="Additional notes or details..."></textarea>
                    @error('notes')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Attendees -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Attendees *</label>
                    <div id="attendees-container" class="space-y-1.5 max-h-32 overflow-y-auto border border-gray-200 rounded-md p-2.5 bg-gray-50">
                        <p class="text-sm text-gray-500">Select a client to load available members</p>
                    </div>
                    <p id="attendees-count-help" class="mt-1 text-xs text-gray-500">Selected: 0</p>
                    @error('attendees')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Form Actions -->
                <div class="flex justify-end gap-2 pt-4 border-t border-gray-200">
                    <a href="{{ route('appointments.index') }}" class="inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                        Cancel
                    </a>
                    <button type="submit" class="inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                        <i class="fas fa-save mr-2"></i>Create Appointment
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
<style>
    .select2-container .select2-selection--single { height: 36px; border-color: #d1d5db; border-radius: .375rem; }
    .select2-container .select2-selection--single .select2-selection__rendered { line-height: 34px; padding-left: .625rem; font-size: .8125rem; }
    .select2-container .select2-selection--single .select2-selection__arrow { height: 34px; }
    .select2-container--default.select2-container--focus .select2-selection--single { border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,.2); }
    .select2-dropdown { border-color: #d1d5db; border-radius: .375rem; overflow: hidden; }
    .select2-search--dropdown { padding: .375rem; }
    .select2-container--default .select2-search--dropdown .select2-search__field { height: 32px; padding: .25rem .5rem; border-color: #d1d5db; border-radius: .25rem; font-size: .8125rem; }
    .select2-container--default .select2-results > .select2-results__options { max-height: 210px; }
    .select2-results__option { min-height: 30px; padding: .375rem .625rem; font-size: .8125rem; line-height: 1.25rem; }
</style>
@endpush

@push('scripts')

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
                    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
                    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
                    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>


<script>
document.addEventListener('DOMContentLoaded', function() {
    const clientSelect = document.getElementById('client_id');
    const attendeesContainer = document.getElementById('attendees-container');
    const personsInput = document.getElementById('no_of_persons');
    const personsLimitHelp = document.getElementById('persons-limit-help');
    const attendeesCountHelp = document.getElementById('attendees-count-help');

    $('.client-search').select2({
        placeholder: 'Search or select a client',
        allowClear: true,
        width: '100%'
    });

    function validateAttendeeCount(showError = false) {
        const expected = parseInt(personsInput.value, 10) || 0;
        const selected = attendeesContainer.querySelectorAll('input[name="attendees[]"]:checked').length;
        const matches = expected > 0 && selected === expected;

        attendeesCountHelp.textContent = expected > 0
            ? 'Selected: ' + selected + ' of ' + expected + ' required.'
            : 'Selected: ' + selected + '. Enter Number of Persons.';
        attendeesCountHelp.className = 'mt-1 text-xs ' + (matches ? 'text-green-600' : (showError ? 'text-red-600 font-medium' : 'text-gray-500'));
        attendeesContainer.classList.toggle('border-red-500', showError && !matches);

        return matches;
    }

    personsInput.addEventListener('input', validateAttendeeCount);
    attendeesContainer.addEventListener('change', validateAttendeeCount);

    function setPersonsLimit(memberCount) {
        personsInput.disabled = memberCount < 1;
        personsInput.max = memberCount > 0 ? memberCount : '';
        personsInput.placeholder = memberCount > 0 ? 'Enter 1 to ' + memberCount : 'No active members available';
        personsLimitHelp.textContent = memberCount > 0
            ? 'Allowed: 1 to ' + memberCount + ' (active members: ' + memberCount + ').'
            : 'This client has no active members.';

        if (memberCount > 0 && parseInt(personsInput.value, 10) > memberCount) {
            personsInput.value = memberCount;
        }
    }


    $(clientSelect).on('change', function() {
        const clientId = this.value;
        personsInput.disabled = true;
        personsInput.removeAttribute('max');
        personsInput.placeholder = clientId ? 'Loading member limit...' : 'Select a client first';
        personsLimitHelp.textContent = clientId ? 'Loading active members...' : 'Select a client to load its members.';

        if (clientId) {
            // Show loading state
            attendeesContainer.innerHTML = '<p class="text-sm text-blue-500">Loading members...</p>';

            fetch(`/appointments/api/get-customer-members/${clientId}`)
                .then(response => {
                    console.log('Response status:', response.status);
                    return response.json();
                })
                .then(data => {
                    console.log('Response data:', data);
                    setPersonsLimit(data.success && Array.isArray(data.members) ? data.members.length : 0);

                    if (data.success && data.members.length > 0) {
                        let html = '';
                        data.members.forEach(member => {
                            const isChecked = member.required_auth === true ? 'checked' : '';
                            const isDisabled = member.required_auth === true ? 'disabled' : '';
                            const requiredBadge = member.required_auth === true ? '<span class="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800"><i class="fas fa-exclamation-triangle mr-1"></i>Required</span>' : '';
                            const optionalBadge = member.required_auth === false ? '<span class="ml-2 inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"><i class="fas fa-check-circle mr-1"></i>Optional</span>' : '';

                            html += `
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center flex-1">
                                        <input type="checkbox" id="member_${member.id}" name="attendees[]" value="${member.id}" class="mr-2 rounded border-gray-300 text-primary-600 focus:ring-primary-500" ${isChecked} ${isDisabled}>
                                        <label for="member_${member.id}" class="text-sm text-gray-700 cursor-pointer ${isDisabled ? 'opacity-60' : ''}">
                                            ${member.name}
                                            ${member.email ? `<span class="text-gray-500">(${member.email})</span>` : ''}
                                            ${member.mobile ? `<span class="text-gray-500">(${member.mobile})</span>` : ''}
                                        </label>
                                    </div>
                                    <div>
                                        ${requiredBadge}
                                        ${optionalBadge}
                                    </div>
                                </div>
                            `;
                        });
                        attendeesContainer.innerHTML = html;
                        validateAttendeeCount();
                    } else if (data.success && data.members.length === 0) {
                        attendeesContainer.innerHTML = `<p class="text-sm text-gray-500">No active members found for ${data.client_name || 'this client'}</p>`;
                        validateAttendeeCount();
                    } else {
                        attendeesContainer.innerHTML = `<p class="text-sm text-red-500">Error: ${data.message}</p>`;
                    }
                })
                .catch(error => {
                    console.error('Error loading members:', error);
                    personsInput.disabled = true;
                    personsInput.placeholder = 'Unable to load member limit';
                    personsLimitHelp.textContent = 'Unable to load active members. Please select the client again.';
                    attendeesContainer.innerHTML = `<p class="text-sm text-red-500">Network error: ${error.message}</p>`;
                });
        } else {
            personsInput.disabled = true;
            attendeesContainer.innerHTML = '<p class="text-sm text-gray-500">Select a client to load available members</p>';
        }
    });

    // Function to automatically include required attendees
    function includeRequiredAttendees() {
        const requiredCheckboxes = document.querySelectorAll('input[name="attendees[]"][disabled]');
        const form = document.querySelector('form[action="{{ route("appointments.store") }}"]');

        // Remove existing hidden inputs for required attendees
        const existingHiddenInputs = form.querySelectorAll('input[name="attendees[]"][type="hidden"]');
        existingHiddenInputs.forEach(input => input.remove());

        requiredCheckboxes.forEach(checkbox => {
            // Add hidden input for each required attendee since disabled checkboxes don't submit
            const hiddenInput = document.createElement('input');
            hiddenInput.type = 'hidden';
            hiddenInput.name = 'attendees[]';
            hiddenInput.value = checkbox.value;
            form.appendChild(hiddenInput);
        });
    }

    // Form validation before submission
    const appointmentForm = document.querySelector('form[action="{{ route("appointments.store") }}"]');
    if (appointmentForm) {
        appointmentForm.addEventListener('submit', function(e) {
            // Automatically include required attendees before validation
            includeRequiredAttendees();

            if (!validateAttendeeCount(true)) {
                e.preventDefault();
                const firstAttendee = attendeesContainer.querySelector('input[name="attendees[]"]:not(:disabled)');
                if (firstAttendee) firstAttendee.focus();
            }
        });
    }
});
function formatIsoToDisplay(isoDate) {
    if (!isoDate) return '';

    const parts = isoDate.split('-');
    return `${parts[2]}-${parts[1]}-${parts[0]}`;
}

function formatDisplayToIso(displayDate) {
    if (!displayDate) return '';

    const parts = displayDate.split('-');
    return `${parts[2]}-${parts[1]}-${parts[0]}`;
}

function updateContractEndDate() {
    // Empty function to avoid JS error
}

                            $(function() {
                            var startIso = document.getElementById('appointment_date').value;
                            document.getElementById('appointment_date_display').value = formatIsoToDisplay(startIso);

                            $('#appointment_date_display').datepicker({
                                dateFormat: 'dd-mm-yy',
                                onSelect: function(dateText) {
                                    document.getElementById('appointment_date').value = formatDisplayToIso(dateText);
                                    updateContractEndDate();
                                }
                            });

                            document.getElementById('appointment_date_display').addEventListener('change', function() {
                                var iso = formatDisplayToIso(this.value);
                                document.getElementById('appointment_date').value = iso;
                                updateContractEndDate();
                            });

                            updateContractEndDate();
                        });
</script>
@endpush