{{--@extends('admin/layouts/default')--}}
{{-- Page title --}}
@section('title')
    Reporting
    @parent
@stop

{{-- Page level styles --}}
@section('header_styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/datatables/css/dataTables.bootstrap.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/select2/css/select2.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/select2/css/select2-bootstrap.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/pages/tables.css') }}" />
    <style>
        /* Custom styles for the reporting page */
        .report-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: auto;
            gap: 10px;
            margin-top: 20px;
        }
        .report-box {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            color: white;
            border-radius: 8px;
            padding: 20px;
        }
        .box1 { background-color: #3498db; }
        .box2 { background-color: #e74c3c; }
        .box3 { background-color: #2ecc71; }
        .box4 { background-color: #f1c40f; }
        .box5 { background-color: #9b59b6; }
        .box6 { background-color: #34495e; }
    </style>
@stop

{{-- Page content --}}
@section('content')
    <section class="content-header">
        <h1><font color='#8b4513'>Reporting</font></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 class="active">Reporting</li>
        </ol>
    </section>

    <div class="panel panel-primary">
        <div class="panel-heading clearfix">
            <h4 class="panel-title">
                <i class="livicon" data-name="list-ul" data-size="16" data-loop="true" data-c="#fff" data-hc="white"></i>
                Reports Overview
            </h4>
        </div>



    </div>

    <div class="report-grid">
        <div class="report-box box1">Total Requested</div>
        <div class="report-box box2">Total Completed</div>
        <div class="report-box box3">Total Pending</div>
        <div class="report-box box4">Total Accepted</div>
        <div class="report-box box5">Total Customers</div>
        <div class="report-box box6">Total Under Mainteenance</div>
    </div>
@stop

{{-- Page level scripts --}}
@section('footer_scripts')
    <script type="text/javascript" src="{{ asset('assets/vendors/datatables/js/jquery.dataTables.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/vendors/datatables/js/dataTables.bootstrap.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/vendors/datatables/js/dataTables.responsive.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/vendors/select2/js/select2.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/pages/table-advanced2.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('.select2').select2();
        });
    </script>
@stop