@section('meta')
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <!-- Chrome, Firefox OS and Opera -->
    <meta name="theme-color" content="#0B344A">
    <!-- Windows Phone -->
    <meta name="msapplication-navbutton-color" content="#0B344A">
    <!-- iOS Safari -->
    <meta name="apple-mobile-web-app-status-bar-style" content="#0B344A">
@endsection

<span id="is-index-page"></span>
<div id="index-container">
    <div id="index-content">
        

        <div id="workspace-container2">
            <div id="workspace-header">
                <div id="workspace-header-content">
                    <div class="workspace-header-control">
                        <button class="btn btn-success btn-sm" id="display-cm-listview-btn">@lang("CarCompartment_model.listview")</button>
                    </div>

                    <div class="workspace-header-control" style="width: 37%">
                        <input type="text" id="search_header_input" style="width: 80%" placeholder="Nhập nội dung cần tìm kiếm" />
                        <button class="btn btn-primary" id="search_header_button">
                            <i class="fa fa-search"></i> <span id="btn-search-label"></span></label>
                        </button>
                    </div>

                    <div class="workspace-header-control" style="line-height: 0px;margin-top: -5px">
                        <label style="font-weight: normal"><input type="checkbox" id="ck-filter-compartment" /> <span id="ck-compartment-label"></span></label>
                        <div style="margin-top: -2px"><label style="font-weight: normal"><input type="checkbox" id="ck-filter-fill-compartment" /> <span id="ck-fill-compartment-label"></span></label></div>
                    </div>

                    <div class="workspace-header-control" style="margin-right: 0px">
                        <select class="form-control" id="branch_header_combobox">
                        </select>
                    </div>
                </div>
            </div>
            <div id="workspace-content">
                <div id="compartment-container" class="clearfix"></div>
            </div>
        </div>

       
    </div>

</div>

<div id="moving-item">
</div>


