@extends('layouts.master')
@section('title', 'Appointments - Alumnus')
@section('pagetitle', 'Appointments - Alumnus')
@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
    <style>
        .select2.select2-container {
            width: 100% !important;
        }

        .select2.select2-container .select2-selection {
            border: 1px solid #ccc;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            height: 34px;
            margin-bottom: 15px;
            outline: none !important;
            transition: all .15s ease-in-out;
        }

        .select2.select2-container .select2-selection .select2-selection__rendered {
            color: #333;
            line-height: 32px;
            padding-right: 33px;
        }

        .select2.select2-container .select2-selection .select2-selection__arrow {
            background: #f8f8f8;
            border-left: 1px solid #ccc;
            -webkit-border-radius: 0 3px 3px 0;
            -moz-border-radius: 0 3px 3px 0;
            border-radius: 0 3px 3px 0;
            height: 32px;
            width: 33px;
        }

        .select2.select2-container.select2-container--open .select2-selection.select2-selection--single {
            background: #f8f8f8;
        }

        .select2.select2-container.select2-container--open .select2-selection.select2-selection--single .select2-selection__arrow {
            -webkit-border-radius: 0 3px 0 0;
            -moz-border-radius: 0 3px 0 0;
            border-radius: 0 3px 0 0;
        }

        .select2.select2-container.select2-container--open .select2-selection.select2-selection--multiple {
            border: 1px solid #34495e;
        }

        .select2.select2-container .select2-selection--multiple {
            height: auto;
            min-height: 34px;
        }

        .select2.select2-container .select2-selection--multiple .select2-search--inline .select2-search__field {
            margin-top: 0;
            height: 32px;
        }

        .select2.select2-container .select2-selection--multiple .select2-selection__rendered {
            display: block;
            padding: 0 4px;
            line-height: 29px;
        }

        .select2.select2-container .select2-selection--multiple .select2-selection__choice {
            background-color: #f8f8f8;
            border: 1px solid #ccc;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
            margin: 4px 4px 0 0;
            padding: 0 6px 0 22px;
            height: 24px;
            line-height: 24px;
            font-size: 12px;
            position: relative;
        }

        .select2.select2-container .select2-selection--multiple .select2-selection_choice .select2-selectionchoice_remove {
            position: absolute;
            top: 0;
            left: 0;
            height: 22px;
            width: 22px;
            margin: 0;
            text-align: center;
            color: #e74c3c;
            font-weight: bold;
            font-size: 16px;
        }

        .select2-container .select2-dropdown {
            background: transparent;
            border: none;
            margin-top: -5px;
        }

        .select2-container .select2-dropdown .select2-search {
            padding: 0;
        }

        .select2-container .select2-dropdown .select2-search input {
            outline: none !important;
            border: 1px solid #34495e !important;
            border-bottom: none !important;
            padding: 4px 6px !important;
        }

        .select2-container .select2-dropdown .select2-results {
            padding: 0;
        }

        .select2-container .select2-dropdown .select2-results ul {
            background: #fff;
            color: #333333;
            border: 1px solid #34495e;
        }

        .select2-container .select2-dropdown .select2-results ul .select2-results__option--highlighted[aria-selected] {
            background-color: #3498db;
        }
    </style>

