@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;
    }
    .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%;
        overflow-x: auto;
        border: 1px solid #eee;
    }

    #historyTable {
        border-collapse: collapse !important;
        margin-bottom: 0 !important;
    }
</style>

<div class="container-fluid py-4">
    <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.user_management') }}">
                        <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>

    <div class="card border-0 shadow-sm">
        <div class="card-body p-0">
            <div class="d-flex flex-wrap justify-content-between align-items-center p-3 gap-3">
                <select id="customLength" class="form-select" style="width:80px;">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                </select>

                <div class="d-flex gap-2 align-items-center">
                    <div class="search-wrapper">
                        <i class="ti tabler-search"></i>
                        <input type="text" id="customSearch"
                               class="form-control"
                               placeholder="Search"
                               style="width:220px;">
                    </div>

                    <button class="btn btn-light btn-sm border d-flex align-items-center gap-1">
                        <i class="ti tabler-upload"></i> Excel
                    </button>
                </div>
            </div>
            <div class="table-responsive-custom">
                <table class="table w-100" id="historyTable">
                    <thead>
                        <tr>
                            <th>SNo</th>
                            <th>Date</th>
                            <th>Referral ID</th>
                            <th>Referral Name</th>
                            <th>Name</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>
                        </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>
$(document).ready(function() {

    const historyData = [
        {
            sno: 1,
            date: "12/10/2024",
            refid: "VIPOM00123",
            refname: "David",
            name: '<span class="changed">John William</span>',
            number: "9876543211",
            email: "john@gmail.com",
            pincode: "600 004",
            state: "Tamil Nadu",
            country: "India",
            accname: '<span class="changed">John</span>',
            accno: '<span class="changed">458732169845</span>',
            bank: '<span class="changed">State Bank of India</span>',
            branch: '<span class="changed">T. Nagar Chennai</span>',
            ifsc: '<span class="changed">SBIN0000456</span>',
            pan: "ABCDE1234F",
            aadhaar: "4567 8912 3456"
        },
        {
            sno: 2,
            date: "12/10/2024",
            refid: "VIPOM00123",
            refname: "David",
            name: "John William",
            number: "9876543211",
            email: '<span class="changed">john@gmail.com</span>',
            pincode: "600 004",
            state: "Tamil Nadu",
            country: "India",
            accname: "John",
            accno: "458732169845",
            bank: "State Bank of India",
            branch: "T. Nagar Chennai",
            ifsc: "SBIN0000456",
            pan: "ABCDE1234F",
            aadhaar: "4567 8912 3456"
        }
    ];

    const table = $('#historyTable').DataTable({
        data: historyData,
        dom: 'rt<"d-flex justify-content-between align-items-center p-3"ip>',
        pageLength: 10,
        ordering: false,
        autoWidth: false,
        scrollX: false,
        columns: [
            { data: 'sno' },
            { data: 'date' },
            { data: 'refid' },
            { data: 'refname' },
            { data: 'name' },
            { data: 'number' },
            { data: 'email' },
            { data: 'pincode' },
            { data: 'state' },
            { data: 'country' },
            { data: 'accname' },
            { data: 'accno' },
            { data: 'bank' },
            { data: 'branch' },
            { data: 'ifsc' },
            { data: 'pan' },
            { data: 'aadhaar' }
        ]
    });

    $('#customSearch').on('keyup', function() {
        table.search(this.value).draw();
    });

    $('#customLength').on('change', function() {
        table.page.len(this.value).draw();
    });

});
</script>

@endsection