@extends('layouts.master')
@section('title', 'Appointments - User')
@section('pagetitle', 'Appointments - User')

@section('content')
    @include('layouts.partials.breadcrumbs', ['breadcrumbs' => [
         ['url' => route('user.dashboard'), 'title' => __('Home')],
         ['url' => route('user.appointments'), 'title' => __('Appointments')]
            ]])
    <div class="main">
        @include('layouts.partials.messages')
        <div class="row">
            <div class="col-md-6 col-12">
                <h1 class="hd mb-30">Appointments</h1>
            </div>
        </div>
        <h4 class="mb-30 up-appt">Upcoming appointments</h4>
        @forelse($upcomingAppointments as $upcomingAppointment)
            <div class="appt-grid">
                <div class="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->mentor->present()->avatar ?? url('assets/img/profile.png')}}"
                                    alt=""/>
                                <div class="schedule_name">
                                    <h4>{{$upcomingAppointment->mentor->getFullName()}}</h4>
                                    <p>{{$upcomingAppointment->start}} - {{$upcomingAppointment->end}}</p>
                                </div>
                                <div class="view_schedule">
                                    <a href="#" class="edit-btn"
                                       data-id="{{$upcomingAppointment->id}}"
                                       data-name="{{$upcomingAppointment->mentor->getFullName()}}"
                                       data-start="{{$upcomingAppointment->start}}"
                                       data-end="{{$upcomingAppointment->end}}"
                                       data-link="{{$upcomingAppointment->meeting_link}}"
                                       data-date="{{$upcomingAppointment->date->toDateString()}}"
                                       data-reason="{{$upcomingAppointment->reason}}"
                                    >
                                        <h5
                                            data-modal-target="#modal"
                                            class="modal-view-target mr-5"
                                        >
                                            DETAILS
                                        </h5>
                                    </a>

                                    <a href="{{$upcomingAppointment->meeting_link}}" target="_blank">
                                        <h5>
                                            Link
                                        </h5>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="insight-placeholder">
                <i class="fas fa-calendar"></i>
                <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->mentor->present()->avatar ?? url('assets/img/profile.png')}}"
                             alt=""/>
                        <div class="appt-hbox">
                            <h3>{{$recentAppointment->mentor->getFullName()}}</h3>
                            <p>{{$recentAppointment->start}} - {{$recentAppointment->end}}</p>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="insight-placeholder">
                <i class="fas fa-calendar"></i>
                <p>No recent appointments yet</p>
            </div>
        @endforelse
    </div>

    <div id="modal" class="modal R2 Reschedule">
        <div>
            <div class="reschedule-h1">
                <h1>Appointment Details</h1>
            </div>
            <span class="material-icons-sharp modal-close">close</span>
        </div>

        <form action="#" id="appointment-form-edit">
            <div class="menteeInfo form-group">
                <input id="user-edit" class="form-control" type="text" 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" disabled/>
                </div>
                <div class="menteeInfo form-group">
                    <label for="start-edit">Start</label>
                    <input id="start-edit" class="form-control" type="time" name="start" disabled/>
                </div>
                <div class="menteeInfo form-group">
                    <label for="end-edit">End</label>
                    <input id="end-edit" type="time" class="form-control" name="end" disabled/>
                </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" disabled/>
            </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"
                          disabled></textarea>
            </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, maximumSelectionLength: 5,
            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>
    {!! JsValidator::formRequest('Guildroom\Http\Requests\Mentor\CreateNewAppointment', '#appointment-form') !!}
    {!! JsValidator::formRequest('Guildroom\Http\Requests\Mentor\EditAppointment', '#appointment-form-edit') !!}
@stop