@extends('layout.app')
@section('title','Secured Loans - Truck EMI Tracker')
@push('header_script')
    <link rel="stylesheet" href="{{asset('theme/assets/vendor/datatables/dataTables.bs5.css')}}">
    <link rel="stylesheet" href="{{asset('theme/assets/vendor/datatables/dataTables.bs5-custom.css')}}">
    <link rel="stylesheet" href="{{asset('theme/assets/vendor/daterange/daterange.css')}}">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');
        
        .truck-emi-wrap {
            --navy: #16213E;
            --navy-soft: #3A4A73;
            --teal: #0E9E8F;
            --teal-soft: #E4F6F3;
            --amber: #B9760C;
            --amber-soft: #FBF0DD;
            --red: #C24444;
            --border: #E3E6ED;
            --muted: #7C8598;
        }

        .truck-emi-wrap h1.page-title { font-family: 'Manrope', sans-serif; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 4px; color: var(--navy); }
        .truck-emi-wrap p.sub { color: var(--muted); font-size: 13px; margin: 0; }
        
        /* Table Styling */
        .truck-emi-wrap #datatable thead th {
            background: var(--navy) !important; color: #fff !important; font-size: 11px; text-transform: uppercase;
            letter-spacing: .05em; font-weight: 700; border: none !important;
        }
        .truck-emi-wrap #datatable tbody td { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--navy-soft); vertical-align: middle; }
        .truck-emi-wrap .mono { font-family: 'IBM Plex Mono', monospace; font-size: 13.5px; }
        
        .truck-emi-wrap .pill { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; display: inline-block; }
        .truck-emi-wrap .pill-doc { background: var(--teal-soft); color: var(--teal); }
        .truck-emi-wrap .pill-missing { background: var(--amber-soft); color: var(--amber); }
        .truck-emi-wrap .pill-overdue { background: #FBEAEA; color: var(--red); }
        
        .truck-emi-wrap .action-group { display: flex; gap: 6px; }
        .truck-emi-wrap .action-btn {
            font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border);
            background: #fff; color: var(--navy-soft); cursor: pointer; white-space: nowrap; text-decoration: none;
        }
        .truck-emi-wrap .action-btn:hover { border-color: var(--navy-soft); color: var(--navy); }
        .truck-emi-wrap .action-btn.pay { background: var(--teal); color: #fff; border-color: var(--teal); }

        /* Custom Modal */
        .truck-emi-wrap .modal-content { border-radius: 12px; border: none; box-shadow: 0 10px 40px rgba(0,0,0,0.1); }
        .truck-emi-wrap .modal-header { border-bottom: 1px solid var(--border); background: #f8f9fa; border-radius: 12px 12px 0 0; }
        .truck-emi-wrap .modal-title { font-family: 'Manrope', sans-serif; font-weight: 700; color: var(--navy); }
        
        .truck-emi-wrap .auto-val { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; background: var(--teal-soft); color: var(--teal); padding: 9px 12px; border-radius: 6px; border: 1px dashed var(--teal); }
        
        .rps-summary { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
        .rps-stat { flex: 1; min-width: 130px; background: #f8f9fa; border-radius: 8px; padding: 12px 14px; border: 1px solid var(--border); }
        .rps-stat .l { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
        .rps-stat .v { font-family: 'IBM Plex Mono', monospace; font-size: 16px; font-weight: 700; color: var(--navy); }
    </style>
@endpush
@section('content')
    <div class="truck-emi-wrap">
        <div class="app-hero-header d-flex align-items-center">
            <div>
                <h1 class="page-title">Secured Loans — Truck EMI Tracker</h1>
                <p class="sub">Loan account = Truck Number + Financer, tracked under the Secured Loan group.</p>
            </div>
            <div class="ms-auto d-lg-flex flex-row">
                <div class="d-flex flex-row gap-1 day-sorting">
                    <button class="btn btn-sm btn-primary d-flex align-items-center gap-1" data-bs-toggle="modal" data-bs-target="#addLoanModal" style="font-family: 'Manrope', sans-serif; font-weight: 700; border-radius: 6px;">
                        <i class="ri-add-circle-fill"></i> ADD LOAN
                    </button>
                </div>
            </div>
        </div>

        <div class="app-body">
            <div class="row gx-3">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="datatable" class="table m-0 align-middle">
                                    <thead>
                                    <tr>
                                        <th>S.No</th>
                                        <th>Truck Number</th>
                                        <th>Loan A/c No.</th>
                                        <th>Financer</th>
                                        <th>Principal Sanctioned</th>
                                        <th>Sanction Date</th>
                                        <th>Tenure</th>
                                        <th>EMI Start Date</th>
                                        <th>EMI Amount</th>
                                        <th>Outstanding Loan</th>
                                        <th>Status</th>
                                        <th>Statement</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card mt-3">
                        <div class="card-body" style="background: #fdfdfd;">
                            <h5 style="font-family: 'Manrope', sans-serif; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--navy-soft); margin-bottom: 12px; font-weight: 700;">Business Rules (from spec)</h5>
                            <ol style="margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; color: var(--navy-soft);">
                              <li>Loan Account Number is entered manually, taken from the <b>Loan Agreement</b> document (the financer's own account number for this loan) — it is not system-generated.</li>
                              <li>On Save, the system auto-creates a <b>Loan Account Ledger</b> for that loan account, filed under the <b>Secured Loan</b> group, ready to record EMI entries against it.</li>
                              <li><b>Financer</b> field is a dropdown — pre-populated with all major banks and NBFCs.</li>
                              <li><b>RPS (Repayment Schedule)</b> generated automatically from Principal Sanctioned + Tenure + EMI Amount at the time the loan is added.</li>
                              <li>Each installment in the RPS carries a <b>Paid / Unpaid</b> status, updatable around the due date.</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- ADD LOAN MODAL -->
        <div class="modal fade" id="addLoanModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Add Loan</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form class="row g-3 needs-validation" action="{{route('truck-loan.store')}}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="col-md-6 col-12">
                                <label class="form-label fw-bold mb-1">Truck Number <span class="text-danger">*</span>
                                    <button type="button" class="btn btn-primary btn-sm rounded-circle ms-1" style="width: 20px; height: 20px; padding: 0; line-height: 20px; font-size: 14px; display: inline-flex; align-items: center; justify-content: center;" onclick="window.returnToLoanModal=true; $('#addLoanModal').modal('hide'); setTimeout(function(){$('#vehicleModel').modal('show')}, 400);"><i class="ri-add-line"></i></button>
                                </label>
                                <select name="truck_id" id="vehicle_id" class="form-control select2" required style="width: 100%;">
                                    <option value="" disabled selected>Select Truck</option>
                                    @foreach($vehicles as $id => $truck_no)
                                        <option value="{{$id}}">{{$truck_no}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 col-12">
                                <label class="form-label fw-bold mb-1">Financer <span class="text-danger">*</span>
                                    <button type="button" class="btn btn-primary btn-sm rounded-circle ms-1" style="width: 20px; height: 20px; padding: 0; line-height: 20px; font-size: 14px; display: inline-flex; align-items: center; justify-content: center;" onclick="window.returnToLoanModal=true; $('#addLoanModal').modal('hide'); setTimeout(function(){$('#financerModel').modal('show')}, 400);"><i class="ri-add-line"></i></button>
                                </label>
                                <select name="financer_id" class="form-control select2" required style="width: 100%;">
                                    <option value="" disabled selected>Select financer...</option>
                                    @foreach($financers as $id => $name)
                                        <option value="{{$id}}">{{$name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-12 col-12">
                                <label class="form-label fw-bold">Loan Account Number <span class="text-muted fw-normal" style="font-size:12px;">(as per Loan Agreement — enter manually)</span> <span class="text-danger">*</span></label>
                                <input type="text" name="loan_account_number" class="form-control" placeholder="e.g. HDFCTL0029384" required>
                            </div>
                            <div class="col-md-12 col-12">
                                <div class="auto-val">A Loan Account Ledger will be auto-created for this loan on Save, filed under the Secured Loan group.</div>
                            </div>
                            <div class="col-md-6 col-12">
                                <label class="form-label fw-bold">Principal Sanctioned (₹) <span class="text-danger">*</span></label>
                                <input type="number" step="0.01" name="principal_amount" class="form-control" placeholder="₹" required>
                            </div>
                            <div class="col-md-6 col-12">
                                <label class="form-label fw-bold">Interest Rate (%) <span class="text-danger">*</span></label>
                                <input type="number" step="0.01" name="interest_rate" class="form-control" placeholder="%" required>
                            </div>
                            <div class="col-md-4 col-12">
                                <label class="form-label fw-bold">Sanction Date <span class="text-danger">*</span></label>
                                <input type="text" name="sanction_date" class="form-control datepicker" required>
                            </div>
                            <div class="col-md-4 col-12">
                                <label class="form-label fw-bold">Tenure <span class="text-muted fw-normal" style="font-size:12px;">(months)</span> <span class="text-danger">*</span></label>
                                <input type="number" name="tenure_months" class="form-control" placeholder="e.g. 48" required>
                            </div>
                            <div class="col-md-4 col-12">
                                <label class="form-label fw-bold">EMI Start Date <span class="text-danger">*</span></label>
                                <input type="text" name="emi_start_date" class="form-control datepicker" required>
                            </div>
                            <div class="col-md-6 col-12">
                                <label class="form-label fw-bold">EMI Amount (₹) <span class="text-danger">*</span></label>
                                <input type="number" step="0.01" name="emi_amount" class="form-control" placeholder="₹" required>
                            </div>
                            <div class="col-md-6 col-12">
                                <label class="form-label fw-bold">Statement Upload</label>
                                <input type="file" name="statement_file" class="form-control">
                            </div>
                            
                            <div class="col-12 mt-4 text-end">
                                <button type="button" class="btn btn-light me-2" data-bs-dismiss="modal">Cancel</button>
                                <button type="submit" class="btn btn-primary">Save Loan</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- RPS MODAL -->
        <div class="modal fade" id="rpsModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="rpsModalTitle">Repayment Schedule</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="rps-summary">
                            <div class="rps-stat"><div class="l">Principal Sanctioned</div><div class="v" id="rpsPrincipal">—</div></div>
                            <div class="rps-stat"><div class="l">EMI Amount</div><div class="v" id="rpsEmi">—</div></div>
                            <div class="rps-stat"><div class="l">Tenure</div><div class="v" id="rpsTenure">—</div></div>
                            <div class="rps-stat"><div class="l">Outstanding (today)</div><div class="v" id="rpsOutstanding">—</div></div>
                        </div>
                        <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                            <table class="table table-sm align-middle m-0 rps-table" style="font-size: 13px;">
                                <thead style="position: sticky; top: 0; z-index: 1;">
                                    <tr style="background: var(--navy); color: #fff;">
                                        <th style="padding: 12px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; border: none;">INSTALLMENT NO.</th>
                                        <th style="padding: 12px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; border: none;">INSTALLMENT DATE</th>
                                        <th style="padding: 12px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; border: none;">OPENING PRINCIPAL</th>
                                        <th style="padding: 12px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; border: none;">INSTALLMENT AMOUNT</th>
                                        <th style="padding: 12px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; border: none;">PRINCIPAL</th>
                                        <th style="padding: 12px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; border: none;">INTEREST</th>
                                        <th style="padding: 12px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; border: none;">CLOSING PRINCIPAL</th>
                                        <th style="padding: 12px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; border: none;">STATUS</th>
                                    </tr>
                                </thead>
                                <tbody id="rpsRows"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    @include('common.modal.vehicle')
    @include('common.modal.financer')

@endsection
@push('footer_script')
    <script src="{{asset('theme/assets/vendor/datatables/dataTables.min.js')}}"></script>
    <script src="{{asset('theme/assets/vendor/datatables/dataTables.bootstrap.min.js')}}"></script>
    <script src="{{asset('theme/assets/vendor/daterange/daterange.js')}}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function() {
            $('#vehicleModel, #financerModel').on('hidden.bs.modal', function () {
                if (window.returnToLoanModal) {
                    window.returnToLoanModal = false;
                    setTimeout(function() { $('#addLoanModal').modal('show'); }, 400);
                }
            });

            var table = $('#datatable').DataTable({
                processing: true,
                serverSide: true,
                stateSave: true,
                responsive: true,
                ajax: {
                    url: '{{route('truck-loan.getData') }}',
                },
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex', searchable: false, orderable: false},
                    {data: 'truck_number', name: 'truck.vehicle_no'},
                    {data: 'loan_account_number', name: 'loan_account_number', render: function(d) { return '<span class="mono">'+d+'</span>'; }},
                    {data: 'financer_name', name: 'financer.name'},
                    {data: 'principal_amount', name: 'principal_amount', render: function(d) { return '<span class="mono">₹' + parseFloat(d).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2}) + '</span>'; }},
                    {data: 'sanction_date', name: 'sanction_date'},
                    {data: 'tenure_months', name: 'tenure_months', render: function(d) { return d + ' mo'; }},
                    {data: 'emi_start_date', name: 'emi_start_date'},
                    {data: 'emi_amount', name: 'emi_amount', render: function(d) { return '<span class="mono">₹' + parseFloat(d).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2}) + '</span>'; }},
                    {data: 'outstanding_loan', name: 'outstanding_loan', searchable: false, orderable: false},
                    {data: 'status_pill', name: 'status_pill', searchable: false, orderable: false},
                    {data: 'statement', name: 'statement', searchable: false, orderable: false},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ],
                drawCallback: function() {
                    // Force select2 initialization if datatables somehow broke it
                }
            });

            $('#addLoanModal').on('shown.bs.modal', function () {
                $('#addLoanModal .select2').each(function() {
                    if ($(this).hasClass("select2-hidden-accessible")) {
                        $(this).select2('destroy');
                    }
                });
                
                $('#addLoanModal .select2').select2({
                    dropdownParent: $('#addLoanModal'),
                    width: '100%'
                });
                
                $('.datepicker').daterangepicker({
                    singleDatePicker: true,
                    showDropdowns: true,
                    locale: {
                        format: 'DD-MM-YYYY'
                    },
                    parentEl: '#addLoanModal'
                });
            });

            window.payEmi = function(id) {
                Swal.fire({
                    title: 'Mark EMI as Paid?',
                    text: "This will mark the next unpaid installment as Paid.",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#0E9E8F',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, Pay it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: '{{ url('truck-loan/pay-emi') }}/' + id,
                            type: 'POST',
                            data: { "_token": "{{ csrf_token() }}" },
                            success: function (res) {
                                if(res.success) {
                                    Swal.fire('Paid!', res.message, 'success');
                                    table.ajax.reload(null, false);
                                } else {
                                    Swal.fire('Failed', res.message, 'error');
                                }
                            }
                        });
                    }
                });
            };

            window.openRps = function(id) {
                $.get('{{ url('truck-loan/get-rps') }}/' + id, function(data) {
                    $('#rpsModalTitle').text('Repayment Schedule — ' + data.loan.truck_no + ' · ' + data.loan.financer_name);
                    $('#rpsPrincipal').text('₹' + parseFloat(data.loan.principal_sanctioned).toLocaleString('en-IN', {minimumFractionDigits: 2}));
                    $('#rpsEmi').text('₹' + parseFloat(data.loan.emi_amount).toLocaleString('en-IN', {minimumFractionDigits: 2}));
                    $('#rpsTenure').text(data.loan.tenure + ' months');
                    $('#rpsOutstanding').text('₹' + parseFloat(data.loan.outstanding).toLocaleString('en-IN', {minimumFractionDigits: 2}));
                    
                    let rows = '';
                    data.schedules.forEach(function(s) {
                        let stCls = 'pill-missing';
                        if(s.status == 'Paid') stCls = 'pill-doc';
                        else if(s.status == 'Unpaid' && new Date(s.installment_date) < new Date()) stCls = 'pill-overdue';
                        
                        let stLbl = s.status;
                        if(stLbl == 'Unpaid' && stCls == 'pill-overdue') stLbl = 'Overdue';

                        let dObj = new Date(s.installment_date);
                        let dateStr = dObj.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' });

                        rows += `<tr>
                            <td class="mono">${s.installment_no}</td>
                            <td class="mono">${dateStr}</td>
                            <td class="mono">₹${parseFloat(s.opening_principal).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                            <td class="mono">₹${parseFloat(s.installment_amount).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                            <td class="mono">₹${parseFloat(s.principal_component).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                            <td class="mono">₹${parseFloat(s.interest_component).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                            <td class="mono">₹${parseFloat(s.closing_principal).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                            <td><span class="pill ${stCls}">${stLbl}</span></td>
                        </tr>`;
                    });
                    $('#rpsRows').html(rows);
                    
                    var rpsModal = new bootstrap.Modal(document.getElementById('rpsModal'));
                    rpsModal.show();
                });
            };
        });
    </script>
@endpush