@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-3 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 Clients - Blue -->
                                <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">
                                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                                    <line x1="9" y1="3" x2="9" y2="21"></line>
                                    <line x1="15" y1="3" x2="15" y2="21"></line>
                                    <line x1="3" y1="9" x2="21" y2="9"></line>
                                    <line x1="3" y1="15" x2="21" y2="15"></line>
                                </svg>

                            </span>


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

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

        <div class="col-xl-3 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-3 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-3 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="">Highest Case-Handling Clients</h5>
                </div>
                <div class="widget-content">
                    <div id="top-clients-bar-chart"></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 Priority</h5>
                </div>
                <div class="widget-content">
                    <div id="case-priority-heatmap" 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="">Top Clients by Total Claim Amount</h5>
                </div>
                <div class="widget-content">
                    <div id="top-claim-chart"></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="">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>Client Name</th>
                            <th>Case Title</th>
                            <th>Hearing Date</th>
                            <th>Location</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Client A</td>
                            <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>Client B</td>
                            <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>Client C</td>
                            <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>Client D</td>
                            <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>Client E</td>
                            <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 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>

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