@include('layouts.header', ['title' => 'User Query'])
<!-- Begin page -->
<div class="wrapper">

    <!-- Include the Navbar -->
    @include('layouts.navbar')


    <!-- Include the Left Sidebar -->
    @include('layouts.sidebar')

    <!-- ============================================================== -->
    <!-- Start Page Content here -->
    <!-- ============================================================== -->

    <div class="content-page">
        <div class="content">

            <!-- Start Content-->
            <div class="container-fluid">

                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">
                            <div class="page-title-right"></div>
                            {{-- <h4 class="page-title">Manage Agency Lists</h4> --}}
                        </div>
                    </div>
                </div>
                <!-- end page title -->

                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h4 class="header-title mb-0">User Query</h4>
                                <div class="ml-auto">
                                    <a href="{{ route('admin.rnr.view_remark') }}" class="btn btn-light btn-sm">
                                        Add Query
                                    </a>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-12 mb-3">

                                        <form method="GET" action="{{ route('admin.rnr.view_remark_list') }}"
                                            class="row">
                                            <!-- Raised By User Name -->
                                            <div class="col-md-2">
                                                <input type="text" name="user_name" class="form-control"
                                                    placeholder="Raised By" value="{{ request()->query('user_name') }}">
                                            </div>

                                            <!-- Status -->
                                            <div class="col-md-2">
                                                <select name="status" class="form-control">
                                                    <option value=""
                                                        {{ request()->query('status') === '' ? 'selected' : '' }}>
                                                        Select Status
                                                    </option>
                                                    <option value="0"
                                                        {{ request()->query('status') === null || request()->query('status') == '0' ? 'selected' : '' }}>
                                                        In Progress
                                                    </option>
                                                    <option value="1"
                                                        {{ request()->query('status') == '1' ? 'selected' : '' }}>
                                                        Resolved
                                                    </option>
                                                    <option value="pending"
                                                        {{ request()->query('status') == 'pending' ? 'selected' : '' }}>
                                                        Pending
                                                    </option>
                                                </select>
                                            </div>

                                            <!-- Search and Reset Buttons -->
                                            <div class="col-md-2 d-flex">
                                                <button type="submit" class="btn btn-success me-2">Search</button>
                                                <a href="{{ route('admin.rnr.view_remark_list') }}"
                                                    class="btn btn-link">Reset</a>
                                            </div>
                                        </form>

                                    </div>
                                </div>

                                <table id="basic-datatable" class="table table-striped dt-responsive nowrap w-100">
                                    <thead>
                                        <tr>
                                            <th>Sl. No.</th>
                                            <th>Raised By</th>
                                            <th>Query Remarks</th>
                                            <th>Raised On</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        @forelse ($queryList as $index => $query)
                                            <tr>
                                                <td>{{ ($queryList->currentPage() - 1) * $queryList->perPage() + $index + 1 }}
                                                </td>
                                                <td>{{ $query->user_name }}</td>
                                                <td>{{ $query->query_remarks }}</td>
                                                <td> {{ $query->created_at->format('d M, Y h:i A') }}</td>
                                                <td>

                                                    @if ($query->status === 1)
                                                        <span class="badge bg-success">Resolved</span>
                                                    @elseif($query->status === 0)
                                                        <span class="badge bg-warning text-dark">In Progress</span>
                                                    @else
                                                        <span class="badge bg-secondary">Pending</span>
                                                    @endif

                                                </td>
                                                <td>

                                                    <a href="" class="text-reset fs-16 px-1 update-assign-status"
                                                        data-query-id="{{ $query->id }}"
                                                        title="Tap to update status">
                                                        <i class="mdi mdi-list-status"></i>
                                                    </a>
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="12">No queries found.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>


                                <!-- Pagination Links -->
                                <div class="mt-3">
                                    {{ $queryList->appends(request()->query())->links('pagination::bootstrap-5') }}
                                </div>

                            </div> <!-- end card body-->
                        </div> <!-- end card -->
                    </div><!-- end col-->
                </div> <!-- end row-->

            </div> <!-- container -->

        </div> <!-- content -->

        <!--  Assign Modal -->
        <div class="modal fade" id="temporaryAssignModal" tabindex="-1" aria-labelledby="temporaryAssignModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <form id="temporaryAssignForm" method="POST" action="{{ route('admin.query.assign') }}">
                    @csrf
                    <input type="hidden" name="query_id" id="modalQueryId">
                    <input type="hidden" name="status" id="modalStatus">

                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Update Status</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>

                        <div class="modal-body">
                            <div class="mb-3">
                                <label for="remarks" class="form-label">Remarks <span
                                        class="text-danger">*</span></label>
                                <textarea class="form-control" id="remarks" name="remarks" rows="4" required></textarea>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="submit" class="btn btn-warning" onclick="setStatus(0)">Mark In
                                Progress</button>
                            <button type="submit" class="btn btn-success" onclick="setStatus(1)">Mark Resolved</button>

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

            </div>
        </div>


        <!-- Include the Footer -->
        @include('layouts.footer')

    </div>

    <!-- ============================================================== -->
    <!-- End Page content -->
    <!-- ============================================================== -->

</div>
<!-- END wrapper -->

<!-- Vendor js -->
<script src="{{ asset('assets/js/vendor.min.js') }}"></script>

<!-- App js -->
<script src="{{ asset('assets/js/app.min.js') }}"></script>
<script src="{{ asset('assets/js/datatable.js') }}"></script>


<script>
    function setStatus(value) {
        $('#modalStatus').val(value);
    }

    $(document).ready(function() {
        $('.update-assign-status').on('click', function(e) {
            e.preventDefault();
            const queryId = $(this).data('query-id');
            $('#modalQueryId').val(queryId);
            $('#modalStatus').val(''); // Clear previous status
            $('#remarks').val('');
            $('#temporaryAssignModal').modal('show');
        });
    });
</script>


<script>
    $(document).ready(function() {
        @if ($errors->any())
            @foreach ($errors->all() as $error)
                toastr.error("{{ $error }}");
            @endforeach
        @endif

        @if (session('success'))
            toastr.success("{{ session('success') }}");
        @endif

        @if (session('error'))
            toastr.error("{{ session('error') }}");
        @endif

        $('.update-assign-status').on('click', function() {
            const queryId = $(this).data('query-id');
            $('#modalQueryId').val(queryId);
            $('#remarks').val(''); // clear previous remarks
            $('#temporaryAssignModal').modal('show');
        });
    });
</script>


</body>

</html>