@extends('admin/layouts/default')

{{-- Page title --}}
@section('title')
    Maintenance Requests List
    @parent
@stop

{{-- Page content --}}
@section('content')

    <section class="content paddingleft_right15">
        <div class="row">
            <div class="panel panel-primary ">

                <br />



                <div class="panel-body">
                    <div class="text-right">
                        <input type="text" id="searchInput" placeholder="Search..." class="form-control" onkeyup="searchTable()" style="display: inline-block; width: auto;">
                    </div>
                    <br />

                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title">Update Status & Send Feedback</h3>
                        </div>
                        <div class="panel-body">

                            {!! Form::open(['url' => Session::get('role_name').'/sendfeedback2']) !!}

                            <input type="hidden" name="id" value="{{ $id }}">

                            <div class="form-group">
                                    <label for="status">Select Status:</label>
                                    <select class="form-control" id="feedback" name="feedback" required>
                                        <option value="">Please Select</option>
                                        <option value="2">Completed</option>
                                        <option value="1">Not Fixed</option>
                                        <option value="4">Under Maintenance</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="feedback">Your Feedback:</label>
                                    <textarea class="form-control" id="feedback1" name="feedback1" rows="4" placeholder="Enter your feedback here..." required></textarea>
                                </div>
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>

    {{-- Modal Structure --}}
    <div class="modal fade" id="descriptionModal" tabindex="-1" role="dialog" aria-labelledby="descriptionModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="descriptionModalLabel">Request Description</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="modalDescriptionText"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@stop

{{-- Footer scripts --}}
@section('footer_scripts')
    <div class="modal fade" id="delete_confirm" tabindex="-1" role="dialog" aria-labelledby="user_delete_confirm_title" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
            </div>
        </div>
    </div>

    {{-- CSS for blinking effect --}}
    <style>
        .warning-blink {
            animation: blinker 1s linear infinite;
        }

        @keyframes blinker {
            50% {
                opacity: 0;
            }
        }
    </style>

    <script>
        $(function () {
            $('body').on('hidden.bs.modal', '.modal', function () {
                $(this).removeData('bs.modal');
            });
        });

        // Search function
        function searchTable() {
            const input = document.getElementById('searchInput');
            const filter = input.value.toLowerCase();
            const table = document.getElementById('table');
            const tr = table.getElementsByTagName('tr');

            // Start from the second row to skip the table header
            for (let i = 1; i < tr.length; i++) {
                const td = tr[i].getElementsByTagName('td');
                let found = false;

                for (let j = 0; j < td.length; j++) {
                    if (td[j]) {
                        const txtValue = td[j].textContent || td[j].innerText;
                        if (txtValue.toLowerCase().indexOf(filter) > -1) {
                            found = true;
                            break;
                        }
                    }
                }
                tr[i].style.display = found ? "" : "none";
            }
        }

        // Script to handle modal
        $('#descriptionModal').on('show.bs.modal', function (event) {
            const button = $(event.relatedTarget);
            const description = button.data('description');
            const modal = $(this);
            modal.find('#modalDescriptionText').text(description);
        });
    </script>
@stop