@extends('admin.layouts.master')
@section('title', 'All Users')

@section('content')
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="content-header">
                        <div class="container-fluid">
                            <div class="row"></div>
                        </div>
                    </div>
                    <div class="card card-primary card-outline">
                        <div class="card-header">
                            <h3 class="card-title">{{ __('Search Customers') }}</h3>
                        </div>
                        <div class="card-body">
                            <div class="col-lg-12">
                                <form id="searchForm">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="user_id" class="form-label">Name</label>
                                                <select class="form-control select2" name="user_id" id="user_id" multiple>
                                                    <option value="">Select Name</option>
                                                    @foreach ($users as $user)
                                                        <option value="{{ $user->id }}">
                                                            {{ $user->first_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="status" class="form-label">Status</label>
                                                <select class="form-control select2" name="status" id="status" multiple>
                                                    <option value="">Select Status</option>
                                                    <option value="active">Active</option>
                                                    <option value="blocked">Blocked</option>
                                                    <option value="pending">Pending</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="email" class="form-label">Email</label>
                                                <select class="form-control select2" name="email" id="email" multiple>
                                                    <option value="">Select Email</option>
                                                    @foreach ($users as $user)
                                                        <option value="{{ $user->email }}">
                                                            {{ $user->email }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="col-md-12">
                                            <div class="d-flex justify-content-end mt-3">
                                                <div class="btn-group">
                                                    <button type="reset" class="btn btn-primary btn-sm" id="refreshBtn">
                                                        <i class="bi bi-arrow-clockwise"></i> Refresh
                                                    </button>
                                                    <button type="submit" class="btn btn-success btn-sm" id="searchBtn">
                                                        <i class="bi bi-search"></i> Search
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-primary card-outline mt-3">
                        <div class="card-header">
                            <h3 class="card-title mt-1"><b>{{ __('Customer List') }}</b></h3>
                            <div class="card-tools d-flex">
                                <a href="{{ route('admin.customer.add') }}" class="btn btn-primary btn-sm">
                                    <i class="fas fa-plus"></i> {{ __('Add New Customer ') }}
                                </a>
                            </div>
                        </div>
                        <div class="card-body">
                            <table class="table table-striped table-bordered" id="customersTable">
                                <thead>
                                    <tr>
                                        <th scope="col" style="width: 5%;">#</th>
                                        <th scope="col" style="width: 10%;">Image</th>
                                        <th scope="col" style="width: 15%;">Date</th>
                                        <th scope="col" style="width: 20%;">Name</th>
                                        <th scope="col" style="width: 25%;">Email/Phone</th>
                                        <th scope="col" style="width: 15%;">Status</th>
                                        <th scope="col" style="width: 10%;">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- DataTables will populate this automatically -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('css')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">
@endsection
@section('js')
    <script>
        $(document).ready(function () {
            // Initialize DataTable
            var table = $('#customersTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.customer.index') }}",
                    data: function (d) {
                        d.user_id = $('#user_id').val();
                        d.email = $('#email').val();
                        d.status = $('#status').val();
                    }
                },
                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'image', name: 'image', orderable: false, searchable: false },
                    { data: 'date', name: 'created_at' },
                    { data: 'name', name: 'first_name' },
                    { data: 'contact', name: 'email' },
                    { data: 'status_badge', name: 'status' },
                    { data: 'action', name: 'action', orderable: false, searchable: false },
                ]
            });

            // Search form handler
            $('#searchForm').on('submit', function (e) {
                e.preventDefault();
                table.draw();
            });

            // Refresh button handler
            $('#refreshBtn').on('click', function () {
                $('#searchForm')[0].reset();
                $('.select2').val(null).trigger('change');
                table.draw();
            });

            // Status change handlers
            $(document).on('click', '.pendingUser', function (e) {
                e.preventDefault();
                changeUserStatus($(this).data('user_id'), 'pending');
            });

            $(document).on('click', '.approveUser', function (e) {
                e.preventDefault();
                changeUserStatus($(this).data('user_id'), 'approved');
            });

            $(document).on('click', '.blockUser', function (e) {
                e.preventDefault();
                changeUserStatus($(this).data('user_id'), 'blocked');
            });

            function changeUserStatus(userID, status) {
                Swal.fire({
                    title: 'Are you sure?',
                    text: "You want to change this user's status!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, change it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: '/make-user-' + status + '/' + userID,
                            method: "POST",
                            data: {
                                _token: "{{ csrf_token() }}"
                            },
                            success: function (response) {
                                table.draw();
                                MyToast.fire({
                                    icon: 'success',
                                    title: 'Status Updated Successfully!'
                                });
                            },
                            error: function (xhr) {
                                let errorMessage = "Something went wrong. Please try again.";
                                if (xhr.responseJSON && xhr.responseJSON.message) {
                                    errorMessage = xhr.responseJSON.message;
                                }
                                Swal.fire({
                                    title: "Error",
                                    text: errorMessage,
                                    icon: "error",
                                    confirmButtonColor: "#d33"
                                });
                            }
                        });
                    }
                });
            }
        });
    </script>
@endsection