@extends('admin/layouts/default')

@section('title')
    Maintenance Reports
    @parent
@stop

@section('header_styles')
    <style>
        /* ======= General Layout ======= */
        body {
            background-color: #f8f9fa;
            font-family: "Segoe UI", Arial, sans-serif;
        }

        .panel {
            border-radius: 10px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        }

        .panel-heading {
            background: linear-gradient(90deg, #007bff, #0056b3);
            color: #fff !important;
            border-radius: 10px 10px 0 0;
        }

        .panel-title {
            font-weight: bold;
            font-size: 18px;
        }

        /* ======= Filter Section ======= */
        form.form-inline {
            background: #ffffff;
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            margin-bottom: 20px;
        }

        form.form-inline .form-group {
            margin-right: 10px;
            margin-bottom: 8px;
        }

        form.form-inline label {
            font-weight: 600;
            margin-right: 5px;
        }

        form.form-inline .btn {
            border-radius: 6px;
            font-weight: 600;
        }

        /* ======= Table Styles ======= */
        table.table {
            background-color: #ffffff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }

        table.table th {
            background-color: #007bff;
            color: #fff;
            text-align: center;
            font-weight: 600;
        }

        table.table td {
            vertical-align: middle;
            text-align: center;
        }

        table.table tr:hover {
            background-color: #f2f8ff;
            transition: background-color 0.2s ease-in-out;
        }

        /* ======= Search Box ======= */
        #searchReport {
            border: 2px solid #007bff;
            border-radius: 6px;
            padding: 6px 10px;
            margin-bottom: 10px;
            transition: box-shadow 0.3s ease;
        }

        #searchReport:focus {
            box-shadow: 0 0 5px rgba(0,123,255,0.5);
            outline: none;
        }

        /* ======= Pagination ======= */
        .pagination > li > a,
        .pagination > li > span {
            color: #007bff;
            border-radius: 5px;
            margin: 0 2px;
        }

        .pagination > .active > span {
            background-color: #007bff !important;
            border-color: #007bff !important;
            color: #fff !important;
        }

        /* ======= Empty Text ======= */
        .text-muted {
            color: #6c757d;
            font-style: italic;
        }

        /* ======= Status Labels ======= */
        .label {
            font-size: 12px;
            padding: 5px 8px;
            border-radius: 4px;
        }

        .label-warning { background-color: #ffc107; }
        .label-info { background-color: #17a2b8; }
        .label-success { background-color: #28a745; }
        .label-default { background-color: #6c757d; }
    </style>
@stop

@section('content')
    <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="line-chart" data-size="18" data-loop="true" data-c="#fff" data-hc="white"></i>
                        Requests Report by Category & Date
                    </h4>
                </div>

                <div class="panel-body">
                    {{-- ======= Filter Form ======= --}}
                    <form method="GET" action="{{ url('admin/requests/report') }}" class="form-inline text-center">
                        <div class="form-group">
                            <label>Category:</label>
                            <select name="category" class="form-control" required>
                                <option value="">Select Category</option>
                                <option value="maintenance" {{ request('category')=='maintenance'?'selected':'' }}>Maintenance</option>
                                <option value="network" {{ request('category')=='network'?'selected':'' }}>Network</option>
                                <option value="generalservice" {{ request('category')=='generalservice'?'selected':'' }}>General Service</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label>From:</label>
                            <input type="date" name="start_date" class="form-control" value="{{ request('start_date') }}" required>
                        </div>

                        <div class="form-group">
                            <label>To:</label>
                            <input type="date" name="end_date" class="form-control" value="{{ request('end_date') }}" required>
                        </div>

                        <button type="submit" class="btn btn-primary">
                            <i class="fa fa-filter"></i> Generate
                        </button>
                        <a href="{{ url('admin/requests/report') }}" class="btn btn-default">Reset</a>
                    </form>

                    {{-- ======= Results Section ======= --}}
                    @if(request()->has('category') && request()->has('start_date') && request()->has('end_date'))