@push('css')
    <style>
        .highlight {
            color: #4e46b8;
        }

        .pie-chart {
            background:
                radial-gradient(circle closest-side,
                    white 0,
                    white 41.58%,
                    transparent 41.58%,
                    transparent 66%,
                    white 0),
                conic-gradient(#3c4bf4 0,
                    #3c4bf4 38%,
                    #f28e2c 0,
                    #f28e2c 61%,
                    #ca8df5 0,
                    #ca8df5 77%,
                    #52d364 0,
                    #52d364 100%,
                    #52d364 100%);
            position: absolute;
            width: 340px;
            height: 500px;
            margin: 0;
            /* outline: 1px solid #ccc; */
        }


        .pie-chart h4 {
            position: relative;
            margin: 1rem;
        }


        .pie-chart figcaption {
            position: relative;
            bottom: 1em;
            right: 1em;
            font-size: small;
            text-align: left;

        }

        .pie-chart span:after {
            display: inline-block;
            content: "";
            width: 0.8em;
            height: 0.8em;
            margin-left: 0.4em;
            height: 0.8em;
            border-radius: 0.2em;
            background: currentColor;
        }

        @import url(//fonts.googleapis.com/css?family=Oswald:400);

        .chart {
            position: absolute;
            width: 300px;
            height: 450px;
            top: 32%;
            left: 50%;
            margin: -225px 0 0 -225px;
        }

        .doughnutTip {
            position: absolute;
            min-width: 30px;
            max-width: 300px;
            padding: 5px 15px;
            border-radius: 1px;
            background: rgba(0, 0, 0, .8);
            color: #ddd;
            font-size: 17px;
            text-shadow: 0 1px 0 #000;
            text-transform: uppercase;
            text-align: center;
            line-height: 1.3;
            letter-spacing: .06em;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
            pointer-events: none;

            &::after {
                position: absolute;
                left: 50%;
                bottom: -6px;
                content: "";
                height: 0;
                margin: 0 0 0 -6px;
                border-right: 5px solid transparent;
                border-left: 5px solid transparent;
                border-top: 6px solid rgba(0, 0, 0, .7);
                line-height: 0;
            }
        }

        .doughnutSummary {
            position: absolute;
            top: 50%;
            left: 50%;
            color: #d5d5d5;
            text-align: center;
            text-shadow: 0 -1px 0 #111;
            cursor: default;
        }

        .doughnutSummaryTitle {
            position: absolute;
            top: 50%;
            width: 100%;
            margin-top: -27%;
            font-size: 22px;
            letter-spacing: .06em;
        }

        .doughnutSummaryNumber {
            position: absolute;
            top: 50%;
            width: 100%;
            margin-top: -15%;
            font-size: 55px;
        }

        .chart path:hover {
            opacity: 0.65;
        }
    </style>
    <style>
        .pie-chart2 {
            background:
                radial-gradient(circle closest-side,
                    white 0,
                    white 41.58%,
                    transparent 41.58%,
                    transparent 66%,
                    white 0),
                conic-gradient(#3c4bf4 0,
                    #3c4bf4 38%,
                    #f28e2c 0,
                    #f28e2c 100%,
                    #f09731 100%);
            position: absolute;
            width: 342px;
            height: 500px;
            margin: 0;

        }


        .pie-chart2 h4 {
            position: relative;
            margin: 1rem;
        }


        .pie-chart2 figcaption {
            position: relative;
            bottom: 1em;
            right: 1em;
            font-size: small;
            text-align: left;

        }

        .pie-chart2 span:after {
            display: inline-block;
            content: "";
            width: 0.8em;
            height: 0.8em;
            margin-left: 0.4em;
            height: 0.8em;
            border-radius: 0.2em;
            background: currentColor;
        }

        @import url(//fonts.googleapis.com/css?family=Oswald:400);

        .chart2 {
            position: absolute;
            width: 300px;
            height: 450px;
            top: 32%;
            left: 50%;
            margin: -225px 0 0 -225px;

        }

        .doughnutTip2 {
            position: absolute;
            min-width: 30px;
            max-width: 300px;
            padding: 5px 15px;
            border-radius: 1px;
            background: rgba(0, 0, 0, .8);
            color: #ddd;
            font-size: 17px;
            text-shadow: 0 1px 0 #000;
            text-transform: uppercase;
            text-align: center;
            line-height: 1.3;
            letter-spacing: .06em;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
            pointer-events: none;

            &::after {
                position: absolute;
                left: 50%;
                bottom: -6px;
                content: "";
                height: 0;
                margin: 0 0 0 -6px;
                border-right: 5px solid transparent;
                border-left: 5px solid transparent;
                border-top: 6px solid rgba(0, 0, 0, .7);
                line-height: 0;
            }
        }

        .doughnutSummary2 {
            position: absolute;
            top: 50%;
            left: 50%;
            color: #d5d5d5;
            text-align: center;
            text-shadow: 0 -1px 0 #111;
            cursor: default;
        }

        .doughnutSummaryTitle2 {
            position: absolute;
            top: 50%;
            width: 100%;
            margin-top: -27%;
            font-size: 22px;
            letter-spacing: .06em;
        }

        .doughnutSummaryNumber2 {
            position: absolute;
            top: 50%;
            width: 100%;
            margin-top: -15%;
            font-size: 55px;
        }

        .chart2 path:hover {
            opacity: 0.65;
        }
    </style>
@endpush
<div>
    <x-slot name="title">{{ __('haorsys::haor.progress_report') }}</x-slot>
    <x-theme::layouts.backend.container>
        <x-slot name="title">{{ __('haorsys::haor.progress_report') }}</x-slot>
        <x-theme::layouts.backend.card>
            <x-slot name="card_title">
                <h5 @style('font-weight: bold;') class="text-light text-center"><b>{{ __('haorsys::haor.work_progress') }}</b>
                </h5>
            </x-slot>
            <div class="row">
                <div class="col-xl-3">
                    <x-theme::layouts.backend.card>

                        <div class="row">
                            <x-slot name="subCard_title">
                                <h5 @style('font-weight: bold;') class="text-light">
                                    <b>{{ __('haorsys::haor.fundamental_info') }}</b>
                                </h5>
                            </x-slot>
                            <table class="table bordered-buttum table-sm table-striped">

                                <tr>
                                    <th width="45%">
                                        <h5><b class="highlight"> {{ __('haorsys::haor.scheme_name') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>:<b> 01</b></h5>
                                    </td>

                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.district') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>: <b> সিলেট</b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.upazila') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>: <b> শাল্লা</b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.union') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>: <b> দেয়ারা</b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.pic_num') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>:<b> 02</b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.pic_contract_price') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>:<b> Data needed</b></h5>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </x-theme::layouts.backend.card>

                </div>
                <div class="col-xl-3">
                    <x-theme::layouts.backend.card>

                        <div class="row">
                            <x-slot name="subCard_title">
                                <h5 @style('font-weight: bold;') class="text-light"><b>{{ __('haorsys::haor.work_info') }}</b>
                                </h5>
                            </x-slot>
                            <table class="table bordered-buttum table-sm table-striped">

                                <tr>
                                    <th width="45%">
                                        <h5><b class="highlight"> {{ __('haorsys::haor.scheme_name') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>:<b> 01</b></h5>
                                    </td>

                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.district') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>: <b> সিলেট</b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.upazila') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>: <b> শাল্লা</b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.union') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>: <b> দেয়ারা</b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.pic_num') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>:<b> 02</b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.pic_contract_price') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>:<b> Data needed</b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.allocated_price') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>:<b> Data needed</b></h5>
                                    </td>
                                </tr>


                            </table>
                        </div>

                    </x-theme::layouts.backend.card>

                </div>
                <div class="col-xl-3">
                    <x-theme::layouts.backend.card>

                        <div class="row">
                            <x-slot name="subCard_title">
                                <h5 @style('font-weight: bold;') class="text-light">
                                    <b>{{ __('haorsys::haor.approve_work_info_dam') }}</b>
                                </h5>
                            </x-slot>
                            <table class="table bordered-buttum table-sm table-striped">

                                <tr>
                                    <th width="45%">
                                        <h5><b class="highlight"> {{ __('haorsys::haor.length') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>:<b> 01</b></h5>
                                    </td>

                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.breeches') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>: <b> সিলেট</b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.alternative') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>: <b> শাল্লা</b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.repair') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>: <b> দেয়ারা</b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b
                                                class="highlight">{{ __('haorsys::haor.amount_of_pre_ripened_soil') }}</b>
                                        </h5>
                                    </th>
                                    <td>
                                        <h5>:<b> 02</b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b
                                                class="highlight">{{ __('haorsys::haor.estimated_traffic_volumes') }}</b>
                                        </h5>
                                    </th>
                                    <td>
                                        <h5>:<b> Data needed</b></h5>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </x-theme::layouts.backend.card>

                </div>
                <div class="col-xl-3">
                    <x-theme::layouts.backend.card>

                        <div class="row">
                            <x-slot name="subCard_title">
                                <h5 @style('font-weight: bold;') class="text-light">
                                    <b>{{ __('haorsys::haor.approve_work_info_canal') }}</b>
                                </h5>
                            </x-slot>
                            <table class="table bordered-buttum table-sm table-striped">

                                <tr>
                                    <th width="45%">
                                        <h5><b class="highlight"> {{ __('haorsys::haor.scheme_name') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>:<b> 01</b></h5>
                                    </td>

                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.district') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>: <b> সিলেট</b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.upazila') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>: <b> শাল্লা</b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.union') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>: <b> দেয়ারা</b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.pic_num') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>:<b> 02</b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.pic_contract_price') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>:<b> Data needed</b></h5>
                                    </td>
                                </tr>
                            </table>
                        </div>

                    </x-theme::layouts.backend.card>
                </div>

            </div>
        </x-theme::layouts.backend.card>

        <x-theme::layouts.backend.card>
            <x-slot name="card_title">
                <h5 @style('font-weight: bold;') class="text-light text-center">
                    <b>{{ __('haorsys::haor.work_progress_info') }}</b>
                </h5>
            </x-slot>
            <div class="row">
                <div class="col-xl-1">
                    <x-theme::input.date wire:model="date" class="mb-3" placeholder="Select Date" />
                </div>
            </div>
            <div class="row">
                <div class="col-xl-4">
                    <x-theme::layouts.backend.card>
                        <div class="row">
                            <x-slot name="subCard_title">
                                <h5 @style('font-weight: bold;') class="text-light">
                                    <b>{{ __('haorsys::haor.work_progress_info') . ' ' . __('haorsys::haor.dam') }}</b>
                                </h5>
                            </x-slot>
                            <table class="table bordered-buttum table-sm table-striped">

                                <tr>
                                    <th width="45%">
                                        <h5><b class="highlight"> {{ __('haorsys::haor.length') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>:<b> 01</b></h5>
                                    </td>

                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.breeches') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>: <b> সিলেট</b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.alternative') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>: <b> শাল্লা</b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.repair') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>: <b> দেয়ারা</b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b
                                                class="highlight">{{ __('haorsys::haor.amount_of_pre_ripened_soil') }}</b>
                                        </h5>
                                    </th>
                                    <td>
                                        <h5>:<b> 02</b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b
                                                class="highlight">{{ __('haorsys::haor.estimated_traffic_volumes') }}</b>
                                        </h5>
                                    </th>
                                    <td>
                                        <h5>:<b> Data needed</b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.expense') }}</b>
                                        </h5>
                                    </th>
                                    <td>
                                        <h5>:<b> Data needed</b></h5>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </x-theme::layouts.backend.card>
                    <x-theme::layouts.backend.card>
                        <div class="row">
                            <x-slot name="subCard_title">
                                <h5 @style('font-weight: bold;') class="text-light">
                                    <b>{{ __('haorsys::haor.work_progress_info') . ' ' . __('haorsys::haor.canal') }}</b>
                                </h5>
                            </x-slot>
                            <table class="table bordered-buttum table-sm table-striped">

                                <tr>
                                    <th width="45%">
                                        <h5><b class="highlight"> {{ __('haorsys::haor.length') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>:<b> 01</b></h5>
                                    </td>

                                </tr>

                                <tr>
                                    <th>
                                        <h5><b
                                                class="highlight">{{ __('haorsys::haor.amount_of_pre_ripened_soil') }}</b>
                                        </h5>
                                    </th>
                                    <td>
                                        <h5>:<b> 02</b></h5>
                                    </td>
                                </tr>

                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.expense') }}</b>
                                        </h5>
                                    </th>
                                    <td>
                                        <h5>:<b> Data needed</b></h5>
                                    </td>
                                </tr>
                            </table>
                        </div>

                    </x-theme::layouts.backend.card>

                </div>

                <div class="col-xl-3 ms-5" style="border: 2px solid rgb(133, 133, 133); border-radius:2%">
                    <figure class="pie-chart">
                        <div>
                            <h2 class="mt-2"><b>কাজের অগ্রগতির (বাঁধ)</b></h2>
                        </div>
                        <h3><b id="currentDate"></b></h3>
                        <figcaption style="margin-top: 100%; margin-left:8%;">
                            <div class="row">
                                <div class="col-md-9">
                                    <p><span style="color:#f28e2c"></span> ব্রীচ </p>
                                    <p><span style="color:#5153f1"></span> মেরামত </p>
                                    <p><span style="color:#a339ee"></span> প্রাক্কলিত মাটির পরিমান </p>
                                    <p><span style="color:#52d364"></span> প্রাক্কলিত ট্রাফিক কাজের পরিমান </p>
                                </div>
                                <div class="col-md-3">
                                    <p>25%</p>
                                    <p>45%</p>
                                    <p>15%</p>
                                    <p>15%</p>
                                </div>
                            </div>

                        </figcaption>
                    </figure>
                </div>
                <div class="col-xl-3 ms-2" style="border: 2px solid rgb(133, 133, 133); border-radius:2%">
                    <figure class="pie-chart2">
                        <div>
                            <h2 class="mt-2"><b>কাজের অগ্রগতির (খাল)</b></h2>
                        </div>
                        <h3><b id="currentDate"></b></h3>
                        <figcaption style="margin-top: 115%; margin-left:8%;">
                            <div class="row">
                                <div class="col-md-10">

                                    <p><span style="color:#f28e2c"></span> মেরামত </p>
                                    <p><span style="color:#4343f8"></span> প্রাক্কলিত মাটির পরিমান </p>

                                </div>
                                <div class="col-md-2">
                                    <p>45%</p>
                                    <p>15%</p>

                                </div>
                            </div>

                        </figcaption>
                    </figure>
                </div>
            </div>
        </x-theme::layouts.backend.card>
        <x-theme::layouts.backend.card>
            <x-slot name="card_title">
                <h5 @style('font-weight: bold;') class="text-light text-center"><b>{{ __('haorsys::haor.allocation_info') }}</b>
                </h5>
            </x-slot>
            <div class="row">
                <div class="col-xl-12">
                    <div class="row">

                        <table class="table bordered-buttum table-sm table-striped">

                            <tr>
                                <th width="20%">
                                    <h5><b class="highlight"> {{ __('haorsys::haor.last_date_work') }}</b></h5>
                                </th>
                                <td>
                                    <h5>:<b> 01</b></h5>
                                </td>

                            </tr>
                            <tr>
                                <th>
                                    <h5><b class="highlight">{{ __('haorsys::haor.work_improvement') }}</b></h5>
                                </th>
                                <td>
                                    <h5>: <b> সিলেট</b></h5>
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    <h5><b class="highlight">{{ __('haorsys::haor.total_allocation') }}</b></h5>
                                </th>
                                <td>
                                    <h5>: <b> শাল্লা</b></h5>
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    <h5><b class="highlight">{{ __('haorsys::haor.expense') }}</b></h5>
                                </th>
                                <td>
                                    <h5>: <b> দেয়ারা</b></h5>
                                </td>
                            </tr>
                        </table>

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

        </x-theme::layouts.backend.card>
    </x-theme::layouts.backend.container>

</div>
@push('js')
    <script>
        const bengaliMonths = [
            'জানুয়ারি', 'ফেব্রুয়ারি', 'মার্চ', 'এপ্রিল',
            'মে', 'জুন', 'জুলাই', 'আগস্ট',
            'সেপ্টেম্বর', 'অক্টোবর', 'নভেম্বর', 'ডিসেম্বর'
        ];

        function toBengaliNumber(number) {
            var bengaliDigits = ['০', '১', '২', '৩', '৪', '৫', '৬', '৭', '৮', '৯'];
            var numberString = number.toString();
            var bengaliNumber = '';
            for (var i = 0; i < numberString.length; i++) {
                var digit = parseInt(numberString[i]);
                bengaliNumber += bengaliDigits[digit];
            }
            return bengaliNumber;
        }

        var currentDate = new Date();

        var formattedDate = toBengaliNumber(currentDate.getDate()) + ' ' +
            bengaliMonths[currentDate.getMonth()] + ', ' +
            toBengaliNumber(currentDate.getFullYear());

        document.getElementById('currentDate').innerText = formattedDate;
    </script>
@endpush