@extends('layouts.app')

    @push('styles')
    <!-- DataTables -->
    <link rel="stylesheet" href="{{ asset('storage/css/datatable/datatables.min.css') }}">
    <style type="text/css">
    select{
        border: 1px solid #ddd !important;
        background: transparent !important;
    }
    input[type='search']{
        border: 1px solid #ddd !important;
        background: transparent !important;
    }    
    </style>
    @endpush

    @push('scripts')

    <!-- DataTables -->
    <script src="{{ asset('storage/js/datatable/datatables.min.js') }}"></script>

    <script>
    $(function () {

        setTimeout(function() { 
            $("#alert_message").hide('slow');
        }, 2500);

        $('#clients').DataTable({
            ajax: {
                url: "{{ action('ClientController@dataTable') }}",
                type: "POST",
                data: {
                    _token:  $('meta[name="csrf-token"]').attr('content')
                }
            },
            pageLength: 10,
            processing: true,
            lengthMenu: [10,25,50,100,250,500] ,
            searching: false,
            paging: false,
            columns: [
                { data: "name", width: '20%' },
                { data: "client_code", width: '20%' },
                { data: "trustee", width: '20%' },
                {
                    data: "actions",
                    orderable: false,
                    width: '40%',
                    render: function (data, type, row ) {
                      return '<a href="' + data.create_link + '" class="btn btn-flat btn-primary">' +'<span class="fa fa-pencil"></span>&nbsp;<span>Create</span></a>&nbsp;'+'<a href="' + data.view_link + '" class="btn btn-flat btn-success">' +
                      '<span class="fa fa-pencil"></span>&nbsp;<span>View</span></a>&nbsp;' +
                      '<a href="' + data.edit_link + '" class="btn btn-flat btn-warning">' +
                      '<span class="fa fa-pencil"></span>&nbsp;<span>Edit</span></a>';
                    }
                },
            ],
            "bDestroy": true
        });

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $(".table").on("click", ".del-resource", function (e) {
            e.preventDefault();
            let href = $(this).attr("href");
            let response = confirm("Are you sure?");
            if (response) {
                $.ajax({
                    url: href,
                    type: 'DELETE',
                    success: function (data) {
                        location.reload();
                    },
                    error: function (res) {
                        alert('Some error occured! Please try after some time');
                    }
                });
            }
        });
    });
    </script>

    @if($no_days_diff > 59)
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
        <script type="text/javascript">
            /*
              Swal.fire({
                title:'',
                html:'Your BGL API Authorization has expired.<br/>Please update BGL API Authorization again in you profile.',
                icon:'warning'
              }).then((result) => {
                  window.location.href= "{{url('/updateprofile')}}";
              }); */
        </script>
    @endif

    @endpush

@section('content')
    
    @if(session()->has('message'))  
      <div class="col-12 alert alert-success text-center mt-1" id="alert_message">{{ session()->get('message') }}</div>   
    @endif


                <!-- ============================================================== -->
                <!-- Start Page Content -->
                <!-- ============================================================== -->
                <!-- Row -->
                <div class="card card-default">
                    <div class="card-body collapse show custom-card-bg">
                        
                    <table id="clients" class="table table-striped table-bordered zero-configuration">
                      <thead>
                        <tr>
                          <th>Name</th>
                          <th>Client Code</th>
                          <th>Company Name</th>
                          <th>Options</th>
                        </tr>
                      </thead>
                      <tbody></tbody>
                    </table>

                    </div>
                </div>

                <!--Loading modal-->
                <div id="sub-modal4" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content" id="editjob_div">
                            <p class="alert alert-warning text-center">Please wait until we redirect you...</p>
                        </div>
                    </div>
                </div>
                <!--Loading modal-->

                <!-- Row -->
                
                
                <!-- Row -->
                
                <!-- Row -->
                <!-- Row -->
                
                <!-- Row -->
                <!-- ============================================================== -->
                <!-- End PAge Content -->
                <!-- ============================================================== -->


@endsection