<div style="display: none">
    <div id="editCustomerInfoDialog">
        <div class="row form-group">
            <div class="col-sm-6">
                <label class="form-label">
                    @lang("CarCompartment_model.name")
                    <div class="input-group">
                        <select name="compartmentID" id="cm-select-box" class="form-control"></select>
                    </div>
                </label>
            </div>
            <div class="col-sm-6 row-padding">
                <label class="form-label">
                    @lang("floor_manager.customer_name")
                    <div class="input-group">
                        <input type="text" class="form-control" name="customerName" />
                    </div>
                </label>
            </div>
        </div> <!-- bàn -->

        <div class="row form-group">
            <div class="col-sm-6">
                <label class="form-label">
                    @lang("CarCompartment_model.sa")
                    <div class="input-group">
                        <select name="sa" id="sa-select-box" class="form-control"></select>
                    </div>
                </label>
            </div>
            <div class="col-sm-6 row-padding">
                <label class="form-label">
                    @lang("floor_manager.car_code")
                    <div class="input-group">
                        <div class="row">
                            <div class="col-xs-10" style="padding-right: 0px">
                                <input type="text" class="form-control" name="plate"/>
                            </div>
                            <div class="col-xs-2" style="padding-left: 0px">
                                <button class="btn btn-success" id="search-cus-btn">
                                    <i class="fa fa-search"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </label>
            </div>
        </div> <!-- Nhân viên phụ trách -->

        <div class="row form-group">
            <div class="col-sm-6">
                <label class="form-label">
                    @lang("floor_manager.time_to")
                    <div class="input-group">
                        <input type="text" class="form-control clockpicker" name="time_to" />
                    </div>
                </label>
            </div>
            <div class="col-sm-6 row-padding">
                <label class="form-label">
                    <span id="timeout-label">@lang("floor_manager.time_out")</span>
                    <div class="input-group">
                        <input type="text" class="form-control clockpicker" name="time_out" />
                    </div>
                </label>
            </div>
        </div> <!-- Nước uống -->

        <div class="row form-group">
            <div class="col-sm-6">
                <label class="form-label">
                    @lang("floor_manager.date_to")
                    <div class="input-group">
                        <input type="text" class="form-control" disabled name="date_to" />
                    </div>
                </label>
            </div>
            <div class="col-sm-6 row-padding">
                <label class="form-label">
                    @lang("CarCompartment_model.delivery_date")
                    <div class="input-group">
                        <input type="text" class="form-control datepicker" placeholder="@lang('dateformat.format_js')" name="delivery_date" />
                    </div>
                </label>
            </div>
        </div> <!-- Ngày đến -->

        <div class="row form-group" id="wash_time_box">
            <div class="col-sm-6">
                <label class="form-label">
                    @lang("CarCompartment_model.start_wash_time")
                    <div class="input-group">
                        <div class="row">
                            <div class="col-xs-8" style="padding-right: 0px">
                                <input type="text" class="form-control datepicker" placeholder="@lang('dateformat.format_js')" name="startWashTime" />
                            </div>
                            <div class="col-xs-4" style="padding-left: 0px">
                                <input type="text" class="form-control clockpicker" placeholder="HH:mm" name="timeStartWash" />
                            </div>
                        </div>
                    </div>
                </label>
            </div>
            <div class="col-sm-6 row-padding">
                <label class="form-label">
                    @lang("CarCompartment_model.end_wash_time")
                    <div class="input-group">
                        <div class="row">
                            <div class="col-xs-8" style="padding-right: 0px">
                                <input type="text" class="form-control datepicker" placeholder="@lang('dateformat.format_js')" name="endWashTime" />
                            </div>
                            <div class="col-xs-4" style="padding-left: 0px">
                                <input type="text" class="form-control clockpicker" placeholder="HH:mm" name="timeEndWash" />
                            </div>
                        </div>
                    </div>
                </label>
            </div>
        </div> <!-- Ngày đến -->

        <div class="row form-group">
            <div class="col-sm-6">
                <label class="form-label">
                    @lang("floor_manager.insurrance")
                    <div class="input-group">
                        <select name="insurranceId" id="insurrance-select-box" class="form-control"></select>
                    </div>
                </label>
            </div>
            <div class="col-sm-6 row-padding">
                <label class="form-label">
                    @lang("floor_manager.loan_car")
                    <div class="input-group">
                        <select name="loanCarId" id="loan-car-select-box" class="form-control"></select>
                    </div>
                </label>
            </div>
        </div> <!-- bảo hiểm -->

        <div class="row form-group">
            <div class="col-sm-6">
                <label class="form-label">
                    @lang("floor_manager.destination")
                    <div class="input-group">
                        <select name="purpose" id="destination-select-box" class="form-control"></select>
                    </div>
                </label>
            </div>
            <div class="col-sm-6 row-padding">
                <label class="form-label">
                    @lang("floor_manager.car_type")
                    <div class="input-group">
                        <input type="text" class="form-control" name="carType" />
                    </div>
                </label>
            </div>
        </div> <!-- Ngày đến -->

        <div class="row form-group">
            <div class="col-sm-6">
                <label class="form-label">
                    @lang("floor_manager.birthday")
                    <div class="input-group">
                        <input type="text" class="form-control datepicker" placeholder="@lang('dateformat.format_js')" name="birthday" />
                    </div>
                </label>
            </div>
            <div class="col-sm-6 row-padding">
                <label class="form-label">
                    @lang("floor_manager.carcolor")
                    <div class="input-group">
                        <input type="text" class="form-control" name="carColor" />
                    </div>
                </label>
            </div>
        </div> <!-- Điện thoại -->

        <div class="row form-group">
            <div class="col-sm-6">
                <label class="form-label">
                    @lang("floor_manager.phone_number")
                    <div class="input-group">
                        <input type="text" class="form-control" name="phone" />
                    </div>
                </label>
            </div>
            <div class="col-sm-6 row-padding">
                <label class="form-label">
                    Email
                    <div class="input-group">
                        <input type="text" class="form-control" name="email" />
                    </div>
                </label>
            </div>
        </div> <!-- Điện thoại -->

        <div class="row form-group">
            <div class="col-sm-6">
                <label class="form-label">
                    @lang("floor_manager.city")
                    <div class="input-group">
                        <select class="form-control" name="cityID" id="city-select-box"></select>
                    </div>
                </label>
            </div>
            <div class="col-sm-6 row-padding">
                <label class="form-label">
                    @lang("floor_manager.district")
                    <div class="input-group">
                        <select class="form-control" name="districtID" id="district-select-box"></select>
                    </div>
                </label>
            </div>
        </div> <!-- city -->

        <div class="row form-group">
            <div class="col-sm-6">
                <label class="form-label">
                    @lang("floor_manager.address")
                    <div class="input-group">
                        <input type="text" class="form-control" name="address" />
                    </div>
                </label>
            </div>
            <div class="col-sm-6 row-padding">
                <label class="form-label">
                    @lang("floor_manager.km")
                    <div class="input-group">
                        <input type="text" class="form-control" name="km" />
                    </div>
                </label>
            </div>
        </div> <!-- city -->

        
        <div class="row form-group">
            <div class="col-sm-6">
                <label class="form-label">
                    @lang("floor_manager.sex")
                    <div class="input-group">
                        <select name="gender" class="form-control">
                            <option value="1">@lang('floor_manager.male')</option>
                            <option value="2">@lang('floor_manager.female')</option>
                            <option value="3">@lang('floor_manager.other')</option>
                        </select>
                    </div>
                </label>

                <div class="clearfix">
                    <label class="form-group checkbox-box pull-left" style="margin-top: 8px">
                        <input type="checkbox" name="custody_ck" /> @lang("floor_manager.have_storage")
                    </label>
                </div>
            </div>
            <div class="col-sm-6 ">
                <label class="form-label">
                    @lang("floor_manager.note")
                    <div class="input-group">
                        <textarea class="form-control" name="note" style="resize: none"></textarea>
                    </div>
                </label>
            </div>
        </div> <!-- Nước uống -->


    </div>
