@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') }}" />
    <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>
        .data-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(3, 100px);
            gap: 10px;
            margin-top: 20px;
        }
        .data-box {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            color: white;
            border-radius: 8px;
        }
        .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'>ICT Directorate</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">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 Director
            </h4>
        </div>
        <div class="panel-body">
            <div class="bs-example">
                <ul class="nav nav-tabs" style="margin-bottom: 15px;">
                    <!-- Tabs if needed -->
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade active in" id="campus">
                        <a href="#">
                        </a>
                    </div>
                </div>

                <div class="tab-pane fade" id="report">
                    <!-- Additional content -->
                </div>
            </div>

            <div class="data-grid">
                <div class="data-box box1"><h3>Number of new Request</h3></div>
                <div class="data-box box2">Number of Approved Requests</div>
                <div class="data-box box3">Complated Tasks</div>
                <div class="data-box box4">Under Maintenance</div>
                <div class="data-box box5">Number of Experts</div>
                <div class="data-box box6">Experts Task Detail</div>
            </div>


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