@extends('staff.layout')

@section('content')

    <style>
        .bank-card {
            background: #19212c !important;
            border: 1px solid rgba(218, 184, 91, 0.35) !important;
            border-radius: 18px !important;
        }

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

        #table {
            width: 100% !important;
            min-width: 1200px !important;
            table-layout: auto !important;
            margin: 0 !important;
            background: transparent;
            border-collapse: collapse !important;
        }

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

        #table thead th {
            background: #252b31 !important;
            color: #f0d37b !important;
            font-size: 15px;
            font-weight: 700;
            padding: 16px 12px !important;
            border-bottom: 1px solid #62583b !important;
            border-top: none !important;
            white-space: nowrap;
            vertical-align: middle;
        }

        #table tbody td {
            background: #19212c !important;
            color: #e8eaf0 !important;
            font-size: 15px;
            padding: 16px 12px !important;
            border-bottom: 1px solid #3d4245 !important;
            border-top: none !important;
            vertical-align: middle;
            white-space: normal;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }

        #table tbody tr:hover td {
            background: #202a36 !important;
        }

        /* CUSTOM CONTROLS DARK STYLING */
        .bank-card .form-select,
        .bank-card .form-control {
            background-color: #252b31 !important;
            color: #e8eaf0 !important;
            border: 1px solid #62583b !important;
            border-radius: 8px;
        }

        .bank-card .form-control::placeholder {
            color: #8f96a3 !important;
        }

        .bank-card .form-select:focus,
        .bank-card .form-control:focus {
            border-color: #f0cc68 !important;
            box-shadow: 0 0 0 0.25rem rgba(240, 204, 104, 0.25) !important;
        }

        a {
            text-decoration: none;
        }

        /* DATATABLE PAGINATION & INFO */

        .dataTables_wrapper .dataTables_info {
            color: #93a1b8 !important;
            font-size: 13px;
            padding-top: 15px;
        }

        .dataTables_wrapper .dataTables_paginate {
            padding-top: 12px;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            color: #e8eaf0 !important;
            border: 1px solid transparent !important;
            background: transparent !important;
            border-radius: 6px !important;
            margin-left: 3px;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background: #252b31 !important;
            border-color: #62583b !important;
            color: #f0d37b !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background: #f0cc68 !important;
            border-color: #f0cc68 !important;
            color: #19212c !important;
            font-weight: 600;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
            color: #666d77 !important;
        }

        /* MOBILE */

        @media (max-width: 768px) {

            .bank-card {
                border-radius: 12px !important;
                padding: 1rem !important;
            }

            #table {
                min-width: 650px !important;
                table-layout: auto !important;
            }

            .bank-table-wrapper {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            #table thead th {
                font-size: 13px;
                padding: 13px 10px !important;
            }

            #table tbody td {
                font-size: 13px;
                padding: 13px 10px !important;
            }
        }
    </style>

    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-3">
       <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-3">
    <div>
        <h3 class="mb-0 text-white d-flex align-items-center gap-2">
            @if(request()->has('user_id'))
                <a href="{{ route('staff_view_ga_case', ['id' => request('user_id')]) }}" 
                   class="btn btn-icon btn-label-primary bg-white">
                    <i class="ti ti-arrow-left"></i>
                </a>
            @else
                <a href="{{ url()->previous() }}" 
                   class="btn btn-icon btn-label-primary bg-white">
                    <i class="ti ti-arrow-left"></i>
                </a>
            @endif
            <span>Principal Amount History</span>
        </h3>
    </div>
</div>
    </div>

    <!-- BANK CARD -->
    <div class="card bank-card p-4 p-md-5">

        <!-- FILTER CONTROLS -->
        <div class="d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-center gap-3 mb-4">
            <div class="d-flex align-items-center gap-2">
                <select id="pageLength" class="form-select" style="width: auto;">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="all">All</option>
                </select>
            </div>

            <div>
                <input type="search" id="principalSearch" class="form-control" placeholder="Search by Name, Mobile...">
            </div>
        </div>

        <!-- TABLE -->
        <div class="bank-table-wrapper">
            <table id="table" class="table mb-0" style="width: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>

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

    <!-- 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');

            window.principalTable = $('#table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('staff_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,
                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']]
            });

            // Live Search
            $('#principalSearch').on('keyup', function () {
                window.principalTable
                    .search(this.value)
                    .draw();
            });

            // Dynamic Page Length
            $('#pageLength').on('change', function () {
                window.principalTable
                    .page
                    .len(parseInt(this.value))
                    .draw();
            });
        });
    </script>

@endsection