@extends('layouts.app')

        @section('styles')

        @endsection

            @section('content')

                             <!-- PAGE-HEADER -->
                            <div class="page-header">
                                <h1 class="page-title">Job Requests</h1>
                                <div>
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                                        <li class="breadcrumb-item active" aria-current="page">Job Requests</li>
                                    </ol>
                                </div>
                            </div>
                            <!-- PAGE-HEADER END -->

                            
                               <!-- Row -->
                        @can('department-list')
                        <div class="row row-sm">
                            <div class="col-lg-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h3 class="card-title">View Job Requests</h3>
                                    </div>
                                    <div class="card-body">
                                        <div class="grid-margin">
                                            <div>
                                                <div class="panel panel-primary">
                                                    <div class="tab-menu-heading border-0 p-0">
                                                        <div class="tabs-menu1">

                                                <ul class=" nav panel-tabs product-sale">
                                                <li style="border: none;" class="px-1">
                                                <div class="btn-list">

                                                 <a title="Download Excel" href="/admin/job_request_excel_export" style="display: inline;padding: 10px 5px 10px;"><button type="button" class="btn btn-icon btn-success "><i class="fa fa-file-excel-o"></i></button></a>
                                                
                                                </div>    
                                                </li>

                                                <li class="px-1">
                                                 
                                                <div class="input-group">
                                                <div class="input-group-text">
                                                    <i class="fa fa-calendar tx-16 lh-0 op-6"></i>
                                                </div>
                                                
                                                @php
                                                    $from_date="";
                                                    if(session('from_date')){
                                                        $from_date=session('from_date');
                                                    }
                                                @endphp
                                                                                                <input class="form-control from_date" placeholder="From Date" value="{{$from_date}}" type="date" >
                                                </div>    
                                                </li>
                                                        
                                                <li class="px-1">
                                                <div class="input-group">
                                                <div class="input-group-text">
                                                    <i class="fa fa-calendar tx-16 lh-0 op-6"></i>
                                                </div>
                                                      @php
                                                    $to_date="";
                                                    if(session('to_date')){
                                                        $to_date=session('to_date');
                                                    }
                                                @endphp                                          <input  class="form-control to_date" placeholder="To Date" value="{{$to_date}}" type="date">
                                                </div>
                                                </li>
                                            
                                            
                                                <li class="px-1">
                                                    <div class="input-group">
                                                <button id="reset_btn" class="btn btn-danger"><i class="fa fa-repeat"></i></button>  
                                                    </div>    
                                                </li>

                                                        
                                                         </ul>
                                                        </div>
                                                    </div>
                                                
                                        <div class="table-responsive">
                                             <table  class="table table-bordered text-nowrap border-bottom dataTable no-footer " style="width: 100% !important;" id="table_datatable">
                                                <thead class="text-center">
                                                    <tr>
                                                        <th class="wd-15p border-bottom-0">#</th>
                                                       <!-- <th class="wd-15p border-bottom-0">Name</th>-->
                                                        <th class="wd-15p border-bottom-0">Phone</th>
                                                        <th class="wd-15p border-bottom-0">Location</th>
                                                        <th class="wd-15p border-bottom-0">Villa Apartment No.</th>
                                                        <th class="wd-15p border-bottom-0">Room Name</th>
                                                        <th class="wd-15p border-bottom-0">Maintenance Type</th>
                                                        <th class="wd-15p border-bottom-0">Sub - Maintanance</th>
                                                        <th class="wd-15p border-bottom-0">Issue Details</th>
                                                        <th class="wd-15p border-bottom-0">Staff Assigned</th>
                                                        <th class="wd-10p border-bottom-0">Assign Staff</th>
                                                    </tr>
                                                </thead>
                                               
                                            </table>
                                    
                                            <div class="col-sm-12 col-md-12">                                             
                                        </div>
                                        </div>
                                        </div>
                                            </div>
                                        </div>
                                    </div>
                        

                                </div>
                               
                            </div> 
                        </div> 
                        @endcan
                        <!-- End Row -->

                         <!-- Modal -->
               


                        {{-- #########################View Modal################################### --}}
<div class="modal fade show" id="largemodal" tabindex="-1" role="dialog" aria-modal="true" style="display: none;">
            <div class="modal-dialog modal-md " role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" style="font-weight: bold;" id="view_modal_title">Assign Staff</h5>
                        <button class="btn-close text-danger" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                    </div>
                    <div class="modal-body" id="view_modal_body">

                        <form action="/admin/assign_staff" method="post">
                            @csrf
                            <input type="hidden" name="job_id_new" id="job_id_new">
                            <div class="row">
                                <div class="col-md-8">
                                    <select class="form-control" name="staffs" required>
                                        <option value="">Select Staff</option>
                                        @foreach($employees as $emps)
                                        <option value="{{ $emps->service_sec_id }}">{{ $emps->emp_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <button type="submit" class="btn btn-sm custom-btn-info form-control">Submit</button>
                                </div>
                            </div>
                        </form>
                        
                    </div>
                    <div class="modal-footer">
                        <button class="btn custom-btn-warning" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
            {{-- #########################End Of View Modal############################ --}}
                        
                        
                        
                        
                        

            @endsection
              @section('scripts')  
{{-- ################################Jquery Datatable########################### --}}
   {{-- <script src="{{asset('assets/jquery-datatable/jquery.min.js')}}"></script> --}}
   <link rel="stylesheet" type="text/css" href="{{asset('assets/jquery-datatable/jquery.dataTables.css?v3')}}">
   <script src="{{asset('assets/jquery-datatable/jquery.dataTables.js')}}"></script>
   
   
  
 {{-- ########################################################################## --}}




        <script>
    var token = $("meta[name=csrf-token]").attr("content");  
    var datatable_name="table_datatable";
    $('#table_datatable').DataTable({
        "responsive": true,
       "serverSide": true,
       "ordering": true,
       "searching": true,
       "bLengthChange": true,
       "info":false,
       "bSort": true,
       "order": [
           [0, 'desc']
       ],
       "columnDefs": [{
               "targets": [0,1],
               "orderable": true
           },
           {"className": "text-center", "targets": [0,1,2,3,4,5]},
           {"className": "text-left", "targets": []}
           
       ],
       "displayLength":10,
       "ajax": {
           "url":  "/admin/job_request_datatable",
           "type": "post",
           "data": function (data) {
                data._token = token;
              
               return data;
  
           }
       }, "AutoWidth": true,
       "columns": [
                  {"data": "job_id", "name": "job_id"},
                  //{"data": "name", "name": "name"},
                  {"data": "ph_no", "name": "ph_no"},
                  {"data": "location", "name": "location"},
                  {"data": "villa_appartment", "name": "villa_appartment"},
                  {"data": "room_name", "name": "room_name"},
                  {"data": "maintenance_type", "name": "maintenance_type"},
                  {"data": "maintanance_sub", "name": "maintanance_sub"},
                  {"data": "issue_details", "name": "issue_details"},
                  {"data": "emp_name", "name": "emp_name"},
                  {"data": "job_id", "name": "job_id"},
                   ],
      
      "fnCreatedRow": function (nRow, aData, iDataIndex) {
          var info = this.dataTable().api().page.info();
          var page = info.page;
          var length = info.length;
          var index = (page * length + (iDataIndex + 1));
          var action="";
          

            //Edit Action
            var action=action+'&nbsp;<button title="Assign Staff" onclick=assign_staff('+aData.job_id+') id="bEdit" type="button" class="btn btn-sm custom-btn-info"><span class="fa fa-user-plus"> </span> Staff</button>';
            
            
            $('td:eq(0)', nRow).html(index);
            $('td:eq(9)', nRow).html(action);
 }
 });


function assign_staff(job_id)
{
    $("#job_id_new").val(job_id);
    $('#largemodal').modal('show');
}

 $('.from_date').change(function(){
                $.ajax({
                        type: 'POST',
                        data: {"_token": token,"from_date":  $('.from_date').val()},
                        url: '/admin/from_date_filter',
                        success: function (result) {
                        $("#table_datatable").DataTable().ajax.reload(null, false);
                        }
                    })

 });

 $('.to_date').change(function(){
                $.ajax({
                        type: 'POST',
                        data: {"_token": token,"to_date":  $('.to_date').val()},
                        url: '/admin/to_date_filter',
                        success: function (result) {
                        $("#table_datatable").DataTable().ajax.reload(null, false);
                        }
                    })

 });
 
 
 $('#reset_btn').click(function(){
        $.ajax({
                        type: 'POST',
                        data: {"_token": token},
                        url: '/admin/reset_session',
                        success: function (result) {
                        $('.from_date').val('');
                        $('.to_date').val('');
                        $("#table_datatable").DataTable().ajax.reload(null, false);
                        }
                    })
 });

        </script>
        
        


        
        
        @endsection