@extends('layouts.simple.master')

@section('title', trans(app()->getLocale() . '.calendar'))

@section('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/calendar.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/intltelinput.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/tagify.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/flatpickr/flatpickr.min.css') }}">
    <style>
        #external-events-list .fc-event-main {
            max-width: 100%;
            overflow: hidden;
            word-wrap: break-word;
        }
        .fc-event-main {
            max-width: 100%;
            overflow: hidden;
        }
        .fc-event-main .text-truncate {
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
@endsection

@section('main_content')
    <div class="container-fluid">
        <div class="page-title">
            <div class="row">
                <div class="col-sm-6">
                    <h3>{{ trans(app()->getLocale() . '.calendar') }}</h3>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}"> <svg class="stroke-icon">
                                    <use href="{{ asset('assets/svg/icon-sprite.svg#stroke-home') }}"></use>
                                </svg></a></li>
                        <li class="breadcrumb-item active">{{ trans(app()->getLocale() . '.calendar') }}</li>
                    </ol>
                </div>
            </div>
        </div>
    </div><!-- Container-fluid starts-->
    <div class="container-fluid calendar-basic">
        <div class="card">
            <div class="card-body">
                <div class="row" id="wrap">
                    <div class="col-xxl-3 box-col-12">
                        <div class="md-sidebar mb-3">
                            <a class="btn btn-primary md-sidebar-toggle" href="#!">{{ trans(app()->getLocale() . '.calendar_filter') }}</a>
                            <div class="md-sidebar-aside job-left-aside custom-scrollbar">
                                <div id="external-events">
                                    <button class="btn btn-primary w-100 mb-4" type="button" data-bs-toggle="modal" data-bs-target="#CreateMeetingModal">
                                        <i class="fa-solid fa-plus me-2"></i>{{ trans(app()->getLocale() . '.create_meeting') }}
                                    </button>
                                    <h6>{{ trans(app()->getLocale() . '.pending_meeting_requests') }}</h6>
                                    <div id="external-events-list">
                                        @forelse($pendingMeetings as $meeting)
                                            <div class="fc-event fc-h-event fc-daygrid-event fc-daygrid-block-event"
                                                 data-meeting-id="{{ $meeting->id }}"
                                                 data-user-name="{{ $meeting->user->name }}"
                                                 data-meeting-type="{{ $meeting->meeting_type }}"
                                                 data-user-type="{{ $meeting->user->type }}"
                                                 data-company-id="{{ $meeting->company_id }}"
                                                 data-company-name="{{ $meeting->company ? $meeting->company->name : '' }}"
                                                 data-company-description="{{ $meeting->company ? $meeting->company->description : '' }}">
                                                <div class="fc-event-main">
                                                    <i class="fa-solid fa-user me-2"></i>{{ $meeting->user->name }}
                                                    <br>
                                                    <small class="text-muted">{{ ucfirst(str_replace('_', ' ', $meeting->meeting_type)) }}</small>
                                                    @if($meeting->company_id && $meeting->user->type === 'entrepreneur')
                                                        <br>
                                                        <small class="text-primary fw-bold d-block text-truncate" style="max-width: 100%;">
                                                            <i class="fa-solid fa-building me-1"></i>{{ $meeting->company->name }}
                                                        </small>
                                                        @if($meeting->company->description)
                                                            <br>
                                                            <small class="text-muted d-block text-truncate" style="font-size: 0.7rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="{{ $meeting->company->description }}">{{ Str::limit($meeting->company->description, 40) }}</small>
                                                        @endif
                                                    @endif
                                                </div>
                                            </div>
                                        @empty
                                            <p class="text-muted text-center">{{ trans(app()->getLocale() . '.no_pending_meetings') }}</p>
                                        @endforelse
                                    </div>
                                    <p>
                                        <input class="checkbox_animated" id="drop-remove" type="checkbox">
                                        <label class="mb-0" for="drop-remove">{{ trans(app()->getLocale() . '.remove_after_drop') }}</label>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-9 box-col-12">
                        <div class="calendar-default" id="calendar-container">
                            <div id="calendar"></div>
                            <div class="modal fade" id="CreateMeetingModal" tabindex="-1" role="dialog"
                                aria-labelledby="CreateMeetingModal" aria-hidden="true">
                                <div class="modal-dialog modal-lg modal-dialog-centered">
                                    <div class="modal-content create-event">
                                        <div class="modal-header">
                                            <h5 class="mb-0">{{ trans(app()->getLocale() . '.create_verification_meeting') }}</h5>
                                            <button class="btn-close" type="button"
                                                data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body custom-input">
                                            <form id="createMeetingForm" action="{{ route('admin.meeting-schedule.store') }}" method="POST" class="row g-3">
                                                @csrf
                                                <div class="col-md-12">
                                                    <label class="form-label" for="user_id">{{ trans(app()->getLocale() . '.user') }} <span class="text-danger">*</span></label>
                                                    <select class="form-control" id="user_id" name="user_id" required>
                                                        <option value="">{{ trans(app()->getLocale() . '.select_user') }}</option>
                                                        @foreach($users as $user)
                                                            <option value="{{ $user->id }}">{{ $user->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-12">
                                                    <label class="form-label" for="meeting_type">{{ trans(app()->getLocale() . '.meeting_type') }} <span class="text-danger">*</span></label>
                                                    <select class="form-control" id="meeting_type" name="meeting_type" required>
                                                        <option value="">{{ trans(app()->getLocale() . '.select_meeting_type') }}</option>
                                                        <option value="in_person">{{ trans(app()->getLocale() . '.in_person') }}</option>
                                                        <option value="online">{{ trans(app()->getLocale() . '.online') }}</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-12" id="meeting_location_field">
                                                    <label class="form-label" for="meeting_location">{{ trans(app()->getLocale() . '.meeting_location') }} <span class="text-danger">*</span></label>
                                                    <input class="form-control" id="meeting_location" name="meeting_location"
                                                        type="text" placeholder="{{ trans(app()->getLocale() . '.enter_meeting_location') }}">
                                                </div>
                                                <div class="col-md-12" id="meeting_url_field" style="display: none;">
                                                    <label class="form-label" for="meeting_url">{{ trans(app()->getLocale() . '.meeting_url') }} <span class="text-danger">*</span></label>
                                                    <input class="form-control" id="meeting_url" name="meeting_url"
                                                        type="url" placeholder="{{ trans(app()->getLocale() . '.enter_meeting_url') }}">
                                                </div>
                                                <div class="col-md-12">
                                                    <label class="form-label" for="meeting_date">{{ trans(app()->getLocale() . '.meeting_date') }} <span class="text-danger">*</span></label>
                                                    <input class="form-control" id="meeting_date" name="meeting_date"
                                                        type="date" required>
                                                </div>
                                                <div class="col-sm-6">
                                                    <label class="form-label" for="start_time">{{ trans(app()->getLocale() . '.start_time') }} <span class="text-danger">*</span></label>
                                                    <input class="form-control" id="start_time" name="start_time"
                                                        type="time" required>
                                                </div>
                                                <div class="col-sm-6">
                                                    <label class="form-label" for="end_time">{{ trans(app()->getLocale() . '.end_time') }} <span class="text-danger">*</span></label>
                                                    <input class="form-control" id="end_time" name="end_time"
                                                        type="time" required>
                                                </div>
                                                <div class="col-12">
                                                    <div class="modal-footer px-0">
                                                        <button class="btn btn-secondary" type="button"
                                                            data-bs-dismiss="modal">{{ trans(app()->getLocale() . '.cancel') }}</button>
                                                        <button class="btn btn-primary" type="submit" id="submitMeetingForm">{{ trans(app()->getLocale() . '.create_meeting') }}</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Complete Meeting Details Modal -->
                            <div class="modal fade" id="CompleteMeetingModal" tabindex="-1" role="dialog" aria-labelledby="CompleteMeetingModal" aria-hidden="true">
                                <div class="modal-dialog modal-lg modal-dialog-centered">
                                    <div class="modal-content create-event">
                                        <div class="modal-header">
                                            <h5 class="mb-0">{{ trans(app()->getLocale() . '.complete_meeting_details') }}</h5>
                                            <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body custom-input">
                                            <form id="completeMeetingForm" method="POST" class="row g-3" action="">
                                                @csrf
                                                <div class="col-md-12">
                                                    <label class="form-label">{{ trans(app()->getLocale() . '.user') }}</label>
                                                    <input class="form-control" id="complete_user_name" type="text" readonly>
                                                </div>
                                                <div class="col-md-12" id="complete_company_info" style="display: none;">
                                                    <div class="alert alert-info">
                                                        <p class="mb-1 mt-2"><strong>{{ trans(app()->getLocale() . '.company_name') }}:</strong> <span id="complete_company_name"></span></p>
                                                        <p class="mb-0"><strong>{{ trans(app()->getLocale() . '.description') }}:</strong> <span id="complete_company_description"></span></p>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <label class="form-label" for="complete_meeting_type">{{ trans(app()->getLocale() . '.meeting_type') }} <span class="text-danger">*</span></label>
                                                    <select class="form-control" id="complete_meeting_type" name="meeting_type" required>
                                                        <option value="">{{ trans(app()->getLocale() . '.select_meeting_type') }}</option>
                                                        <option value="in_person">{{ trans(app()->getLocale() . '.in_person') }}</option>
                                                        <option value="online">{{ trans(app()->getLocale() . '.online') }}</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-12" id="complete_meeting_location_field">
                                                    <label class="form-label" for="complete_meeting_location">{{ trans(app()->getLocale() . '.meeting_location') }} <span class="text-danger">*</span></label>
                                                    <input class="form-control" id="complete_meeting_location" name="meeting_location"
                                                        type="text" placeholder="{{ trans(app()->getLocale() . '.enter_meeting_location') }}">
                                                </div>
                                                <div class="col-md-12" id="complete_meeting_url_field" style="display: none;">
                                                    <label class="form-label" for="complete_meeting_url">{{ trans(app()->getLocale() . '.meeting_url') }} <span class="text-danger">*</span></label>
                                                    <input class="form-control" id="complete_meeting_url" name="meeting_url"
                                                        type="url" placeholder="{{ trans(app()->getLocale() . '.enter_meeting_url') }}">
                                                </div>
                                                <div class="col-md-12">
                                                    <label class="form-label" for="complete_meeting_date">{{ trans(app()->getLocale() . '.meeting_date') }} <span class="text-danger">*</span></label>
                                                    <input class="form-control" id="complete_meeting_date" name="meeting_date"
                                                        type="date" required>
                                                </div>
                                                <div class="col-sm-6">
                                                    <label class="form-label" for="complete_start_time">{{ trans(app()->getLocale() . '.start_time') }} <span class="text-danger">*</span></label>
                                                    <input class="form-control" id="complete_start_time" name="start_time"
                                                        type="time" required>
                                                </div>
                                                <div class="col-sm-6">
                                                    <label class="form-label" for="complete_end_time">{{ trans(app()->getLocale() . '.end_time') }} <span class="text-danger">*</span></label>
                                                    <input class="form-control" id="complete_end_time" name="end_time"
                                                        type="time" required>
                                                </div>
                                                <div class="col-12">
                                                    <div class="modal-footer px-0">
                                                        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">{{ trans(app()->getLocale() . '.cancel') }}</button>
                                                        <button class="btn btn-primary" type="submit" id="submitCompleteMeetingForm">{{ trans(app()->getLocale() . '.complete_meeting') }}</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Meeting Details Modal -->
                            <div class="modal fade" id="MeetingDetailsModal" tabindex="-1" role="dialog" aria-labelledby="MeetingDetailsModal" aria-hidden="true">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">
                                        <div class="modal-body">
                                            <div class="modal-toggle-wrapper">
                                                <h4>{{ trans(app()->getLocale() . '.meeting') }} <strong class="txt-primary">{{ trans(app()->getLocale() . '.details') }}</strong></h4>
                                                <div class="mt-3">
                                                    <div class="mb-3">
                                                        <p class="mb-2"><strong>{{ trans(app()->getLocale() . '.user') }}:</strong> <span id="meetingDetailsUserName"></span></p>
                                                        <p class="mb-2"><strong>{{ trans(app()->getLocale() . '.account_type') }}:</strong> <span id="meetingDetailsAccountType"></span></p>
                                                        <div id="meetingDetailsCompany" style="display: none;" class="mb-2">
                                                            <p class="mb-1"><strong>{{ trans(app()->getLocale() . '.company_name') }}:</strong> <span id="meetingDetailsCompanyName"></span></p>
                                                            <p class="mb-0"><strong>{{ trans(app()->getLocale() . '.description') }}:</strong> <span id="meetingDetailsCompanyDescription"></span></p>
                                                        </div>
                                                        <p class="mb-2"><strong>{{ trans(app()->getLocale() . '.meeting_type') }}:</strong> <span id="meetingDetailsType"></span></p>
                                                        <p class="mb-2"><strong>{{ trans(app()->getLocale() . '.status') }}:</strong> <span id="meetingDetailsStatus"></span></p>
                                                        <p class="mb-2"><strong>{{ trans(app()->getLocale() . '.date') }}:</strong> <span id="meetingDetailsDate"></span></p>
                                                        <p class="mb-2"><strong>{{ trans(app()->getLocale() . '.start_time') }}:</strong> <span id="meetingDetailsStartTime"></span></p>
                                                        <p class="mb-2"><strong>{{ trans(app()->getLocale() . '.end_time') }}:</strong> <span id="meetingDetailsEndTime"></span></p>
                                                    </div>
                                                    <div id="meetingDetailsLocation" style="display: none;" class="mb-2">
                                                        <p class="mb-0"><strong>{{ trans(app()->getLocale() . '.location') }}:</strong> <span id="meetingDetailsLocationValue"></span></p>
                                                    </div>
                                                    <div id="meetingDetailsUrl" style="display: none;" class="mb-2">
                                                        <p class="mb-0"><strong>{{ trans(app()->getLocale() . '.url') }}:</strong> <a href="#" id="meetingDetailsUrlLink" target="_blank" class="text-primary"></a></p>
                                                    </div>
                                                </div>
                                                <div class="d-flex align-items-center gap-2 justify-content-end">
                                                    <button class="btn btn-danger d-flex align-items-center gap-2" type="button" id="cancelMeetingBtn" style="display: none;">
                                                        <i class="fa-solid fa-times"></i> {{ trans(app()->getLocale() . '.cancel_meeting') }}
                                                    </button>
                                                    <button class="btn bg-primary d-flex align-items-center gap-2 text-light" type="button" data-bs-dismiss="modal">
                                                        {{ trans(app()->getLocale() . '.close') }} <i data-feather="arrow-right"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- Container-fluid Ends-->
@endsection

@section('scripts')
    <script src="{{ asset('assets/js/calendar/fullcalendar.min.js') }}"></script>
    <script>
        // Meeting Schedule Calendar JS
        // Use jQuery ready to ensure toastr is loaded (toastr loads after @yield('scripts'))
        $(document).ready(function() {
            "use strict";

            var calendarEl = document.getElementById("calendar");
            var eventsUrl = "{{ route('admin.meeting-schedule.events') }}";

            var calendar = new FullCalendar.Calendar(calendarEl, {
                aspectRatio: 2,
                headerToolbar: {
                    left: "prev,next today",
                    center: "title",
                    right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",
                },
                initialView: "dayGridMonth",
                navLinks: true,
                editable: true,
                droppable: true,
                selectable: false,
                nowIndicator: true,
                drop: function(info) {
                    // When a pending meeting is dropped on the calendar
                    var meetingId = info.draggedEl.getAttribute('data-meeting-id');
                    var userName = info.draggedEl.getAttribute('data-user-name');
                    var meetingType = info.draggedEl.getAttribute('data-meeting-type');
                    var userType = info.draggedEl.getAttribute('data-user-type');
                    var companyId = info.draggedEl.getAttribute('data-company-id');
                    var companyName = info.draggedEl.getAttribute('data-company-name');
                    var companyDescription = info.draggedEl.getAttribute('data-company-description');
                    var dropDate = info.dateStr;

                    if (!meetingId) {
                        console.error('Meeting ID not found');
                        alert('Error: Meeting ID not found. Please try again.');
                        return;
                    }

                    // Store the meeting info and drop date
                    document.getElementById('complete_user_name').value = userName || '';
                    document.getElementById('complete_meeting_date').value = dropDate || '';
                    document.getElementById('complete_meeting_type').value = meetingType || '';

                    // Show/hide company information for entrepreneur accounts
                    var companyInfoDiv = document.getElementById('complete_company_info');
                    if (companyId && userType === 'entrepreneur' && companyName) {
                        companyInfoDiv.style.display = 'block';
                        document.getElementById('complete_company_name').textContent = companyName || 'N/A';
                        document.getElementById('complete_company_description').textContent = companyDescription || 'N/A';
                    } else {
                        companyInfoDiv.style.display = 'none';
                    }

                    // Clear previous values
                    document.getElementById('complete_meeting_location').value = '';
                    document.getElementById('complete_meeting_url').value = '';
                    document.getElementById('complete_start_time').value = '';
                    document.getElementById('complete_end_time').value = '';

                    // Show/hide location/URL fields based on meeting type
                    if (meetingType === 'in_person') {
                        document.getElementById('complete_meeting_location_field').style.display = 'block';
                        document.getElementById('complete_meeting_url_field').style.display = 'none';
                        document.getElementById('complete_meeting_location').required = true;
                        document.getElementById('complete_meeting_url').required = false;
                    } else if (meetingType === 'online') {
                        document.getElementById('complete_meeting_location_field').style.display = 'none';
                        document.getElementById('complete_meeting_url_field').style.display = 'block';
                        document.getElementById('complete_meeting_location').required = false;
                        document.getElementById('complete_meeting_url').required = true;
                    }

                    // Set form action to schedule route
                    var form = document.getElementById('completeMeetingForm');
                    var scheduleUrl = '{{ route("admin.meeting-schedule.schedule", ":id") }}';
                    form.action = scheduleUrl.replace(':id', meetingId);

                    console.log('Form action set to:', form.action);
                    console.log('Meeting ID:', meetingId);

                    // Open the complete meeting modal
                    var modal = new bootstrap.Modal(document.getElementById('CompleteMeetingModal'));
                    modal.show();

                    // Remove the event from the sidebar if checkbox is checked
                    if (document.getElementById('drop-remove').checked) {
                        info.draggedEl.remove();
                    }
                },
                events: function(fetchInfo, successCallback, failureCallback) {
                    fetch(eventsUrl)
                        .then(response => response.json())
                        .then(data => {
                            successCallback(data);
                        })
                        .catch(error => {
                            console.error('Error fetching events:', error);
                            failureCallback(error);
                        });
                },
                eventContent: function(arg) {
                    var event = arg.event;
                    var extendedProps = event.extendedProps;
                    var userName = extendedProps.user_name || '';
                    var meetingType = extendedProps.meeting_type || '';
                    var typeLabel = meetingType.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
                    var typeIcon = meetingType === 'in_person' ? '<i class="fa-solid fa-user me-1"></i>' : '<i class="fa-solid fa-video me-1"></i>';
                    var accountType = extendedProps.account_type || 'investor';
                    var companyName = extendedProps.company_name || '';
                    var showCompany = extendedProps.company_id && extendedProps.user_type === 'entrepreneur';

                    var companyHtml = '';
                    if (showCompany && companyName) {
                        companyHtml = '<div class="d-flex align-items-center gap-1 mt-1" style="font-size: 0.65rem; opacity: 0.85; max-width: 100%; overflow: hidden;">' +
                                     '<i class="fa-solid fa-building me-1"></i><span class="text-primary fw-bold text-truncate" style="max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="' + companyName + '">' + companyName + '</span>' +
                                     '</div>';
                    }

                    return {
                        html: '<div class="fc-event-main p-2" style="max-width: 100%; overflow: hidden;">' +
                              '<div class="d-flex align-items-center gap-2 mb-1" style="max-width: 100%; overflow: hidden;">' +
                              '<span class="badge bg-primary rounded-pill text-truncate" style="font-size: 0.75rem; padding: 0.25rem 0.5rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">' + userName + '</span>' +
                              '</div>' +
                              '<div class="d-flex align-items-center gap-1" style="font-size: 0.7rem; opacity: 0.9; max-width: 100%; overflow: hidden;">' +
                              typeIcon + '<span class="text-truncate" style="max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">' + typeLabel + '</span>' +
                              '</div>' +
                              companyHtml +
                              '</div>'
                    };
                },
                eventClick: function(info) {
                    var extendedProps = info.event.extendedProps;
                    var meetingType = extendedProps.meeting_type || '';
                    var typeLabel = meetingType.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
                    var statusLabel = extendedProps.status.charAt(0).toUpperCase() + extendedProps.status.slice(1);
                    var meetingId = info.event.id;
                    var meetingStatus = extendedProps.status;

                    // Store meeting ID in a data attribute
                    document.getElementById('MeetingDetailsModal').setAttribute('data-meeting-id', meetingId);

                    // Format date and time
                    var meetingDate = extendedProps.meeting_date || '';
                    var startTime = extendedProps.start_time || '';
                    var endTime = extendedProps.end_time || '';

                    // Format date if available
                    var formattedDate = '';
                    if (meetingDate) {
                        var dateObj = new Date(meetingDate + 'T00:00:00');
                        formattedDate = dateObj.toLocaleDateString('en-US', {
                            year: 'numeric',
                            month: 'long',
                            day: 'numeric'
                        });
                    }

                    // Format time (HH:MM to HH:MM AM/PM)
                    function formatTime(timeStr) {
                        if (!timeStr) return '';
                        var parts = timeStr.split(':');
                        var hours = parseInt(parts[0]);
                        var minutes = parts[1];
                        var ampm = hours >= 12 ? 'PM' : 'AM';
                        hours = hours % 12;
                        hours = hours ? hours : 12; // 0 should be 12
                        return hours + ':' + minutes + ' ' + ampm;
                    }

                    // Update modal content
                    document.getElementById('meetingDetailsUserName').textContent = extendedProps.user_name;

                    // Set account type
                    var accountType = extendedProps.account_type || 'investor';
                    var accountTypeLabel = accountType === 'company' ? '{{ trans(app()->getLocale() . '.company_verification') }}' :
                                          (extendedProps.user_type === 'entrepreneur' ? '{{ trans(app()->getLocale() . '.entrepreneur_account') }}' : '{{ trans(app()->getLocale() . '.investor_account') }}');
                    document.getElementById('meetingDetailsAccountType').textContent = accountTypeLabel;

                    // Show/hide company information for entrepreneur accounts
                    var companyDiv = document.getElementById('meetingDetailsCompany');
                    if (extendedProps.company_id && extendedProps.user_type === 'entrepreneur') {
                        companyDiv.style.display = 'block';
                        document.getElementById('meetingDetailsCompanyName').textContent = extendedProps.company_name || 'N/A';
                        document.getElementById('meetingDetailsCompanyDescription').textContent = extendedProps.company_description || 'N/A';
                    } else {
                        companyDiv.style.display = 'none';
                    }

                    document.getElementById('meetingDetailsType').textContent = typeLabel;
                    document.getElementById('meetingDetailsStatus').textContent = statusLabel;
                    document.getElementById('meetingDetailsDate').textContent = formattedDate || '{{ trans(app()->getLocale() . '.not_set') }}';
                    document.getElementById('meetingDetailsStartTime').textContent = formatTime(startTime) || '{{ trans(app()->getLocale() . '.not_set') }}';
                    document.getElementById('meetingDetailsEndTime').textContent = formatTime(endTime) || '{{ trans(app()->getLocale() . '.not_set') }}';

                    var locationDiv = document.getElementById('meetingDetailsLocation');
                    var urlDiv = document.getElementById('meetingDetailsUrl');
                    var cancelBtn = document.getElementById('cancelMeetingBtn');

                    if (extendedProps.meeting_location) {
                        locationDiv.style.display = 'block';
                        document.getElementById('meetingDetailsLocationValue').textContent = extendedProps.meeting_location;
                    } else {
                        locationDiv.style.display = 'none';
                    }

                    if (extendedProps.meeting_url) {
                        urlDiv.style.display = 'block';
                        document.getElementById('meetingDetailsUrlLink').href = extendedProps.meeting_url;
                        document.getElementById('meetingDetailsUrlLink').textContent = extendedProps.meeting_url;
                    } else {
                        urlDiv.style.display = 'none';
                    }

                    // Show/hide cancel button based on status
                    if (meetingStatus === 'cancelled') {
                        cancelBtn.style.display = 'none';
                    } else {
                        cancelBtn.style.display = 'flex';
                    }

                    // Show modal
                    var modal = new bootstrap.Modal(document.getElementById('MeetingDetailsModal'));
                    modal.show();

                    // Initialize feather icons after modal is shown
                    setTimeout(function() {
                        if (typeof feather !== 'undefined') {
                            feather.replace();
                        }
                    }, 100);
                }
            });

            calendar.render();

            // Initialize external events as draggable
            var externalEventsContainer = document.getElementById('external-events-list');
            if (externalEventsContainer) {
                new FullCalendar.Draggable(externalEventsContainer, {
                    itemSelector: '.fc-event',
                    eventData: function(eventEl) {
                        return {
                            title: eventEl.getAttribute('data-user-name'),
                            meetingId: eventEl.getAttribute('data-meeting-id'),
                            userName: eventEl.getAttribute('data-user-name'),
                            meetingType: eventEl.getAttribute('data-meeting-type'),
                        };
                    }
                });
            }

            // Handle complete meeting type change to show/hide location/URL fields
            document.getElementById('complete_meeting_type').addEventListener('change', function() {
                var meetingType = this.value;
                var locationField = document.getElementById('complete_meeting_location_field');
                var urlField = document.getElementById('complete_meeting_url_field');
                var locationInput = document.getElementById('complete_meeting_location');
                var urlInput = document.getElementById('complete_meeting_url');

                if (meetingType === 'in_person') {
                    locationField.style.display = 'block';
                    urlField.style.display = 'none';
                    locationInput.required = true;
                    urlInput.required = false;
                    urlInput.value = '';
                } else if (meetingType === 'online') {
                    locationField.style.display = 'none';
                    urlField.style.display = 'block';
                    locationInput.required = false;
                    urlInput.required = true;
                    locationInput.value = '';
                } else {
                    locationField.style.display = 'block';
                    urlField.style.display = 'none';
                    locationInput.required = false;
                    urlInput.required = false;
                }
            });

            // Handle complete meeting form submission
            document.getElementById('completeMeetingForm').addEventListener('submit', function(e) {
                var form = this;
                var meetingType = document.getElementById('complete_meeting_type').value;
                var locationInput = document.getElementById('complete_meeting_location');
                var urlInput = document.getElementById('complete_meeting_url');

                // Check if form action is set properly
                if (!form.action || form.action === '' || form.action.includes(':id')) {
                    e.preventDefault();
                    alert('{{ trans(app()->getLocale() . '.error_meeting_id_not_found') }}');
                    return false;
                }

                // Validate conditional fields based on meeting type
                if (meetingType === 'in_person' && !locationInput.value.trim()) {
                    e.preventDefault();
                    alert('{{ trans(app()->getLocale() . '.please_enter_meeting_location') }}');
                    locationInput.focus();
                    return false;
                }

                if (meetingType === 'online' && !urlInput.value.trim()) {
                    e.preventDefault();
                    alert('{{ trans(app()->getLocale() . '.please_enter_meeting_url') }}');
                    urlInput.focus();
                    return false;
                }

                // Validate form
                if (!form.checkValidity()) {
                    e.preventDefault();
                    form.reportValidity();
                    return false;
                }

                // Disable submit button to prevent double submission
                var submitBtn = document.getElementById('submitCompleteMeetingForm');
                submitBtn.disabled = true;
                submitBtn.textContent = '{{ trans(app()->getLocale() . '.completing') }}';

                // Form will submit normally
                return true;
            });

            // Reset complete meeting form when modal is closed
            document.getElementById('CompleteMeetingModal').addEventListener('hidden.bs.modal', function() {
                document.getElementById('completeMeetingForm').reset();
                document.getElementById('complete_meeting_location_field').style.display = 'block';
                document.getElementById('complete_meeting_url_field').style.display = 'none';
                document.getElementById('complete_company_info').style.display = 'none';
                document.getElementById('submitCompleteMeetingForm').disabled = false;
                document.getElementById('submitCompleteMeetingForm').textContent = '{{ trans(app()->getLocale() . '.complete_meeting') }}';
            });

            // Handle meeting type change to show/hide location/URL fields
            document.getElementById('meeting_type').addEventListener('change', function() {
                var meetingType = this.value;
                var locationField = document.getElementById('meeting_location_field');
                var urlField = document.getElementById('meeting_url_field');
                var locationInput = document.getElementById('meeting_location');
                var urlInput = document.getElementById('meeting_url');

                if (meetingType === 'in_person') {
                    locationField.style.display = 'block';
                    urlField.style.display = 'none';
                    locationInput.required = true;
                    urlInput.required = false;
                    urlInput.value = '';
                } else if (meetingType === 'online') {
                    locationField.style.display = 'none';
                    urlField.style.display = 'block';
                    locationInput.required = false;
                    urlInput.required = true;
                    locationInput.value = '';
                } else {
                    locationField.style.display = 'block';
                    urlField.style.display = 'none';
                    locationInput.required = false;
                    urlInput.required = false;
                }
            });

            // Handle form submission
            document.getElementById('createMeetingForm').addEventListener('submit', function(e) {
                var form = this;
                var meetingType = document.getElementById('meeting_type').value;
                var locationInput = document.getElementById('meeting_location');
                var urlInput = document.getElementById('meeting_url');

                // Validate conditional fields based on meeting type
                if (meetingType === 'in_person' && !locationInput.value.trim()) {
                    e.preventDefault();
                    alert('{{ trans(app()->getLocale() . '.please_enter_meeting_location') }}');
                    locationInput.focus();
                    return false;
                }

                if (meetingType === 'online' && !urlInput.value.trim()) {
                    e.preventDefault();
                    alert('{{ trans(app()->getLocale() . '.please_enter_meeting_url') }}');
                    urlInput.focus();
                    return false;
                }

                // Validate form
                if (!form.checkValidity()) {
                    e.preventDefault();
                    form.reportValidity();
                    return false;
                }

                // Disable submit button to prevent double submission
                var submitBtn = document.getElementById('submitMeetingForm');
                submitBtn.disabled = true;
                submitBtn.textContent = '{{ trans(app()->getLocale() . '.creating') }}';

                // Form will submit normally, page will reload with session flash message
                return true;
            });

            // Reset form when modal is closed
            document.getElementById('CreateMeetingModal').addEventListener('hidden.bs.modal', function() {
                document.getElementById('createMeetingForm').reset();
                document.getElementById('meeting_location_field').style.display = 'block';
                document.getElementById('meeting_url_field').style.display = 'none';
            });

            // Handle cancel meeting button
            document.getElementById('cancelMeetingBtn').addEventListener('click', function() {
                var modal = document.getElementById('MeetingDetailsModal');
                var meetingId = modal.getAttribute('data-meeting-id');

                if (!meetingId) {
                    alert('{{ trans(app()->getLocale() . '.meeting_id_not_found') }}');
                    return;
                }

                if (!confirm('{{ trans(app()->getLocale() . '.are_you_sure_cancel_meeting') }}')) {
                    return;
                }

                // Create a form to submit the cancel request
                var form = document.createElement('form');
                form.method = 'POST';
                form.action = "{{ route('admin.meeting-schedule.cancel', ':id') }}".replace(':id', meetingId);

                // Add CSRF token
                var csrfInput = document.createElement('input');
                csrfInput.type = 'hidden';
                csrfInput.name = '_token';
                csrfInput.value = '{{ csrf_token() }}';
                form.appendChild(csrfInput);

                document.body.appendChild(form);
                form.submit();
            });
        });
    </script>
@endsection