<div class="page-content-wrapper">
    <div class="page-content">
        <div class="row">
            <div class="col-md-12">
                <div class="portlet light portlet-fit bordered calendar">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class=" icon-layers font-green"></i>
                            <span class="caption-subject font-green sbold uppercase">Calendar</span>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div class="row">
                            <div class="col-md-12 col-sm-12" id="cal_container">
                                <div id="beauty_calendar" class="has-toolbar"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<input type="hidden" id="userRoleIsDoctor" value="{$roleInfo->is_doctor}">

<div class="modal fade" id="add_modal" tabindex="-1" role="dialog" aria-labelledby="add_modal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="add_modal">Add new reserve</h4>
            </div>
            <form role="form" id="new_form" action="{$hosturl}/controllers/beauty_calendar.php?ac=save" method="post">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6" style="padding: 10px 15px;">
                            <div class="form-group">
                                <label class="col-md-3 txtl">Doctor</label>
                                <div class="col-md-9">
                                    <select class="form-control select2" required="required" name="doctor_id" data-placeholder="Select...">
                                        <option></option>
                                        {foreach $doctors as $doctor}
                                            <option value="{$doctor.user_id}">{$doctor.name}</option>
                                        {/foreach}
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6" style="padding: 10px 15px;">
                            <div class="form-group">
                                <label class="col-md-3 txtl">Services</label>
                                <div class="col-md-9">
                                    <select class="form-control select2" required="required" name="service_ids" id="service_ids"  data-placeholder="Select...">
                                        <option></option>
                                        {foreach $operation_types as $operation_type}
                                            <option value="{$operation_type->id}">{$operation_type->title}</option>
                                        {/foreach}
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6" style="padding: 10px 15px;">
                            <div class="form-group">
                                <label class="col-md-3 txtl">User</label>
                                <div class="col-md-9">
                                    <select class="form-control select2" required="required" name="user_id" data-placeholder="Select...">
                                        <option></option>
                                        {foreach $users as $user}
                                            <option value="{$user.user_id}">{$user.name}</option>
                                        {/foreach}
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6" style="padding: 10px 15px;">
                            <div class="form-group">
                                <label class="col-md-3 txtl">Branch</label>
                                <div class="col-md-9">
                                    <select class="form-control select2" required="required" name="branch_id" data-placeholder="Select...">
                                        <option></option>
                                        {foreach $branches as $branch}
                                            <option value="{$branch->id}">{$branch->name}</option>
                                        {/foreach}
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6" style="padding: 10px 15px;">
                            <div class="form-group">
                                <label class="col-md-3 txtl">Status</label>
                                <div class="col-md-9">
                                    <select class="form-control select2" required="required" name="status" data-placeholder="Select...">
                                        <option></option>
                                        {foreach $status as $single}
                                            <option value="{$single.id}" {if $single.id >= 4} disabled {/if}>{$single.name}</option>
                                        {/foreach}
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6" style="padding: 10px 15px;">
                            <div class="form-group">
                                <label class="col-md-3 txtl">Date</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control notPop datepicker" name="date" id="date" value="{$smarty.now|date_format:"%Y/%m/%d"}" required="required"/>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6" style="padding: 10px 15px;">
                            <div class="form-group">
                                <label class="col-md-3 txtl">Start time</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control notPop timepicker timepicker-24" name="start_time" id="start_time" value="07:00" required="required"/>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6" style="padding: 10px 15px;">
                            <div class="form-group">
                                <label class="col-md-3 txtl">End time</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control notPop timepicker timepicker-24" name="end_time" id="end_time" value="07:15" required="required"/>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6" style="padding: 10px 15px;">
                            <div class="form-group">
                                <label class="col-md-3 txtl">Room</label>
                                <div class="col-md-9">
                                    <select class="form-control select2" required="required" name="room_id" id="room_id" data-placeholder="Select...">
                                        <option></option>
                                        {foreach $operation_rooms as $room}
                                            <option value="{$room.id}">{$room.name}</option>
                                        {/foreach}
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6" style="padding: 10px 15px;">
                            <div class="form-group" id="patient_input">
                                <label class="col-md-3 txtl">Patient</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" name="patient_id" required="required" id="search_patient_op" data-placeholder="Select..."/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" id="save_btn" class="btn btn-primary">Save changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="edit_modal" tabindex="-1" role="dialog" aria-labelledby="add_modal">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="add_modal">Edit data</h4>
            </div>
            <form role="form" id="edit_form" action="{$hosturl}/controllers/beauty_calendar.php?ac=update" method="post">
                <div class="modal-body text-center" style="padding: 20px 0px 0px;">
                    <img src="{$path}/_assets/global/img/loading-spinner-grey.gif" alt="" class="loading">
                    <span> &nbsp;&nbsp;Loading... </span>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    {*<button type="button" id="save_btn" class="btn btn-primary">Save changes</button>*}
                </div>
            </form>
        </div>
    </div>
