@extends('layouts.admin')

@section('styles')
    <style>
        a {
            color: #56a888 !important;
            text-decoration: none;
        }

        .fc-daygrid-dot-event.fc-event-mirror,
        .fc-daygrid-dot-event {
            background: #4f9479;
        }

        .ri-close-line:before {
            color: white;
        }

        .fc-daygrid-dot-event.fc-event-mirror,
        .fc-daygrid-dot-event:hover {
            background: #4f9479;
        }

        .select2-search__field {
  width: auto !important; /* Override inline width */
  min-width: 0; /* Optional: Prevent large default width */
}

    </style>
    <!-- FullCalendar CSS -->
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.css' rel='stylesheet'>
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-10">
                                @include('elements.admin-breadcrumb') {{ $instructor->full_name }}
                            </div>
                        </div>
                    </div>
                    @include('elements.alert-error')
                    <div class="modal fade" id="assignTopicModal" tabindex="-1" aria-labelledby="assignTopicModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">Add Secdule</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <form action="{{ route('admin.instructors_availability.store_schedule') }}" method="POST">
                                        @csrf
                                        <div class="mb-3">
                                            <input type="hidden" name="instructor_id" id="instructor_id" value="{{ $instructor->id }}">
                                            <label for="select_date" class="col-form-label">Select Date:</label>
                                            <input type="date" class="form-control" id="select_date" name="select_date" required>
                    
                                            <label for="slot_id" class="col-form-label mt-3">Select Slot:</label>
                                            <select id="slot_id[]" name="slot_id[]" class="form-control select2-multiple" data-toggle="select2" multiple="multiple" data-placeholder="Choose ..."required>
                                                <option value="">Choose a slot</option>
                                                @foreach ($slots as $slot)
                                                    <option value="{{ $slot->id }}">
                                                        ({{ \Carbon\Carbon::createFromFormat('H:i:s', $slot->start_time)->format('h:i A') }} to {{ \Carbon\Carbon::createFromFormat('H:i:s', $slot->end_time)->format('h:i A') }})
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                    
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        @include('elements.alert')

                        <!-- Calendar -->
                        <div id='calendar'></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>

    <script>
      document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var baseUrl = "{{ url('/') }}";
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'addScheduleButton'
        },
        customButtons: {
            addScheduleButton: {
                text: 'Add Schedule',
                click: function() {
                    var myModal = new bootstrap.Modal(document.getElementById('assignTopicModal'), {
                        keyboard: false
                    });
                    myModal.show();
                }
            }
        },
        eventContent: function(arg) {
            var eventEl = document.createElement('div');
            eventEl.classList.add('fc-event', 'fc-event-start', 'fc-event-end', 'fc-event-past', 'fc-daygrid-event', 'fc-daygrid-dot-event');

            var titleEl = document.createElement('div');
            titleEl.classList.add('fc-event-title');
            titleEl.innerText = '(' + arg.event.title + ')';

            eventEl.appendChild(titleEl);

            var removeIcon = document.createElement('a');
            removeIcon.href = '#';
            removeIcon.classList.add('ri-close-line', 'remove-icon');
            removeIcon.addEventListener('click', function(e) {
                e.preventDefault();

                var confirmed = confirm('Are you sure you want to cancel this event?');
                if (confirmed) {
                    var eventId = arg.event.id;
                    var cancelDate = arg.event.start.toISOString();
                    var instructorId = arg.event.extendedProps.instructor_id;
                    var timeslotId = arg.event.extendedProps.timeslot_id;

                    console.log('Timeslot ID:', timeslotId);

                    cancelEvent(eventId, cancelDate, instructorId, timeslotId);
                }
            });

            eventEl.appendChild(removeIcon);

            return {
                domNodes: [eventEl]
            };
        },
        eventDidMount: function(info) {
            info.el.classList.remove('fc-daygrid-dot-event');
        },
        events: function(fetchInfo, successCallback, failureCallback) {
            $.ajax({
                url: baseUrl + '/admin/schedule/load',
                type: 'GET',
                dataType: 'json',
                data: {
                    instructor_id: '{{ $instructor->id }}'
                },
                success: function(response) {
                    var events = [];

                    if (response.result) {
                        response.result.forEach(function(event) {
                            events.push({
                                id: event.id,
                                title: event.title,
                                start: event.start,
                                end: event.end,
                                instructor_id: event.instructor_id,
                                timeslot_id: event.timeslot_id
                            });
                        });
                    }
                    successCallback(events);
                },
                error: function() {
                    failureCallback();
                }
            });
        }
    });
    calendar.render();

    function cancelEvent(eventId, cancelDate, instructorId, timeslotId) {
        $.ajax({
            url: baseUrl + '/admin/schedule/cancel',
            type: 'POST',
            dataType: 'json',
            data: {
                event_id: eventId,
                cancel_date: cancelDate,
                instructor_id: instructorId,
                timeslot_id: timeslotId,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.success) {
                    calendar.refetchEvents();
                    $.NotificationApp.send(
                        "Well Done!",
                        response.message,
                        "top-right",
                        "rgba(0,0,0,0.2)",
                        "success"
                    );

                    oTable.table().draw();
                } else {
                    $.NotificationApp.send(
                        "Oh snap!",
                        response.error || 'Failed to cancel event.',
                        "top-right",
                        "rgba(0,0,0,0.2)",
                        "error"
                    );
                }
            },
            error: function(xhr, status, error) {
                $.NotificationApp.send(
                    "Oh snap!",
                    xhr.responseJSON ? xhr.responseJSON.error :
                    'Failed to cancel event. Please try again later.',
                    "top-right",
                    "rgba(0,0,0,0.2)",
                    "error"
                );
            }
        });
    }
});


    </script>
@endsection