@extends('layouts.app')
@extends('layouts.master')
<style>
#bulk-assign .tablesorter-header {
  cursor: pointer;
  outline: none;
}
#bulk-assign .tablesorter-header-inner::after { 
  content: '▼';
  font-size: 12px;
  margin-left: 5px;
}
</style>
@section('content')
      
      <style type="text/css">
        .assign_device_block {
            float: left;
            border: 1px solid #646464;
            width: 100%;
            height: 60vh;
            overflow-x: hidden;
        }
        .custom-checkbox {
          width: 20px;
          height: 20px;
        }
        .checkbox-td{
          display: flex;
          justify-content: center;
        }
      </style>

      <div class="main-panel dashboard"> 
        <div class="content-wrapper">
          <div class="row">
            <div class="col-md-12 grid-margin">
                 <form method="GET" id="chart-form" action="">
                <div class="row">
                      <div class="col-md-3">
                        <div class="form-group">
                        <label> {{ trans('location.area') }} </label>
                        <select class="form-control area" name="area" id="area">
                        <option value="">{{ trans('chart.all') }}</option>
                                                                        </select>
                        </div>
                      </div>
                      <div class="col-md-3">
                        <div class="form-group">
                        <label> {{ trans('task.location') }} </label>
                        <select class="form-control location" name="location_id" id="location">
                        <option value="">{{ trans('chart.all') }}</option>
                                                                        </select>
                        </div>
                      </div>
                      <div class="col-md-3">
                        <div class="form-group">
                        <label> {{ trans('location.landmark') }} </label>
                        <select class="form-control landmark" name="landmark" id="landmark">
                        <option value="">{{ trans('chart.all') }}</option>
                                                                        </select>
                        </div>
                      </div>
                     <div class="col-md-3">
                      <br>
                          <button type="button" id="submit-button" class="btn btn-primary" style="margin-top: 15px;">
                              {{ trans('chart.submit') }}
                            </button>
                      </div>
                    
                </div>
              </form>
                </div>


            <div class="col-lg-12 grid-margin stretch-card">
              <div class="card">
                <div class="card-body">                  
                      <form method="POST" id="staffListForm">
                        <div class="assign_device_block">
                        <table id="bulk-assign" class="table table-bordered table-striped table-condensed cf tablesorter">
                          <thead class="cf" >
                            <tr>
                              <th style="width: 15%;text-align:center; cursor: pointer;"> <span  id="quickSelect" data-map="select_all"> {{ trans('contract.select_all') }}</span> </th>
                              <th>{{ trans('contract.sl_no') }}</th>
                              <th>{{ trans('contract.device') }}</th>
                              <th>{{ trans('contract.device_id') }}</th>
                              <th>{{ trans('location.area') }}</th>
                              <th>{{ trans('location.location') }}</th>
                              <th>{{ trans('location.landmark') }}</th>
                            </tr>
                          </thead>
                          <tbody id="deviceListBlock">

                          </tbody>
                        </table>
                      </div>
                      <div class="final_box" style="width: 100%;">                    
                          <button class="btn btn-primary pull-right" type="button" id="continueAssign" style="float:right;margin-top:10px;"> {{ trans('contract.continue') }} </button>                 
                      </div>
                    </form>
                </div>
              </div>
            </div>

      </div>
    </div>
        <!-- content-wrapper ends -->
        <!-- partial:partials/_footer.html -->

        <!-- partial -->
      </div>
      <!-- main-panel ends -->
    </div>
    <!-- page-body-wrapper ends -->
  </div>
  <!-- container-scroller -->

<!-- Modal -->

    <!-- Modal -->
<div class="modal fade" id="customerChooseModal" tabindex="-1" role="dialog" aria-labelledby="customerChooseModal" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id=""></h5>
      </div>
      <form method="POST" id="staffListForm" action="{{url('/bulkAssign')}}">
        @csrf
      <div class="modal-body">
        <div class="col-sm-12">
            <div class="form-group">
            <input type="hidden" name="selected_devices" id="selected_devices" value="">
            <label> {{ trans('contract.contract_customer') }} </label>
            <select class="form-control" name="contract_user" id="contract_user" required>
            <option value="">{{ trans('contract.select_customer') }}</option>
            @foreach($contract_users as $contract_user)
            <option value="{{$contract_user->id}}">{{$contract_user->name}}</option>
            @endforeach
            </select>
            </div>
        </div>
      </div>
      <div class="modal-footer">
        <div class="final_box" style="width: 100%;">                    
          <button class="btn btn-primary pull-right" type="submit" name="bulk_assign" id="bulkAssign" style="float:right;"> {{ trans('contract.assign') }} </button>
        </div>
      </div>
      </form>  
    </div>
  </div>
</div>

    <!-- Modal -->
<div class="modal fade" id="user_delete_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"></h5>
        <button type="button" class="close" data-dismiss="modal"  aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
    <div class="modal-body">
            {{ trans('contract.do_you_want_to_delete') }}
    </div>
      <div class="modal-footer text-center">
            <input type="hidden" name="" value="" id="get_id"> 
            <button type="button" class="btn btn-secondary btn-rounded"  data-dismiss="modal">{{ trans('contract.close') }}</button>
            <button type="button" class="btn btn-primary" id="delete_user">{{ trans('contract.delete') }} </button>
        </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() { 

$("#bulk-assign").tablesorter();

});

  $(document).ready(function() {
    load_devices('','','');

        $("#quickSelect").click(function(){
            var datamap = $(this).attr('data-map');
            if(datamap=='select_all') {
                $(this).html("