</div> <!--edit customer dialog -->

<div style="display: none">
    <div id="addNewVisitCustomerDialog">
        <input type="hidden" name="customer_id" />
        <div class="row form-group">
            <div class="col-sm-10 col-xs-9">
                <div class="input-group" style="width: 100%;position: relative">
                    <input type="text" id="search-customer-txt" class="form-control lenter"  style="border-radius: 0;-webkit-border-radius: 0;-moz-border-radius: 0" placeholder="@lang('CarCompartment_model.search_car_placeholder')" />
                    <div id="search-customer-dropdown">
                        
                    </div>
                </div>
            </div>
            <div class="col-sm-2 col-xs-3" style="padding-left: 0px">
                <button class="btn btn-success" id="search-customer-btn" style="border-radius: 0;-webkit-border-radius: 0;-moz-border-radius: 0">@lang('floor_manager.search')</button>
            </div>
        </div>

        <div class="row form-group">
            <div class="col-sm-6">
                <label class="form-label">
                    @lang("floor_manager.car_code") (*)
                    <div class="input-group">
                        <input type="text" class="form-control" name="plate" />
                    </div>
                </label>
            </div>
            <div class="col-sm-6 row-padding">
                <label class="form-label">
                    @lang("floor_manager.customer_name") (*)
                    <div class="input-group">
                        <input type="text" class="form-control" name="customerName" />
                    </div>
                </label>
            </div>
        </div> <!-- bàn -->

        <div class="row form-group">
            <div class="col-sm-6">
                <label class="form-label">
                    @lang("CarCompartment_model.sa") (*)
                    <div class="input-group">
                        <select name="sa" id="staff-select-box2" class="form-control"></select>
                    </div>
                </label>
            </div>
            
            <div class="col-sm-6 row-padding">
                <label class="form-label">
                    @lang("floor_manager.time_to")
                    <div class="input-group">
                        <input type="text" class="form-control clockpicker" name="time_to" />
                    </div>
                </label>
            </div>
        </div> <!-- Nhân viên phụ trách -->

        
        <div class="row form-group">
            <div class="col-sm-6">
                <label class="form-label">
                    @lang("floor_manager.phone_number")
                    <div class="input-group">
                        <input type="text" class="form-control" name="phone" />
                    </div>
                </label>
            </div>
            <div class="col-sm-6 row-padding">
                <label class="form-label">
                    Email
                    <div class="input-group">
                        <input type="text" class="form-control" name="email" />
                    </div>
                </label>
            </div>
        </div> <!-- Điện thoại -->


        <div class="row form-group">
            <div class="col-sm-6">
                <label class="form-label">
                    @lang("floor_manager.carcolor")
                    <div class="input-group">
                        <input type="text" class="form-control" name="carColor" />
                    </div>
                </label>

            </div>
            
            <div class="col-sm-6 row-padding">
                <label class="form-label">
                    @lang("floor_manager.car_type")
                    <div class="input-group">
                        <input type="text" class="form-control" name="carType" />
                    </div>
                </label>
            </div>
        </div> <!-- Nước uống -->

    </div>
</div> <!-- add new customer dialog - -->

<div id="block-ui">
    <h3 class="clearfix">
        <span id="block-ui-msg">@lang("floor_manager.please_wait")</span>
    </h3>
