@extends('admin.layouts')

@section('title', 'User Management')

@section('header')



<!-- DataTable CSS -->

<link rel="stylesheet" type="text/css" href="{{ asset('/assets') }}/css/datatable/dataTables.bootstrap5.min.css">

<link rel="stylesheet" type="text/css" href="{{ asset('/assets') }}/css/datatable/responsive.bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="{{ asset('/assets') }}/css/datatable/buttons.dataTables.min.css">



<!-- Page CSS -->

<link rel="stylesheet" type="text/css" href="{{ asset('/assets') }}/css/formILY.css">

<style>
    .table-responsive {

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

    }



    td.user-details {

        max-width: 250px;

        /* Adjust width as needed */

        white-space: normal !important;

        /* Allow line wrapping */

        word-wrap: break-word;

    }



    .user-details {

        max-width: 200px;

        /* Limit width */

        white-space: normal !important;

        /* Allow text to wrap */

        word-break: break-word;

        /* Break long text like email */

        font-size: 13px;

        /* Make it slightly smaller */

        line-height: 1.4;

        /* Reduce spacing */

    }
</style>

@endsection

@section('content')







<div class="container-fluid page-wrapper category-container">



    <div class="row">

        <div class="d-flex justify-content-between align-items-center">

            <h3 class="page-top-heading">User Management</h3>

            <a href="{{ route('add_user') }}" class="btn btn-primary">Add User</a>

        </div>

    </div>





    <div class="row mb-3">

        <div class="col-md-3">

            <label>From Date</label>

            <input type="date" id="fromDate" class="form-control">

        </div>

        <div class="col-md-3">

            <label>To Date</label>

            <input type="date" id="toDate" class="form-control">

        </div>

        <div class="col-md-3">

            <label>Membership</label>




            <select id="membershipFilter" class="form-control">
                <option value="">All</option>
                @foreach ($memberships as $m)
                <option value="{{ $m->membership_id }}">{{ $m->title }}</option>
                @endforeach
            </select>


        </div>

        <div class="col-md-3 d-flex align-items-end gap-2">

            <button id="filterBtn" class="btn btn-primary">Filter</button>

            <button id="resetBtn" class="btn btn-secondary">Reset</button>

            <button id="exportBtn" class="btn btn-success">Export</button>



        </div>

    </div>







    <!-- Table Row -->

    <div class="row mt-4">

        <div class="col-lg-12">

            <div class="card datatable-card">

                <div class="card-body">





                    <div class="table-responsive">

                        <table id="data-table" class="table nowrap align-middle" style="width:100%">
                            <thead>
                                <tr>
                                    <th>SN</th>
                                    <th>DATE</th>
                                    <th>USER ID</th>
                                    <th>USER DETAILS</th>
                                    <th>MEMBERSHIP</th>
                                    <th>MEMBERSHIP NAME</th>
                                    <th>CASH WALLET</th>
                                    <th>SHOPP WALLET</th>
                                    <th>ACTION</th>
                                </tr>
                            </thead>
                        </table>


                    </div>



                </div>

            </div>

        </div>

    </div>

    <!-- Table Row Ends -->









</div>

<!-- end container fluid -->









@endsection

@section('footer')



<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- JQuery CDN -->

<script src="https://code.jquery.com/jquery-3.6.0.min.js"

    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>



<!-- Datatable JS -->

<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/dataTables.bootstrap5.min.js"></script>

{{-- <script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/datatables.init.js"></script> --}}

<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/dataTables.responsive.min.js"></script>

<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/jquery.dataTables.min.js"></script>

<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/dataTables.buttons.min.js"></script>

<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/buttons.html5.min.js"></script>

<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/buttons.print.min.js"></script>

<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/jszip.min.js"></script>

<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/pdfmake.min.js"></script>

<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/vfs_fonts.js"></script>





<!-- <script>

        $(document).ready(function() {

            let table = $('#data-table').DataTable();



            // Custom filter function

            $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {

                let fromDate = $('#fromDate').val();

                let toDate = $('#toDate').val();

                let membership = $('#membershipFilter').val();



                let date = data[1]; // DATE column

                let membershipTitle = data[5]; // MEMBERSHIP NAME column



                if (fromDate && new Date(date) < new Date(fromDate)) {

                    return false;

                }



                if (toDate && new Date(date) > new Date(toDate)) {

                    return false;

                }



                if (membership && membershipTitle.trim() !== membership.trim()) {

                    return false;

                }



                return true;

            });



            // Filter button

            $('#filterBtn').on('click', function() {

                table.draw();

            });



            // Reset button

            $('#resetBtn').on('click', function() {

                $('#fromDate').val('');

                $('#toDate').val('');

                $('#membershipFilter').val('');

                table.draw();

            });

        });

    </script>



<script>

document.getElementById("exportBtn").addEventListener("click", function () {

    let table = $('#data-table').DataTable(); // Get DataTables instance

    let rows = [];



    // Header row

    rows.push(["Name", "Phone Number"]);



    // Loop through ALL rows from DataTables

    table.rows().every(function () {

        let row = $(this.node());



        // Find name and phone from the HTML elements

        let name = row.find(".user-details").contents()

            .filter(function () {

                return this.nodeType === 3 && this.textContent.trim() !== "";

            })[0]?.textContent.trim();



        // OR more reliably: use specific <b> tags

        let nameValue = row.find(".user-details b:contains('Name:')")[0]?.nextSibling?.textContent.trim() || "";

        let phoneValue = row.find(".user-details b:contains('Phone:')")[0]?.nextSibling?.textContent.trim() || "";



        rows.push([nameValue, phoneValue]);

    });



    // Convert to CSV

    let csvContent = "data:text/csv;charset=utf-8," 

        + rows.map(e => e.map(v => `"${v}"`).join(",")).join("\n");



    // Trigger download

    let link = document.createElement("a");

    link.setAttribute("href", encodeURI(csvContent));

    link.setAttribute("download", "users.csv");

    document.body.appendChild(link);

    link.click();

    document.body.removeChild(link);

});

</script> -->



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

        let table = $('#data-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('userManagementData') }}",
                data: function(d) {
                    d.fromDate = $('#fromDate').val();
                    d.toDate = $('#toDate').val();
                    d.membership = $('#membershipFilter').val();
                }
            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'date',
                    name: 'created_at'
                },
                {
                    data: 'user_id',
                    name: 'user_id'
                },
                {
                    data: 'user_details',
                    name: 'name',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'membership',
                    name: 'membership'
                },
                {
                    data: 'membership_name',
                    name: 'membership_name',
                    orderable: false
                },
                {
                    data: 'cash_wallet',
                    name: 'cash_wallet',
                    orderable: false
                },
                {
                    data: 'shopping_wallet',
                    name: 'shopping_wallet',
                    orderable: false
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                }
            ]
        });

        $('#filterBtn').on('click', function() {
            table.draw();
        });

        $('#resetBtn').on('click', function() {
            $('#fromDate').val('');
            $('#toDate').val('');
            $('#membershipFilter').val('');
            table.draw();
        });

    });
</script>

<script>
    document.getElementById("exportBtn").addEventListener("click", function() {

        let url = "{{ route('userManagementData') }}" +
            "?export=1" +
            "&fromDate=" + encodeURIComponent($('#fromDate').val()) +
            "&toDate=" + encodeURIComponent($('#toDate').val()) +
            "&membership=" + encodeURIComponent($('#membershipFilter').val());

        window.location.href = url;
    });
</script>




@endsection