<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-container">
            <div id="map">
                
            </div>
        </div>
    </div>

</div>

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

<div style="display: none">
    <div id="editCustomerInfoDialog">
        <div id="count-date">新規のお客様</div>
        <div class="row">
            <div class="col-md-6 popup-info-cust">
                <table border="2" class="table-info-cust">
                    <tr>
                        <th>@lang("floor_manager.seat")</th>
                        <td><select name="seatID" id="seat-select-box" class=""></select></td>
                    </tr>
                    <tr>
                        <th>@lang("floor_manager.staff")</th>
                        <td><select name="staff" id="staff-select-box" class=""></select></td>
                    </tr>
                    <tr>
                        <th>@lang("floor_manager.sa")</th>
                        <td><select name="sa" id="sa-select-box" class=""></select></td>
                    </tr>
                    <tr>
                        <th>@lang("floor_manager.time_to")</th>
                        <td> <input type="text" class=" clockpicker" name="time_to" /></td>
                    </tr>
                    <tr>
                        <th>@lang("floor_manager.date_to")</th>
                        <td> <input type="text" class="" disabled name="date_to" /></td>
                    </tr>
                    <tr>
                        <th>@lang("floor_manager.insurrance")</th>
                        <td> <select name="insurranceId" id="insurrance-select-box" class=""></select></td>
                    </tr>
                    <tr>
                        <th>@lang("floor_manager.destination")</th>
                        <td><select name="purpose" id="destination-select-box" class="form-control"></select></td>
                    </tr>
                    <tr>
                        <th>@lang("floor_manager.birthday")</th>
                        <td><input type="text" class=" datepicker" placeholder="@lang('dateformat.format_js')" name="birthday" /></td>
                    </tr>
                    <tr>
                        <th> @lang("floor_manager.phone_number")</th>
                        <td><input type="text" class="" name="phone" /></td>
                    </tr>
                    <tr>
                        <th>@lang("floor_manager.city")</th>
                        <td><select class="" name="cityID" id="city-select-box"></select></td>
                    </tr>
                    <tr>
                        <th> @lang("floor_manager.address")</th>
                        <td><input type="text" class="" name="address" /></td>
                    </tr>
                    <tr>
                        <th> @lang("floor_manager.sex")</th>
                        <td>
                            <select name="gender" class="">
                                <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>
                        </td>
                    </tr>
                    <tr>
                        <th>@lang("floor_manager.note")</th>
                        <td><textarea class="" name="note" style="resize: none;width:205px; height:50px;padding-left: 5px;max-width: 225px;"></textarea></td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div class="custody">
                                <label class="form-group checkbox-box pull-left" style="margin-top: 0px;margin-bottom: 0px;">
                                    <input type="checkbox" name="custody_ck" /> 
                                    @lang("floor_manager.have_storage")
                                </label>
                            </div>
                        </td>
                    </tr>
                </table> 
            </div>
            <div class="col-md-6 popup-info-cust-r">
                <table border="2" class="table-info-cust">
                    <tr>
                        <th> @lang("floor_manager.customer_name")</th>
                        <td><input type="text" class="" name="customerName" autofocus id="customerName" /></td>
                    </tr>
                    <tr>
                        <th> @lang("floor_manager.car_code")</th>
                        <td>
                            <input type="text" class="" name="plate"/>
                            <button class="btn btn-success" id="search-cus-btn">
                                <i class="fa fa-search"></i>
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <!-- <th>@lang("floor_manager.number_of_visitors")</th> -->
                        <td colspan="2">
                            <!-- <input type="text" class="" name="numberOfVisitors" /> -->
                            <div class="wrapper-count-person">
                                 <img style="width: 23px;"  class="fl" src="{{asset('/images/male.png')}}" alt="">
                                 <input type="text"  onkeyup="this.value = minmax(this,this.value, 0, 9)" class="txt-count-ps fl" id="maleNum" name="maleNum" value="0" >
                                 <div class="wapper-bt fl">
                                    <span class="fa fa-angle-up  fl"></span>
                                    <span class="fa fa-angle-down fl"></span>
                                    <div class="clear-fx"></div>
                                 </div>
                                 <img style="width: 23px;"  class="fl" src="{{asset('/images/female.png')}}" alt="">
                                 <input type="text" onkeyup="this.value = minmax(this,this.value, 0, 9)" class="txt-count-ps fl" id="femaleNum" name="femaleNum" value="0">
                                 <div class="wapper-bt fl">
                                    <span class="fa fa-angle-up fl"></span>
                                    <span class="fa fa-angle-down fl"></span>
                                    <div class="clear-fx"></div>
                                 </div>
                                 <img style="width: 23px;margin-top: 2px;"  class="fl" src="{{asset('/images/children.png')}}" alt="">
                                 <input type="text" onkeyup="this.value = minmax(this,this.value, 0, 9)" class="txt-count-ps fl" id="childNum" name="childNum" value="0" >
                                 <div class="wapper-bt fl">
                                    <span class="fa fa-angle-up fl"></span>
                                    <span class="fa fa-angle-down fl"></span>
                                    <div class="clear-fx"></div>
                                 </div>
                                 <img style="width: 27px;margin-left: 22px;" class="fl" src="{{asset('/images/icons8-family-50.png')}}" alt="">
                                 <input type="text" readonly class="fl total-person" disabled　id="total-person" value="0">
                                 <div class="title-total fl">@lang("floor_manager.total")</div>
                                 <div class="clear-fx"></div>
                              </div>
                        </td>
                    </tr>
                    <tr>
                        <th>@lang("floor_manager.delivery_date")</th>
                        <td><input type="text" class=" clockpicker" name="time_out" /></td>
                    </tr>
                    <tr>
                        <th>@lang("floor_manager.time_out")</th>
                        <td><input type="text" class=" datepicker" placeholder="@lang('dateformat.format_js')" name="delivery_date" /></td>
                    </tr>
                    <tr>
                        <th>@lang("floor_manager.loan_car")</th>
                        <td><select name="loanCarId" id="loan-car-select-box" class=""></select></td>
                    </tr>
                    <tr>
                        <th> @lang("floor_manager.car_type")</th>
                        <td><input type="text" class="" name="carType" /></td>
                    </tr>
                    <tr>
                        <th>@lang("floor_manager.carcolor")</th>
                        <td><input type="text" class="" name="carColor" /></td>
                    </tr>
                    <tr>
                        <th>Email</th>
                        <td><input type="text" class="" name="email" /></td>
                    </tr>
                    <tr>
                        <th>@lang("floor_manager.district")</th>
                        <td><select class="" name="districtID" id="district-select-box"></select></td>
                    </tr>
                    
                    <tr  class="tr-bt-note"  rowspan="2">
                           <td  colspan="2" style="    text-align: right;height: 183px;vertical-align:top" >
                              <input type="text" disabled name="imgNameCustomer" style="width: 100%;" id="img-name-customer" class="form-control">
                              <div style="float: left; margin-bottom: 1px;height: 80px;text-align:center;background-color:black;margin-right:5px;margin-top:3px" class="wrapper-img">
                                 <div id="imgCustomer" name="imgCustomer" style="width: 120px;height:100%;background-repeat:no-repeat;background-position: center;background-size:contain">
                                    <img id="imgCustomerEl" src="" alt="" style="display: none" />
                                </div>
                                 <div style="width:120px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden; ">@lang("floor_manager.car_img")</div>
                              </div>
                              <div style="display:none;float: left; margin-bottom: 1px;height: 80px;text-align:center;margin-right:5px;margin-top:3px" id="wrapper-video-in">
                                <div id="inVideoUrl" style="width: 120px;height:100%;background-repeat:no-repeat;background-position: center;background-size:contain;background-color:black">
                                    <i class="fa fa-play" id="play-in-video-btn" style="line-height: 80px"></i>
                                </div>
                                <div style="width:120px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden; ">@lang("floor_manager.in_video")</div>
                             </div>
                             <div style="display:none;float: left; margin-bottom: 1px;height: 80px;text-align:center;margin-top:3px" id="wrapper-video-out">
                                <div id="outVideoUrl" style="width: 120px;height:100%;background-repeat:no-repeat;background-position: center;background-size:contain;background-color:black">
                                    <i class="fa fa-play" id="play-out-video-btn" style="line-height: 80px"></i>
                                </div>
                                <div style="width:120px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden; ">@lang("floor_manager.out_video")</div>
                             </div>
                              <div class="btn-yomiage" style="position: absolute;bottom: 10;right: 20;">
                                 <button data-value="true" class="bt-note" id="bt-note" type="button">@lang("floor_manager.notify_visit")</button>
                                 <button data-value="false" class="bt-disNotify" id="bt-note" type="button">@lang("floor_manager.no_notify_visit")</button><br>   
                              </div>                                                         
                           </td>
                        </tr>
                </table>  
            </div>
            <div class="col-lg-7" style="padding-right:0px;">
                     <div class="wrapper-history" >
                        <div class="title-hs-raiten">@lang("floor_manager.history_visit")</div>
                        <div class="wrapper-content-table">
                           <div class="">                           
                              <div class="wrapper-table" style="max-height: 147px;overflow-y: auto;border-bottom: 1px solid #2d5d84;">
                                 <table id="" style="position: relative;" border="1"  class="hs-raiten  fl">
                                    <div class="col-md-3 bg hidden" id="history-loading" style="position: absolute;left: 0;width: 100%;margin: 0;height: 184px;">
                                       <div class="loader" id="loader-1"></div>
                                     </div>
                                    <thead>
                                       <tr>
                                          <th style="position: sticky;top: -1;">@lang("floor_manager.date_to")</th>
                                          <th style="position: sticky;top: -1;">@lang("floor_manager.time_to")</th>
                                          <th style="position: sticky;top: -1;">@lang("floor_manager.branch_name")</th>
                                          <th style="position: sticky;top: -1;">@lang("floor_manager.reception")</th>
                                          <th style="position: sticky;top: -1;">@lang("floor_manager.destination")</th>
                                          <th style="position: sticky;top: -1;">@lang("floor_manager.number_of_visitors")</th>
                                       </tr>
                                    </thead>
                                    <tbody id="data-history-raiten">
                                       
               
                                    </tbody>
                                 </table>
                              </div>
                           </div>
                           <div class="content-right fl">
                           
                           </div>
                        </div>
                        <!-- <div class="wrapper-count-day ">
                           
                        </div> -->
                        <div class="clear-fx"></div>
                        
                        <p id="count-date-raiten" ></p> 
                     </div>                  
                  </div>
                  <div class="col-lg-5" style="padding-left:0px;">
                     <div class="wrapper-history" style="border-left:1px solid white">
                        <div class="title-hs-raiten">@lang("floor_manager.note_for_customer")  <span id="clearCommonMemo" style="float: right; padding: 0px 5px 0px 5px;" class="btn-warning">@lang("floor_manager.clear")</span></div>
                        <div style="height: 184px;border: 0px solid #2d5d84;">
                           <textarea name="commonMemo" placeholder="@lang("floor_manager.cmm_placeholder")" id="commonMemo" style="width: 100%;height: 100%;max-height: 184px;max-width: 315px;font-size: 25px;color:brown"></textarea>
                        </div>
                     </div>
                  </div>
        </div>
    </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('floor_manager.search_cus')" />
                    <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("floor_manager.staff") (*)
                    <div class="input-group">
                        <select name="staff" 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> 


        <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>
            
            <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>

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

