@extends('admin.layout')
<style>
    .dt-search {
        display: none !important;
    }
</style>
@section('content')
<button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">

                        <a href="{{ route('due_customers') }}">

                            <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>
<div class="container-fluid px-3 px-sm-4 py-3">
    
    <div class="row g-4">
        
        <div class="col-lg-6 col-md-6 col-12">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-light py-3">
                    <h5 class="mb-0 text-dark fw-semibold">
                        <i class="ti tabler-user me-2"></i>
                        Customer Details
                    </h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-borderless align-middle mb-0">
                            <tr>
                                <th style="width: 35%;">Name</th>
                                <td>{{ $customer->name }}</td>
                            </tr>
                            <tr>
                                <th>Father Name</th>
                                <td>{{ $customer->father_name }}</td>
                            </tr>
                            <tr>
                                <th>Address</th>
                                <td>{{ $customer->address }}</td>
                            </tr>
                            <tr>
                                <th>Mobile</th>
                                <td>{{ $customer->mobile }}</td>
                            </tr>
                            <tr>
                                <th>Vehicle No</th>
                                <td>{{ $customer->vehicle->vehicle_no }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6 col-md-6 col-12">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-light py-3">
                    <h5 class="mb-0 text-dark fw-semibold">
                        <i class="ti tabler-user me-2"></i>
                        Guarantor Details
                    </h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-borderless align-middle mb-0">
                            <tr>
                                <th style="width: 35%;">Name</th>
                                <td>{{ $customer->guarantor->guarantor_name ?? '-' }}</td>
                            </tr>
                            <tr>
                                <th>Father Name</th>
                                <td>{{ $customer->guarantor->guarantor_father_name ?? '-' }}</td>
                            </tr>
                            <tr>
                                <th>Address</th>
                                <td>{{ $customer->guarantor->guarantor_address ?? '-' }}</td>
                            </tr>
                            <tr>
                                <th>Mobile</th>
                                <td>{{ $customer->guarantor->guarantor_mobile ?? '-' }}</td>
                            </tr>
                            <tr>
                                <th>Relation</th>
                                <td>Guarantor</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

   @if ($customer->vehicleSell && strtolower($customer->vehicleSell->payment_mode) == 'due')

@php
    $sale = $customer->vehicleSell;
@endphp

<div class="card shadow-sm mt-4 border-0 w-100">
    <div class="card-header bg-light py-3 mb-3">
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">
            <div>
                <h5 class="mb-0 fw-semibold text-dark">
                    <i class="ti tabler-cash-banknote me-2 text-primary"></i>
                    EMI Payment Track
                </h5>
            </div>

            <div class="row g-2 justify-content-end align-items-center w-100 m-0">
                <div class="col-12 col-xl-2 col-sm-auto">
                    <div class="card border-0 border-start border-4 border-info bg-info-subtle shadow-sm py-2 px-3 text-center w-100">
                        <span class="text-uppercase text-info fw-bold d-block mb-1" style="font-size: 0.7rem; letter-spacing: 0.5px;">
                            Due Months
                        </span>
                        <span class="fw-bold text-info fs-5 lh-1">
                            {{ $sale->months ?? 0 }} Months
                        </span>
                    </div>
                </div>

                <div class="col-12 col-xl-2 col-sm-auto">
                    <div class="card border-0 border-start border-4 border-warning bg-warning-subtle shadow-sm py-2 px-3 text-center w-100">
                        <span class="text-uppercase text-warning fw-bold d-block mb-1" style="font-size: 0.7rem; letter-spacing: 0.5px;">
                            Total Amount
                        </span>
                        <span class="fw-bold text-warning fs-5 lh-1">
                            ₹{{ number_format($sale->rate ?? $sale->rate ?? 0, 2) }}
                        </span>
                    </div>
                </div>

                <div class="col-12 col-xl-2 col-sm-auto">
                    <div class="card border-0 border-start border-4 border-success bg-success-subtle shadow-sm py-2 px-3 text-center w-100">
                        <span class="text-uppercase text-success fw-bold d-block mb-1" style="font-size: 0.7rem; letter-spacing: 0.5px;">
                            Total Paid
                        </span>
                        <span class="fw-bold text-success fs-5 lh-1">
                          ₹{{ number_format(($sale->paid_amount ?? 0) + ($sale->by_hand ?? 0), 2) }}
                        </span>
                    </div>
                </div>

                <div class="col-12 col-xl-2 col-sm-auto">
                    <div class="card border-0 border-start border-4 border-danger bg-danger-subtle shadow-sm py-2 px-3 text-center w-100">
                        <span class="text-uppercase text-danger fw-bold d-block mb-1" style="font-size: 0.7rem; letter-spacing: 0.5px;">
                            Balance
                        </span>
                        <span class="fw-bold text-danger fs-5 lh-1">
                            ₹{{ number_format($sale->remaining_balance ?? 0, 2) }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card-body mt-3">
        <div class="row align-items-center mb-3 g-2">
            <div class="col-md-6 col-12">
                <div class="d-flex align-items-center gap-2">
                    <select id="emiPageLength" class="form-select border-warning" style="width: 80px;">
                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                </div>
            </div>
            <div class="col-md-6 col-12">
                <div class="d-flex justify-content-md-end">
                    <div class="col-xl-4 col-md-7 col-12">
                        <div class="input-group">
                            <input type="text" id="emiSearch" class="form-control border-warning" placeholder="Search payment...">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="table-responsive">
            <table id="emiPaymentTable" class="table table-bordered table-hover align-middle text-center w-100 mb-0">
                <thead class="table-light">
                    <tr>
                        <th>S.No</th>
                        <th>EMI Amount</th>
                        <th>Paid Amount</th>
                        <th>Payment Date</th>
                        <th>Balance</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
@endif
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

<script>
    $(document).ready(function() {
        let emiTable = $('#emiPaymentTable').DataTable({
            processing: true,
            serverSide: true,

            ajax: {
                url: "{{ route('admin.customer_emi_data', $customer->id) }}",
                type: "GET"
            },
            searching: true,
            lengthChange: false,
            pageLength: 10,
            ordering: true,
            info: true,
            language: {
                processing: `
                        <div class="spinner-border spinner-border-sm text-primary me-2"></div>
                        Loading...
                    `,
                emptyTable: "No EMI payment records found",
                zeroRecords: "No matching payment records found",

            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                // {
                //     data: 'emi_no',
                //     name: 'emi_no'
                // },
                {
                    data: 'emi_amount',
                    name: 'emi_amount'
                },
                {
                    data: 'paid_amount',
                    name: 'paid_amount'
                },
                {
                    data: 'payment_date',
                    name: 'payment_date'
                },
                {
                    data: 'balance',
                    name: 'balance'
                },
                {
                    data: 'status',
                    name: 'status',
                    orderable: false
                }
            ],
            drawCallback: function() {
                let api = this.api();
                let info = api.page.info();

                if (info.recordsDisplay === 0) {
                    $('#emiTableInfo').html('Showing 0 to 0 of 0 entries');
                } else {
                    $('#emiTableInfo').html(
                        'Showing ' + (info.start + 1) + ' to ' + info.end + ' of ' + info
                        .recordsDisplay + ' entries'
                    );
                }

                $('#emiTablePagination').html($('.dataTables_paginate').html());
                $('#emiTablePagination .pagination').addClass('pagination-sm mb-0');
                $('#emiTablePagination .paginate_button').addClass('page-item');
                $('#emiTablePagination .paginate_button a').addClass('page-link');
            }
        });

        $('#emiSearch').on('keyup', function() {
            emiTable.search(this.value).draw();
        });

        $('#emiPageLength').on('change', function() {
            emiTable.page.len(parseInt(this.value)).draw();
        });
    });
</script>
@endsection