@extends('layouts.app')
@push('action')
    <li class="nav-item ms-3">
        <a class="btn btn-success btn-icon"  href="{{ route('client.create') }}">
        <i class="bi bi-check-circle"></i>New</a>
    </li>
@endpush

@section('contents')
    <div class="content ">
        <div class="mb-4">
            <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{{url('dashboard')}}">
                            <i class="bi bi-globe2 small me-2"></i> Dashboard
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">Clients</li>
                </ol>
            </nav>
        </div>
        <div class="table-responsive">

            <table id="orders" class="table table-striped table-bordered" style="width:100%">
                <thead>
                <tr>
                    <th>Sl No</th>
                    <th>Name</th> 
                    <th>Logo Url</th>                                      
                    <th>Printavo Url</th>
                    <th>Printavo Email</th>
                    <th>Printavo Token</th>
                    <th>Partial Order Status ID</th>
                    <th>Full Order Status ID</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
@endsection
@push('script')
<script src="https://twitter.github.io/typeahead.js/js/handlebars.js"></script>
<script>
    //listing
    if ($("#orders").length) {
        var i = 1;
        $("#orders").DataTable({
            "processing": true,
            "lengthChange": true,
            "serverSide": true,
            "dom": '<"dt-buttons"Bf><"clear">lirtp',
            "paging": true,
            "scrollX": false,
            // "responsive":true,
            'stateSave': true,
            "autoWidth": false,
            "ajax": {
                url: "{{ route('client.list') }}",
            },
                columns: [
                {
                    "data": "id", render: function (data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                { data: 'name', name: 'name', orderable: false, searchable:false },
                { data: 'logo_url', name: 'logo_url', orderable: false, searchable:false },
                { data: 'printavo_url', name: 'printavo_url', orderable: false, searchable:false },
                { data: 'printavo_email', name: 'printavo_email', orderable: false, searchable:false },
                { data: 'printavo_token', name: 'printavo_token', orderable: false, searchable:false },
                { data: 'partial_order_status_id', name: 'partial_order_status_id', orderable: false, searchable:false },
                { data: 'full_order_status_id', name: 'full_order_status_id', orderable: false, searchable:false },
                { data: 'status', name: 'status', orderable: false, searchable:false },
                { data: 'action', name: 'action'},
              
            ],
            initComplete: function () {
                this.api().columns().every(function () {
                    var column = this;
                    var input = document.createElement("input");
                    $(input).appendTo($(column.footer()).empty())
                        .on('change', function () {
                            column.search($(this).val(), false, false, true).draw();
                        });
                });
            },
            "fnDrawCallback": function (oSettings) {
                $(".btn-delete").click(function () {
                    swal({
                        title: "Are you sure want to delete ?",
                        icon: "warning",
                        buttons: true,
                        dangerMode: true,
                    }).then((willDelete) => {
                        if (willDelete) {
                            var client = $(this).data('value');
                            delete_client(client);
                        }
                    });
                });
            },
            buttons: [
                {
                    extend: "copy",
                    className: "btn-sm"
                },
                {
                    extend: "csv",
                    className: "btn-sm"
                },
                {
                    extend: "excel",
                    className: "btn-sm"
                },
                {
                    extend: "pdfHtml5",
                    className: "btn-sm"
                },
                {
                    extend: "print",
                    className: "btn-sm"
                },
            ]
        });
    }

    //Edit 
     function edit_client(id)
     {
         var urlS = "{{ url('client') }}/:id/edit";
         var url = urlS.replace(':id', id);
         $.ajax({
             success: function (response) {
                 if (response) {
                    window.location.href = url;
                 }

             },
                error: function (data) {
                  if (data) {
                      if (data.status == 403) {
                          swal({
                          text: 'you dont have the permission for this action ',
                          icon: "error",
                          timer: 5000,
                      });
                      } else{
                           swal(data.message, {
                              icon: "error",
                              timer: 4000,
                          });
                      }
                  }
                 },
         });
     }
      //Delete
     function delete_client(id) {
                var urlS = "{{ url('client') }}/:id";
                var url = urlS.replace(':id', id);
                $.ajax({
                    url: url,
                    data: {
                        "_token": "{{ csrf_token() }}",
                    },
                    type: 'DELETE',
                    success: function (response) {
                        if (response) {
                            $('#orders').DataTable().ajax.reload();
                            if (response.status == 200) {
                                swal(response.message, {
                                    icon: "success",
                                    timer: 2000,
                                });
                            } else{
                                 swal(response.message, {
                                    icon: "error",
                                    timer: 4000,
                                });
                            }
                        }
                    },
                   error: function (data) {
                     if (data) {
                         if (data.status == 403) {
                             swal({
                             text: 'you dont have the permission for this action ',
                             icon: "error",
                             timer: 5000,
                         });
                         } else{
                              swal(data.message, {
                                 icon: "error",
                                 timer: 4000,
                             });
                         }
                     }
                    },
                });

            }

</script>
@endpush