@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: 300px;
            height: 380px;
            margin-left: 40px;
            text-align: center;
            /* 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;
        }

        .image-input-container {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .image-input-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
        }

        .image-input {
            display: none;
            /* Hidden since we click on the wrapper to trigger it */
        }

        .image-placeholder {
            width: 72px;
            height: 72px;
            border: 2px solid #ccc;
            border-radius: 5px;
        }

        .image-preview {
            width: 72px;
            height: 72px;
            object-fit: cover;
        }

        .add-image-btn {
            align-self: flex-start;
            margin-top: 40px;
            padding: 5px 8px;
            font-size: 12px;
        }

        .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: 300px;
            height: 380px;
            margin-left: 40px;
            text-align: center;

        }


        .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> <b
                        id="currentDate"></b>)
                </h5>
            </x-slot>
            <div class="row" style="min-height: 520px;">
                <div class="col-xl-4 me-5">
                    <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="32%">
                                        <h5><b class="highlight"> {{ __('haorsys::haor.haor_name') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>:<b> {{ $Pic->Haor->haor_name_bn }}</b></h5>
                                    </td>

                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.sub_scheme_name') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>: <b> {{ $Pic->SubScheme->description }}</b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.pic_no') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>: <b> {{ $Pic->pic_no }}</b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.year_end') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>:
                                            <b>{{ app()->getLocale() == 'bn' ? numberEnToBn($Pic->year_end) : $Pic->year_end }}</b>
                                        </h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.district') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>: <b> {{ $district_name }}</b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.upazila') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>: <b> {{ $upazila_name }}</b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.union') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>: <b>{{ $union_name }}</b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.pic_president') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>: <b>
                                                {{ $Pic->PicMember->where('pic_designation', 1)->first()->name ?? '' }}</b>
                                        </h5>
                                    </td>
                                </tr>

                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.estimated_amount') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>:<b>
                                                {{ app()->getLocale() == 'bn' ? numberEnToBn($Pic->estimated_amount) : $Pic->estimated_amount }}</b>
                                        </h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.approved_amount') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>:<b> {{ app()->getLocale() == 'bn' ? numberEnToBn($Pic->approved_amount) : $Pic->approved_amount }}
                                                %</b></h5>
                                    </td>
                                </tr>


                            </table>
                        </div>

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

                </div>
                <div class="col-xl-7 ms-4 me-4" wire:ignore
                    style="border: 2px solid rgb(133, 133, 133); border-radius:2%">
                    <div>
                        <canvas id="myChart"></canvas>
                    </div>
                </div>

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

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

            <x-slot name="card_title">
                <div class="row">

                    <div class="col-lg-11 ">
                        <h5 @style('font-weight: bold;') class="text-light text-center">
                            <b>{{ __('haorsys::haor.work_progress_info') }}</b>
                        </h5>
                    </div>
                    <div class="col-lg-1" style="text-align: right;">
                        @ucan('haorsys.progress_report.create')
                            <x-theme::button.success x-data
                                @click="$dispatch('callEventFunc',{callName:'workProgressModal'})" class="ml-2"
                                class="btn btn-sm ms-2 " icon="fa fa-plus">
                                {{ __('theme::default.add') }}
                            </x-theme::button.success>
                        @enducan
                    </div>
                </div>
            </x-slot>
            <div class="row">
                {{-- <div class="col-lg-12">
                    <table class="table table-striped" style="width: 100%">
                        <thead>
                            <tr style="background-color: #deeeff ; width: 100%">
                                <th scope="col" style="width: 10%">{{ __('haorsys::default.sn') }}</th>
                                <th scope="col" style="width: 10%">{{ __('haorsys::default.date') }}</th>
                                <th scope="col" style="width: 15%">পরিদর্শক</th>
                                <th scope="col" style="width: 10%">বাস্তব (%)</th>
                                <th scope="col" style="width: 10%">আর্থিক (লক্ষ টাকা)</th>
                                <th scope="col" style="width: 20%">মন্তব্য</th>
                                <th scope="col" style="width: 25%">মিডিয়া</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($Pic->PicProgress as $progress)
                                <tr>
                                    <th>{{ $loop->iteration }}</th>
                                    <td>{{ $progress->verified_date }}</td>
                                    <td>SEO</td>
                                    <td>{{ $progress->implement_percentage }} %</td>
                                    <th>{{ $progress->payment_percentage }} %</th>
                                    <td>{{ $progress->comment }}</td>
                                    <td> <img
                                            src="data:image/jpeg;base64,{{ base64_encode($Pic->Haor->HaorImage->first()->image) }}"
                                            alt="" height="80px" width="90px"></td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div> --}}
                @foreach ($Pic->PicProgress as $progress)
                    <div class="col-xl-4">
                        <div class="card">
                            <div class="card-body" style="background-color: #eaeaea">

                                <h4 class="card-title" style="color: #000">{{ __('haorsys::default.date') }} :
                                    <span>{{ $progress->verified_date->format('d-m-Y') }}</span>
                                </h4>
                                <div class="row">
                                    <div class="col-lg-8">
                                        <b>{{ __('haorsys::haor.visited_by') }}:</b> SEO
                                        <p><b>{{ __('haorsys::haor.comment') }}:</b> {{ $progress->comment }}</p>
                                    </div>
                                    <div class="col-lg-4">

                                        <div class="avatar-group">
                                            @foreach ($progress->Files as $files)
                                                <div class="avatar-group-item">
                                                    <a href="data:image/jpeg;base64,{{ $files->files }}"
                                                        class="d-inline-block" target="_blank">
                                                        <img src="data:image/jpeg;base64,{{ $files->files }}"
                                                            alt="" class="rounded-circle avatar-xs">
                                                    </a>
                                                </div>
                                            @endforeach

                                        </div>

                                    </div>
                                </div>

                                <div class="">
                                    <h6><b>{{ __('haorsys::haor.work_progress') }}</b></h6>
                                    <div class="progress">

                                        <div class="progress-bar progress-bar-striped progress-bar-animated"
                                            role="progressbar" aria-valuenow="{{ $progress->implement_percentage }}"
                                            aria-valuemin="0" aria-valuemax="100"
                                            style="width: {{ $progress->implement_percentage }}%">
                                            {{ $progress->implement_percentage }}%</div>

                                    </div>
                                </div>
                                <div class="mt-2">
                                    <h6><b>{{ __('haorsys::haor.payment_allocation') }}</b></h6>
                                    <div class="progress">


                                        <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"
                                            role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"
                                            style="width: {{ $progress->payment_percentage }}%">
                                            {{ $progress->payment_percentage }}%</div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach

            </div>

        </x-theme::layouts.backend.card>
    </x-theme::layouts.backend.container>
    <x-theme::modal id="ProgressModal" size="lg" title="{{ __('haorsys::haor.work_progress') }}">
        <form wire:submit='save'>
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-6">
                        <x-theme::input.text wire:model='implement_percentage' :label="__('haorsys::haor.work_progress')"
                            placeholder="Enter Work Progress" />
                    </div>
                    <div class="col-md-6">
                        <x-theme::input.text wire:model='payment_percentage' :label="__('haorsys::haor.payment_allocation')"
                            placeholder="Enter Payment" />
                    </div>
                    <div class="col-md-6">
                        <x-theme::input.textarea wire:model='comment' :label="__('haorsys::haor.comment')"
                            placeholder="Enter Your Comments" />
                    </div>
                    <div class=" col-md-6 image-input-container">
                        @for ($index = 0; $index < $imageFields; $index++)
                            <div class="image-input-wrapper"
                                onclick="document.getElementById('file-input-{{ $index }}').click()">
                                <input type="file" id="file-input-{{ $index }}"
                                    wire:model="file.{{ $index }}" class="image-input" accept="image/*"
                                    style="display: none;" />
                                @if (isset($file[$index]))
                                    <img src="{{ $file[$index]->temporaryUrl() }}" alt="image"
                                        class="image-preview" />
                                @else
                                    <div class="image-placeholder"></div>
                                @endif
                            </div>
                        @endfor
                        <x-theme::button.success class="btn btn-sm ms-2 add-image-btn" wire:click="addImageField"
                            icon="fa fa-plus">
                            {{ __('theme::default.add') }}
                        </x-theme::button.success>
                    </div>

                </div>
            </div>
        </form>
        <x-slot name="footer">
            <x-theme::button.success wire:click="workProgressStore" wire:target='workProgressStore' class="btn-sm"
                icon="fa fa-check">{{ __('theme::default.save') }}
            </x-theme::button.success>
        </x-slot>
    </x-theme::modal>