@endsection
@section('content')
    @include('layouts.partials.breadcrumbs', ['breadcrumbs' => [
         ['url' => route('dashboard'), 'title' => __('Home')],
         ['url' => route('mentor.appointments'), 'title' => __('Appointments')]
            ]])
    <div class="main">
        @include('layouts.partials.messages')
        <div class="">
        <div class="">
            <div class="create-appointment-heading">
                <div class="">
                    <button data-modal-target="#modal2" class="createModal save">
                        Create
                    </button>
                </div>
                <div class="">
                    <div class="col-md-6 col-12">
                        <h1 class="hd mb-30">Appointments</h1>
                    </div>
                </div>
            </div>
            <h4 class="mb-20 up-appt">Upcoming Appointments</h4>
            @forelse($upcomingAppointments as $upcomingAppointment)

                <div class="insights mb-60">
                    <div class="appt_Schedule">
                        <div class="topps">
                            <h4 class="appt-heading mb-30">{{$upcomingAppointment->getMeetingTime()->diffForHumans()}}</h4>
                            <div class="scheduleText">
                                <img
                                    src="{{$upcomingAppointment->mentee->present()->avatar ?? url('assets/img/profile.png')}}"
                                    alt=""/>
                                <div class="schedule_name">
                                    <h4>{{$upcomingAppointment->mentee->getFullName()}}</h4>
                                    <p>{{$upcomingAppointment->start}} - {{$upcomingAppointment->end}}
                                        @if(!is_null($upcomingAppointment->appointment_location))
                                            ({{$upcomingAppointment->appointment_location}})
                                        @endif
                                    </p>
                                </div>
                                <div class="view_schedule">
                                    <a href="#" class="edit-btn"
                                       data-id="{{$upcomingAppointment->id}}"
                                       data-name="{{$upcomingAppointment->mentee->getFullName()}}"
                                       data-start="{{$upcomingAppointment->start}}"
                                       data-end="{{$upcomingAppointment->end}}"
                                       data-link="{{$upcomingAppointment->meeting_link}}"
                                       data-date="{{$upcomingAppointment->date->toDateString()}}"
                                       data-reason="{{$upcomingAppointment->reason}}"
                                       data-location="{{$upcomingAppointment->appointment_location}}"
                                       data-delete-url="{{route('mentor.appointments.delete',$upcomingAppointment->id)}}"
                                       data-modal-target="#modal"
                                    >
                                        <h5

                                            class="modal-view-target mr-5"
                                        >
                                            Edit
                                        </h5>
                                    </a>

                                    <a href="{{$upcomingAppointment->meeting_link}}" target="_blank">
                                        <h5>
                                            Link
                                        </h5>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="insight-placeholder">
                    <p>No upcoming appointments</p>
                </div>
            @endforelse

            <div class="aptt-line"></div>
            <h4 class="mb-30 up-appt">Recent appointments</h4>
            @forelse($recentAppointments as $recentAppointment)
                <div class="apptgrid">
                    <div class="recent-appointment">
                        <h4 class="mb-20 appt-heading">{{$recentAppointment->date->toFormattedDateString()}}</h4>
                        <div class="appt-boxes">
                            <img
                                src="{{$recentAppointment->mentee->present()->avatar ?? url('assets/img/profile.png')}}"
                                alt=""/>
                            <div class="appt-hbox">
                                <h3>{{$recentAppointment->mentee->getFullName()}}</h3>
                                <p>{{$recentAppointment->start}} - {{$recentAppointment->end}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="insight-placeholder">
                    <p>No recent appointments yet</p>
                </div>
            @endforelse
        </div>
        <div id="modal" class="modal R2 Reschedule">
            <div>
                <div class="reschedule-h1">
                    <h1>Edit Appointment</h1>
                </div>
                <span class="material-icons-sharp modal-close">close</span>
            </div>

            <form action="{{route("mentor.appointments.update")}}" id="appointment-form-edit" method="POST">
                @method('PUT')
                @csrf
                <input id="id-edit" hidden class="form-control" type="text" name="appointment_id" required/>

                <div class="menteeInfo form-group">
                    <input id="user-edit" class="form-control" type="text" required disabled/>
                </div>

                <div class="DateTime">
                    <div class="menteeInfo form-group">
                        <label for="date-edit">Date</label>
                        <input type="date" id="date-edit" class="form-control" name="date" required/>
                    </div>
                    <div class="menteeInfo form-group">
                        <label for="start-edit">Start</label>
                        <input id="start-edit" class="form-control" type="time" name="start" required/>
                    </div>
                    <div class="menteeInfo form-group">
                        <label for="end-edit">End</label>
                        <input id="end-edit" type="time" class="form-control" name="end" required/>
                    </div>
                </div>
                <div class="menteeInfo form-group">
                    <label for="meeting-link-edit">Meeting Link</label>
                    <input id="meeting-link-edit" type="text" class="form-control" name="meeting_link" required/>
                </div>
                <div class="menteeInfo form-group">
                    <label for="reason-edit">Reason</label>
                    <textarea name="reason" id="reason-edit" class="form-control" required cols="30"
                              rows="10"></textarea>
                </div>
                <div class="col-6 next">
                    <input type="submit" class="btn save">
                </div>
                <div class="col-6 next">
                    <a href="#" class="btn btn-outline-danger delete-btn js-remove-list-item"
                       data-method="DELETE"
                       data-confirm-title="@lang('Please Confirm')"
                       data-confirm-text="@lang('Are you sure that you want to delete this appointment?')"
                       data-confirm-delete="@lang('Yes, delete!')"
                    >
                        Delete Appointment
                    </a>
                </div>
            </form>
        </div>

        <div id="modal2" class="modal R2 Reschedule" style="margin-top: -250px; height: 800vh;">
            <div>
                <div class="reschedule-h1">
                    <h1>Schedule Appointments</h1>
                </div>
                <span class="material-icons-sharp modal-view-close">close</span>
            </div>
            <form action="{{route("mentor.appointments.create")}}" id="appointment-form" method="POST">
                @csrf
                <div class="menteeInfo form-group">
                    <label for="menteeName" >Mentee</label>
                    <select class="form_input form-control js-select2-mentees" required multiple name="mentees[]" id="menteeName">
                        @foreach($mentees as $mentee)
                            <option value="{{ $mentee->mentee->id }}">{{ $mentee->mentee->getFullName() }}
                                ({{$mentee->mentee->email}})
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="menteeInfo form-group">
                    <label for="location">Meeting Location</label>
                    <select class="form_input form-control js-select2-locations" required name="appointment_location"
                            id="location">
                        <option value="">Select an Appointment Location</option>
                        @foreach(explode(",", Guildroom\Models\Setting::query()->where('key', "appointment_locations")->first()->value) as $location)
                            <option value="{{ $location }}">{{ $location }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="DateTime">
                    <div class="menteeInfo form-group">
                        <label for="date">Date</label>
                        <input type="date" class="form-control" name="date" required/>
                    </div>
                    <div class="menteeInfo form-group">
                        <label for="time-start">Start</label>
                        <input id="time-start" class="form-control" type="time" name="start" required/>
                    </div>
                    <div class="menteeInfo form-group">
                        <label for="time">End</label>
                        <input id="time" type="time" class="form-control" name="end" required/>
                    </div>
                </div>

                <div class="menteeInfo form-group">
                    <label for="meeting-link">Meeting Link</label>
                    <input id="meeting-link" type="text" class="form-control" name="meeting_link" required/>
                </div>
                <div class="menteeInfo form-group">
                    <label for="time">Reason</label>
                    <textarea name="reason" id="time" class="form-control" required cols="30" rows="5"></textarea>
                </div>
                <div class="next">
                    <input type="submit" class="btn save">
                </div>
            </form>
        </div>
        @endsection

        @section('scripts')
            <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
            <script>
                $(".js-select2-mentees").select2({
                    placeholder: 'Select mentees',
                    closeOnSelect: false,
                    multiple: true,
                    width: '100%',
                });
                $(".js-select2-locations").select2({
                    placeholder: 'Select the Appointment Location',
                    closeOnSelect: false,
                    multiple: false,
                    width: '100%',
                });

                $('.edit-btn').on('click', function () {
                    let $el = $(this);
                    $("#id-edit").val($el.data('id'));
                    $("#user-edit").val($el.data('name'));
                    $("#date-edit").val($el.data('date'));
                    $("#start-edit").val($el.data('start'));
                    $("#end-edit").val($el.data('end'));
                    $("#meeting-link-edit").val($el.data('link'));
                    $("#reason-edit").val($el.data('reason'));

                    $(".delete-btn").attr("href", $el.data('delete-url'));
                    $(".delete-btn").data("url", $el.data('delete-url'));
                });
            </script>
            <script src="{{ asset('assets/js/appointments.js') }}"></script>
    {!! JsValidator::formRequest('Guildroom\Http\Requests\Mentor\CreateNewAppointment', '#appointment-form') !!}
    {!! JsValidator::formRequest('Guildroom\Http\Requests\Mentor\EditAppointment', '#appointment-form-edit')!!}
@stop