@extends('admin.layout')

@section('content')

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">

<style>
    .page-title {
        font-weight: 700;
        font-size: 22px;
    }

    #historyTable thead th {
        background-color: #239ad7;
        color: #fff;
    }

    #historyTable tbody td {
        font-size: 13px;
        padding: 12px;
        white-space: nowrap;
        border-bottom: 1px solid #f1f1f1;
        vertical-align: middle;
    }

    #historyTable tbody tr:hover td {
        background-color: #f4fbff;
    }

    /* FIX: must match the class used in $cell() in the controller */
    .changed {
        color: red;
        font-weight: 500;
    }

    .search-wrapper {
        position: relative;
    }

    .search-wrapper i {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #aaa;
    }

    .search-wrapper input {
        padding-left: 35px;
    }

    .table-responsive-custom {
        width: 100%;
        border: 1px solid #eee;
    }

    #historyTable {
        border-collapse: collapse !important;
        margin-bottom: 0 !important;
    }

    /* Hide default DT controls — we use our own */
    .dataTables_filter,
    .dataTables_length {
        display: none !important;
    }

    .dataTables_info {
        font-size: 13px;
        color: #555;
    }
</style>

<div class="container-fluid py-4">

    {{-- ── Page Header ── --}}
    <div class="d-flex align-items-center gap-2 mb-4">
        <button type="button" class="btn btn-icon bg-white me-2"
            style="box-shadow: 0px 9px 12px -2px #66328E1F;">
            <a href="{{ route('admin.users.edit',$user->id ?? '') }}">
                <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>
        <h5 class="page-title m-0">User Profile Edit History</h5>
    </div>



    {{-- ── Table Card ── --}}
    <div class="card border-0 shadow-sm">
        <div class="card-body">



            {{-- Table --}}
            <div class="table-responsive-custom">
                <table class="table w-100" id="historyTable">
                    <thead>
                        <tr>
                            <th>SNo</th>
                            <th>Date</th>
                            <th>Name</th>
                            <th>Ref ID</th>
                            <th>Number</th>
                            <th>Email</th>
                            <th>Pincode</th>
                            <th>State</th>
                            <th>Country</th>
                            <th>Account Holder Name</th>
                            <th>Account Number</th>
                            <th>Bank Name</th>
                            <th>Branch Name</th>
                            <th>IFSC Code</th>
                            <th>PAN Number</th>
                            <th>Aadhaar Number</th>
                            <th>Nominee Name</th>
                            <th>Nominee Phone</th>
                            <th>Relation</th>
                            <th>Address</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>



        </div>
    </div>

</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 src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

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

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

            ajax: {
                url: '{{ route("admin.editHistoryData", $user->user_id) }}',
                data: function(d) {
                    d.date_from = $('#filterFrom').val();
                    d.date_to = $('#filterTo').val();
                }
            },


            columns: [

                {
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    searchable: false,
                    orderable: false
                },
                {
                    data: 'date',
                    name: 'created_at',
                    searchable: false
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'ref_id',
                    name: 'ref_id'
                },
                {
                    data: 'phone_number',
                    name: 'phone_number'
                },
                {
                    data: 'email',
                    name: 'email'
                },
                {
                    data: 'pincode',
                    name: 'pincode'
                },
                {
                    data: 'state',
                    name: 'state'
                },
                {
                    data: 'country',
                    name: 'country'
                },
                {
                    data: 'account_holder',
                    name: 'account_holder'
                },
                {
                    data: 'account_number',
                    name: 'account_number'
                },
                {
                    data: 'bank_name',
                    name: 'bank_name'
                },
                {
                    data: 'branch_name',
                    name: 'branch_name'
                },
                {
                    data: 'ifsc',
                    name: 'ifsc'
                },
                {
                    data: 'pan_number',
                    name: 'pan_number'
                },
                {
                    data: 'aadhar_number',
                    name: 'aadhar_number'
                },
                {
                    data: 'nominee_name',
                    name: 'nominee_name'
                },
                {
                    data: 'nominee_phone',
                    name: 'nominee_phone'
                },
                {
                    data: 'nominee_relation',
                    name: 'nominee_relation'
                },
                {
                    data: 'nominee_address',
                    name: 'nominee_address'
                },
            ],


        });


    });
</script>

@endsection