@extends('layouts.dashboard')

@section('page_title')
Booking
@endsection

@section('page_header_title')
Manage Booking
@endsection

@section('page_body')
{{ Breadcrumbs::render('booking') }}

<div class="row row-cards row-deck">
  <div class="col-12">                

    <div class="card">
      <div class="card-status card-status-left bg-blue"></div>
     <div class="card-header"> 
       
      <div class="col-md-3">
        @if(Auth::user()->hasAnyPermission(['All','Make Booking']))

           <button style="float: left;"  class="btn btn-sm btn-outline-primary"  onclick="showModal('form_add_booking','md_make_booking')"><i class="fa fa-plus"></i></button> 
         @endif
         <h3 style="float: left; margin-left: 4%;" class="card-title">Book / Reserve</h3>
     </div>

      <div class="col-md-5"></div>

      <div class="col-md-3" style="margin-left: 90px;">
          {{-- @php($datatable_key = Crypt::encrypt('Booking')) --}}
          <select name="branch" class="form-control form-control-sm branch" onclick="renderBookingsTable();">
            <option value="{{Crypt::encrypt(0)}}">Select {{ucwords(str_replace('_',' ',EF::branchWhiteLabel()['module']))}}</option>

            @foreach($branch as $rows)
              <option value="{{Crypt::encrypt($rows->id)}}">{{$rows->name}} ({{$rows->code}})</option>
            @endforeach
          </select>
      </div>

    </div>

    
    <div class="table-responsive table-height">
      <table id="bookings_table" class="table table-hover table-outline table-vcenter text-nowrap card-table cls_datatable" style = "padding:3px;">
        <thead>
          <tr >

            <th>Sr #</th>
            <th>Reg #</th>
            <th>File #</th>
            <th>Name</th>
            <th>Booking Details</th>
            <th>Status</th> 
            <th>{{ucwords(str_replace('_',' ',EF::branchWhiteLabel()['module']))}}</th>
            <th>Salesperson</th>
            <th>Booking Date</th>
              @if(Auth::user()->hasAnyPermission(['All','Tag Booking']))
            <th>Tags</th>
            @endif
            <th style="text-align: center;"><i class="dropdown-icon fa fa-cogs"></i></th>                          
          </tr>
        </thead>

        <tbody id="show_bookings" >
          {{-- {!!$booking_view!!} --}}
        </tbody>

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

@endsection

@section('page_modal')

  @include('booking.modals.make_booking')
  @include('inventory.modals.add_inventory')

  @include('booking.modals.approve_booking')
  @include('user.modals.add_customer')
  @include('user.modals.add_employee')
  @include('user.modals.add_dealer')
  <div id="document_model"></div>
  @include('accounts.modals.bookingwise_ledger')
  
  
@endsection

@section('page_script')
  @include('scripts.booking') 
  @include('scripts.user') 
  @include('scripts.validation')
  @include('scripts.inventory') 

  <script type="text/javascript">
   var table = $('#bookings_table');

  function renderBookingsTable()
  {
    table.DataTable().clear();
    table.DataTable().destroy();

    var branch  = $(".branch").val();
    
    table.DataTable( {
      "columnDefs": [
                { "type": "numeric-comma", targets: 0 }
            ],
            cache:true,
        responsive: true,
        bProcessing: true,
        bServerSide: true,
        processing: true,
        serverSide: true,
        deferRender: true,
        select: true,
        stateSave: true,
        responsive: true,
        pageLength:10,
        "ajax": {
          "url" : "{{ route('datatable-bookings') }}",
          "type": "GET",
          'data': {
            'branch': branch,
          },
        },
        
        "columns": [
           {
    name: 'count',
    data: 'count'
   },
   {
    name: 'ms',
    data: 'ms'
   },
   {
    name: 'file_number',
    data: 'file_number'
   },
   {
    name: 'name',
    data: 'name'
   },
   {
    name: 'booking_details',
    data: 'booking_details'
   },
  
   {
    name: 'status',
    data: 'status'
   },
    {
      name: 'branch_name',
      data: 'branch_name'
    },
    {
      name: 'salesperson',
      data: 'salesperson'
    },

   {
    name: 'created_at',
    data: 'created_at'
   },
   {
    name: 'tags',
    data: 'tags'
   },
   {
    name: 'action',
    data: 'action'
   }
        ],
       
    });
  }
  
    

  $(document).ready(function(){
   

    renderBookingsTable();
  });
  </script>
@endsection
