@extends('admin.layouts')

@section('content')

<div class="card p-2 p-md-4">

    <!-- Header -->
    <div class="d-flex align-items-center gap-2 mb-5">

        <a href="{{route('view_loan')}}"
            class="btn btn-icon btn-label-primary">
            <i class="ti tabler-arrow-left"></i>
        </a>

        <h6 class="mb-0 text-primary fw-bold">
            GA/25/08/0428
        </h6>

    </div>


    <!-- Tabs -->
    <div class="border-bottom mb-3">

        <ul class="nav nav-tabs border-0">

            <li class="nav-item">
                <a href="#"
                    class="nav-link active py-1 px-3 small fw-semibold">
                    Collection
                </a>
            </li>

            <li class="nav-item">
                <a href="#"
                    class="nav-link py-1 px-3 small">
                    History
                </a>
            </li>

            <li class="nav-item">
                <a href="#"
                    class="nav-link py-1 px-3 small">
                    Summary
                </a>
            </li>

        </ul>

    </div>


    <!-- Add Interest Payment -->
    <div class="my-3">

        <h6 class="text-primary fw-bold mb-2">
            Add Interest Payment
        </h6>
        <form action="#">

            <div class="row g-2 mb-3">


                <!-- Payment Date -->
                <div class="col-12 col-md-6">

                    <label class="form-label small mb-1">
                        Payment Date <span class="text-danger">*</span>
                    </label>

                    <div class="input-group input-group-sm">

                        <input type="date"
                            name="payment_date"
                            class="form-control"
                            value="2026-08-24">

                    </div>

                </div>


                <!-- Month / Period -->
                <div class="col-12 col-md-6">

                    <label class="form-label small mb-1">
                        Month / Period <span class="text-danger">*</span>
                    </label>

                    <select name="month_period"
                        class="form-select form-select-sm">

                        <option selected>
                            Apr 2025 - May 2025
                        </option>

                        <option>
                            May 2025 - Jun 2025
                        </option>

                        <option>
                            Jun 2025 - Jul 2025
                        </option>

                        <option>
                            Jul 2025 - Aug 2025
                        </option>

                    </select>

                </div>


                <!-- Amount -->
                <div class="col-12 col-md-6">

                    <label class="form-label small mb-1">
                        Amount <span class="text-danger">*</span>
                    </label>

                    <div class="input-group input-group-sm">

                        <span class="input-group-text">
                            ₹
                        </span>

                        <input type="number"
                            name="amount"
                            class="form-control"
                            value="10000">

                    </div>

                </div>


                <!-- Mode -->
                <div class="col-12 col-md-6">

                    <label class="form-label small mb-1 d-block">
                        Mode
                    </label>

                    <div class="d-flex align-items-center gap-3">

                        <div class="form-check">

                            <input class="form-check-input"
                                type="radio"
                                name="payment_mode"
                                id="cash"
                                value="cash">

                            <label class="form-check-label small"
                                for="cash">
                                Cash
                            </label>

                        </div>


                        <div class="form-check">

                            <input class="form-check-input"
                                type="radio"
                                name="payment_mode"
                                id="upi"
                                value="upi">

                            <label class="form-check-label small"
                                for="upi">
                                UPI
                            </label>

                        </div>


                        <div class="form-check">

                            <input class="form-check-input"
                                type="radio"
                                name="payment_mode"
                                id="bank"
                                value="bank"
                                checked>

                            <label class="form-check-label small"
                                for="bank">
                                Bank
                            </label>

                        </div>

                    </div>

                </div>


                <!-- Collected By -->
                <div class="col-12 col-md-6">

                    <label class="form-label small mb-1">
                        Collected By
                    </label>

                    <input type="text"
                        name="collected_by"
                        class="form-control form-control-sm"
                        value="Roselin">

                </div>


                <!-- Reference Number -->
                <div class="col-12 col-md-6">

                    <label class="form-label small mb-1">
                        Reference No.
                    </label>

                    <input type="text"
                        name="reference_no"
                        class="form-control form-control-sm"
                        value="123456">

                </div>


                <!-- Upload Receipt -->
                <div class="col-12 col-md-6">

                    <label class="form-label small mb-1">
                        Upload Receipt
                    </label>

                    <div class="d-flex align-items-center gap-2">

                        <input type="file"
                            name="receipt"
                            id="receipt"
                            class="form-control form-control-sm"
                            accept="image/jpeg,image/png,image/jpg,.pdf">

                        <!-- Preview -->
                        <div id="receiptPreview"
                            class="d-none flex-shrink-0">
                        </div>

                    </div>

                </div>


            </div>

            <!-- Save Payment -->

            <div class="d-grid d-md-flex justify-content-md-center gap-2 mt-5 mb-3">

                <button type="submit"
                    class="btn btn-sm btn-success">
                    <i class="ti tabler-device-floppy me-1"></i>
                    Save Payment
                </button>

            </div>
        </form>
    </div>


    <!-- Payment History -->
    <div>

        <h6 class="text-primary fw-bold mb-2">
            Payment History
        </h6>


        <div class="table-responsive pt-0 pb-2">

            <table id="paymentHistoryTable" class="table table-sm align-middle">

                <thead class="bg-label-primary">
                    <tr>
                        <th>DATE</th>
                        <th>AMOUNT</th>
                        <th>METHOD</th>
                        <th>BY</th>
                    </tr>
                </thead>

                <tbody></tbody>

            </table>

        </div>

    </div>


    <!-- Bottom Actions -->

    <div class="d-grid d-md-flex justify-content-md-center gap-2 mt-5 mb-3">

        <!-- Call -->
        <a href="tel:+91 9876543210"
            class="btn btn-success btn-sm">

            <i class="ti tabler-phone me-1"></i>
            Call

        </a>


        <!-- WhatsApp -->
        <a href="https://wa.me/91 9876543210"
            target="_blank"
            class="btn btn-primary btn-sm">

            <i class="ti tabler-brand-whatsapp me-1"></i>
            WhatsApp

        </a>

        <button type="button"
            class="btn btn-outline-primary btn-sm">

            <i class="ti tabler-note me-1"></i>

            Add Note

        </button>

    </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>
        $(document).ready(function() {

            const paymentHistoryData = [{
                    date: '25-07-2026',
                    amount: '₹ 10,000',
                    method: 'Bank',
                    by: 'Roselin'
                },
                {
                    date: '25-06-2026',
                    amount: '₹ 10,000',
                    method: 'Bank',
                    by: 'Roselin'
                },
                {
                    date: '25-05-2026',
                    amount: '₹ 10,000',
                    method: 'Cash',
                    by: 'Anand'
                },
                {
                    date: '25-04-2026',
                    amount: '₹ 10,000',
                    method: 'UPI',
                    by: 'Roselin'
                }
            ];


            $('#paymentHistoryTable').DataTable({

                data: paymentHistoryData,

                lengthChange: false,

                searching: false,

                info: false,

                paging: false,

                ordering: false,

                columnDefs: [{
                    targets: '_all',
                    className: 'text-start text-nowrap'
                }],

                columns: [

                    {
                        data: 'date'
                    },

                    {
                        data: 'amount'
                    },

                    {
                        data: 'method'
                    },

                    {
                        data: 'by'
                    }

                ]

            });

        });




        // image upload

    document.getElementById('receipt').addEventListener('change', function () {

        const preview = document.getElementById('receiptPreview');
        const file = this.files[0];

        preview.innerHTML = '';

        if (!file) {
            preview.classList.add('d-none');
            return;
        }

        preview.classList.remove('d-none');

        // Image preview
        if (file.type.startsWith('image/')) {

            const img = document.createElement('img');

            img.src = URL.createObjectURL(file);

            img.className = 'rounded border';

            img.width = 50;
            img.height = 50;

            img.style.objectFit = 'cover';

            preview.appendChild(img);

        }

        // PDF
        else if (file.type === 'application/pdf') {

            preview.innerHTML = `
                <div class="border rounded px-2 py-1 text-danger small">
                    <i class="ti tabler-file-type-pdf me-1"></i>
                    PDF
                </div>
            `;

        }

    });
</script>



    @endsection