@extends('layouts.app')
@section('title', 'Dashboard')
@section('content')
        <div class="container-fluid">
        <input type="hidden" name="service_data" id="service_data" class="service_data" value="{{ $count_serviceDts }}" />
        <div class="row px-3">
            <div class="col-md-6">
                <div class="card">
                    {{-- // DASHBOARD DATERANGE --}}
                    <div class="card-body pb-0 my-0">
                        <div class="row p-2 servicerequestschart">
                            <div class="col-md-8">
                                <h4 class="card_heading">Service Requests</h4>
                            </div>
                            <div class="col-md-4 float-end sr_date_filter_section">
                                <input type="text" id="sr_date_filter" name="sr_date_filter"
                                    class="form-control srDatepick sr_date_filter" value="" onkeydown="return false">
                            </div>
                        </div>
                        <div class="row align-items-center servicerequestschartdata d-none">
                            <div class="col-md-3">
                                <div class="card" style="border: 1px solid #ffffff;">
                                    <div class="card-body py-0 my-0">
                                        <div class="row">
                                            <div class="card border-0" style="background-color:#FFF1E4;">
                                                <div class="d-flex py-1 align-items-center">
                                                    <label class="rounded cancelledDt text-white p-1 fw-bold"><span
                                                            id="open_count"></span></label>
                                                    <label class="ps-2 cancelledTxt fw-bold">OPEN</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="card border-0" style="background-color:#EEFEFF;">
                                                <div class="d-flex py-1 align-items-center">
                                                    <label class="rounded inprocessDt text-white p-1 fw-bold"><span
                                                            id="inprocess_count"></span></label>
                                                    <label class="ps-2 inprocessTxt fw-bold">IN PROCESS</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="card border-0" style="background-color:#FFFBEC;">
                                                <div class="d-flex py-1 align-items-center">
                                                    <label class="rounded onholdDt text-white p-1 fw-bold"><span
                                                            id="onhold_count"></span></label>
                                                    <label class="ps-2 onholdTxt fw-bold">ON HOLD</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="card border-0" style="background-color:#F0FFF0;">
                                                <div class="d-flex py-1 align-items-center">
                                                    <label class="rounded closedDt text-white p-1 fw-bold"><span
                                                            id="closed_count"></span></label>
                                                    <label class="ps-2 closedTxt fw-bold">COMPLETED</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="card border-0" style="background-color:#ffe7e7;">
                                                <div class="d-flex py-1 align-items-center">
                                                    <label class="rounded cancelledCountDt text-white p-1 fw-bold"><span
                                                            id="cancelled_count"></span></label>
                                                    <label class="ps-2 cancelledCountTxt fw-bold">CANCELLED</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-9">
                                <div class="card" style="border: 1px solid #ffffff;">
                                    <div class="card-body">
                                        <div class="row">
                                            <div id="chart" style="height: 200px; width: 90%;margin-top:-40px;">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div class="row mt-3">
                                            <div class="d-flex flex-wrap">
                                                <div class="form-check form-check-inline">
                                                    <i class="mdi mdi-checkbox-blank-circle cancelledTxt"></i>
                                                    <label class="form-check-label fw-bold cancelledTxt">OPEN</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <i class="mdi mdi-checkbox-blank-circle inprocessTxt"></i>
                                                    <label class="form-check-label fw-bold inprocessTxt">IN
                                                        PROCESS</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <i class="mdi mdi-checkbox-blank-circle onholdTxt"></i>
                                                    <label class="form-check-label fw-bold onholdTxt">ON HOLD</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <i class="mdi mdi-checkbox-blank-circle closedTxt"></i>
                                                    <label class="form-check-label fw-bold closedTxt">COMPLETED</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <i class="mdi mdi-checkbox-blank-circle cancelledCountTxt"></i>
                                                    <label
                                                        class="form-check-label fw-bold cancelledCountTxt">CANCELLED</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <h5 class="nodata d-none" style="text-align:center;margin-top:9px;margin-bottom:9px;">No Data
                            Available For The Selected Date Range...</h5>

                    </div>
                    {{-- // DASHBOARD DATERANGE --}}
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    {{-- <div class="card-body mb-2">
                        <div class="row px-2 pt-1">
                            <div class="col-md-6 mt-2">
                                <h4 class="card_heading" style="margin-bottom:15px; display: inline;">Invoices</h4>
                                <span class="mb-0 ms-1" style="font-size: 12px; font-weight: normal; display: inline;">(Last 30 days)</span>
                            </div>
                            <div class="col-md-6