@extends('templates.main')

@section('content')
    <!--begin::Content wrapper-->
    <div class="d-flex flex-column flex-column-fluid">
        <!--begin::Content-->
        <div id="kt_app_content" class="app-content ">

            <!--begin::Card-->
            <div class="card ">
                <!--begin::Card header-->
                <div class="card-header">
                    <h2 class="card-title fw-bold">
                        Calendario
                    </h2>

                    <div class="card-toolbar" {{ auth()->user()->rol == 'Admin' ? '' : 'hidden' }}>
                        <button class="btn btn-flex btn-primary" data-kt-calendar="add" id="add" name="add">
                            <!--begin::Svg Icon | path: /var/www/preview.keenthemes.com/kt-products/docs/metronic/html/releases/2023-07-21-074234/core/html/src/media/icons/duotune/arrows/arr087.svg-->
                            <span class="svg-icon svg-icon-muted svg-icon-2x">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <rect x="11" y="18" width="12" height="2" rx="1"
                                        transform="rotate(-90 11 18)" fill="currentColor" />
                                    <rect x="6" y="11" width="12" height="2" rx="1"
                                        fill="currentColor" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                            Añadir cita
                        </button>
                    </div>
                </div>
                <!--end::Card header-->

                <!--begin::Card body-->
                <div class="card-body">
                    <!--begin::Calendar-->
                    <div id="kt_calendar_app"></div>
                    <!--end::Calendar-->
                </div>
                <!--end::Card body-->
            </div>
            <!--end::Card-->

            <!--begin::Modals-->
            <!--begin::Modal - New Product-->
            <div class="modal fade" id="kt_modal_add_event" tabindex-="1" aria-hidden="true" data-bs-focus="false">
                <!--begin::Modal dialog-->
                <div class="modal-dialog modal-dialog-centered mw-650px">
                    <!--begin::Modal content-->
                    <div class="modal-content">
                        <!--begin::Form-->
                        <form class="form" action="" id="kt_modal_add_event_form">
                            <!--begin::Modal header-->
                            <div class="modal-header">
                                <!--begin::Modal title-->
                                <h2 class="fw-bold" data-kt-calendar="title">Añadir cita</h2>
                                <!--end::Modal title-->

                                <!--begin::Close-->
                                <div class="btn btn-icon btn-sm btn-active-icon-primary" id="kt_modal_add_event_close">
                                    <!--begin::Svg Icon | path: /var/www/preview.keenthemes.com/kt-products/docs/metronic/html/releases/2023-07-21-074234/core/html/src/media/icons/duotune/arrows/arr097.svg-->
                                    <span class="svg-icon svg-icon-muted svg-icon-2hx">
                                        <svg width="32" height="32" viewBox="0 0 32 32" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <rect x="9.39844" y="20.7144" width="16" height="2.66667"
                                                rx="1.33333" transform="rotate(-45 9.39844 20.7144)"
                                                fill="currentColor" />
                                            <rect x="11.2852" y="9.40039" width="16" height="2.66667"
                                                rx="1.33333" transform="rotate(45 11.2852 9.40039)" fill="currentColor" />
                                        </svg>
                                    </span>
                                    <!--end::Svg Icon-->
                                </div>
                                <!--end::Close-->
                            </div>
                            <!--end::Modal header-->

                            <!--begin::Modal body-->
                            <div class="modal-body py-10 px-lg-17">
                                <!--begin::Input group-->
                                <div class="fv-row mb-9">
                                    <!--begin::Label-->
                                    <label class="fs-6 fw-semibold required mb-2">Doctor</label>
                                    <!--end::Label-->

                                    <!--begin::Input-->
                                    <select id="calendar_event_doctor" class="form-select" name="calendar_event_doctor"
                                        data-placeholder="Selecciona un doctor"
                                        {{ auth()->user()->rol == 'Admin' ? '' : 'disabled' }}>
                                        <option></option>
                                        @foreach ($user as $x)
                                            @if ($x->rol != 'Admin')
                                                <option value="{{ $x->name }}"
                                                    data-kt-rich-content-subcontent="{{ $x->rol }}"
                                                    data-kt-color="{{ $x->color }}"
                                                    data-kt-rich-content-icon="http://148.230.217.16/agenda-dif/public{{ $x->image ? $x->image : '/storage/profiles/profile.svg' }}">
                                                    {{ $x->name }}
                                                </option>
                                            @endif
                                        @endforeach
                                    </select>
                                    <!--end::Input-->
                                </div>
                                <!--end::Input group-->

                                <!--begin::Input group-->
                                <div class="fv-row mb-9">
                                    <!--begin::Label-->
                                    <label class="fs-6 fw-semibold required mb-2">Paciente</label>
                                    <!--end::Label-->

                                    <!--begin::Input-->
                                    <input type="text" class="form-control form-control-solid" placeholder=""
                                        name="calendar_event_patient" id="calendar_event_patient"
                                        {{ auth()->user()->rol == 'Admin' ? '' : 'disabled' }} />
                                    <!--end::Input-->
                                </div>
                                <!--end::Input group-->

                                <!--begin::Input group-->
                                <div class="row row-cols-lg-2 g-10">
                                    <div class="col">
                                        <div class="fv-row mb-9">
                                            <!--begin::Label-->
                                            <label class="fs-6 fw-semibold mb-2 required">Edad</label>
                                            <!--end::Label-->

                                            <!--begin::Input-->
                                            <input type="text" class="form-control form-control-solid" placeholder=""
                                                name="calendar_event_age" id="calendar_event_age"
                                                {{ auth()->user()->rol == 'Admin' ? '' : 'disabled' }} />
                                            <!--end::Input-->
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="fv-row mb-9">
                                            <!--begin::Label-->
                                            <label class="fs-6 fw-semibold mb-2">Telefono</label>
                                            <!--end::Label-->

                                            <!--begin::Input-->
                                            <input type="text" class="form-control form-control-solid" placeholder=""
                                                name="calendar_event_phone" id="calendar_event_phone"
                                                {{ auth()->user()->rol == 'Admin' ? '' : 'disabled' }} />
                                            <!--end::Input-->
                                        </div>
                                    </div>
                                </div>
                                <!--end::Input group-->

                                <!--begin::Input group-->
                                <div class="fv-row mb-9">
                                    <!--begin::Label-->
                                    <label class="fs-6 fw-semibold mb-2">Educacion</label>
                                    <!--end::Label-->

                                    <!--begin::Input-->
                                    <select id="calendar_event_education" class="form-select"
                                        name="calendar_event_education" data-placeholder="Selecciona el nivel educativo"
                                        {{ auth()->user()->rol == 'Admin' ? '' : 'disabled' }}>
                                        <option></option>
                                        <option value="NINGUNA">NINGUNA</option>
                                        <option value="PREESCOLAR">PREESCOLAR</option>
                                        <option value="PRIMARIA">PRIMARIA</option>
                                        <option value="SECUNDARIA">SECUNDARIA</option>
                                        <option value="PREPARATORIA">PREPARATORIA</option>
                                        <option value="UNIVERSITARIA">UNIVERSITARIA</option>
                                        <option value="POSTGRADO">POSTGRADO</option>
                                    </select>
                                    <!--end::Input-->
                                </div>
                                <!--end::Input group-->

                                <!--begin::Input group-->
                                <div class="fv-row mb-9">
                                    <!--begin::Label-->
                                    <label class="fs-6 fw-semibold mb-2">Observaciones</label>
                                    <!--end::Label-->

                                    <!--begin::Input-->
                                    <textarea class="form-control form-control-solid" name="calendar_event_observation" id="calendar_event_observation"
                                        {{ auth()->user()->rol == 'Admin' ? '' : 'disabled' }}></textarea>
                                    <!--end::Input-->
                                </div>
                                <!--end::Input group-->

                                <!--begin::Input group-->
                                <div class="fv-row mb-9">
                                    <!--begin::Checkbox-->
                                    <label class="form-check form-check-custom form-check-solid">
                                        <input class="form-check-input" type="checkbox" id="calendar_datepicker_allday"
                                            name="calendar_datepicker_allday" checked
                                            {{ auth()->user()->rol == 'Admin' ? '' : 'disabled' }} />
                                        <span class="form-check-label fw-semibold" for="calendar_datepicker_allday">
                                            Todo el dia
                                        </span>
                                    </label>
                                    <!--end::Checkbox-->
                                </div>
                                <!--end::Input group-->

                                <!--begin::Input group-->
                                <div class="row row-cols-lg-2 g-10">
                                    <div class="col">
                                        <div class="fv-row mb-9">
                                            <!--begin::Label-->
                                            <label class="fs-6 fw-semibold mb-2 required">Dia de inicio</label>
                                            <!--end::Label-->

                                            <!--begin::Input-->
                                            <input class="form-control form-control-solid"
                                                name="kt_calendar_datepicker_start_date" placeholder="Pick a start date"
                                                id="kt_calendar_datepicker_start_date"
                                                {{ auth()->user()->rol == 'Admin' ? '' : 'disabled' }} />
                                            <!--end::Input-->
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="fv-row mb-9">
                                            <!--begin::Label-->
                                            <label class="fs-6 fw-semibold mb-2 required">Dia de término</label>
                                            <!--end::Label-->

                                            <!--begin::Input-->
                                            <input class="form-control form-control-solid"
                                                name="kt_calendar_datepicker_end_date" placeholder="Pick a end date"
                                                id="kt_calendar_datepicker_end_date"
                                                {{ auth()->user()->rol == 'Admin' ? '' : 'disabled' }} />
                                            <!--end::Input-->
                                        </div>
                                    </div>

                                </div>
                                <!--end::Input group-->
                            </div>
                            <!--end::Modal body-->

                            <!--begin::Modal footer-->
                            <div class="modal-footer flex-center">
                                <!--begin::Button-->
                                <button id="kt_modal_add_event_cancel" class="btn btn-light me-3">
                                    Cancelar
                                </button>
                                <!--end::Button-->

                                <!--begin::Button-->
                                <button type="button" id="kt_modal_add_event_submit" class="btn btn-primary"
                                    {{ auth()->user()->rol == 'Admin' ? '' : 'disabled' }}>
                                    <span class="indicator-label">
                                        Guardar
                                    </span>
                                    <span class="indicator-progress">
                                        Por favor espere... <span
                                            class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                    </span>
                                </button>
                                <!--end::Button-->
                            </div>
                            <!--end::Modal footer-->
                        </form>
                        <!--end::Form-->
                    </div>
                </div>
            </div>
            <!--end::Modal - New Product-->

            <!--begin::Modal - view Product-->
            <div class="modal fade" id="kt_modal_view_event" tabindex="-1" data-bs-focus="false" aria-hidden="true">
                <!--begin::Modal dialog-->
                <div class="modal-dialog modal-dialog-centered mw-600px">
                    <!--begin::Modal content-->
                    <div class="modal-content">
                        <!--begin::Modal header-->
                        <div class="modal-header border-0 justify-content-end">
                            <!--begin::Edit-->
                            <div class="btn btn-icon btn-sm btn-color-gray-400 btn-active-icon-primary me-2"
                                data-bs-toggle="tooltip" data-bs-dismiss="click" title="Edit Event"
                                id="kt_modal_view_event_edit" {{ auth()->user()->rol == 'Admin' ? '' : 'hidden' }}>
                                <!--begin::Svg Icon | path: /var/www/preview.keenthemes.com/kt-products/docs/metronic/html/releases/2023-07-21-074234/core/html/src/media/icons/duotune/art/art005.svg-->
                                <span class="svg-icon svg-icon-muted svg-icon-2"><svg width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path opacity="0.3"
                                            d="M21.4 8.35303L19.241 10.511L13.485 4.755L15.643 2.59595C16.0248 2.21423 16.5426 1.99988 17.0825 1.99988C17.6224 1.99988 18.1402 2.21423 18.522 2.59595L21.4 5.474C21.7817 5.85581 21.9962 6.37355 21.9962 6.91345C21.9962 7.45335 21.7817 7.97122 21.4 8.35303ZM3.68699 21.932L9.88699 19.865L4.13099 14.109L2.06399 20.309C1.98815 20.5354 1.97703 20.7787 2.03189 21.0111C2.08674 21.2436 2.2054 21.4561 2.37449 21.6248C2.54359 21.7934 2.75641 21.9115 2.989 21.9658C3.22158 22.0201 3.4647 22.0084 3.69099 21.932H3.68699Z"
                                            fill="currentColor" />
                                        <path
                                            d="M5.574 21.3L3.692 21.928C3.46591 22.0032 3.22334 22.0141 2.99144 21.9594C2.75954 21.9046 2.54744 21.7864 2.3789 21.6179C2.21036 21.4495 2.09202 21.2375 2.03711 21.0056C1.9822 20.7737 1.99289 20.5312 2.06799 20.3051L2.696 18.422L5.574 21.3ZM4.13499 14.105L9.891 19.861L19.245 10.507L13.489 4.75098L4.13499 14.105Z"
                                            fill="currentColor" />
                                    </svg>
                                </span>
                                <!--end::Svg Icon-->
                            </div>
                            <!--end::Edit-->

                            <!--begin::Edit-->
                            <div class="btn btn-icon btn-sm btn-color-gray-400 btn-active-icon-danger me-2"
                                data-bs-toggle="tooltip" data-bs-dismiss="click" title="Delete Event"
                                id="kt_modal_view_event_delete" {{ auth()->user()->rol == 'Admin' ? '' : 'hidden' }}>
                                <!--begin::Svg Icon | path: /var/www/preview.keenthemes.com/kt-products/docs/metronic/html/releases/2023-07-21-074234/core/html/src/media/icons/duotune/general/gen027.svg-->
                                <span class="svg-icon svg-icon-muted svg-icon-2"><svg width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M5 9C5 8.44772 5.44772 8 6 8H18C18.5523 8 19 8.44772 19 9V18C19 19.6569 17.6569 21 16 21H8C6.34315 21 5 19.6569 5 18V9Z"
                                            fill="currentColor" />
                                        <path opacity="0.5"
                                            d="M5 5C5 4.44772 5.44772 4 6 4H18C18.5523 4 19 4.44772 19 5V5C19 5.55228 18.5523 6 18 6H6C5.44772 6 5 5.55228 5 5V5Z"
                                            fill="currentColor" />
                                        <path opacity="0.5"
                                            d="M9 4C9 3.44772 9.44772 3 10 3H14C14.5523 3 15 3.44772 15 4V4H9V4Z"
                                            fill="currentColor" />
                                    </svg>
                                </span>
                                <!--end::Svg Icon-->
                            </div>
                            <!--end::Edit-->

                            <!--begin::Close-->
                            <div class="btn btn-icon btn-sm btn-color-gray-500 btn-active-icon-primary"
                                data-bs-toggle="tooltip" data-bs-dismiss="modal" title="Hide Event">
                                <!--begin::Svg Icon | path: /var/www/preview.keenthemes.com/kt-products/docs/metronic/html/releases/2023-07-21-074234/core/html/src/media/icons/duotune/arrows/arr097.svg-->
                                <span class="svg-icon svg-icon-muted svg-icon-2hx">
                                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <rect x="9.39844" y="20.7144" width="16" height="2.66667"
                                            rx="1.33333" transform="rotate(-45 9.39844 20.7144)" fill="currentColor" />
                                        <rect x="11.2852" y="9.40039" width="16" height="2.66667"
                                            rx="1.33333" transform="rotate(45 11.2852 9.40039)" fill="currentColor" />
                                    </svg>
                                </span>
                                <!--end::Svg Icon-->
                            </div>
                            <!--end::Close-->
                        </div>
                        <!--end::Modal header-->

                        <!--begin::Modal body-->
                        <div class="modal-body pt-0 pb-20 px-lg-17">

                            <!--begin::Row-->
                            <div class="d-flex">

                                <div class="mb-5">
                                    <!--begin::Event name-->
                                    <div class="d-flex align-items-center" hidden>
                                        <span class="fs-3 fw-bold me-3" data-kt-calendar="event_id"
                                            id="event_id"></span>
                                    </div>
                                    <!--end::Event name-->
                                    <!--begin::Event name-->
                                    <div class="d-flex align-items-center mb-2">
                                        <span class="fw-bold mx-3">DOCTOR:</span>
                                        <span class="fs-3 fw-bold me-3" data-kt-calendar="event_doctor"></span>
                                        <span class="badge badge-light-success" data-kt-calendar="all_day"></span>
                                    </div>
                                    <!--end::Event name-->
                                </div>
                            </div>
                            <!--end::Row-->

                            <!--begin::Row-->
                            <div class="d-flex">

                                <div class="mb-5">
                                    <!--begin::Event name-->
                                    <div class="d-flex align-items-center">
                                        <span class="fw-bold mx-3">PACIENTE:</span>
                                        <span class="fs-3 fw-bold me-3" data-kt-calendar="event_patient"
                                            id="event_patient"></span>
                                    </div>
                                    <!--end::Event name-->
                                </div>
                            </div>
                            <!--end::Row-->

                            <!--begin::Row-->
                            <div class="d-flex">

                                <div class="mb-0">
                                    <!--begin::Event name-->
                                    <div class="d-flex align-items-center mb-2">
                                        <span class="fw-bold mx-3">EDAD:</span>
                                        <span class="fs-3 fw-bold me-3" data-kt-calendar="event_age"
                                            id="event_age"></span>
                                    </div>
                                    <!--end::Event name-->
                                </div>
                            </div>
                            <!--end::Row-->

                            <!--begin::Row-->
                            <div class="d-flex">

                                <div class="mb-9">

                                    <!--begin::Event name-->
                                    <div class="d-flex align-items-center">
                                        <span class="fw-bold mx-3">TELEFONO:</span>
                                        <span class="fs-3 fw-bold me-3" data-kt-calendar="event_phone"
                                            id="event_phone"></span>
                                    </div>
                                    <!--end::Event name-->
                                </div>
                            </div>
                            <!--end::Row-->

                            <!--begin::Row-->
                            <div class="d-flex">

                                <!--begin::Event location-->
                                <div class="mx-3 fs-6 mb-9" data-kt-calendar="event_observation" id="event_observation">
                                </div>
                                <!--end::Event location-->
                            </div>
                            <!--end::Row-->

                            <!--begin::Row-->
                            <div class="d-flex">

                                <!--begin::Event location-->
                                <span class="mx-3 fw-bold me-3">EDUCACION:</span>
                                <div class="fs-6 mb-9" data-kt-calendar="event_education" id="event_education"></div>
                                <!--end::Event location-->
                            </div>
                            <!--end::Row-->

                            <!--begin::Row-->
                            <div class="d-flex align-items-center mb-2">
                                <!--begin::Bullet-->
                                <span class="bullet bullet-dot h-10px w-10px bg-success ms-2 me-7"></span>
                                <!--end::Bullet-->

                                <!--begin::Event start date/time-->
                                <div class="fs-6"><span class="fw-bold">Inicia: </span>
                                    <span data-kt-calendar="event_start_date" id="event_start_date"></span>
                                </div>
                                <!--end::Event start date/time-->
                            </div>
                            <!--end::Row-->

                            <!--begin::Row-->
                            <div class="d-flex align-items-center mb-9">
                                <!--begin::Bullet-->
                                <span class="bullet bullet-dot h-10px w-10px bg-danger ms-2 me-7"></span>
                                <!--end::Bullet-->

                                <!--begin::Event end date/time-->
                                <div class="fs-6"><span class="fw-bold">Términa: </span> <span
                                        data-kt-calendar="event_end_date" id="event_end_date"></span></div>
                                <!--end::Event end date/time-->
                            </div>
                            <!--end::Row-->
                        </div>
                        <!--end::Modal body-->
                    </div>
                </div>
            </div>
            <!--end::Modal - view Product--><!--end::Modals-->
        </div>
        <!--end::Content-->
    </div>
    <!--end::Content wrapper-->
@endsection

@section('script')
    <script src="{{ asset('/metronic8/demo30/assets/js/custom/apps/calendar/calendar.js') }}"></script>
@endsection