@extends('layouts.app')
@section('content')
<style>
    .whatsapp-link {
        background-color: transparent;
        text-decoration: none;
        color: #25D366 !important;
        -webkit-transition: all .2s;
        transition: all .2s;
        margin: 0;
        padding: 0;
        cursor: pointer; 
    }
    .whatsapp-link:active {
        outline: 0; 
        color: #25D366 !important; 
    }
    .whatsapp-link:hover {
        outline: 0;
        color: #25D366 !important; 
        text-decoration: none;
    }
    .modal.show {
        overflow-x: hidden;
        overflow-y: auto;
    }
</style>
<link href="{{ dsAsset('css/custom/dashboard/dashboard.css')}}" rel="stylesheet" />
<link href="{{ dsAsset('css/custom/booking/booking-calendar.css')}}" rel="stylesheet" />

<div class="panel-header bg-primary-gradient">
    <div class="page-inner py-5">
        <div class="d-flex align-items-left align-items-md-center flex-column flex-md-row">
            <div>
                <h2 class="text-white pb-2 fw-bold">{{translate('Appointment Booking Dashboard')}}</h2>
            </div>
            @if($isMOGAdminOrSysAdmin)
                <div class="ml-md-auto py-2 py-md-0">
                    <select id="cmn_branch_id_outlets" name="cmn_branch_id_outlets" class="btn btn-secondary btn-round outlets" style="-webkit-appearance: none;">
                        <option value="0">All Outlets</option>
                        @foreach($branches as $branch)
                            <option value="{{ $branch->id }}">{{ $branch->decoded_name }}</option>
                        @endforeach
                    </select>
                </div>
            @endif
            <div class="ml-md-2 py-2 py-md-0">
                <a href="booking-calendar" class="btn btn-secondary btn-round">{{translate('Add New Booking')}}</a>
            </div>
        </div>
    </div>
</div>