</div>
@push('js')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

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

        // var Pics = @json($Pic);
        // console.log(@json($Pic));


        let year = @json($year_end);
        var verifiedDate = @json($verified_date);
        var implementPercentage = @json($implemented);
        var paymentPercentage = @json($paid);

        // let year = $year_end;
        // let year = Pics[0];

        console.log(year);

        // Function to get month names between start and end dates
        function getMonthLabels(dates) {
            const monthNames = ["Jan", "Feb", "March", "April", "May", "June",
                "July", "Aug", "Sep", "October", "Nov", "Dec"
            ];

            let labels = dates.map(date => {
                let currentDate = new Date(date);
                return monthNames[currentDate.getMonth()] + ' ' + currentDate.getDate();
            });

            return labels;
        }

        // Generate month labels from verified dates
        var monthLabels = getMonthLabels(verifiedDate);


        // Example data (replace with your actual data)
        let workData = implementPercentage; // Example data for work (replace with actual data)
        let amountData = paymentPercentage; // Example data for amount (replace with actual data)

        // Create the chart
        var ctx = document.getElementById('myChart').getContext('2d');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: monthLabels,
                datasets: [{
                    label: 'Work %',
                    data: workData,
                    backgroundColor: 'rgba(54, 162, 235, 0.5)', // Blue color with transparency
                    borderColor: 'rgba(54, 162, 230, 1)', // Solid blue border
                    borderWidth: 1
                }, {
                    label: 'Amount %',
                    data: amountData,
                    backgroundColor: 'rgba(255, 99, 132, 0.5)', // Red color with transparency
                    borderColor: 'rgba(255, 100, 132, 1)', // Solid red border
                    borderWidth: 1
                }]
            },
            options: {
                plugins: {
                    title: {
                        display: true,
                        text: 'Year: ' + year, // Chart title
                        font: {
                            size: 16 // Font size for the title
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        min: 0, // Minimum value for the y-axis
                        max: 100, // Maximum value for the y-axis
                        ticks: {
                            callback: function(value) {
                                return value + '%'; // Format y-axis labels as percentages
                            }
                        }
                    }
                },
                tooltips: {
                    callbacks: {
                        label: function(tooltipItem, data) {
                            let datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
                            return datasetLabel + ': ' + tooltipItem.yLabel + '%'; // Append % to tooltip labels
                        }
                    }
                }
            }
        });
    </script>
@endpush
<script>
    document.addEventListener('livewire:load', function() {
        document.querySelectorAll('.image-input-wrapper').forEach(wrapper => {
            wrapper.addEventListener('click', function() {
                this.querySelector('input[type="file"]').click();
            });
        });
    });
</script>