@extends('admin.layouts.app')

@section('content')
    <div class=" content-body default-height">
        <div class="container-fluid">
            <div class="page-titles">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">@lang('admin.dashboard')</a></li>
                    <li class="breadcrumb-item active"><a href="javascript:void(0)">@lang('admin.admins')</a></li>
                </ol>
            </div>
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">@lang('admin.admins')</h4>
                        <a class="btn btn-success" href="{{ route('admin.create') }}">@lang('admin.create')</a>
                    </div>
                    <div class="card-body">
                         <!-- Add a form for filtering -->
                         <form  method="get" action="" class="d-flex">
                            @csrf
                            <div class="input-group me-2">
                                    <input type="text" class="form-control" name="keyword"
                                        value="{{ request()->input('keyword') }}"
                                        placeholder="@lang('user.search')...">
                            </div>
                            <div class="input-group me-2">
                                <input type="text" class="form-control" id="date-range"
                                    name="date_range"
                                    value="{{ request()->input('date_range') }}"readonly>
                                    <button type="button" class="btn btn-secondary" onclick="clearDateRange()">Clear</button>

                            </div>                          
                            <button type="submit" class="btn btn-primary">@lang('admin.filter')</button>
                        </form>
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>@lang('admin.name')</th>
                                        <th>@lang('admin.mobile')</th>
                                        <th>@lang('admin.email')</th>
                                        <th>@lang('admin.role')</th>
                                        <th>@lang('admin.created_at')</th>
                                        <th>@lang('admin.actions')</th>
                                    </tr>
                                </thead>
                                <tbody id="userTableBody">
                                    @foreach ($users as $user)
                                        <tr>
                                            <td>{{ $user->name }}</td>
                                            <td><a href="javascript:void(0);"><strong>{{ $user->mobile }}</strong></a></td>
                                            <td><a href="javascript:void(0);"><strong>{{ $user->email }}</strong></a></td>
                                            <td>
                                                @if (!empty($user->getRoleNames()))
                                                    @foreach ($user->getRoleNames() as $v)
                                                        <label class="badge badge-success">{{ $v }}</label>
                                                    @endforeach
                                                @endif
                                            </td>
                                            <td>{{ $user->created_at }}</td>
                                            <td>
                                                <div class="d-flex">
                                                    <a href="{{ route('admin.edit', ['admin' => $user->id]) }}"
                                                        class="btn btn-primary shadow btn-xs sharp me-1">
                                                        <i class="fa fa-pencil"></i>
                                                    </a>
                                                    <button type="button" class="btn btn-danger shadow btn-xs sharp"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#deleteModal_{{ $user->id }}"><i
                                                            class="fa fa-trash"></i></button>

                                                </div>
                                            </td>
                                        </tr>

                                        <!-- Modal -->
                                        <div class="modal fade" id="deleteModal_{{ $user->id }}">
                                            <div class="modal-dialog" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title">@lang('admin.delete')</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal">
                                                        </button>
                                                    </div>
                                                    <div class="modal-body">@lang('admin.delete_message')</div>
                                                    <div class="modal-footer">
                                                        <form action="{{ route('admin.destroy', $user->id) }}"
                                                            method="post" class="" id="delete_modal">
                                                            @method('delete')
                                                            @csrf

                                                            <button type="submit"
                                                                class="btn btn-success waves-effect">@lang('admin.confirm')</button>
                                                            <button type="button" class="btn btn-danger waves-effect"
                                                                data-dismiss="modal">@lang('admin.cancel')</button>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </tbody>
                            </table>
                            {{ $users->links('vendor.pagination.custom') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
{{-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        // Assuming you're using jQuery for simplicity
        $('#filterForm').on('submit', function(e) {
            e.preventDefault();
            var formData = $(this).serialize();
            $.ajax({
                type: 'GET',
                url: "{{ route('admin.admins.filter') }}",
                data: formData,
                success: function(response) {
                    console.log(response.users);
                    // Update the table with the filtered data
                    $('#userTableBody').html(''); // Clear the existing rows
                    $.each(response.users, function(index, user) {
                        var created_at = new Date(user.created_at);
                        created_at = created_at.toLocaleString();
                        var rolesHtml = '';
                        if (user.roles && user.roles.length > 0) {
                            rolesHtml = '<td>';
                            $.each(user.roles, function(roleIndex, role) {
                                rolesHtml += '<label class="badge badge-success">' + role.name + '</label>';
                            });
                            rolesHtml += '</td>';
                        } else {
                            rolesHtml = '<td></td>';
                        }

                        var editUrl =
                            "{{ route('admin.edit', ['admin' => 'userId']) }}";
                        editUrl = editUrl.replace('userId', user.id);

                        var deleteUrl =
                            "{{ route('admin.destroy', ['admin' => 'userId']) }}";
                        deleteUrl = deleteUrl.replace('userId', user.id);

                        var rowHtml = `
                        <tr>
                            <td>${user.name}</td>
                            <td>${user.mobile}</td>
                            <td>${user.email}</td>
                            ${rolesHtml}
                            <td>${created_at}</td>
                            <td>
                                <div class="d-flex">
                                    <a href="${editUrl}" class="btn btn-primary shadow btn-xs sharp me-1">
                                        <i class="fa fa-pencil"></i>
                                    </a>
                                    <button type="button" class="btn btn-danger shadow btn-xs sharp" data-bs-toggle="modal" data-bs-target="#deleteModal_${user.id}">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        `;
                        $('#userTableBody').append(rowHtml);

                        var model = `
                        <!-- Modal -->
                        <div class="modal fade" id="deleteModal_${user.id}">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">@lang('admin.delete')</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                    </div>
                                    <div class="modal-body">@lang('admin.delete_message')</div>
                                    <div class="modal-footer">
                                        <form action="${deleteUrl}" method="post" class="" id="delete_modal_${user.id}">
                                            @method('delete')
                                            @csrf
                                            <button type="submit" class="btn btn-success waves-effect">@lang('admin.confirm')</button>
                                            <button type="button" class="btn btn-danger waves-effect" data-dismiss="modal">@lang('admin.cancel')</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>`;
                        $('#userTableBody').append(model);
                    });
                    // Update pagination links
                    $('.pagination').html(generatePaginationLinks(response));
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        });


        // Function to generate pagination links
        function generatePaginationLinks(paginator) {
            var paginationHtml = '<nav aria-label="Page navigation example">';
            paginationHtml += '<ul class="pagination justify-content-center">';

            if (paginator.current_page === 1) {
                paginationHtml += '<li class="page-item disabled">';
            } else {
                paginationHtml += '<li class="page-item">';
            }
            paginationHtml += '<a class="page-link" href="#" tabindex="-1">Previous</a></li>';

            for (var i = 1; i <= paginator.last_page; i++) {
                if (i === paginator.current_page) {
                    paginationHtml += '<li class="page-item active">';
                } else {
                    paginationHtml += '<li class="page-item">';
                }
                paginationHtml += '<a class="page-link" href="#" data-page="' + i + '">' + i + '</a></li>';
            }

            if (paginator.current_page === paginator.last_page) {
                paginationHtml += '<li class="page-item disabled">';
            } else {
                paginationHtml += '<li class="page-item">';
            }
            paginationHtml += '<a class="page-link" href="#" rel="next">Next</a></li>';

            paginationHtml += '</ul></nav>';

            return paginationHtml;
        }

        // Handle pagination links click
        $(document).on('click', '.pagination a', function(e) {
            e.preventDefault();
            var page = $(this).data('page'); // Get the page number from the data attribute
            var formData = $('#filterForm').serialize() + '&page=' + page; // Add page parameter to form data
            $.ajax({
                type: 'GET',
                url: "{{ route('admin.admins.filter') }}",
                data: formData,
                success: function(response) {
                    // Clear existing rows and modals
                    $('#userTableBody').empty();
                    $('.modal').remove(); // Clear all modals

                    $.each(response.users, function(index, user) {
                        var created_at = new Date(user.created_at);
                        created_at = created_at.toLocaleString();
                        var rolesHtml = '';
                        if (user.roles && user.roles.length > 0) {
                            rolesHtml = '<td>';
                            $.each(user.roles, function(roleIndex, role) {
                                rolesHtml += '<label class="badge badge-success">' + role.name + '</label>';
                            });
                            rolesHtml += '</td>';
                        } else {
                            rolesHtml = '<td></td>';
                        }

                        var editUrl =
                            "{{ route('admin.edit', ['admin' => 'userId']) }}";
                        editUrl = editUrl.replace('userId', user.id);

                        var deleteUrl =
                            "{{ route('admin.destroy', ['admin' => 'userId']) }}";
                        deleteUrl = deleteUrl.replace('userId', user.id);
                        var rowHtml = `
                        <tr>
                            <td>${user.name}</td>
                            <td>${user.mobile}</td>
                            <td>${user.email}</td>
                            ${rolesHtml}
                            <td>${created_at}</td>
                            <td>
                                <div class="d-flex">
                                    <a href="${editUrl}" class="btn btn-primary shadow btn-xs sharp me-1">
                                        <i class="fa fa-pencil"></i>
                                    </a>
                                    <button type="button" class="btn btn-danger shadow btn-xs sharp" data-bs-toggle="modal" data-bs-target="#deleteModal_${user.id}">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                      `;
                        $('#userTableBody').append(rowHtml);

                        var model = `
                        <!-- Modal -->
                        <div class="modal fade" id="deleteModal_${user.id}">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">@lang('admin.delete')</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                    </div>
                                    <div class="modal-body">@lang('admin.delete_message')</div>
                                    <div class="modal-footer">
                                        <form action="${deleteUrl}" method="post" class="" id="delete_modal_${user.id}">
                                            @method('delete')
                                            @csrf
                                            <button type="submit" class="btn btn-success waves-effect">@lang('admin.confirm')</button>
                                            <button type="button" class="btn btn-danger waves-effect" data-dismiss="modal">@lang('admin.cancel')</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>`;
                        $('#userTableBody').append(model);

                    });

                    // Update pagination links
                    $('.pagination').html(generatePaginationLinks(response));
                },
                error: function(xhr, status, error) {
                    console.error(error);
                }
            });
        });

    });
</script> --}}
@push('scripts')
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker@3.1.0/daterangepicker.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker@3.1.0/daterangepicker.min.js"></script>
<script>
    $(document).ready(function() {

        $('#date-range').daterangepicker({
                autoUpdateInput: false,
                timePicker: true,
                locale: {
                    format: 'DD/MM/YYYY h:mm A'
                },
                timePickerIncrement: 30,
                showDropdowns: true
            });

            $('#date-range').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('DD/MM/YYYY h:mm A') + ' - ' + picker.endDate.format(
                    'DD/MM/YYYY h:mm A'));
            });

           
        });
        function clearDateRange() {
                document.getElementById('date-range').value = '';
            }
    </script>
@endpush