@extends('layouts.app')

@section('title')
@lang('Vendor_List')
@endsection

@section('css')
<!-- Bootstrap Datepicker -->
<link href="{{ asset('build/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css') }}" rel="stylesheet" type="text/css" />

<!-- DataTables -->
<link href="{{ asset('build/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />

<!-- Responsive DataTable -->
<link href="{{ asset('build/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
@component('components.breadcrumb')
@slot('li_1') Vendors @endslot
@slot('title') Vendor List @endslot
@endcomponent

<!-- Alert Messages -->
@if (session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
    <i class="mdi mdi-check-all me-2"></i>
    {{ session('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif

@if (session('error'))
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    <i class="mdi mdi-block-helper me-2"></i>
    {{ session('error') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif

<h4 class="card-title">Vendor List</h4>
<p class="card-title-desc">
    This page displays a list of vendors (customers) who have submitted loan applications through the system.
    Each entry includes business and contact information to help you quickly identify and manage borrower records.
</p>

<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <!-- Table -->
            <div class="card-body">
                @if(hasPermission(2100, 'can_add'))
                <div class="text-end mb-3">
                    <a href="{{ route('vendor.create') }}" class="btn btn-primary"><span class="mdi mdi-account-plus me-2"></span>New Vendor</a>
                </div>
                @endif
                <div class="table-responsive">
                    <table class="table table-bordered align-middle dt-responsive nowrap w-100" id="vendor-list">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Name</th>
                                {{-- <th>Business Type</th>
                                <th>Business Registration Number</th>
                                <th>Phone</th> --}}
                                <th>Email</th>
                                <th>Registered Date</th> <!-- New Column -->
                                <th>Status</th>
                                {{-- <th>Action</th> --}}
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($vendors as $index => $vendor)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>
                                    <a href="{{ route('vendor.show', Crypt::encryptString($vendor->id)) }}" class="text-primary text-decoration-underline">
                                        {{ $vendor->name }}
                                    </a>
                                </td>
                                {{-- <td>{{ $vendor->latestLead->applicant->applicant_name ?? 'N/A' }}</td>
                                <td>{{ $vendor->group->name ?? 'N/A' }}</td>
                                <td>{{ $vendor->latestLead->applicant->applicant_phone ?? $vendor->latestLead->applicant->contact_phone ?? $vendor->phone }}</td> --}}
                                {{-- <td>{{ $vendor->latestLead->applicant->applicant_email ?? $vendor->latestLead->applicant->contact_email ?? $vendor->email }}</td> --}}
                                <td>{{ $vendor->email }}</td>
                                <td>{{ \Carbon\Carbon::parse($vendor->created_at)->format('d M Y') }}</td> <!-- Display Registered Date -->
                                <td>
                                    <span class="badge {{ $vendor->status == '1' ? 'bg-success' : 'bg-danger' }}">
                                        {{ $vendor->status == '1' ? 'Active' : 'Inactive' }}
                                    </span>
                                </td>
                                {{-- <td>
                                    <!-- Edit Button -->
                                    <a href="{{ route('vendor.edit', ['id' => Crypt::encryptString($vendor->id)]) }}" class="btn btn-warning btn-sm">
                                Edit
                                </a>
                                <button class="btn btn-sm btn-danger" onclick="deleteVendor({{ $vendor->id }});" data-bs-toggle="modal" data-bs-target="#vendorDelete">Delete</button>
                                </td> --}}
                            </tr>
                            @endforeach
                        </tbody>
                    </table>

                </div>
            </div>
            <!-- End Card Body -->
        </div>
    </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" id="vendorDelete" tabindex="-1" aria-labelledby="vendorDeleteLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content">
            <div class="modal-body text-center">
                <button type="button" class="btn-close position-absolute end-0 top-0 m-3" data-bs-dismiss="modal"></button>
                <div class="avatar-sm mb-4 mx-auto">
                    <div class="avatar-title bg-primary text-primary bg-opacity-10 font-size-20 rounded-3">
                        <i class="mdi mdi-trash-can-outline"></i>
                    </div>
                </div>
                <p class="text-muted font-size-16 mb-4">Are you sure you want to permanently delete this vendor?</p>

                <div class="hstack gap-2 justify-content-center mb-0">
                    <button type="button" class="btn btn-danger">Delete Now</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<!-- Bootstrap Datepicker -->
<script src="{{ asset('build/libs/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>

<!-- DataTable Scripts -->
<script src="{{ asset('build/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('build/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>

<!-- Responsive DataTables -->
<script src="{{ asset('build/libs/datatables.net-responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('build/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js') }}"></script>

<!-- Initialize DataTable -->
<script>
    $(document).ready(function() {
        $('#vendor-list').DataTable();
    });

    function filterData() {
        // Add filtering logic here if needed
        console.log("Filtering data...");
    }

    function deleteVendor(vendorId) {
        console.log("Deleting vendor ID: " + vendorId);
        // Add deletion logic here
    }

</script>
@endsection