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

        <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 id="workspace-container2">
            <div id="workspace-header">
                <div id="workspace-header-content">
                    <div class="workspace-header-control" style="margin-right: 0px">
                        <button class="btn btn-success btn-sm" id="display-cm-listview-btn">@lang("CarCompartment_model.listview")</button>
                        <button class="btn btn-danger btn-sm" id="display-cm-timeline-btn">Timeline</button>
                    </div>

                    <div class="workspace-header-control" id="search-compartment-container" style="margin-right: 0px">
                        <input type="text" id="search_header_input" style="width: 70%" placeholder="Nhập nội dung cần tìm kiếm" />
                        <button class="btn btn-primary" id="search_header_button" style="max-width: 90px">
                            <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-xs-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-xs-6">
                <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-xs-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-xs-6">
                <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-xs-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-xs-6">
                <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-xs-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-xs-6">
                <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-xs-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-xs-6">
                <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-xs-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-xs-6">
                <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-xs-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-xs-6">
                <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-xs-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-xs-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> <!-- Điện thoại -->

        <div class="row form-group">
            <div class="col-xs-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-xs-6">
                <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-xs-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-xs-6">
                <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-xs-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-xs-6">
                <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-xs-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-xs-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-xs-10">
                <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-xs-2" 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-xs-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-xs-6">
                <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-xs-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-xs-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> <!-- Nhân viên phụ trách -->

        
        <div class="row form-group">
            <div class="col-xs-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-xs-6">
                <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-xs-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-xs-6">
                <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>

<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')}}";
</script>