@extends('admin.app')
@section('title') Vendor Reports @endsection
@section('styles')
<link href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.bootstrap5.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/b-2.2.2/b-html5-2.2.2/sb-1.3.2/datatables.min.css" />
<style>
    .top {
        display: flex;
        align-items: center;
    }
</style>

@endsection
@section('content')
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="product-status-wrap">
        <div class="chart-container ng-star-inserted total-list">
            <h4 class="heading_h4" style="margin-left: 10px;  "><i class="fas fa-hotel"></i> Vendors List</h4>
            @if(session('success'))
            <div class="alert alert-success alert-dismissible">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">x</button>
            </div>
            @endif
            <br>
            <table id="vendor-list-table">
                <thead>
                    <tr>
                        <th>Vendor Name</th>
                        <th>Email</th>
                        <th>Mobile</th>
                        <th>Vendor Address</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($vendor_list as $vendor)
                    <tr id="{{ $vendor->vendor_id }}">

                        <td>{{ $vendor->vendor_name }}</td>
                        <td>{{ $vendor->email }}</td>
                        <td>{{ $vendor->vendor_mobile_num }}</td>
                        <td>
                            @foreach ($vendor_addresses as $vendor_address)
                            @if ( $vendor->vendor_id == $vendor_address->vendor_id )
                                                        <br>
                            @endif
                            @endforeach
                        </td>
                        <td>
                            <a data-toggle="tooltip" title="Edit" class="pd-setting-ed" href="{{ route('admin.vendors.edit', $vendor->vendor_id) }}"><i class="fa fa-edit" aria-hidden="true"></i></a>
                            <a href="{{ route('admin.vendors.password.edit', $vendor) }}" class="pd-setting-ed"><i class="fas fa-key"></i></a>
                            <a onclick="event.preventDefault(); swalDelete('#delete-form-{{$vendor->vendor_id}}')" class="orders icons"><i class="fas fa-trash-alt"></i></a>
                            <form id="delete-form-{{$vendor->vendor_id}}" action="{{ route('admin.vendors.delete', $vendor) }}" method="POST">
                                @csrf
                                @method('DELETE')
                            </form>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('/js1/vendorList.js') }}"></script>
<script>
    $(document).ready(function() {
        $('#vendor-list-table').DataTable();
    });

    function swalDelete(form_id) {
    Swal.fire({
      title: 'Are you sure?',
      text: "You won't be able to revert vendor!",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Yes, Delete vendor!',
      customClass: {
        confirmButton: 'btn btn-primary',
        cancelButton: 'btn btn-outline-danger ms-1'
      },
      buttonsStyling: false
    }).then(function(result) {
      if (result.value) {
        $(form_id).submit();

        Swal.fire({
          icon: 'success',
          title: 'Deleted!',
          text: 'Vendor has been deleted.',
          customClass: {
            confirmButton: 'btn btn-success'
          }
        });

      } else if (result.dismiss === Swal.DismissReason.cancel) {
        Swal.fire({
          title: 'Cancelled',
          text: 'Cancelled Delete :)',
          icon: 'error',
          customClass: {
            confirmButton: 'btn btn-success'
          }
        });
      }
    });
};
</script>
@endpush