</div>


<div id="mtabs">
    <div id="tab-container">
        <div id="top-tab-container" class="ui-widget-container">
            <i class="fa fa-minus-square" id="minimize-top-tab" title="@lang("floor_manager.minimize")"></i>
        
            <ul class="nav nav-tabs drop-container" id="ul-top-tab">
            </ul> 

            <div id="tab-content-top" class="tab-content">
            </div>
        </div> <!--# top-tab-container -->

        <div id="resize-top-tab">
        </div>

        <div id="bottom-tab-container" class="ui-widget-container">
            <i class="fa fa-minus-square" id="minimize-bottom-tab" title="@lang("floor_manager.minimize")"></i>

            <ul class="nav nav-tabs drop-container" id="ul-bottom-tab">
            </ul>

            <div id="tab-content-bottom" class="tab-content">
            </div>

        </div> <!--# bottom-tab-container -->

        <div id="resize-tab-container">
        </div>
    </div> <!--#tab-container-->

    <div id="maximize-tab-container" class="ui-widget-container">
        <ul class="nav nav-tabs">
            <li class="nav-item" id="maximize-top-tab">
            </li>

            <li class="nav-item" id="maximize-bottom-tab">
            </li>
        </ul>
    </div>
</div>


@section("footer")
<div id="footer">
    <div id="footer-content">
       <div class="tabs clearfix">
            <div class="tab-item" data-target="visit">             
                <i class="fa fa-car">                 
                    <span class="badge hide" id="visit-badge">0</span>     
                </i>             
                <small id="visit-tab-text-label"></small>         
            </div>
            <div class="tab-item" data-target="reserve">
                <i class="fa fa-tags">                 
                    <span class="badge hide" id="reserve-badge">0</span>
                </i>             
                <small id="reserve-tab-text-label">Đặt trước</small>         
            </div>
            <div class="tab-item" data-target="wash">
                <i class="fa fa-life-ring" aria-hidden="true">                 
                    <span class="badge hide" id="wash-badge">0</span>
                </i>             
                <small id="wash-tab-text-label"></small>         
            </div>
            <div class="tab-item" data-target="waiting">             
                <i class="fa fa-circle-o-notch">                 
                    <span class="badge hide" id="waiting-badge">0</span>             
                </i>             
                <small id="waiting-tab-text-label"></small>         
            </div>
            <div class="tab-item" data-target="delivery">             
                <i class="fa fa-check">                 
                    <span class="badge hide" id="delivery-badge">8</span>             
                </i>             
                <small id="delivery-tab-text-label"></small>         
            </div>
       </div>
    </div>
 </div> 