<div style="display: none">
    <div id="chooseDrinkDialog">
        <div style="border-bottom: 1px solid blue; background-color: #f4f4f4;padding: 8px 15px 5px 15px;margin-top: -5px;margin-left:-15px;margin-right:-15px">
            <div style="font-size: 18px; width: 100%" class="clearfix">
                <span class="pull-left">
                    @lang('floor_manager.is_drink_water')
                </span>
                <label class="pull-right text-right" style="width: 50px">
                    <div class="switch">
                        <input type="checkbox" id="is_drink_water" class="custom-switch" />
                        <span class="slider round"></span>
                    </div>
                </label>
            </div>
        </div>
        <div class="form-group" style="margin-top: 15px">
            <label>
                @lang('floor_manager.number_of_visitors')
            </label>
            <div class="input-group" style="width: 100%">
                <input type="number" class="form-control" min="0" name="num_of_visitors" />
            </div>
        </div>
        <div class="form-group" style="margin-top: 15px">
            <label>
                @lang('floor_manager.drink_water')
            </label>
            <div class="input-group" style="width: 100%">
                <select class="chosen-select" placeholder="chon" id="chosen_drinks_list" multiple></select>
            </div>
        </div>
    </div>
</div> <!-- choose drink dialog -->

<div style="display: none">
    <div id="confirm-box">
        <div id="confirm-box-msg">
            
        </div>
    </div>
</div> <!-- comfirm - box -->


<script type="text/javascript">
    var _asset_url = "{{asset()}}";
    var _api_url = "{{base_url('/api')}}";
</script>