@extends('user.layout')

@section('content')
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">

    <style>
        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        table.dataTable th,
        table.dataTable td {
            text-align: center;
            vertical-align: middle;
        }

        .status-accepted {
            color: #28a745;
            font-weight: bold;
        }

        .status-rejected {
            color: #dc3545;
            font-weight: bold;
        }

        .status-active {
            color: #007bff;
            font-weight: bold;
        }

        .status-inactive {
            color: #6c757d;
            font-weight: bold;
        }
    </style>

    <div class="container my-4">
       

        <form action="{{ route('bank_history_search') }}" method="POST" enctype="multipart/form-data">
            @csrf
        <div class="d-flex flex-wrap justify-content-between align-items-center mb-3 gap-2">
            <div class="d-flex gap-2 flex-wrap">
                <div class="flex-grow-1">
                    <input type="date" class="form-control" name="from_date" placeholder="From Date">
                </div>
                <div class="flex-grow-1">
                    <input type="date" class="form-control" name="to_date" placeholder="To Date">
                </div>
            </div>
            <div class="d-flex gap-2 mt-2 mt-md-0">
                <button type="submit" class="btn btn-primary">Search</button>
                <a href="{{route('user.bank_history')}}"  class="btn btn-secondary">Reset</a>
            </div>
        </div>

    </form>
        


        <!-- Card with Datatable -->
        <div class="card p-3">
            <div class="table-responsive">
                <table id="bankHistoryTable" class="table table-hover table-borderless">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Date</th>
                            <th>Account Holder Name</th>
                            <th>Bank Name</th>
                            <th>Account Number</th>
                            <th>IFSC Code</th>
                            <th>Branch Name</th>
                            <th>Status</th>
                            {{-- <th>Active/Inactive</th> --}}
                        </tr>
                    </thead>
                    @php
                        $sn = 1; 
                    @endphp
                    <tbody>
                        @foreach ($datatables as $data)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $data->created_at }}</td>
                                <td>{{ $data->acc_holder_name }}</td>
                                <td>{{ $data->bank_name }}</td>
                                <td>{{ $data->acc_no }}</td>
                                <td>{{ $data->ifsc }}</td>
                                <td>{{ $data->branch_name }}</td>
                                {{-- <td>{{ $data->status }}</td> --}}
                                <td>{{ $data->is_active == 0 ? 'Inactive' : 'Active' }}</td>
                            </tr>
                            @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- jQuery and DataTables JS -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#bankHistoryTable').DataTable();
        });
    </script>
@endsection