@extends('Admin/layout')
@section('title','Company List')
@section('content')
@if(has_permission('Company','View'))
<div class="container-fluid">
    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1">Company List</h4>
                </div>
                <!-- end card header -->

                <div class="card-body">
                    <div class="live-preview" style="padding: 20px;">
                        <div class="table-responsive table-card mb-1">
                            <table class="table table-sm table-striped align-middle table-nowrap mb-0" id="example" style="width:100%">
                                <thead class="table-dark">
                                    <tr>
                                        <th scope="col">S.No</th>
                                        <th scope="col">Company Name</th>
                                      
                                        <th scope="col">Status</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                @if(!empty($lists))
                                    @foreach($lists as $key => $value)
                                    <tr>
                                        <td>{{$key + 1}}</td>
                                        <td>{{$value->name}}</td>
                                       
                                        <td>
                                        <div class="form-check form-switch">
                                                <input class="form-check-input" onclick="myFunction('{{$value->id}}','{{$value->active}}')"  type="checkbox" id="flexSwitchCheckChecked" {{$value->active == 1 ? "checked":""}}>
                                            </div>
                                        </td>
                                        <td>
                                        @if(has_permission('Company','Edit'))
                                            <a href="{{route('visitportal.company-edit',['id'=>encryptor($value->id)])}}" class="link-success fs-16"><i class="ri-edit-2-line" title="Edit Company"></i></a> 
                                        @endif
                                        @if(has_permission('Company','Delete'))
                                            <!-- <button type="button" class="btn btn-danger px-2"  data-bs-toggle="modal" data-bs-target=".bs-example-modal-center-delete" onclick="setDeleteValue({{$value->id}},'company-destroy')" >Delete</button> -->
                                            <a href="javascript:void(0);" data-bs-toggle="modal" data-bs-target=".bs-example-modal-center-delete" onclick="setDeleteValue({{$value->id}},'company-destroy')" class="link-danger fs-16"><i class="ri-delete-bin-line" title="Delete Company"></i></a>
                                        @endif
                                        </td>
                                      
                                    
                                    </tr>
                                    @endforeach

                                @endif
                                    
                                </tbody>
                                
                            </table>
                            <!-- end table -->
                        </div>
                        <!-- end table responsive -->
                    </div>
                    
                </div><!-- end card-body -->
            </div><!-- end card -->
        </div><!-- end col -->
    </div>
</div>
<div class="modal fade bs-example-modal-center" id="bs-example-modal-center" tabindex="-1" aria-labelledby="mySmallModalLabel" style="display: none;" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
         <div class="modal-body text-center p-5">
            <lord-icon src="https://cdn.lordicon.com/hrqwmuhr.json" trigger="loop" colors="primary:#121331,secondary:#08a88a" style="width:120px;height:120px">
            </lord-icon>
            <div class="mt-4">
               <h4 class="mb-3">Do you want to change status?</h4>
               <div class="hstack gap-2 justify-content-center">
                  <button type="button" class="btn btn-light" data-bs-dismiss="modal">NO</button>
                  <input type="hidden" id="status_id"/>
                  <input type="hidden" id="status_value"/>
                  <input type="hidden" id="status_url"/>
                  <a href="javascript:void(0);" onclick="changeStatus('company_list_table')" class="btn btn-danger">Yes</a>
               </div>
            </div>
         </div>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>
<div class="modal fade bs-example-modal-center-delete" id="bs-example-modal-center-delete" tabindex="-1" aria-labelledby="mySmallModalLabel" style="display: none;" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
         <div class="modal-body text-center p-5">
            <lord-icon src="https://cdn.lordicon.com/hrqwmuhr.json" trigger="loop" colors="primary:#121331,secondary:#08a88a" style="width:120px;height:120px">
            </lord-icon>
            <div class="mt-4">
               <h4 class="mb-3">Are you sure want to delete? This action can't be undo.</h4>
               <div class="hstack gap-2 justify-content-center">
                  <button type="button" class="btn btn-light" data-bs-dismiss="modal">NO</button>
                  <input type="hidden" id="delete_id"/>
                  <input type="hidden" id="delete_url"/>
                  <a href="javascript:void(0);" onclick="destroyData('company_list_table')" class="btn btn-danger">Delete</a>
               </div>
            </div>
         </div>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>
<link href="https://cdn.datatables.net/2.0.8/css/dataTables.dataTables.css" rel="stylesheet" type="text/css" />
<script src="{{ URL::asset('assets/js/jquery.min.js') }}"></script>
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.js"></script>

<script>
   new DataTable('#example');
   function myFunction(id,status) {
 
    var datastring = {
    "_token": "{{ csrf_token() }}",
        status : status,
        id : id
    };
    $.ajax({
                type:'POST',
                cache: false,
                url:"{{route('visitportal.company-changeStatus')}}",
                dataType: "json",
                data:datastring,
                success:function(data) {
                //  debugger
                // location.reload();
                }
            });
    }

    function destroyData(list_table) {
        var id = $("#delete_id").val();
        var url_name = $("#delete_url").val();
        var datastring = {
            id : id
        };
        $.ajax({
            type:'DELETE',
            cache: false,
            url:"{{route('visitportal.company-destroy')}}",
            dataType: "json",
            data:datastring,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success:function(data) {
                $('#bs-example-modal-center-delete').modal('hide');
                if(data.status == 'success'){
                    location.reload();
                    Toastify({
                        text: "Data delete successfully",
                        className: "success",
                        style: {
                        background: "linear-gradient(to right, #00b09b, #96c93d)",
                        }
                    }).showToast();
                }else{
                    Toastify({
                        text: "Unable to delete data",
                        className: "danger",
                        style: {
                        background: "linear-gradient(to right, #f06548, #f06548)",
                        }
                    }).showToast();
                }
            
            }
        });
    }
</script>
@endif
@endsection