</div>

<style>

    #patient_input .error {
        display: inline-block !important;
    }

    .select2-results .select2-disabled {
        color: #b0acac;
    }

    .fc-license-message {
        display: none;
    }

    .fc-button {
        color: #FFFFFF !important;
        background-color: #4b8df8 !important;
        font-size: 12px !important;
        padding: 3px 8px 3px 8px !important;
        border: 0px solid #000 !important;
        border-radius: 11px !important;
    }

    .portlet.calendar.light .fc-button {
        top: 0;
        margin: 2px;
    }

    .portlet.calendar .fc-toolbar {
        margin-bottom: 9px;
    }

    .fc-content {
        overflow: hidden;
        height: 100%;
    }

    .fc-title {
        width: 100%;
        white-space: nowrap;
        text-align: right !important;
        padding-right: 2px;
        height: 100%;
    }

    .remove_it {
        /* border: 1px solid; */
        /* border-radius: 12px; */
        /* padding: 0px 3px; */
        font-size: 12px !important;
        margin-left: 4px;
        float: right;
    }

    .e-content {
        display: block;
        margin-right: 15px;
        height: 100%;
    }

    .fc-time-tip, .fc-doctor-tip, .fc-operation-type-tip, .fc-content-tip {
        white-space: nowrap;
    }

    .tooltip {
        opacity: 1 !important;
        display: block !important;
        border: none !important;
        border-radius: 5px !important;
    }

    .tooltip-inner {
        max-width: fit-content;
        background-color: transparent;
        color: #000;
    }

    .tooltip-arrow {
        display: block;
    }

    .popper,
    .tooltip {
        position: absolute;
        z-index: 9999;
        background: #FFC107;
        color: black;
        width: fit-content;
        border-radius: 3px;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
        padding: 10px;
        text-align: center;
    }

    .style5 .tooltip {
        background: #1E252B;
        color: #FFFFFF;
        max-width: 200px;
        width: auto;
        font-size: .8rem;
        padding: .5em 1em;
    }

    .popper .popper__arrow,
    .tooltip .tooltip-arrow {
        width: 0;
        height: 0;
        border-style: solid;
        position: absolute;
        margin: 5px;
    }

    .tooltip .tooltip-arrow,
    .popper .popper__arrow {
        border-color: #FFC107;
    }

    .style5 .tooltip .tooltip-arrow {
        border-color: #1E252B;
    }

    .popper[x-placement^="top"],
    .tooltip[x-placement^="top"] {
        margin-bottom: 5px;
    }

    .popper[x-placement^="top"] .popper__arrow,
    .tooltip[x-placement^="top"] .tooltip-arrow {
        border-width: 5px 5px 0 5px;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        bottom: -5px;
        left: calc(50% - 5px);
        margin-top: 0;
        margin-bottom: 0;
    }

    .popper[x-placement^="bottom"],
    .tooltip[x-placement^="bottom"] {
        margin-top: 5px;
    }

    .tooltip[x-placement^="bottom"] .tooltip-arrow,
    .popper[x-placement^="bottom"] .popper__arrow {
        border-width: 0 5px 5px 5px;
        border-left-color: transparent;
        border-right-color: transparent;
        border-top-color: transparent;
        top: -5px;
        left: calc(50% - 5px);
        margin-top: 0;
        margin-bottom: 0;
    }

    .tooltip[x-placement^="right"],
    .popper[x-placement^="right"] {
        margin-left: 5px;
    }

    .popper[x-placement^="right"] .popper__arrow,
    .tooltip[x-placement^="right"] .tooltip-arrow {
        border-width: 5px 5px 5px 0;
        border-left-color: transparent;
        border-top-color: transparent;
        border-bottom-color: transparent;
        left: -5px;
        top: calc(50% - 5px);
        margin-left: 0;
        margin-right: 0;
    }

    .popper[x-placement^="left"],
    .tooltip[x-placement^="left"] {
        margin-right: 5px;
    }

    .popper[x-placement^="left"] .popper__arrow,
    .tooltip[x-placement^="left"] .tooltip-arrow {
        border-width: 5px 0 5px 5px;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        right: -5px;
        top: calc(50% - 5px);
        margin-left: 0;
        margin-right: 0;
    }

</style>