@push('css')
    <style>
        .th {
            border: 1px solid rgb(197, 219, 255);
            border-collapse: collapse;
            height: 5px;
        }
    </style>
@endpush
<div>
    <x-slot name="title">{{ __('haorsys::haor.subScheme_proposal_list') }}</x-slot>
    <x-theme::layouts.backend.container>
        <x-slot name="title">{{ __('haorsys::haor.subScheme_proposal_list') }}</x-slot>

        <x-theme::layouts.backend.card>
            <x-slot name="card_title">
                <h5 @style('font-weight: bold;') class="text-light"><b>{{ __('haorsys::haor.subScheme_proposal_list') }}</b></h5>
            </x-slot>
            <div class="row">
                <div class="col-lg-12" style="background-color: #d4e5ff;">
                    <div class="row p-4">
                        <div class="col-lg-3">
                            <h5> <b> {{ __('haorsys::haor.haor_name') }} :{{ $Haor->haor_name_bn ?? null }}</b></h5>
                        </div>
                        <div class="col-lg-3">
                            <h5> <b> {{ __('haorsys::haor.year_end') }} :
                                    {{ app()->getLocale() == 'bn' ? numberEnToBn($year_end) : $year_end }}</b></h5>
                        </div>
                        <div class="col-lg-3">
                            <h5> <b> {{ __('haorsys::haor.district') }} : {{ $district_name }}</b></h5>
                        </div>
                        <div class="col-lg-3">
                            <h5> <b> {{ __('haorsys::haor.upazila') }} : {{ $upazila_name }}</b></h5>
                        </div>
                        <div class="col-lg-3 mt-3">
                            <h5>
                                <b>
                                    {{ __('haorsys::haor.total_work') . '' . __('haorsys::haor.km') }} :
                                    {{ $Haor && $Haor->sub_scheme_sum_work_total_km
                                        ? (app()->getLocale() == 'bn'
                                            ? numberEnToBn($Haor->sub_scheme_sum_work_total_km)
                                            : $Haor->sub_scheme_sum_work_total_km)
                                        : '' }}
                                </b>
                            </h5>
                        </div>

                        <div class="col-lg-3 mt-3">
                            <h5>
                                <b>
                                    {{ __('haorsys::haor.soil_volume') }} :
                                    {{ $Haor && $Haor->sub_scheme_sum_soil_total_cm
                                        ? (app()->getLocale() == 'bn'
                                            ? numberEnToBn($Haor->sub_scheme_sum_soil_total_cm)
                                            : $Haor->sub_scheme_sum_soil_total_cm)
                                        : '' }}
                                </b>
                            </h5>
                        </div>

                        <div class="col-lg-3 mt-3">
                            <h5>
                                <b>
                                    {{ __('haorsys::haor.initial_demand') }} :
                                    {{ $Haor && $Haor->sub_scheme_sum_estimated_amount
                                        ? (app()->getLocale() == 'bn'
                                            ? numberEnToBn($Haor->sub_scheme_sum_estimated_amount)
                                            : $Haor->sub_scheme_sum_estimated_amount)
                                        : '' }}
                                </b>
                            </h5>
                        </div>


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

        </x-theme::layouts.backend.card>
        <x-theme::layouts.backend.card x-data="{ isCardRefreshed: false }"
            @refresh-card.window="isCardRefreshed = !isCardRefreshed">
            <x-slot name="card_header">
                @ucan('haorsys.sub_scheme_list.create')
                    <x-theme::button.success wire:click='subSchemeModal' class="btn btn-sm ms-2 ml-2" icon="fa fa-plus">
                        {{ __('theme::default.add') }}
                    </x-theme::button.success>
                @enducan
            </x-slot>
            <table align="center" wire:key="proposed_pic_table" style="width: 100%; margin-top:2%;">
                <tr align="center" style="background-color: #408DE0; color:aliceblue; " wire:key="proposed_pic_header"
                    style="width: 100%">
                    <th style="width: 5%" class="th">{{ __('haorsys::haor.serial_no') }}</th>
                    <th style="width:18%" class="th"> {{ __('haorsys::haor.job_description') }}</th>
                    <th style="width: 8%" class="th"> {{ __('haorsys::haor.type_work') }}</th>
                    <th style="width: 7%" class="th"> {{ __('haorsys::haor.zila') }}</th>
                    <th style="width: 7%" class="th"> {{ __('haorsys::haor.upazila') }}</th>
                    <th style="width: 8%" class="th"> {{ __('haorsys::haor.union') }}</th>
                    <th style="width: 7%" class="th"> {{ __('haorsys::haor.chainage_start') }}(কিঃমিঃ)</th>
                    <th style="width: 7%" class="th"> {{ __('haorsys::haor.chainage_end') }}(কিঃমিঃ)</th>
                    <th style="width: 5%" class="th"> {{ __('haorsys::haor.amount_work') }}(কিঃমিঃ)</th>
                    <th style="width: 5%" class="th"> {{ __('haorsys::haor.amount_soil') }}(ঘঃমিঃ)</th>
                    <th style="width: 5%" class="th"> {{ __('haorsys::haor.preliminary_demand') }}(লক্ষ টাকা)</th>
                    <th style="width: 10%" class="th"> {{ __('haorsys::haor.remarks') }}</th>
                    <th style="width: 8%" class="th"> {{ __('haorsys::haor.action') }}</th>
                </tr>
                <tr align="center" style="background-color: #408DE0; color:aliceblue;"
                    wire:key="proposed_pic_header_two">
                    <td class="th">১</td>
                    <td class="th">২</td>
                    <td class="th">৩</td>
                    <td class="th">৪</td>
                    <td class="th">৫</td>
                    <td class="th">৬</td>
                    <td class="th">৭</td>
                    <td class="th">৮</td>
                    <td class="th">৯</td>
                    <td class="th">১০</td>
                    <td class="th">১১</td>
                    <td class="th">১২</td>
                    <td class="th">১৩</td>
                </tr>
                @foreach ($Haor->SubScheme ?? [] as $subScheme)
                    <tr align="center" wire:key="demand-row-new-{{ $subScheme->sub_scheme_id }}" id="specificDiv">
                        <td class="th">
                            {{ app()->getLocale() == 'bn' ? numberEnToBn($loop->iteration) : $loop->iteration }}</td>
                        <td class="th">{{ $subScheme->description ?? null }}</td>
                        <td class="th">{{ $subScheme->scheme_type ?? null }}</td>
                        {{-- <td class="th">{{ $Haor->HaorLocation?->pluck('District.district_bn')->unique()->implode(', ') }}</td>
                        <td class="th">{{ $Haor->HaorLocation?->pluck('Upazila.upazila_bn')->unique()->implode(', ') }}</td> --}}
                        <td class="th">{{ $subScheme?->District?->district_bn ?? '' }}</td>

                        <td class="th">
                            {{ $subScheme?->Upazila?->upazila_bn ?? '' }}
                        </td>
                        <td class="th">{{ $subScheme?->Union?->union_bn ?? '' }}</td>
                        <td class="th">
                            @foreach ($subScheme->SubSchemeChainage as $chainage)
                                <p style="margin-bottom: -1px;">
                                    {{ app()->getLocale() == 'bn' ? numberEnToBn($chainage->chainage_from) : $chainage->chainage_from }}
                                </p>
                            @endforeach
                        </td>
                        <td class="th">
                            @foreach ($subScheme->SubSchemeChainage as $chainage)
                                <p style="margin-bottom: -1px;">
                                    {{ app()->getLocale() == 'bn' ? numberEnToBn($chainage->chainage_to) : $chainage->chainage_to }}
                                </p>
                            @endforeach
                        </td>
                        <td class="th">
                            {{ app()->getLocale() == 'bn' ? numberEnToBn($subScheme->work_total_km ?? null) : $subScheme->work_total_km ?? null }}
                        </td>
                        <td class="th">
                            {{ app()->getLocale() == 'bn' ? numberEnToBn($subScheme->soil_total_cm ?? null) : $subScheme->soil_total_cm ?? null }}
                        </td>
                        <td class="th">
                            {{ app()->getLocale() == 'bn' ? numberEnToBn($subScheme->estimated_amount ?? null) : $subScheme->estimated_amount ?? null }}
                        </td>
                        <td class="th">{{ $subScheme->comments ?? null }}</td>
                        <td class="th">
                            @ucan('haorsys.sub_scheme_list.update')
                                <x-theme::button.success wire:click='subSchemeModal({{ $subScheme->sub_scheme_id }})'
                                    :key="'sub-scheme-update' . $subScheme->sub_scheme_id" class="btn-sm" icon="fa fa-edit">
                                    {{ __('haorsys::default.edit') }}
                                </x-theme::button.success>
                            @enducan
                        </td>

                    </tr>
                @endforeach

            </table>
            {{ $subSchemes->links() }}

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

        <x-theme::modal id="subSchemeModal"
            title="{{ __('haorsys::haor.sub_scheme') . ' ' . __('haorsys::default.create') }}" size="xl">
            <div class="row">
                <div class="col-lg-12">
                    <x-theme::layouts.backend.card>
                        <div class="row">
                            <x-slot name="subCard_title">
                                <h5 class="text-light ms-2 mt-2 mb-2" style="margin: 0px">
                                    <strong>{{ __('haorsys::haor.fundamental_info') }}</strong>
                                </h5>
                            </x-slot>
                            <div class="col-lg-4">
                                <livewire:haorsys::search.haors wire:model.live="haor_id" name="haor_id"
                                    :label="__('haorsys::haor.haor_name')" disabled />
                            </div>

                            <div class="col-lg-4">
                                <livewire:haorsys::search.yearends wire:model.live="year_end" name="year_end"
                                    :label="__('haorsys::haor.year_end')" disabled />
                            </div>
                            <div class="col-lg-4" class="mt-2">
                                <x-theme::input.text wire:model.live="scheme_id" :label="__('haorsys::haor.scheme')" require="true" />
                                {{-- <x-theme::input.text wire:model.live="scheme_name" :label="__('haorsys::haor.scheme')" require="true" /> --}}
                            </div>
                        </div>

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

                    <x-theme::layouts.backend.card>
                        <div class="row">
                            <x-slot name="subCard_title">
                                <h5 class="text-light ms-2 mt-2 mb-2" style="margin: 0px">
                                    <strong>{{ __('haorsys::haor.sub_scheme_info') }}</strong>
                                </h5>
                            </x-slot>
                            <div class="col-lg-6">
                                <div class="row">
                                    <div class="col-lg-4">
                                        <x-theme::input.text wire:model="sub_scheme_name" :label="__('haorsys::haor.sub_scheme_name')"
                                            require="true" />
                                    </div>
                                    <div class="col-lg-4">
                                        <x-theme::input.text wire:model="sub_scheme_name_bn" :label="__('haorsys::haor.sub_scheme_name_bn')"
                                            require="true" />
                                    </div>
                                    <div class="col-lg-4">
                                        <x-theme::input.text wire:model="description" :label="__('haorsys::haor.work_description')"
                                            require="true" />
                                    </div>
                                    {{-- <div class="col-lg-4 mt-1">
                                        <x-theme::input.text wire:model="scheme_type" :label="__('haorsys::haor.scheme_type')"
                                            require="true" />
                                    </div> --}}
                                    <div class="col-lg-4">

                                        <livewire:haorsys::search.scheme-type wire:model="scheme_type"
                                            :label="__('haorsys::haor.scheme_type')" name="scheme_type" require="true" />

                                        {{-- <x-theme::input.text wire:model="scheme_type" :label="__('haorsys::haor.scheme_type')"
                                            require="true" /> --}}
                                    </div>
                                    <div class="col-lg-4">
                                        <livewire:user::search.districts wire:model.live="district_gcode"
                                            name="district_gcode" :key="'district_gcode'" :label="__('haorsys::haor.district')" />
                                    </div>
                                    <div class="col-lg-4">
                                        <livewire:user::search.upazilas wire:model.live="upazila_gcode"
                                            name="upazila_gcode" :label="__('haorsys::haor.upazila')" :district_id="isset($district_gcode) ? $district_gcode : null"
                                            :key="'upazila_gcode'" />
                                    </div>
                                    <div class="col-lg-4">
                                        <livewire:user::search.unions wire:model="union_gcode" name="union_gcode"
                                            :upazila_id="isset($upazila_gcode) ? $upazila_gcode : null" :district_id="isset($district_gcode) ? $district_gcode : null" :label="__('haorsys::haor.union')" />
                                    </div>

                                    <div class="col-lg-4  mt-1">
                                        <x-theme::input.number wire:model="soil_total_cm" :label="__('haorsys::haor.volume_of_soil')"
                                            require="true" />
                                    </div>
                                    <div class="col-lg-4  mt-1">
                                        <x-theme::input.number wire:model="estimated_amount " :label="__('haorsys::haor.estimated_amount')"
                                            require="true" />
                                    </div>
                                    <div class="col-lg-6">
                                        <x-theme::input.textarea wire:model="comments" :label="__('haorsys::haor.comment')"
                                            require="true" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">

                                <div class="row">
                                    <div class="col-lg-12">
                                        <table align="center" style="width:100%;">
                                            <tr wire:key="demand_row_header"
                                                style="background-color: #0077B6; color:aliceblue;">
                                                <th colspan="6">
                                                    <h5 class="mt-1 ms-1">{{ __('haorsys::haor.chainage') }}</h5>
                                                </th>
                                            </tr>
                                            <tr align="center" wire:key="demand_row_header"
                                                style="background-color: #e0ebf7; color:black;">
                                                <th style="width:25% !important">{{ __('haorsys::haor.scheme_type') }}
                                                </th>
                                                <th>{{ __('haorsys::haor.volume_of_soil') }}</th>
                                                <th>{{ __('haorsys::haor.start') . ' ' . __('haorsys::haor.km') }}</th>
                                                <th>{{ __('haorsys::haor.end') . ' ' . __('haorsys::haor.km') }}</th>
                                                <th>{{ __('haorsys::haor.total') }}</th>
                                                <th>{{ __('haorsys::default.actions') }}</th>
                                            </tr>
                                            @for ($i = 0; $i < $no_of_chainage; $i++)
                                                <tr align="center" wire:key="demand_row_header.{{ $i }}">
                                                    <th>
                                                        {{-- <x-theme::input.number wire:model="scheme.{{ $i }}"
                                                            require="true" /> --}}
                                                        <x-theme::input.select wire:model="scheme.{{ $i }}"
                                                            :options="[
                                                                'নতুন' => 'নতুন',
                                                                'চলমান' => 'চলমান',
                                                                'সম্পাদিত' => 'সম্পাদিত',
                                                            ]" require="true" />


                                                        {{-- <livewire:haorsys::search.scheme-type
                                                            wire:model="scheme.{{ $i }}" name="scheme.{{ $i }}"
                                                            require="true" /> --}}

                                                    </th>
                                                    <th><x-theme::input.number
                                                            wire:model="volume_of_soil.{{ $i }}"
                                                            require="true" /></th>
                                                    <th><x-theme::input.number
                                                            wire:model.live="chainage_from.{{ $i }}"
                                                            require="true" /></th>
                                                    <th><x-theme::input.number
                                                            wire:model.live="chainage_to.{{ $i }}"
                                                            require="true" /></th>
                                                    <th><x-theme::input.number
                                                            wire:model="total_chainage.{{ $i }}"
                                                            require="true" disable />
                                                    </th>
                                                    <th>
                                                        <x-theme::button.success class="btn-danger btn-sm"
                                                            wire:click="removeChainage({{ $i }})"><i
                                                                class="fa fa-trash"></i></x-theme::button.success>
                                                    </th>
                                                </tr>
                                            @endfor
                                            <tr>
                                                <th colspan="6">
                                                    <x-theme::input.text wire:model="work_total_km"
                                                        placeholder="{{ __('haorsys::haor.work_length') }}"
                                                        require="true" read-only />
                                                </th>
                                            </tr>
                                            <tr align="center" wire:key="demand_row_header">
                                                <th colspan="6">
                                                    <x-theme::button.success
                                                        wire:click="addChainage({{ $i }})"
                                                        wire:target='addChainage' class="btn-sm float-end"
                                                        :key="'addChainage' . $i" icon="fa fa-plus">
                                                        {{ __('theme::default.add') }}
                                                    </x-theme::button.success>
                                                </th>
                                            </tr>
                                        </table>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </x-theme::layouts.backend.card>
                </div>
            </div>
            <x-slot name="footer">
                <x-theme::button.success wire:click="storeSubScheme" wire:target='storeSubScheme' class="btn-sm"
                    icon="fa fa-check">{{ __('theme::default.save') }}
                </x-theme::button.success>
            </x-slot>
        </x-theme::modal>
    </x-theme::layouts.backend.container>
</div>