@extends('layouts.app')

@section('styles')
    {{-- <link href="https://designreset.com/cork/html/src/plugins/src/apex/apexcharts.css" rel="stylesheet" type="text/css">
<link href="https://designreset.com/cork/html/src/assets/css/light/dashboard/dash_1.css" rel="stylesheet" type="text/css" />
<link href="https://designreset.com/cork/html/src/assets/css/dark/dashboard/dash_1.css" rel="stylesheet" type="text/css" /> --}}


    {{-- @vite(['resources/scss/light/assets/components/modal.scss']) --}}
    <link rel="stylesheet" href="{{ asset('plugins/src/apex/apexcharts.css') }}">
    @vite(['resources/scss/light/assets/dashboard/dash_1.scss'])
    @vite(['resources/scss/dark/assets/dashboard/dash_1.scss'])
    @vite(['resources/scss/light/assets/dashboard/dash_2.scss'])
    @vite(['resources/scss/dark/assets/dashboard/dash_2.scss'])
    {{-- <link href="../src/plugins/src/apex/apexcharts.css" rel="stylesheet" type="text/css">
<link href="../src/assets/css/light/dashboard/dash_1.css" rel="stylesheet" type="text/css" />
<link href="../src/assets/css/dark/dashboard/dash_1.css" rel="stylesheet" type="text/css" /> --}}
@endsection

@section('content')
    <div class="row layout-top-spacing">



        <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
            <div class="widget widget-card-five c-p-b-8">
                <div class="widget-content">
                    <div class="account-box">

                        <div class="info-box">

                            <span>
                                <!-- Total Cases - Orange -->
                                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none"
                                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                    class="feather feather-folder" style="color: #FF9800;" viewBox="0 0 24 24">
                                    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 2h9a2 2 0 0 1 2 2z" />
                                </svg>

                            </span>

                            <div class="">
                                <h5>Total Active Cases</h5>
                                <p class="text-warning c-f-s-20">320</p>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
            <div class="widget widget-card-five c-p-b-8">
                <div class="widget-content">
                    <div class="account-box">

                        <div class="info-box">
                            <span>
                                <!-- Pending Approvals - Red -->
                                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none"
                                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                    class="feather feather-folder-minus" style="color: #F44336;" viewBox="0 0 24 24">
                                    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 2h9a2 2 0 0 1 2 2z" />
                                    <line x1="9" y1="14" x2="15" y2="14" />
                                </svg>
                            </span>

                            <div class="">
                                <h5>Pending Approvals</h5>
                                <p class="text-danger c-f-s-20">8</p>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
            <div class="widget widget-card-five c-p-b-8">
                <div class="widget-content">
                    <div class="account-box">

                        <div class="info-box">
                            <span>
                                <!-- Total Claims - Green -->
                                <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none"
                                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                    style="color: #2196F3;" viewBox="0 0 24 24">
                                    <path d="M6 3h12M6 8h12M6 21c0-3 6-3 6-9 0-2-2-3-4-3" />
                                </svg>

                            </span>

                            <div class="">
                                <h5>Total Claim Amount</h5>
                                <p class="text-primary c-f-s-20">36</p>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>


        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
            <div class="widget widget-chart-two">
                <div class="widget-heading">
                    <h5 class="">Case Status Distribution</h5>
                </div>
                <div class="widget-content">
                    <div id="case-status" class=""></div>
                </div>
            </div>
        </div>
        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
            <div class="widget widget-chart-two">
                <div class="widget-heading">
                    <h5 class="">Case Type</h5>
                </div>
                <div class="widget-content">
                    <div id="case-type-donut-chart" class=""></div>
                </div>
            </div>
        </div>
        <div class="col-xl-12 col-lg-6 col-md-6 col-sm-12 col-12 layout-spacing">
            <div class="widget widget-chart-two">
                <div class="widget-heading">
                    <h5 class="">Upcoming 30 days Hearings</h5>
                </div>
                <div class="widget-content">
                    <table id="upcoming-hearings" class="table table-striped dt-table-hover p-2" style="width:100%">
                        <thead>
                            <tr>
                                <th>Case Title</th>
                                <th>Hearing Date</th>
                                <th>Location</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Land Dispute</td>
                                <td>2025-09-01</td>
                                <td>High Court A</td>
                                <td><span class="badge bg-warning text-dark">Pending</span></td>
                            </tr>
                            <tr>
                                <td>Divorce Settlement</td>
                                <td>2025-09-05</td>
                                <td>Family Court B</td>
                                <td><span class="badge bg-success">Scheduled</span></td>
                            </tr>
                            <tr>
                                <td>Criminal Defense</td>
                                <td>2025-09-10</td>
                                <td>Criminal Court 1</td>
                                <td><span class="badge bg-danger">On Hold</span></td>
                            </tr>
                            <tr>
                                <td>Corporate Litigation</td>
                                <td>2025-09-12</td>
                                <td>Civil Court 3</td>
                                <td><span class="badge bg-warning text-dark">Pending</span></td>
                            </tr>
                            <tr>
                                <td>Tenant Dispute</td>
                                <td>2025-09-11</td>
                                <td>Magistrate Court</td>
                                <td><span class="badge bg-secondary">Active</span></td>
                            </tr>
                        </tbody>

                    </table>
                </div>
            </div>
        </div>


    </div>

    </div>
@endsection

@section('scripts')
    <script src="{{ asset('plugins/src/apex/apexcharts.min.js') }}"></script>
    @vite(['resources/js/dashboard/dash.js'])
    {{-- @vite(['resources/js/dashboard/dash_2.js']) --}}
@endsection