@extends('layouts.app')

@section('title', 'Dashboard')

@push('styles')
    <style>
        .table-responsive {
            max-height: 410px;
            overflow-y: auto;
        }

        .table-responsive thead th {
            position: sticky;
            top: 0;
            background: #2f4356;
            z-index: 2;
        }
    </style>
@endpush

@section('content')
    <div style="background-color: #f8f9fa; padding: 10px; border-radius: 8px;">
        <h3>Dashboard</h3>
    </div>

    <div class="container mt-4">
        <div class="row mb-4">
            <div class="col-12">
                <div class="table-responsive">
                    <table class="table table-striped table-hover text-center">
                        <thead class="table-dark">
                        <tr>
                            <th>Sr.#</th>
                            <th>Service Center</th>
                            <th>Total Cases</th>
                            <th>Open</th>
                            <th>Closed</th>
                            <th>Resolved</th>
                            <th>In Progress</th>
                            <th>Happy Calls Called</th>
                            <th>Happy Calls Not Satisfied</th>
                        </tr>
                        </thead>
                        <tbody>
                        @php($i = 1)
                        @foreach($service_centers as $key => $value)
                            <tr>
                                <td>{{ $i++ }}</td>
                                <td>{{ $value }}</td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-4">
                <div class="card p-3">
                    {!! $nationwideComplaintsChart->container() !!}
                </div>
            </div>

            <div class="col-4">
                <div class="card p-3">
                    {!! $inProcessReasonChart->container() !!}
                </div>
            </div>

            <div class="col-4">
                <div class="card p-3">
                    {!! $zoneWiseEscalationChart->container() !!}
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-6">
                <div class="card p-3">
                    {!! $tenRUCaseChart->container() !!}
                </div>
            </div>
            <div class="col-6">
                <div class="card p-3">
                    {!! $tenEscalationReasonsChart->container() !!}
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-12">
                <div class="card p-3">
                    {!! $serviceCenterDetailChart->container() !!}
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-6">
                <div class="card p-3">
                    {!! $fiveEscalationChart->container() !!}
                </div>
            </div>
            <div class="col-6">
                <div class="card p-3">
                    {!! $tenTechRUCasesChart->container() !!}
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-12">
                <div class="card p-3">
                    {!! $twentyTechRUCasesChart->container() !!}
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-4">
                <div class="card p-3">
                    {!! $nationalVSRUCaseChart->container() !!}
                </div>
            </div>
            <div class="col-8">
                <div class="card p-3">
                    {!! $SCVSRUCasesChart->container() !!}
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    {!! $nationwideComplaintsChart->script() !!}
    {!! $inProcessReasonChart->script() !!}
    {!! $zoneWiseEscalationChart->script() !!}
    {!! $tenRUCaseChart->script() !!}
    {!! $tenEscalationReasonsChart->script() !!}
    {!! $serviceCenterDetailChart->script() !!}
    {!! $fiveEscalationChart->script() !!}
    {!! $tenTechRUCasesChart->script() !!}
    {!! $twentyTechRUCasesChart->script() !!}
    {!! $nationalVSRUCaseChart->script() !!}
    {!! $SCVSRUCasesChart->script() !!}
@endsection