@extends('User.layout')

<style>
    .terms-wrapper {
        position: relative;
        height: 120px;
        overflow: hidden;
    }

    .terms-scroll {
        display: flex;
        flex-direction: column;
        animation: scrollUp 12s linear infinite;
    }

    .terms-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .terms-list li {
        position: relative;
        padding-left: 22px;
        margin-bottom: 8px;
        font-size: 13px;
        color: #e2e8f0;
    }

    .terms-list li::before {
        content: "★";
        position: absolute;
        left: 0;
        top: 0;
        color: #FFD700;
        font-size: 12px;
    }

    @keyframes scrollUp {
        0% {
            transform: translateY(20%);
        }

        100% {
            transform: translateY(-100%);
        }
    }

    .loan-card {
        background: #0A1F44;
        border-radius: 16px;
        padding: 20px;
        color: #fff;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .loan-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent);
        pointer-events: none;
    }

    .loan-card:hover {
        transform: translateY(-6px) scale(1.02);
    }

    .card-body {
        text-align: center;
        z-index: 2;
    }

    .card-icon {
        font-size: 32px;
        margin-bottom: 10px;
    }

    .card-title {
        font-size: 14px;
        letter-spacing: 0.5px;
        color: #ffffff;
        margin-bottom: 8px;
    }

    .card-value {
        font-size: 22px;
        font-weight: bold;
        color: #FFD700;
    }

    .card-desc {
        font-size: 13px;
        color: #e2e8f0;
        line-height: 1.5;
    }

    .row>div {
        display: flex;
    }

    .loan-card {
        width: 100%;
    }

    .loan-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: linear-gradient(135deg, #0A1F44, #102a5c);
        border-radius: 16px;
        overflow: hidden;
        position: relative;
        height: 100%;
        padding: 20px;
    }

    .card-body {
        text-align: center;
        z-index: 2;
    }

    .card-icon {
        font-size: 32px;
        margin-bottom: 10px;
    }

    .card-title {
        font-size: 14px;
        color: #fff;
        margin-bottom: 6px;
    }

    .card-value {
        font-size: 22px;
        font-weight: bold;
        color: #FFD700;
    }

    .loan-card--scroll {
        padding: 0;
    }

    .top-scroll-bar {
        height: 36px;
        background: #000;
        overflow: hidden;
        display: flex;
        align-items: center;
    }

    .top-scroll-content {
        display: inline-flex;
        align-items: center;
        gap: 15px;
        white-space: nowrap;
        animation: scrollLeft 24s linear infinite;
        padding-left: 100%;
    }

    @keyframes scrollLeft {
        0% {
            transform: translateX(-10%);
        }

        100% {
            transform: translateX(-100%);
        }
    }

    .loan-card--scroll .card-body {
        padding: 20px;
    }

    .wapp-icon {
        position: absolute;
        bottom: 8px;
        right: 10px;
        font-size: 18px;
        color: #25D366;
        z-index: 3;
    }
</style>
@section('content')
<div class="row align-items-center justify-content-between">
    <div class="col-auto">
        <h5>
            <!-- <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                                                                                                <a href="{{ route('block') }}"> <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> -->
            Loan Ledger
        </h5>
    </div>
    <!-- <div class="col-auto">
                                                                                    <a href="{{ route('sell_history') }}"><button class="btn btn-primary">Loan Report</button> </a>
                                                                                </div> -->

</div>
<div class="row g-4">

    <div class="col-md-3">
        <div class="loan-card h-100">
            <div class="card-body p-5">
                <div class="card-icon"><i class="ti tabler-building-bank"></i></div>
                <div class="card-title">Total Loan</div>
                <div class="card-value">₹ {{ number_format($totalLoan, 2) }}</div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="loan-card h-100">
            <div class="card-body p-5">
                <div class="card-icon"><i class="ti tabler-calendar-clock"></i></div>
                <div class="card-title">Pending Amount</div>
                <div class="card-value">₹ {{ number_format($pendingAmount, 2) }}</div>
            </div>
        </div>
    </div>

    <div class="col-md-3 d-flex">
        <div class="loan-card loan-card--scroll w-100">

            <i class="ti tabler-headset wapp-icon" style="cursor:pointer;" data-bs-toggle="modal"
                data-bs-target="#contactModal"></i>

            <div class="top-scroll-bar">
                <div class="top-scroll-content">
                    <span class="me-4">📢 Complete the initial payment to proceed with your loan.</span>
                    <span><i class="ti tabler-brand-whatsapp text-success"></i>
                        For further assistance, click the WhatsApp icon.</span>
                </div>
            </div>

            <div class="card-body">
                <div class="card-icon">
                    <i class="ti tabler-cash"></i>
                </div>
                <div class="card-title">Initial Payment</div>
                <div class="card-value">₹ {{ number_format($initialLoan, 2) }}</div>
            </div>

        </div>
    </div>

    <div class="col-md-3">
        <div class="loan-card h-100">
            <div class="card-body d-flex flex-column">

                <div class="card-title text-white text-decoration-underline mb-2">Terms & Conditions</div>

                <div class="terms-wrapper">
                    <div class="terms-scroll">

                        <ul class="terms-list">
                            <li>Interest applies monthly Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
                            <li>Late payments incur penalties</li>
                            <li>Loan tenure must be followed</li>
                            <li>Pre-closure charges may apply</li>
                            <li>All payments are non-refundable</li>
                        </ul>

                        <ul class="terms-list">
                            <li>Interest applies monthly</li>
                            <li>Late payments incur penalties</li>
                            <li>Loan tenure must be followed</li>
                            <li>Pre-closure charges may apply</li>
                            <li>All payments are non-refundable</li>
                        </ul>

                    </div>
                </div>

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

