@extends('Admin.layout')
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
        <div class="col-auto">
            <h5></h5>
        </div>
        <div class="col-auto">
            {{-- <a href="{{ route('add_booking') }}"><button class="btn btn-primary">Add Booking</button> </a> --}}
        </div>
    </div>
    <div class="card p-0 m-2">
        <div class="row mb-3 align-items-center p-3 g-2">
            <div class="col-1">
                <select id="pageLength" class="form-select">
                    <option value="10"> 10</option>
                    <option value="25"> 25</option>
                    <option value="50"> 50</option>
                    <option value="100"> 100</option>
                </select>
            </div>


            {{-- <div class="col-lg-2 col-md-3">
                <select id="filterPackage" class="form-select">
                    <option value="">All Packages</option>

                </select>
            </div>

            <div class="col-lg-2 col-md-3">
                <select id="filterStatus" class="form-select">
                    <option value="">All Status</option>
                    <option value="1">Active</option>
                    <option value="0">Inactive</option>
                </select>
            </div>

            <div class="col-lg-2 col-md-3">
                <select id="filterGender" class="form-select">
                    <option value="">All Gender</option>
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                    <option value="Other">Other</option>
                </select>
            </div> --}}

            {{-- <div class="col-auto">
                <button class="btn btn-outline-secondary" id="resetFilters">
                    <i class="ti tabler-refresh me-1"></i> Reset
                </button>
            </div> --}}


            <div class="col-md-3 ms-auto">
                <input type="text" id="customSearch" class="form-control" placeholder="Search">
            </div>
        </div>
        <div class="table-responsive pt-0 pb-2">
            <div class="row card-header flex-column flex-md-row border-bottom mx-0 p-0">
                <div class="justify-content-between dt-layout-table">
                    <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                        <table class="table" id="slotsTable">
                            <thead>
                                <tr>
                                    <th>Sno</th>
                                    <th>Transaction ID</th>
                                    <th>Team Name</th>
                                    <th> Booking id</th>
                                    <th>Total Amount</th>
                                    <th>Match Id</th>
                                    <th>Status</th>
                                </tr>
                            </thead>

                            <tbody>
                                
                                @php
                                    $payments = [
                                        [
                                            'team_id' => 'TXN100001',
                                            'team_name' => 'CSK Warriors',
                                            'booking_id' => 'BK1001',
                                            'amount' => 4000,
                                            'match_id' => 'MT001',
                                            'status' => 'Paid',
                                        ],
                                        [
                                            'team_id' => 'TXN100002',
                                            'team_name' => 'RCB Strikers',
                                            'booking_id' => 'BK1002',
                                            'amount' => 3500,
                                            'match_id' => 'MT002',
                                            'status' => 'Pending',
                                        ],
                                        [
                                            'team_id' => 'TXN100003',
                                            'team_name' => 'MI Titans',
                                            'booking_id' => 'BK1003',
                                            'amount' => 4500,
                                            'match_id' => 'MT003',
                                            'status' => 'Paid',
                                        ],
                                        [
                                            'team_id' => 'TXN100004',
                                            'team_name' => 'KKR Knights',
                                            'booking_id' => 'BK1004',
                                            'amount' => 5000,
                                            'match_id' => 'MT004',
                                            'status' => 'Failed',
                                        ],
                                        [
                                            'team_id' => 'TXN100005',
                                            'team_name' => 'GT Gladiators',
                                            'booking_id' => 'BK1005',
                                            'amount' => 3800,
                                            'match_id' => 'MT005',
                                            'status' => 'Paid',
                                        ],
                                    ];
                                @endphp

                            <tbody>
                                @foreach ($payments as $index => $payment)
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td>{{ $payment['team_id'] }}</td>
                                        <td>{{ $payment['team_name'] }}</td>
                                        <td>{{ $payment['booking_id'] }}</td>
                                        <td>₹{{ number_format($payment['amount']) }}</td>
                                        <td>{{ $payment['match_id'] }}</td>
                                        <td>
                                            <button href="#" class="btn   btn-label-success me-1" title="Edit">
                                                paid
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>


        <div class="modal fade" id="deleteModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">

            <div class="modal-dialog modal-sm modal-dialog-centered">

                <div class="modal-content rounded-4 text-center p-4 py-5">

                    <form action="#" id="deleteForm">
                        @csrf

                        <input type="hidden" name="id" id="delete_id">

                        <h5 class="fw-bold mb-2">Delete User</h5>

                        <p class="text-muted">
                            Are you sure you want to delete this user?
                        </p>

                        <div class="d-flex justify-content-center align-items-center gap-3 mt-4">

                            <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                                Cancel
                            </button>

                            <button type="submit" class="btn btn-danger p-3 ms-2 fw-semibold" id="confirmDelete">
                                Yes, Delete
                            </button>

                        </div>

                    </form>

                </div>
            </div>
        </div>

        <div class="modal fade" id="statusModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">

            <div class="modal-dialog modal-sm modal-dialog-centered">
                <form action="#" method="POST" id="statusForm">
                    @csrf
                    <div class="modal-content rounded-4 text-center p-4 py-5">
                        <h5 class="fw-bold mb-2">Change Status</h5>
                        <input type="hidden" name="id" id="status_user_id">
                        <p class="text-muted" id="statusMessage">
                            Are you sure you want to change status?
                        </p>

                        <div class="d-flex justify-content-center align-items-center gap-3 mt-4">

                            <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                                Cancel
                            </button>

                            <button type="submit" class="btn btn-success p-3 ms-2 fw-semibold" id="confirmStatus">
                                Yes, Change
                            </button>

                        </div>

                    </div>
                </form>
            </div>
        </div>

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

                var table = $('#slotsTable').DataTable({
                    paging: true,
                    searching: true,
                    ordering: true,
                    info: true,
                    lengthChange: false
                });

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

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

            });
        </script>

@endsection