@extends('template.basic.layouts.wallet_base')
@push('css')
<style>

    .sorting_1{
        display:none;
    }
</style>
@endpush
@section('content_detail')

    <div class="min-h-screen flex flex-col  id=" withdrawNA">
        <div class="flex flex-1">


            <div class="flex-1 max-w-6xl w-full px-6 py-4">
                <!-- Tabs -->
                <div class="mb-6">
                    <div class="flex border-b border-border-primary">
                        <button class="pb-2 border-b-2 border-orange-500 text-white font-semibold">
                            Transaction History
                        </button>
                    </div>
                </div>

                <!-- Filters -->
                <div class="grid grid-cols-1 sm:grid-cols-4 gap-4 mb-6 items-center">
                    <!-- Type Filter -->
                    <div class="relative">
                        <select data-filter-id="filter-type" class="w-full p-2 form-control  border border-border-primary rounded">
                            <option value="">All</option>
                            <option value="receive">Receive</option>
                            <option value="send">Send</option>
                            <option value="swap">Swap</option>
                        </select>
                    </div>

                    <!-- Coin Filter -->
                    <div class="relative">
                        <select data-filter-id="filter-coin" class="w-full p-2 form-control border border-border-primary rounded">
                            <option value="">All</option>
                            @foreach($coins as $coinx)
                                <option value="{{$coinx->symbol}}">{{$coinx->symbol}}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Status Filter -->
                    <div class="relative">
                        <select data-filter-id="filter-status"
                            class="w-full p-2  border form-control border-border-primary rounded">
                            <option value="">All</option>
                            <option value="Confirmed">Confirmed</option>
                            <option value="Pending">Pending</option>
                            <option value="Failed">Failed</option>
                            <option value="On Hold">On Hold</option>
                        </select>
                    </div>
                    <div class="mb-4 flex items-center">
                        <button id="history-crypto-reset-button"
                            class="bg-primary-gradient text-black hover:text-white hover:bg-beige   uppercase px-6 py-2 text-xs rounded-lg font-semibold transition">Reset Filters</button>
                    </div>
                </div>

                <!-- Reset Filters -->


                <!-- Transaction Table -->
                <div class="overflow-x-auto  rounded shadow">
                    <table class="min-w-full table-auto data-table text-left">
                        <thead class="">
                            <tr>
                                <th class="px-4 py-2">History</th>
                                <th class="px-4 py-2">Time</th>
                                <th class="px-4 py-2">Type</th>
                                <th class="px-4 py-2">Coin</th>
                                <th class="px-4 py-2">Amount</th>
                                <th class="px-4 py-2">Destination</th>
                                <th class="px-4 py-2">TXID</th>
                                <th class="px-4 py-2">Status</th>
                            </tr>
                        </thead>
                        <tbody class="">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div id="loadDataStatus"
        class="fixed inset-0 z-50 hidden opacity-0 transition-opacity duration-300 z-990 backdrop-blur-sm bg-black/50">
        <div class="flex items-center justify-center min-h-screen px-4">
            <div
                class="bg-white dark:bg-gray-900 rounded-xl shadow-lg w-3/5 transform transition-transform duration-300 ">
                <!-- Header -->
                <div class="flex items-center justify-between p-4 border-b">
                    <button class="closeModal text-gray-600 hover:text-black"><i class="fa fa-times"></i></button>
                </div>
                <!-- Body -->
                <div class="p-6 overflow-y-auto max-h-[80vh]" id="loadDataContent">

                </div>
                <!-- Footer -->
                <div class="flex justify-end p-4 border-t">
                    <button class="closeModal px-6 py-2 mr-2 text-xs font-bold text-white bg-gray-400 rounded-lg">
                        Close
                    </button>

                </div>
            </div>
        </div>
    </div>
@endsection






@push('javascript')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
   <link rel="stylesheet" href="https://cdn.datatables.net/2.1.2/css/dataTables.tailwindcss.css">
  <script src="https://cdn.datatables.net/2.1.2/js/dataTables.min.js"></script>
    <script>
        $(function () {
            var table = $('.data-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('user.wallet.history') }}",
                    data: function (d) {
                        d.type = $('select[data-filter-id="filter-type"]').val();
                        d.coin = $('select[data-filter-id="filter-coin"]').val();
                        d.stats = $('select[data-filter-id="filter-status"]').val();
                    }
                },
                columns: [
                    { data: 'history', name: 'history', searchable: false },
                    { data: 'created_at', name: 'created_at', searchable: false },
                    { data: 'type', name: 'type', orderable: false, searchable: false },
                    { data: 'coin', name: 'coin', orderable: false, searchable: false },
                    { data: 'amount', name: 'amount', orderable: false, searchable: false },
                    { data: 'wallet', name: 'wallet', orderable: false, searchable: false },
                    { data: 'transactionID', name: 'transactionID', orderable: false },
                    { data: 'status', name: 'status', orderable: false, searchable: false },
                ],
                createdRow: function (row, data) {
                    $(row).addClass('cursor-pointer');
                    $(row).attr('data-transaction-id', data.txn_id);
                }
            });

            // Filter changes
            $('select[data-filter-id]').on('change', function () {
                table.draw();
            });

            // Reset filters
            $('#history-crypto-reset-button').on('click', function () {
                $('select[data-filter-id]').val('');
                table.search('').draw();
            });

            // Row click to open modal
            $('body').on('click', '.data-tr', function () {
                let id = $(this).attr('data-transaction-id');
                $.ajax({
                    url: "{{secure_url('wallet/singlehistory/') . '/' . csrf_token()}}/" + id,
                    type: "GET",
                    dataType: "json",
                    success: function (data) {
                        if (data.status == true) {
                            $("#Lins").html(data.view);
                            $('#exampleModal').removeClass('hidden').addClass('flex');
                        }
                    }
                })
            });

            // Close modal
            $('[data-bs-dismiss="modal"]').on('click', function () {
                $('#exampleModal').addClass('hidden').removeClass('flex');
            });
        });
    </script>
@endpush