@extends('admin.layout')

@section('content')
    <style>
        /* =========================================================
               DISBURSED TABLE
            ========================================================== */

        #disbursedTable {
            width: 100% !important;
            table-layout: fixed !important;
            border-collapse: collapse !important;
        }

        #disbursedTable th,
        #disbursedTable td {
            vertical-align: middle !important;
            text-align: center !important;
        }

        /* Header */
        #disbursedTable thead th {
            font-size: 14px;
            font-weight: 700;
            white-space: nowrap;
            padding: 14px 10px !important;
        }

        /* Body */
        #disbursedTable tbody td {
            padding: 16px 10px !important;
            font-size: 14px;
        }

        /* =========================================================
               COLUMN WIDTHS
            ========================================================== */

        /* S.No */
        #disbursedTable th:nth-child(1),
        #disbursedTable td:nth-child(1) {
            width: 8% !important;
        }

        /* Name */
        #disbursedTable th:nth-child(2),
        #disbursedTable td:nth-child(2) {
            width: 18% !important;
        }

        /* Number */
        #disbursedTable th:nth-child(3),
        #disbursedTable td:nth-child(3) {
            width: 18% !important;
        }

        /* Vehicle Details */
        #disbursedTable th:nth-child(4),
        #disbursedTable td:nth-child(4) {
            width: 36% !important;
        }

        /* Vehicle Amount */
        #disbursedTable th:nth-child(5),
        #disbursedTable td:nth-child(5) {
            width: 20% !important;
        }

        /* =========================================================
               VEHICLE DETAILS
            ========================================================== */

        .vehicle-details {
            line-height: 1.35;
            text-align: center;
        }

        .vehicle-details .vehicle-name {
            font-size: 15px;
            font-weight: 700;
            margin-bottom: 3px;
        }

        .vehicle-details small {
            display: block;
            font-size: 13px;
            line-height: 1.25;
        }

        /* =========================================================
               AMOUNT
            ========================================================== */

        .vehicle-amount {
            font-size: 15px;
            font-weight: 700;
            white-space: nowrap;
        }

        /* =========================================================
               DATATABLE CONTROLS
            ========================================================== */

        #disbursedTable_wrapper {
            width: 100%;
        }

        #disbursedTable_wrapper .dataTables_length,
        #disbursedTable_wrapper .dataTables_filter {
            margin-bottom: 15px;
        }

        #disbursedTable_wrapper .dataTables_filter input {
            margin-left: 8px;
            height: 38px;
            border-radius: 6px;
            padding: 6px 10px;
        }

        #disbursedTable_wrapper .dataTables_length select {
            height: 38px;
            border-radius: 6px;
            padding: 5px 30px 5px 10px;
        }

        /* =========================================================
               MOBILE
            ========================================================== */

        @media (max-width: 768px) {

            #disbursedTable {
                table-layout: auto !important;
                min-width: 850px !important;
            }

            #disbursedTable th,
            #disbursedTable td {
                white-space: nowrap;
            }

            .table-responsive {
                overflow-x: auto;
            }
        }
    </style>


    {{-- PAGE HEADER --}}
    <div class="d-flex align-items-center justify-content-between mb-3">

        <h5>

            <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">

                <a href="{{ route('admin.dashboard') }}">

                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="icon icon-tabler">

                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />

                        <path d="M15 6l-6 6l6 6" />

                    </svg>

                </a>

            </button>

            Disbursed List

        </h5>

    </div>


    {{-- TABLE CARD --}}
    <div class="card p-3 shadow-sm">

        <div class="table-responsive">

            <table id="disbursedTable" class="table table-bordered align-middle w-100">

                <thead>
                    <tr>

                        <th>S.No</th>

                        <th>Name</th>

                        <th>Number</th>

                        <th>Vehicle Details</th>

                        <th>Vehicle Amount</th>

                    </tr>
                </thead>


                <tbody>

                    @forelse($disbursedCustomers as $index => $row)
                        @php

                            $customer = $row->customer;
                            $vehicle = $row->vehicle;

                            /*
                            |--------------------------------------------------------------------------
                            | CUSTOMER
                            |--------------------------------------------------------------------------
                            */

                            $customerName = $customer?->name ?? 'N/A';
                            $customerMobile = $customer?->mobile ?? 'N/A';

                            /*
                            |--------------------------------------------------------------------------
                            | VEHICLE
                            |--------------------------------------------------------------------------
                            */

                            $brandName = $vehicle?->brand_name ?? '';
                            $vehicleModel = $vehicle?->vehicle_model ?? '';
                            $vehicleNumber = $vehicle?->vehicle_no ?? '';
                            $vehicleYear = $vehicle?->vehicle_year ?? '';

                            $vehicleName = $brandName ?: $vehicleModel ?: 'N/A';

                            /*
                            |--------------------------------------------------------------------------
                            | AMOUNT
                            |--------------------------------------------------------------------------
                            */

                            $vehicleAmount = $row->rate ?? 0;

                        @endphp


                        <tr>

                            {{-- S.NO --}}
                            <td>
                                {{ $index + 1 }}
                            </td>


                            {{-- NAME --}}
                            <td>
                                {{ $customerName }}
                            </td>


                            {{-- NUMBER --}}
                            <td>
                                {{ $customerMobile }}
                            </td>


                            {{-- VEHICLE DETAILS --}}
                            <td>

                                <div class="vehicle-details">

                                    {{-- BRAND --}}
                                    <div class="vehicle-name">
                                        {{ $vehicleName }}
                                    </div>


                                    {{-- MODEL --}}
                                    @if ($vehicleModel)
                                        <small class="text-muted">
                                            Model: {{ $vehicleModel }}
                                        </small>
                                    @endif


                                    {{-- VEHICLE NUMBER --}}
                                    @if ($vehicleNumber)
                                        <small class="text-muted">
                                            Vehicle No: {{ $vehicleNumber }}
                                        </small>
                                    @endif


                                    {{-- YEAR --}}
                                    @if ($vehicleYear)
                                        <small class="text-muted">
                                            Year: {{ $vehicleYear }}
                                        </small>
                                    @endif

                                </div>

                            </td>


                            {{-- VEHICLE AMOUNT --}}
                            <td>

                                <span class="vehicle-amount">
                                    ₹{{ number_format((float) $vehicleAmount, 2) }}
                                </span>

                            </td>

                        </tr>


                    @empty

                        <tr>

                            <td colspan="5" class="text-center text-muted py-4">

                                No disbursed records found.

                            </td>

                        </tr>
                    @endforelse

                </tbody>

            </table>

        </div>

    </div>


    {{-- JQUERY --}}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


    {{-- DATATABLE --}}
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>


    <script>
        $(document).ready(function() {

            $('#disbursedTable').DataTable({

                pageLength: 10,

                lengthMenu: [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, "All"]
                ],

                ordering: true,

                searching: true,

                info: true,

                autoWidth: false,

                language: {
                    lengthMenu: "_MENU_",
                    search: "",
                    searchPlaceholder: "Search..."
                },

                
                columnDefs: [

                    {
                        targets: 0,
                        orderable: false,
                        searchable: false
                    },

                    {
                        targets: '_all',
                        className: 'text-nowrap'
                    }

                ]

            });

        });
    </script>
@endsection