@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>Member</h5>
    </div>
    <div class="col-auto">
        <a href="{{ route('add_user') }}"><button class="btn btn-primary">Add Member</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>
                @foreach($packages as $package)
                <option value="{{ $package->id }}">{{ $package->package_name }}</option>
                @endforeach
            </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="usersTable">
                        <thead>
                            <tr>
                                <th>Sno</th>
                                <th>Member ID</th>
                                <th>Name</th>
                                <th>Phone Number</th>
                                <th>Package</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </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="{{ route('delete_user') }}" method="POST" 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="{{ route('user_status_update') }}" 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 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 table = $('#usersTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('user_data') }}",
                data: function(d) {
                    d.package_id = $('#filterPackage').val();
                    d.status = $('#filterStatus').val();
                    d.gender = $('#filterGender').val();
                }
            },
            columns: [{
                    data: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'member_id'
                },
                {
                    data: 'name'
                },
                {
                    data: 'phone_number'
                },
                {
                    data: 'package_name'
                },
                {
                    data: 'status',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'action',
                    orderable: false,
                    searchable: false
                }
            ],
            dom: 'rt<"d-flex justify-content-between align-items-center p-3"ip>',
        });
        // search
        $('#customSearch').on('keyup', function() {
            table.search(this.value).draw();
        });
        // $('#customSearch').on('keyup', function () { table.search(this.value).draw(); });

        // length
        $('#pageLength').on('change', function() {
            table.page.len(this.value).draw();
        });
        $(document).on('click', '.deleteBtn', function() {
            let id = $(this).data('id');
            $('#delete_id').val(id);
        });
        $('#filterPackage, #filterStatus, #filterGender').on('change', function() {
            table.draw();
        })

        // $('#resetFilters').on('click', function () {
        //     $('#filterPackage').val('');
        //     $('#filterStatus').val('');
        //     $('#filterGender').val('');
        //     $('#customSearch').val('');
        //     table.search('').draw();
        // });



    });
</script>
<script>
    document.getElementById('confirmDelete').addEventListener('click', function() {
        let btn = this;
        btn.disabled = true;
        btn.innerText = 'Processing...';
        document.getElementById('deleteForm').submit();
    });
</script>
<script>
    document.getElementById('confirmStatus').addEventListener('click', function() {
        let btn = this;
        btn.disabled = true;
        btn.innerText = 'Processing...';
        document.getElementById('statusForm').submit();
    });
</script>
<script>
    $(document).on('click', '.statusBtn', function() {

        let id = $(this).data('id');
        let status = $(this).data('status');

        $('#status_user_id').val(id);

        if (status == 1) {
            $('#statusMessage').text(
                'Are you sure you want to deactivate this user?'
            );
        } else {
            $('#statusMessage').text(
                'Are you sure you want to activate this user?'
            );
        }
    });
</script>
@endsection