@extends('admin::layouts.app')
@section('content')
    <section class="content mb-5">
        <div class="container-fluid">
            <div class="row titlepad">
                <div class="col-md-12">
                    <div class="mt-3 mb-3">
                        <div class="dashbed-border-bottom"></div>
                    </div>

                    <div class="row align-items-end">
                        <div class="col-sm-9">
                            <h4>{{ __('admin.my_appointments') }}</h4>
                            <p class="page-sub-head"></p>
                            <a href="#" data-toggle="modal" data-target="#filter"
                                class="btn-md btn-dark d-inline-block"><i class="iconly-boldFilter-2"></i> {{ __('label.filter') }}</a>
                        </div>
                        <div class="col-md-3">
                            <form method="get">
                                <input class="form-control searchinput" type="text" name="search" value="{{ $search }}" placeholder="{{ __('placeholder.search_appointment') }}">
                            </form>
                        </div>

                    </div>

                </div>

            </div>



            <div class="row">
                <div class="col-md-12">
                    <div class="mb-3">
                        <div class="dashbed-border-bottom"></div>
                    </div>
                </div>

                <div class="col-md-12 leaveteam-calander">
                    <div id="calendar"></div>

                </div>



            </div>
        </div>
    </section>
    <section>
        <div class="modal fade" id="filter" tabindex="-1" role="dialog" aria-labelledby="loginpopupTitle"
            aria-hidden="true">
            <div class="modal-dialog  modal-dialog-centered" role="document">

                <div class="modal-content bg-light modalPad">
                    <form class="needs-validation" novalidate method="get">
                        <div class="modal-header position-relative border-0">
                            <div class="">
                                <button type="button" class="close-btn" id="closeModal" data-dismiss="modal" aria-label="Close">
                                    <img src="/admin-assets/img/close.svg" />
                                </button>
                                <div class="">
                                    <p class="mb-0">{{ __('label.filter') }}</p>
                                </div>

                            </div>
                        </div>
                        <div class="modal-body pt-0">

                            <div class="row">

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="exampleFormControlSelect1">{{ __('label.from_date') }}</label>
                                        <input type="date" name="from_date" value="{{ $fromDate }}" class="form-control" />
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="exampleFormControlSelect1">{{ __('label.to_date') }}</label>
                                        <input type="date" name="to_date" value="{{ $toDate }}" class="form-control" />
                                    </div>
                                </div>

                                <div class="col-md-12 mt-1">
                                    <button type="submit" class="btn btn-primary">{{__('label.apply_filter')}}</button>
                                </div>

                            </div>

                        </div>

                    </form>
                </div>

            </div>
        </div>
    </section>
@endsection
@section('script')

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Find the close button by its ID
        var closeModalButton = document.getElementById('closeModal');

        // Check if the close button element exists
        if (closeModalButton) {
            // Add a click event listener to the close button
            closeModalButton.addEventListener('click', function() {
                // Reload the page
                window.location.href = '/admin/appointments';
            });
        }
    });
</script>

    <script>
        var eventsData = @json($formattedEvents);
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                headerToolbar: {
                    left: 'prev,next',
                    center: 'title',
                    right: 'dayGridWeek,listWeek'
                },
                initialView: 'dayGridWeek',
                editable: true,
                dayMaxEvents: true,
                // eventClick: function(event, jsEvent, view) {
                //     alert();
                // },
                eventContent: function(info) {
                    return {
                        html: info.event.title
                    };
                },
                events: eventsData // Use the eventsData variable here
            });

            calendar.render();
        });
    </script>
@endsection