@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 class="panel-body">
            {!! Form::open(['url' => Session::get('role_name').'/generatereport1']) !!}

                <div class="form-group">
                    <label for="from_date">From Date:</label>
                    <input type="date" id="from_date" name="from_date" class="form-control" required>
                </div>

                {{-- Add this hidden input field to send the email --}}
                {{--<input type="hidden" name="user_email" value="{{ Sentinel::getUser()->email }}">--}}

                <div class="form-group">
                    <label for="to_date">To Date:</label>
                    <input type="date" id="to_date" name="to_date" class="form-control" required>
                </div>
                <div class="form-group">
                    <label for="category">Category:</label>
                    <select id="category" name="category" class="form-control select2" required>
                        <option value="">Select a category</option>
                        <option value="all">All Maintenance </option>
                        <option value="maintenance">Printer Maintenance </option>
                        <option value="software">computer </option>
                        <option value="network">Photocopy </option>
                        <option value="system">Laptop </option>
                        <option value="website">Table tabs </option>
                    </select>
                </div>

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-4">

                    <button type="submit" class="btn btn-danger">
                        @lang('view report')
                    </button>
                </div>
            </div>
            {!! Form::close() !!} -->
        </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