@extends('admin/layouts/default')
{{-- Page title --}}
@section('title')
    Dashboard
    @parent
@stop
{{-- page level styles --}}
@section('header_styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/datatables/css/dataTables.bootstrap.css') }}"
          xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"/>
    <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') }}" />
    <!-- Custom CSS for the new report section -->
    <style>
        /* Styles for the Maintenance Report section */
        .report-container {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(to bottom right, #f7f9fc, #eef1f5);
            padding: 1rem;
        }

        .report-card {
            background-color: #fff;
            border-radius: 12px; /* rounded-xl */
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-lg */
            padding: 24px; /* p-6 */
            transition: all 0.3s;
        }

        .report-card:hover {
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* hover:shadow-xl */
        }

        .card-header-main {
            font-size: 1.875rem; /* text-3xl */
            font-weight: 800; /* font-extrabold */
            color: #1f2937; /* text-gray-800 */
            text-align: center;
            margin-bottom: 2rem; /* mb-8 */
        }

        .card-header-sub {
            font-size: 1.125rem; /* text-lg */
            color: #6b7280; /* text-gray-500 */
            text-align: center;
            margin-top: 0.5rem; /* mt-2 */
        }

        .report-grid {
            display: grid;
            grid-template-columns: repeat(1, minmax(0, 1fr));
            gap: 1.5rem; /* gap-6 */
        }

        @media (min-width: 768px) {
            .report-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 2rem; /* md:gap-8 */
            }
            .card-header-main {
                font-size: 2.25rem; /* md:text-4xl */
                margin-bottom: 3rem; /* md:mb-12 */
            }
        }

        @media (min-width: 1024px) {
            .report-grid {
                grid-template-columns: repeat(4, minmax(0, 1fr));
            }
        }

        .card-computers {
            background-color: #eff6ff; /* bg-blue-50 */
            border-left: 4px solid #3b82f6; /* border-l-4 border-blue-500 */
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            transition: all 0.3s;
        }
        .card-printers {
            background-color: #f0fdf4; /* bg-green-50 */
            border-left: 4px solid #22c55e; /* border-l-4 border-green-500 */
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            transition: all 0.3s;
        }
        .card-laptops {
            background-color: #fefce8; /* bg-yellow-50 */
            border-left: 4px solid #f59e0b; /* border-l-4 border-yellow-500 */
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            transition: all 0.3s;
        }
        .card-tablets {
            background-color: #faf5ff; /* bg-purple-50 */
            border-left: 4px solid #8b5cf6; /* border-l-4 border-purple-500 */
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            transition: all 0.3s;
        }

        .card-flex {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .card-title {
            font-size: 1.25rem; /* text-xl */
            font-weight: 700; /* font-bold */
        }
        .card-title-blue { color: #1e40af; } /* text-blue-900 */
        .card-title-green { color: #14532d; } /* text-green-900 */
        .card-title-yellow { color: #78350f; } /* text-yellow-900 */
        .card-title-purple { color: #5b21b6; } /* text-purple-900 */

        .card-icon {
            height: 2rem; /* h-8 */
            width: 2rem; /* w-8 */
        }
        .icon-blue { color: #3b82f6; } /* text-blue-500 */
        .icon-green { color: #22c55e; } /* text-green-500 */
        .icon-yellow { color: #f59e0b; } /* text-yellow-500 */
        .icon-purple { color: #8b5cf6; } /* text-purple-500 */

        .mt-4 { margin-top: 1rem; }
        .mt-2 { margin-top: 0.5rem; }
        .mt-12 { margin-top: 3rem; }

        .text-4xl { font-size: 2.25rem; }
        .font-extrabold { font-weight: 800; }
        .text-gray-800 { color: #1f2937; }
        .text-sm { font-size: 0.875rem; }
        .text-gray-600 { color: #4b5563; }
        .font-semibold { font-weight: 600; }
        .text-green-600 { color: #16a34a; }
        .text-red-600 { color: #dc2626; }
        .w-full { width: 100%; }
        .h-2-5 { height: 0.625rem; }
        .rounded-full { border-radius: 9999px; }
        .bg-gray-200 { background-color: #e5e7eb; }
        .bg-blue-500 { background-color: #3b82f6; }
        .bg-green-500 { background-color: #22c55e; }
        .bg-yellow-500 { background-color: #f59e0b; }
        .bg-purple-500 { background-color: #8b5cf6; }
        .text-xs { font-size: 0.75rem; }
        .text-gray-400 { color: #9ca3af; }
        .text-gray-900 { color: #111827; }
        .bg-gray-100 { background-color: #f3f4f6; }
        .inline-block { display: inline-block; }
        .shadow-inner { box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); }

    </style>
@stop
{{-- Page content --}}
@section('content')
    <section class="content-header">
        {{--@foreach($university as $unv)--}}
        {{--@endforeach--}}
        <h1><font color='#8b4513'>Maintenance Team Leader </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> dashborad</li>
            <li class="active">ICT Directorates</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>
                ICT Directorate Dirctor
            </h4>
        </div>
        <div class="panel-body">
            <div class="panel-body">
                <div class="bs-example">
                    <ul class="nav nav-tabs" style="margin-bottom: 15px;">
                        <li class="active"><a href="#report" data-toggle="tab">Maintenance Report</a></li>
                    </ul>
                    <div id="myTabContent" class="tab-content">

                        <div class="tab-pane fade active in" id="report">
                            <!-- Maintenance Report Content -->
                            <div class="report-container">
                                <!-- Main container for the report -->
                                <div class="report-card">

                                    <!-- Header section -->
                                    <header>

                                        <p class="card-header-sub">Summary of Maintained Assets</p>
                                    </header>