@push('css')
    <style>
        .modal-xl {
            --bs-modal-width: 1400px;
        }
    </style>
@endpush
<div>
    <x-slot name="title">{{ __('haorsys::haor.subScheme_proposal') }}</x-slot>
    <x-theme::layouts.backend.container>
        <x-slot name="title">{{ __('haorsys::haor.subScheme_proposal') }}</x-slot>


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

            <div class="row">
                <div class="col-lg-12">
                    @ucan('haorsys.sub_scheme_proposal.create')
                        <x-theme::button.success x-data wire:click='basicSchemeModal' class="btn btn-sm ms-2 mb-3 float-end"
                            icon="fa fa-plus">
                            {{ __('theme::default.add') }}
                        </x-theme::button.success>
                    @enducan
                </div>
                <div class="col-lg-12">
                    <table class="table table-striped table-sm" style="width: 100%">
                        <thead style="width: 100%">
                            <tr style="background-color: #dbe3fb;">
                                <th scope="col" style="width: 5%">{{ __('haorsys::default.sn') }}</th>
                                <th scope="col" style="width: 10%">{{ __('haorsys::haor.haor_name') }}</th>
                                <th scope="col" style="width: 5%">{{ __('haorsys::haor.year_end') }}</th>
                                <th scope="col" style="width: 10%">{{ __('haorsys::haor.district') }}</th>
                                <th scope="col" style="width: 17%">{{ __('haorsys::haor.upazila') }}</th>
                                <th scope="col" style="width: 10%">{{ __('haorsys::haor.union') }}</th>
                                <th scope="col" style="width: 5%">{{ __('haorsys::haor.proposed_sub_scheme') }}</th>
                                <th scope="col" style="width: 5%">
                                    {{ __('haorsys::haor.total_work') . '' . __('haorsys::haor.km') }}
                                </th>
                                <th scope="col" style="width: 10%">{{ __('haorsys::haor.soil_volume') }}
                                </th>
                                <th scope="col" style="width: 10%">{{ __('haorsys::haor.initial_demand') }} </th>
                                <th scope="col" style="width: 13%">{{ __('haorsys::default.actions') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($subSchemes as $subScheme)
                                <tr>
                                    <td>{{ $loop->iteration ?? null }}</td>
                                    <td>{{ $subScheme->Haor->haor_name_bn ?? null }}</td>
                                    <td>{{ app()->getLocale() == 'bn' ? numberEnToBn($subScheme->year_end ?? null) : $subScheme->year_end ?? null }}
                                    </td>
                                    <td>{{ $subScheme->districtNames ?? null }}</td>
                                    <td>{{ $subScheme->upazilaNames ?? null }}</td>
                                    <td></td>
                                    <td>{{ app()->getLocale() == 'bn' ? numberEnToBn($subScheme->row_count ?? null) : $subScheme->row_count ?? null }}
                                    </td>
                                    <td>{{ app()->getLocale() == 'bn' ? numberEnToBn($subScheme->total_work_km ?? null) : $subScheme->total_work_km ?? null }}
                                    </td>
                                    <td>{{ app()->getLocale() == 'bn' ? numberEnToBn($subScheme->total_soil_cm ?? null) : $subScheme->total_soil_cm ?? null }}
                                    </td>
                                    <td>{{ app()->getLocale() == 'bn' ? numberEnToBn($subScheme->total_estimated_amount ?? null) : $subScheme->total_estimated_amount ?? null }}
                                    </td>

                                    <td>
                                        @ucan('haorsys.sub_scheme_proposal.update')
                                            <a
                                                href="{{ route('haorsys.member.sub_scheme_list', ['id' => $subScheme->haor_id, 'year_end' => $subScheme->year_end, 'district_name' => $subScheme->districtNames, 'upazila_name' => $subScheme->upazilaNames]) }}">
                                                <x-theme::button.info class="btn-sm" icon="fa fa-eye">
                                                    {{ __('haorsys::haor.view') }}
                                                </x-theme::button.info>
                                            </a>
                                        @enducan
                                        <x-theme::button.warning class="btn-sm">
                                            <i class="fa fa-file"></i> {{ __('haorsys::haor.send_for_approval') }}
                                        </x-theme::button.warning>
                                    </td>
                                </tr>
                            @endforeach

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


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

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

    <x-theme::modal id="basicSchemeModal" class="modalWidth"
        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')" />
                        </div>
                        <div class="col-lg-4">
                            <livewire:haorsys::search.yearends wire:model.live="year_end" name="year_end"
                                :label="__('haorsys::haor.year_end')" />
                        </div>
                        <div class="col-lg-4">
                            <x-theme::input.number wire:model.live="scheme_id" :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-8">
                            <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: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="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 mt-1">
                                    <x-theme::input.text wire:model="union_gcode" :label="__('haorsys::haor.union')" 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')"   require="true"/>
                            </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" />
                            </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.text wire:model="soil_total_cm" :label="__('haorsys::haor.volume_of_soil')" require="true" />
                                </div>
                                <div class="col-lg-4  mt-1">
                                    <x-theme::input.text wire:model="estimated_amount " :label="__('haorsys::haor.estimated_amount')"
                                        require="true" />
                                </div>
                                <div class="col-lg-6">
                                    <div class="col-lg-12">
                                        <x-theme::input.file wire:model="estimate_copy" :label="__('haorsys::haor.estimate_copy')" />
                                    </div>
                                </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-4">

                            <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="3">
                                                <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>{{ __('haorsys::haor.start') . ' ' . __('haorsys::haor.km') }}</th>
                                            <th>{{ __('haorsys::haor.end') . ' ' . __('haorsys::haor.km') }}</th>
                                            <th>{{ __('haorsys::haor.total') }}</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.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>

                                            </tr>
                                        @endfor
                                        <tr>
                                            <th colspan="3">
                                                <x-theme::input.text wire:model="work_total_km"
                                                    placeholder="{{ __('haorsys::haor.work_length') }}"
                                                    require="true" read-only />

                                                {{-- <x-theme::input.text wire:model="demand" :label="__('haorsys::haor.demand')" require="true" read-only /> --}}
                                            </th>
                                        </tr>
                                        <tr align="center" wire:key="demand_row_header">
                                            <th colspan="3">
                                                <x-theme::button.success wire:click="addChainage"
                                                    wire:target='addChainage' class="btn-sm float-end"
                                                    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="basicSubSchemeInfo" wire:target='basicSubSchemeInfo' class="btn-sm"
                icon="fa fa-check">{{ __('theme::default.save') }}
            </x-theme::button.success>
        </x-slot>
    </x-theme::modal>


</div>

@script
    <script>
        $specificDiv = document.getElementById('specificDiv');

        // Add event listener to the specific div
        $specificDiv.addEventListener("keydown", (event) => {
            if (event.keyCode == 83 && (navigator.platform.match("Mac") ? event.metaKey : event.ctrlKey)) {
                event.preventDefault();
                // Livewire.dispatch('schemeStore');
                $wire.$call('schemeStore')
                // $wire.dispatchSelf('schemeStore');
                console.log('ctrl+s')
            }
        }, false);

        Livewire.on('focus_on', (e) => {
            // console.log(e[0]);
            document.getElementById(e[0]).focus();
        })
    </script>
@endscript