@extends('Admin.layout')

@section('content')

<div class="page-view w-100">

    <!-- PAGE HEADER -->
    <div class="d-flex align-items-center gap-2 mb-3">
        @if(request()->has('user_id'))
            <a href="{{ route('view_ga_case', ['id' => request('user_id')]) }}"
               class="btn btn-icon btn-outline-primary flex-shrink-0">
                <i class="ti ti-arrow-left"></i>
            </a>
        @else
            <a href="{{ url()->previous() }}"
               class="btn btn-icon btn-outline-primary flex-shrink-0">
                <i class="ti ti-arrow-left"></i>
            </a>
        @endif

        <h3 class="mb-0 text-white fw-bold">
            Principal Amount History
        </h3>
    </div>

    <!-- BANK CARD -->
    <div class="card bank-card p-3 p-md-4 w-100">

        <!-- FILTER CONTROLS -->
        <div class="row g-3 align-items-center mb-3">

            <div class="col-12 col-md-6">
                <h5 class="text-white mb-0">
                    Principal Payment History
                </h5>
            </div>

            <div class="col-12 col-md-6">
                <div class="d-flex flex-column flex-sm-row justify-content-md-end gap-2">

                    <!-- PAGE LENGTH -->
                    <select id="pageLength"
                            class="form-select form-select-sm"
                            style="width: 100%; max-width: 100px;">
                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="all">All</option>
                    </select>

                    <!-- SEARCH -->
                    <input type="search"
                           id="principalSearch"
                           class="form-control form-control-sm"
                           placeholder="Search by Name, Mobile..."
                           style="width: 100%; max-width: 300px;">
                </div>
            </div>

        </div>

        <!-- TABLE -->
        <div class="table-responsive bank-table-wrapper w-100">
            <table id="table"
                   class="table align-middle text-nowrap mb-0 w-100">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>ID</th>
                        <th>CUSTOMER NAME</th>
                        <th>MOBILE</th>
                        <th>OPENING PRINCIPAL</th>
                        <th>PAID AMOUNT</th>
                        <th>REMAINING PRINCIPAL</th>
                        <th>PAYMENT MODE</th>
                        <th>PAID DATE</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>

    </div>
</div>

<!-- DATATABLE CSS -->
<link rel="stylesheet"
      href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

<!-- RESPONSIVE CSS -->
<style>
    .page-view {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .bank-card {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .bank-table-wrapper {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #table {
        width: 100% !important;
    }

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

    .dataTables_wrapper {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    @media (max-width: 575.98px) {
        .bank-card {
            padding: 12px !important;
        }

        .page-view h3 {
            font-size: 1.1rem;
        }

        .bank-table-wrapper {
            margin-bottom: 4px;
        }
    }
</style>

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

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

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

    const urlParams = new URLSearchParams(window.location.search);
    const userId = urlParams.get('user_id');

    const principalTable = $('#table').DataTable({
        processing: true,
        serverSide: true,

        ajax: {
            url: "{{ route('principal_history') }}",
            type: "GET",
            data: function (d) {
                if (userId) {
                    d.user_id = userId;
                }
            }
        },

        pageLength: 10,
        lengthChange: false,
        searching: true,
        ordering: true,
        info: true,
        autoWidth: false,
        responsive: false,
        scrollX: false,
        dom: 'rtip',

        columns: [
            {
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                orderable: false,
                searchable: false
            },
            { data: 'id', name: 'id' },
            { data: 'user_name', name: 'user_name' },
            { data: 'mobile', name: 'mobile' },
            { data: 'opening_principal', name: 'opening_principal' },
            { data: 'paid_amount', name: 'paid_amount' },
            { data: 'closing_principal', name: 'closing_principal' },
            { data: 'payment_mode', name: 'payment_mode' },
            { data: 'paid_date', name: 'paid_date' }
        ],

        order: [[1, 'desc']],

        language: {
            processing: 'Loading...',
            emptyTable: 'No principal payment records available',
            zeroRecords: 'No matching records found'
        },

        drawCallback: function () {
            // Keep the table constrained after each server-side redraw.
            $('#table').css('width', '100%');
        }
    });

    // LIVE SEARCH
    $('#principalSearch').on('input search', function () {
        principalTable.search(this.value).draw();
    });

    // DYNAMIC PAGE LENGTH
    $('#pageLength').on('change', function () {
        const value = this.value === 'all'
            ? -1
            : parseInt(this.value, 10);

        principalTable.page.len(value).draw();
    });

});
</script>

@endsection