<style>
    #workspace-header-content .workspace-header-control {
        margin-left: 5px;
        margin-right: 0px;
    }

    #search_header_button {
        background-color: transparent;
        padding: 0px;
        margin: 0px;
        border: none;
        position: absolute;
        top: 7px;
        right: 18px;
    }

    #search_header_button i {
        color: #a4a4a4;
    }

    #search_header_button span {
        display: none;
    }

    #search_header_input {
        width: 95% !important;
        padding-right: 20px !important;
    }

    #footer {
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 50px;
        background-color: white;
        z-index: 2;
        border-top: 1px solid #ccc;
        padding-bottom: calc(50px + env(safe-area-inset-bottom));
    }

    #footer #footer-content {
        padding: 7px 5px;
    }

    #footer .tabs .tab-item {
        text-align: center;
        float: left;
        width: 20%;
        color: #777;
    }

    #footer .tabs .tab-item small {
        display: block;
        margin-top: 4px;
        font-size: 70%;
        text-transform: uppercase;
        font-weight: bold;
    }

    #footer .tabs .tab-item i.fa {
        font-size: 18px;
        position: relative;
    }


    #workspace-content {
        padding-bottom: calc(50px + env(safe-area-inset-bottom));
    }

    #leftTabStrip {
        display: none;
    }

    #compartment-container {
        background-color: #eee;
    }

    #compartment-container .compartment-item .compartment-body {
        border: 1px solid #ccc;
        border-top: 0px;
    }

    #compartment-container .compartment-item .compartment-header.empty {
        background-color: #555;
        color: white;
    }

    #footer .tabs .tab-item .fa .badge {
        position: absolute;
        top: -6px;
        right: -16px;
        font-size: 9px;
        background-color: #b30808;
        display: block;
        padding: 2px 5px;
        color: white;
        border-radius: 50%;
    }

    #footer .tabs .tab-item.active {
        color: #100544;
    }

    #ul-top-tab, #ul-bottom-tab, #resize-top-tab, #resize-tab-container, #bottom-tab-container {
        display: none
    }
    #top-tab-container {
        overflow: hidden;
    }
    #top-tab-container, #tab-content-top {
        height: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        overflow: hidden;
        padding-bottom: calc(50px + env(safe-area-inset-bottom));
    }

    .tab-content-item {
        background-color: #eee;
    }

    .tab-content-item .content-tab .cus-item {
        background-color: white;
    }

    .tab-content-item .desc-tab-content {
        background-color: rgb(11, 52, 74);
        color: white;
        text-align: center
    }

    .tab-content-item .desc-tab-content .pull-left {
        width: 90%;
        width: calc(100% - 35px);
        text-align: center;
        padding-left: 15px;
    }

    .tab-content-item .desc-tab-content .fa {
        color: white;
    }

    .tab-content-item .desc-tab-content .close-tab-icon-btn {
        position: fixed;
        top: 0px;
        left: 0px;
        font-size: 20px;
        padding: 7px 10px;
    }

    #mtabs {
        display: none
    }

    #m-menu-context-overlay {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 10;
        display: none;
    }

    #m-menu-context {
        position: fixed;
        left: 0px;
        bottom: 0px;
        width: 100%;
        background-color: #fff;
        z-index: 11;
        display: none;
        padding-bottom: 5px;
        padding-top: 5px;
        box-shadow: 0px 0px 5px #999;
        -webkit-box-shadow: 0px 0px 5px #999;
        -moz-box-shadow: 0px 0px 5px #999;
        -o-box-shadow: 0px 0px 5px #999;
        -ms-box-shadow: 0px 0px 5px #999;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        -webkit-border-top-right-radius: 10px;
        -webkit-border-top-left-radius: 10px;
        -moz-border-top-right-radius: 10px;
        -moz-border-top-left-radius: 10px;
        -o-border-top-right-radius: 10px;
        -o-border-top-left-radius: 10px;
        -ms-border-top-right-radius: 10px;
        -ms-border-top-left-radius: 10px;
    }

    #menu-content-header {
        font-size: 16px;
        text-align: center;
        margin-bottom: 10px;
    }

    #m-menu-context li {
        list-style: none;
        padding: 5px 10px;
    }

    #m-menu-context li .fa {
        width: 25px;
        font-size: 16px;
        margin-left: 5px;
        color: #777;
    }

    #m-menu-context li .fa.fa-share-square {
        padding-left: 2px;
    }

    #m-menu-context hr {
        padding: 0px;
        margin: 5px 0px 5px 0px;
        border-top: 1px solid #eee;
    }

    #compartment-container .compartment-item .compartment-header {
        border-bottom: 0px;
    }

    #compartment-container .compartment-item .compartment-body .compartment-content {
        height: 129px;;
    }

    #my-dialog-content {
        overflow: auto;
    }

    #my-dialog-footer {
        height: 50px !important;
    }

    body.show {
        overflow: hidden !important;
    }

    .compartment-item {
        width: 50% !important;
    }

    .my-dialog {
        position: fixed !important
    }

    @media(max-width: 767px) { 
        .row-padding {
            margin-top: 50px;
        }

        .compartment-item {
            width: 100% !important;
        }
    }

    #workspace-header {
        background-color: rgb(11, 52, 74);
    }

    #compartment-container .compartment-item .compartment-body .compartment-content .c-reserve {
        background-color: #b3b3b3;
        color: #333;
    }

    #compartment-container .compartment-item .compartment-body .compartment-content .c-reserve span {
        color: #2c4f47;
    }

    #compartment-list-dialog {
        margin: -15px;
    }

    #compartment-list-dialog li {
        list-style: none;
        padding: 10px 20px;
        display: block;
        background-color: #eee;
        margin-bottom: 2px;
    }

    #compartment-list-dialog li.active {
        background-color: #96ffc4;
    }
    
</style>

<script type="text/javascript">
    var serverTime = new Date("@php $svrTime = new \DateTime(); echo $svrTime->format('Y-m-d H:i:s') @endphp");
    var socketUrl = "{{SOCKET_URL}}";
    var _asset_url = "{{asset()}}";
    var _api_url = "{{base_url('/api')}}";
    var _isMobile = true;
</script>

@endsection