<div class="page-inner mt--5">
    <div class="row mt--2 div-top-card">

        <div class="col-md-3">
            <div class="card full-height">
                <div class="card-body">
                    <div class="fs-11rem">{{translate('Total Done')}}</div>
                    <div class="d-flex flex-wrap justify-content-around pb-2 pt-2">
                        <div class="px-2 pb-2 pb-md-0 text-center">
                            <h1 class="fw-bold mb-0 mt-2" id="divDoneBookingText">0</h1>
                        </div>
                        <div class="px-2 pb-2 pb-md-0 text-center">
                            <div id="divDoneBooking"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card full-height">
                <div class="card-body">
                    <div class="fs-11rem">{{translate('Total Cancel')}}</div>
                    <div class="d-flex flex-wrap justify-content-around pb-2 pt-2">
                        <div class="px-2 pb-2 pb-md-0 text-center">
                            <h1 class="fw-bold mb-0 mt-2" id="divCancelBookingText">0</h1>
                        </div>
                        <div class="px-2 pb-2 pb-md-0 text-center">
                            <div id="divCancelBooking"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card full-height">
                <div class="card-body">
                    <div class="fs-11rem">{{translate('Total Approved')}}</div>
                    <div class="d-flex flex-wrap justify-content-around pb-2 pt-2">
                        <div class="px-2 pb-2 pb-md-0 text-center">
                            <h1 class="fw-bold mb-0 mt-2" id="divApprovedBookingText">0</h1>
                        </div>
                        <div class="px-2 pb-2 pb-md-0 text-center">
                            <div id="divApprovedBooking"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card full-height">
                <div class="card-body">
                    <div class="fs-11rem">{{translate('Pending')}}</div>
                    <div class="d-flex flex-wrap justify-content-around pb-2 pt-2">
                        <div class="px-2 pb-2 pb-md-0 text-center">
                            <h1 class="fw-bold mb-0 mt-2" id="divProcessingAndPendingBookingText">0</h1>
                        </div>
                        <div class="px-2 pb-2 pb-md-0 text-center">
                            <div id="divProcessingAndPendingBooking"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div class="row mt--2 div-today-service-card">
        <div class="col-12">
            <div class="card full-height">
                <div class="card-body">
                    <div class="card-title">{{translate("Today's Service statistics")}}</div>
                    <div class="card-category">{{translate('Show all service statistics based on user branch permission.')}}</div>
                    <div class="d-flex flex-wrap justify-content-around pb-2 pt-4">
                        <div class="px-2 pb-2 pb-md-0 text-center">
                            <div id="divTotalBookingToday"></div>
                            <h6 class="fw-bold mt-3 mb-0">{{translate('Total')}}</h6>
                        </div>
                        <div class="px-2 pb-2 pb-md-0 text-center">
                            <div id="divDoneBookingToday"></div>
                            <h6 class="fw-bold mt-3 mb-0">{{translate('Done')}}</h6>
                        </div>
                        <div class="px-2 pb-2 pb-md-0 text-center">
                            <div id="divCancelBookingToday"></div>
                            <h6 class="fw-bold mt-3 mb-0">{{translate('Cancel')}}</h6>
                        </div>
                        <div class="px-2 pb-2 pb-md-0 text-center">
                            <div id="divApprovedBookingToday"></div>
                            <h6 class="fw-bold mt-3 mb-0">{{translate('Approved')}}</h6>
                        </div>
                        <div class="px-2 pb-2 pb-md-0 text-center">
                            <div id="divPendingBookingToday"></div>
                            <h6 class="fw-bold mt-3 mb-0">{{translate('Pending')}} </h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- <div class="col-md-5">
            <div class="card full-height">
                <div class="card-body">
                    <div class="card-title">{{translate("Today's Income & Other Statistics")}}</div>
                    <div class="row py-3">
                        <div class="col-md-6 d-flex flex-column justify-content-around">
                            <div>
                                <h6 class="fw-bold text-uppercase text-success op-8">{{translate('Total Income')}}</h6>
                                <h3 id="totalIncome" class="fw-bold">0</h3>
                            </div>
                            <div>
                                <h6 class="fw-bold text-uppercase text-danger op-8">{{translate('Total Due')}}</h6>
                                <h3 id="totalDue" class="fw-bold">0</h3>
                            </div>
                        </div>
                        <div class="col-md-6 d-flex flex-column justify-content-around">
                            <div>
                                <h6 class="fw-bold text-uppercase text-success op-8">{{translate('Total Cash Payment')}}</h6>
                                <h3 id="totalCash" class="fw-bold">0</h3>
                            </div>
                            <div>
                                <h6 class="fw-bold text-uppercase text-primary op-8">{{translate('Total Online Payment')}}</h6>
                                <h3 id="totalOnlinePayment" class="fw-bold">0</h3>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div> -->
    </div>

    <div class="row mt--2 div-today-service-card">
        <div id="monthly-services" class="{{ $isMOGAdminOrSysAdmin ? 'col-md-8' : 'col-12' }}">
            <div class="card full-height">
                <div class="card-body">
                    <div class="card-title">{{translate("This Month's Service Statistics")}}</div>
                    <div class="card-category">{{translate('Show all service statistics based on user branch permission.')}}</div>
                    <div class="d-flex flex-wrap justify-content-around pb-2 pt-4">
                        <div class="px-2 pb-2 pb-md-0 text-center">
                            <div id="divTotalBookingMonth"></div>
                            <h6 class="fw-bold mt-3 mb-0">{{translate('Total')}}</h6>
                        </div>
                        <div class="px-2 pb-2 pb-md-0 text-center">
                            <div id="divDoneBookingMonth"></div>
                            <h6 class="fw-bold mt-3 mb-0">{{translate('Done')}}</h6>
                        </div>
                        <div class="px-2 pb-2 pb-md-0 text-center">
                            <div id="divCancelBookingMonth"></div>
                            <h6 class="fw-bold mt-3 mb-0">{{translate('Cancel')}}</h6>
                        </div>
                        <div class="px-2 pb-2 pb-md-0 text-center">
                            <div id="divApprovedBookingMonth"></div>
                            <h6 class="fw-bold mt-3 mb-0">{{translate('Approved')}}</h6>
                        </div>
                        <div class="px-2 pb-2 pb-md-0 text-center">
                            <div id="divPendingBookingMonth"></div>
                            <h6 class="fw-bold mt-3 mb-0">{{translate('Pending')}} </h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @if($isMOGAdminOrSysAdmin)
            <div id="top-branch" class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">{{translate('Top Branch')}}</div>
                    </div>
                    <div class="card-body pb-0" id="div-body-top-branch">


                    </div>
                </div>
            </div>
        @endif
    </div>

    <div class="row">
        <div class="col-md-8">
            <div class="card full-height">
                <div class="card-header">
                    <div class="card-head-row">
                        <div class="card-title">{{translate('Booking Info')}}</div>

                        <div class="card-tools">

                            <ul class="nav nav-pills nav-secondary nav-pills-no-bd nav-sm" id="pills-tab" role="tablist">
                                <li class="nav-item">
                                    <select id="booking-info-service-status" class="form-control input-sm mt-1">
                                        <option value="">All Except Completed</option>
                                        <option value="1" selected>Pending & Approved</option>
                                        <option value="0">Pending</option>
                                        <option value="2">Approved</option>
                                        <option value="3">Cancelled</option>
                                        <option value="4">Completed Appointment</option>
                                        <option value="5">Converted to Sales Only</option>
                                        <option value="6">Converted to Member Only</option>
                                        <option value="7">Converted to Member with Sales</option>
                                    </select>
                                </li>
                                <li class="nav-item">
                                    <a class="booking-info-duration nav-link" id="booking-info-duration-pill-today" data-toggle="pill" href="#pills-today" role="tab" aria-selected="true">{{translate('Today')}}</a>
                                    <input type="radio" id="booking-info-duration-radio-today" name="booking-info-duration-radio" value="1" />
                                </li>
                                <li class="nav-item">
                                    <a class="booking-info-duration nav-link" id="booking-info-duration-pill-week" data-toggle="pill" href="#pills-week" role="tab" aria-selected="true">{{translate('Week')}}</a>
                                    <input type="radio" id="booking-info-duration-radio-week" name="booking-info-duration-radio" value="3" />
                                </li>
                                <li class="nav-item">
                                    <a class="booking-info-duration nav-link active" id="booking-info-duration-pill-month" data-toggle="pill" href="#pills-month" role="tab" aria-selected="false">{{translate('Month')}}</a>
                                    <input type="radio" id="booking-info-duration-radio-monthly" checked name="booking-info-duration-radio" value="2" />
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="card-body scrollbar-outer" id="div-body-booking-info">
                    
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <div class="card-title">{{translate('Top Booking Service')}}</div>
                </div>
                <div class="card-body pb-0" id="div-body-top-booking-service">


                </div>
            </div>
        </div>

    </div>
    <!--Modal-->
    <div class="modal fade" id="frmModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <form class="form-horizontal" id="inputForm" novalidate="novalidate">
                    <div class="modal-body">
                        <h5 class="modal-title">
                            <span class="fw-mediumbold">
                            {{translate('Booking No #')}}<span id="span-booking-no"></span>
                            </span>
                        </h5>
                        <input type="hidden" id="booking_id" name="id" />
                        <div class="form-group control-group form-inline">
                            <div class="row">
                                <div class="col-md-12">
                                    <span>{{translate('Service Status')}}</span>
                                    <select id="status" name="status" class="form-control input-full">
                                        <option selected value="0">Pending</option>
                                        <option value="2">Approved</option>
                                        <option value="3">Cancel</option>
                                        <option value="4">{{translate('Completed Appointment')}}</option>
                                        <option value="5">{{translate('Converted to Sales Only')}}</option>
                                        <option value="6">{{translate('Converted to Member Only')}}</option>
                                        <option value="7">{{translate('Converted to Member with Sales')}}</option>
                                    </select>
                                </div>
                                <div class="col-md-12 control-group mt-2">
                                    <div class="form-group control-group form-inline px-1 py-0 d-flex align-items-center">
                                        <label class="switch">
                                            <input id=email_notify name="email_notify" type="checkbox" value="1" class="rm-slider">
                                            <span class="slider round"></span>
                                        </label>
                                        <label class="pt-1 ml-1 pb-1"> {{translate('Send notification by email')}}</label>
                                        <span class="help-block"></span>
                                    </div>
                                    <div class="form-group control-group form-inline px-1 py-0 d-flex align-items-center">
                                        <label class="switch" style="opacity: 0;">
                                            <input id=whatsapp_notify name="whatsapp_notify" type="checkbox" value="1" class="rm-slider">
                                            <span class="slider round"></span>
                                        </label>
                                        <!-- <label class="pt-1 ml-1 pb-1"> {{translate('Send notification by whatsapp')}}</label> -->
                                        <span class="help-block"></span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer pb-0 pr-2">
                            <button id="btn-view-details" type="button" class="btn btn-info btn-sm">{{translate('View Details')}}</button>
                            <button type="submit" class="btn btn-success btn-sm">{{translate('Save Change')}}</button>
                            <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">{{translate('Close')}}</button>
                        </div>
                </form>

            </div>
        </div>
    </div>
