@extends('admin/layouts/default')

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

{{-- Page content --}}
@section('content')
    <section class="content-header">
        <h1>Maintenance Requests</h1>
        <ol class="breadcrumb">
            <li>
                <a href="{{ route('dashboard') }}"> <i class="livicon" data-name="home" data-size="16" data-color="#000"></i>
                    Dashboard
                </a>
            </li>
            <li>Maintenance Requests</li>
            <li class="active">Maintenance Requests</li>
        </ol>
    </section>

    <section class="content paddingleft_right15">
        <div class="row">
            <div class="panel panel-primary ">
                <div class="panel-heading clearfix">
                    <h4 class="panel-title pull-left"> <i class="livicon" data-name="list-ul" data-size="16" data-loop="true" data-c="#fff" data-hc="white"></i>
                        Maintenance Requests List
                    </h4>
                    <div class="pull-right">
                        <a href="{{ route('dmustaff.maintenancerequests.create') }}" class="btn btn-sm btn-default"><span class="glyphicon glyphicon-plus"></span> @lang('Send Request')</a>
                    </div>
                </div>
                <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>
        </div>    <!-- row-->
    </section>
@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>

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

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

            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>
@stop