</div>

<div class="mt-3">
    <div class="card p-0">

        <!-- <div class="row mb-3 align-items-center p-3 g-2">
            <div class="col-auto">
                <select id="pageLength" class="form-select">
                    <option value="10"> 10</option>
                    <option value="25"> 25</option>
                    <option value="50"> 50</option>
                    <option value="100"> 100</option>
                    <option value="All"> All</option>
                </select>
            </div>

            <div class="col-md-3 ms-auto">
                <input type="text" id="toDate" class="form-control" placeholder="Search">
            </div>
        </div> -->
    <div class="row m-3 g-3 align-items-center justify-content-between">

                        <!-- LEFT -->
                        <div class="col-12 col-lg-auto">

                            <select id="pageLength" class="form-select">
                                <option value="10">10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                                <option value="All">All</option>
                            </select>

                        </div>

                        <div class="col-12 col-lg-auto">

                            <input type="text" id="customSearch" class="form-control" placeholder="Search table...">
                            

                        </div>

                    </div>
        <div class="table-responsive pt-0 pb-2">
            <div class="card-header flex-column flex-md-row border-bottom mx-0 p-0">
                <div class="justify-content-between dt-layout-table">
                    <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                        <table class="table" id="usersTable">
                            <thead>
                                <tr>
                                    <th>Sno</th>
                                    <th>Date</th>
                                    <th>Paid</th>
                                    <th>Balance</th>
                                    <th>Remark</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="contactModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content contact-modal">

            <div class="d-flex justify-content-end p-2">
                <button type="button" class="close-btn" data-bs-dismiss="modal">×</button>
            </div>

            <div class="modal-body text-center px-4 pb-4">

                <div class="contact-icon mb-3">
                    <i class="ti tabler-phone-call"></i>
                </div>

                <h4 class="contact-title text-white mb-2">Please Contact Us</h4>

                <p class="contact-text mb-3">
                    For assistance or more details, feel free to reach out to us directly.
                </p>

                <div class="contact-number mb-3">
                    <a href="tel:+919249502372">+91 92495 02372</a>
                </div>

                <a target="_blank" class="btn contact-btn">
                    Contact Us
                </a>

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

<style>
    /* Modal Background */
    .contact-modal {
        background: linear-gradient(135deg, #0A1F44, #132f66);
        border-radius: 18px;
        color: #fff;
        border: none;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
        overflow: hidden;
    }

    /* Close Button */
    .close-btn {
        background: #ff4d4d;
        color: #fff;
        border: none;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        font-size: 20px;
        line-height: 30px;
        cursor: pointer;
        transition: 0.3s;
    }

    .close-btn:hover {
        background: #ff1a1a;
    }

    /* Icon */
    .contact-icon {
        width: 70px;
        height: 70px;
        margin: auto;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .contact-icon i {
        font-size: 30px;
        color: #ffd700;
    }

    /* Title */
    .contact-title {
        font-weight: 600;
        font-size: 22px;
    }

    /* Text */
    .contact-text {
        font-size: 14px;
        color: #dcdcdc;
    }

    /* Phone Number */
    .contact-number a {
        font-size: 20px;
        font-weight: bold;
        color: #ffd700;
        text-decoration: none;
    }

    .contact-number a:hover {
        text-decoration: underline;
    }

    /* Button */
    .contact-btn {
        background: #ffd700;
        color: #0A1F44;
        font-weight: 600;
        border-radius: 30px;
        padding: 10px 20px;
        transition: 0.3s;
    }

    .contact-btn:hover {
        background: #ffcc00;
        color: #000;
    }
</style>

<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 table = $('#usersTable').DataTable({
            ajax: "{{route('get_loans_data')}}",
            searching: true,
            paging: true,
            info: true,
            lengthChange: false,
            pageLength: 10,
            ordering: false,

            columns: [
        { data: 'DT_RowIndex', name: 'DT_RowIndex' },
        { data: 'date', name: 'date' },
        { data: 'paid', name: 'paid' },
        { data: 'balance', name: 'balance' },
        { data: 'remark', name: 'remark' }
    ]
        });

        // Custom search
        $('#toDate').on('keyup change', function() {
            table.search(this.value).draw();
        });

    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const checkbox = document.getElementById("termsCheckbox");
        const submitBtn = document.getElementById("submitBtn");
        const form = document.getElementById("loanForm");

        checkbox.addEventListener("change", function() {
            submitBtn.disabled = !this.checked;
        });

        form.addEventListener("submit", function(e) {
            if (!checkbox.checked) {
                e.preventDefault();
                checkbox.classList.add("is-invalid");
            }
        });

        checkbox.addEventListener("change", function() {
            if (this.checked) {
                this.classList.remove("is-invalid");
            }
        });
    });
</script>
@endsection