</div>

<!-- Edit booking -->
<div class="modal fade" id="frmAddScheduleModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <form class="form-horizontal" id="inputFormBooking" novalidate="novalidate">

                <div class="modal-header">
                    <h5 class="modal-title">
                        <span class="fw-mediumbold">
                            {{translate('Add/Edit Service')}}
                        </span>
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">

                    <section>
                        <div class="form-row">
                            <div class="col-md-3 control-group">
                                <label for="cmn_branch_id" class="float-left">{{translate('Branch')}}</label>
                                <select required id="cmn_branch_id" name="cmn_branch_id" class="serviceInput form-control">

                                </select>
                            </div>
                            <div class="col-md-3 control-group">
                                <label for="sch_service_category_id" class="float-left">{{translate('Category')}}</label>
                                <select required id="sch_service_category_id" name="sch_service_category_id" class="serviceInput form-control">

                                </select>
                            </div>
                            <div class="col-md-3 control-group">
                                <label for="sch_service_id" class="float-left">{{translate('Service')}}</label>
                                <select required id="sch_service_id" name="sch_service_id" class="serviceInput form-control" data-live-search="true">
                                    <option value="">{{translate('Select One')}}</option>
                                </select>
                            </div>
                            <div class="col-md-3 control-group">
                                <label for="sch_employee_id" class="float-left">{{translate('Staff')}}</label>
                                <select required id="sch_employee_id" name="sch_employee_id" class="serviceInput form-control" data-live-search="true">
                                    <option value="">{{translate('Select One')}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-row mt-2">
                            <div class="col-md-auto col-lg-auto col-sm-auto" id="divServiceCalendar">
                                <div class="row">
                                    <div class="col-md-12">
                                        <label for="serviceDate" class="float-left">{{translate('Service Date')}}</label>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12 control-group">
                                        <input id="serviceDate" required name="service_date" class="form-control input-sm" type="text" readonly />
                                        <div id="divServiceDate" style="float: left;"></div>
                                    </div>
                                </div>

                            </div>
                            <div class="col">
                                <div id="divTopDays">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="float-left" id="divDaysName"></div>
                                            <div class="float-right" id="divPreNext">
                                                <i id="iPrvDate" title="{{translate('Previous day')}}" class="iChangeDate fa fa-chevron-left float-left"></i>
                                                <i id="iNextDate" title="{{translate('Next day')}}" class="iChangeDate fa fa-chevron-right float-right"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row divServiceAvaiable">
                                        <div class="col-md-12" id="divServiceAvaiableTime">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="col divSelectedService">
                                <i class="fa fa-calendar float-left pl-2 mt-1 mr-1" aria-hidden="true"></i>
                                <i id="iSelectedServiceText" class=""></i>
                            </div>

                            <!-- <div class="col-md-auto col-lg-auto col-sm-auto float-end">
                                <button type="button" class="btn btn-success float-end" id="add-service-btn"><i class="fas fa-plus-circle"></i> {{translate('Add more service')}}</button>
                            </div> -->
                        </div>

                        <div class="form-row d-none" id="div-service-summary">
                            <div class="col-md-12">
                                <table id="tbl-service-cart" class="table table-bordered fs-13 text-start">
                                    <thead>
                                        <tr>
                                            <th>{{translate('SL')}}</th>
                                            <th>{{translate('Service')}}</th>
                                            <th>{{translate('Staff')}}</th>
                                            <th>{{translate('Date')}}</th>
                                            <th>{{translate('Time')}}</th>
                                            <th>{{translate('Fee')}}</th>
                                            <th class="text-center">{{translate('Opt')}}</th>
                                        </tr>
                                    </thead>
                                    <tbody class="text-start" id="iSelectedServiceList"></tbody>
                                </table>

                            </div>

                            <div class="col-md-12">
                                <div class="float-right mb-3 mt-2"><b>{{translate('Total Amount:')}} <span id="service-total-amount"></span> </b> </div>
                            </div>
                            <div class="col-md-12">
                                <div class="float-right"><b>{{translate('Discount Amount:')}} <span id="service-discount-amount">0</span> </b> </div>
                            </div>

                            <div class="col-md-12 control-group">
                                <label for="coupon_code" class="float-left">{{translate('Apply Coupon Code')}}</label>
                                <div class="input-group">
                                    <input id="coupon_code" name="coupon_code" class="form-control" data-live-search="true" />
                                    <div class="input-group-append">
                                        <button id="btn-apply-coupon" class="btn btn-success btn-sm" type="button"> {{translate('Apply Coupon')}}</button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="float-right mt-4"><b>{{translate('Payable Amount:')}} <span id="service-payable-amount"></span> </b> </div>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="col-md-12 mt-3 control-group">
                                <label for="cmn_customer_id" class="float-left">{{translate('Customer')}} <b class="color-red"> *</b> </label>
                                <div class="input-group">
                                    <select required id="cmn_customer_id" name="cmn_customer_id" class="form-control" data-live-search="true"></select>
                                    <div class="input-group-append">
                                        <button id="btnAddNewCustomer" class="btn btn-primary btn-sm" type="button"><i class="fas fa-plus-circle"></i> {{translate('Add Customer')}}</button>
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="col-md-12 mt-3">
                                <div class="row">
                                    <div class="col-md-7 control-group">
                                        <label for="cmn_payment_type_id" class="float-left">{{translate('Payment By')}}<b class="color-red"> *</b></label>
                                        <select required id="cmn_payment_type_id" name="cmn_payment_type_id" class="form-control"></select>
                                    </div>
                                    <div class="col-md-5 control-group">
                                        <label for="paid_amount" class="float-left">{{translate('Paid Amount')}}</label>
                                        <input required type="number" id="paid_amount" name="paid_amount" class="form-control" />
                                        <div id="divPaymentStatus" class="d-none">{{translate('Paid/Unpaid')}}</div>
                                    </div>
                                </div>
                            </div> -->
                            <div class="col-md-12 mt-3">
                                <div class="row">
                                    <div class="col-md-12 control-group">
                                        <label for="status" class="float-left">{{translate('Application Status')}}</label>
                                        <select required id="status" name="status" class="form-control">
                                            <option value="2">{{translate('Approved')}}</option>
                                            <option value="0">{{translate('Pending')}}</option>
                                            <option value="3">{{translate('Cancel')}}</option>
                                            <option value="4">{{translate('Completed Appointment')}}</option>
                                            <option value="5">{{translate('Converted to Sales Only')}}</option>
                                            <option value="6">{{translate('Converted to Member Only')}}</option>
                                            <option value="7">{{translate('Converted to Member with Sales')}}</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 mt-3 control-group">
                                <label for="remarks" class="float-left">{{translate('Remarks')}}</label>
                                <textarea id="remarks" name="remarks" class="form-control" rows="2"></textarea>
                            </div>
                            <div class="col-md-12 control-group mt-2">
                                <div class="form-group control-group form-inline px-1 py-0">
                                    <label class="switch">
                                        <input id=email_notify_update name="email_notify_update" type="checkbox" value="1" class="rm-slider">
                                        <span class="slider round"></span>
                                    </label>
                                    <label class="pt-1 ml-1"> {{translate('Send booking notification by email')}}</label>
                                    <span class="help-block"></span>
                                </div>
                                <div class="form-group control-group form-inline px-1 py-0">
                                    <label class="switch">
                                        <input id=whatsapp_notify_update name="whatsapp_notify_update" type="checkbox" value="1" class="rm-slider">
                                        <span class="slider round"></span>
                                    </label>
                                    <label class="pt-1 ml-1"> {{translate('Send booking notification by whatsapp')}}</label>
                                    <span class="help-block"></span>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success btn-sm">Save Change</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- View details -->
<div class="modal fade details-view-modal" id="modalViewScheduleDetails" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header d-none">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="col-md-12">
                    <div id="task-details-body-wrap">
                        <div id="task-details-body-wrap-user">
                            <img id="scheduleEmployeeImage" src="" alt="user image">
                            <h4 id="scheduleEmployee"></h4>
                            <p id=scheduleSpecialist></p>
                        </div>
                        <div id="task-details-body-wrap-task">
                            <p>Branch: <span id="scheduleBranch"></span></p>
                            <p>Customer: <span id="scheduleCustomer"></span></p>
                            <p>Phone: <span id="scheduleCustomerPhone"></span> 
                                <a id="scheduleCustomerPhoneLink" target="_blank" href="" class="pl-1 whatsapp-link">
                                    <i class="fab fa-whatsapp fa-lg"></i>
                                </a>
                            </p>
                            <p>Email: <span id="scheduleCustomerEmail"></span></p>
                            <p>Service Booking Date: <span id="scheduleServiceBookingDate"></span></p>
                            <p>Service Date: <span id="scheduleServiceDate"></span></p>
                            <p>Service: <span id="scheduleService"></span></p>
                            <p>Service Time: <span id="scheduleServiceTime"></span></p>
                            <p>Paid Amount: <span id="schedulePaidAmount"></span></p>
                            <p>Remarks: <span id="scheduleRemarks"></span></p>
                            <p>Source: <span id="scheduleSource"></span></p>
                            <p>Service Status: <span id="scheduleServiceStatus"></span></p>

                        </div>
                    </div>
                </div>
                <div class="col-md-12 control-group">
                    <div class="form-group control-group form-inline px-0 py-0 d-flex align-items-center">
                        <label class="switch">
                            <input id="view_email_notify" name="view_email_notify" type="checkbox" value="1" class="rm-slider" autocomplete="off">
                            <span class="slider round"></span>
                        </label>
                        <label class="pt-1 ml-1 pb-1"> Send notification by email</label>
                        <span class="help-block"></span>
                    </div>
                    <div class="form-group control-group form-inline px-0 py-0 d-flex align-items-center">
                        <label class="switch">
                            <input id="view_whatsapp_notify" name="view_whatsapp_notify" type="checkbox" value="1" class="rm-slider" autocomplete="off">
                            <span class="slider round"></span>
                        </label>
                        <label class="pt-1 ml-1 pb-1"> Send notification by whatsapp</label>
                        <span class="help-block"></span>
                    </div>
                </div>
            </div>
            <div class="modal-footer pt-0">
                <!-- Prevent rendering delete button for Mog Branch -->
                @if (Str::lower($userRole) !== 'mog branch')
                <button type="button" id="btn-schedule-delete" class="btn btn-danger btn-sm" title="Delete Booking"><i class="far fa-trash-alt"> </i> Delete</button>
                @endif
                <button type="button" id="btn-schedule-cancel" class="btn btn-warning btn-sm" title="Cancel Booking"><i class="fas fa-times-circle"></i> Cancel</button>
                <button type="button" id="btn-schedule-edit" class="btn btn-primary btn-sm float-left" title="Edit Booking"><i class="far fa-edit"></i> Edit</button>
                <button type="button" id="btn-schedule-done" class="btn btn-success btn-sm" title="Complete Booking"><i class="fas fa-check-circle"></i> Done</button>
            </div>
        </div>
    </div>
</div>

<!-- Chart JS -->
<script src="{{ dsAsset('js/lib/assets/js/plugin/chart.js/chart.min.js') }}"></script>

<!-- jQuery Sparkline -->
<script src="{{ dsAsset('js/lib/assets/js/plugin/jquery.sparkline/jquery.sparkline.min.js') }}"></script>

<!-- Chart Circle -->
<script src="{{ dsAsset('js/lib/assets/js/plugin/chart-circle/circles.min.js') }}"></script>
<!-- jQuery Vector Maps -->
<script src="{{ dsAsset('js/lib/assets/js/plugin/jqvmap/jquery.vmap.min.js') }}"></script>
<script src="{{ dsAsset('js/lib/assets/js/plugin/jqvmap/maps/jquery.vmap.world.js') }}"></script>

<!-- dashboard JS -->
<script src="{{ dsAsset('js/custom/dashboard/main-dashboard.js')}}"></script>

@endsection