@push('css')
    <style>
        body {
            font-family: 'Arial'
        }

        a {

            text-decoration: none;
        }

        .made-by {
            text-align: center;
            padding-top: 50px;
            color: #896746;
        }

        .modal-xl {
            --bs-modal-width: 1500px;
        }

        .file-wrapper {
            width: 50px;
            height: 50px;
            border: 2px solid gray;
            /* position: relative; */
            /* margin: 2px; */
            align: center;
            margin-top: -2px;
        }

        .file-wrapper::after {
            font-family: "Font Awesome 5 Free";
            content: " ";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: max-content;
            height: max-content;
            display: block;
            max-height: 35px;
            font-size: 35px;
            font-weight: bolder;
            color: gray;
        }

        .file-wrapper-upload {
            font-family: "Font Awesome 5 Free";
            content: "\f110";
        }

        .file-wrapper-uploading {
            font-family: "Font Awesome 5 Free";
            content: "\f110";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: max-content;
            height: max-content;
            display: block;
            max-height: 35px;
            font-size: 35px;
            font-weight: bolder;
            color: gray;
        }

        .file-wrapper-uploaded {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            bottom: 35px;
            width: max-content;
            height: max-content;
            font-size: 0.75em;
            color: gray;
        }

        .file-wrapper:hover:after {
            font-size: 63px;
        }

        .file-wrapper .close-btn {
            display: none;
        }

        input[type="file"] {
            position: absolute;
            width: 35px;
            height: 35px;
            opacity: 0;
            z-index: 99999;
            cursor: pointer;
        }

        .file-set {
            background-size: cover;
            background-repeat: no-repeat;
            color: transparent;
            padding: 10px;
            border-width: 0px;
        }

        .file-set:hover {
            transition: all 0.5s ease-out;
            filter: brightness(110%);
        }

        .file-set:before {
            color: transparent;
        }

        .file-set:after {
            color: transparent;
        }

        .file-set .close-btn {
            position: absolute;
            width: 35px;
            height: 35px;
            display: block;
            background: #000;
            color: #fff;
            top: 0;
            right: 0;
            font-size: 25px;
            text-align: center;
            line-height: 1.5;
            cursor: pointer;
            opacity: 0.8;
        }

        .file-set>input {
            pointer-events: none;
        }

        @media (max-width: 443px) {
            .file-wrapper {
                width: 150px;
                height: 150px;
                border: 5px solid gray;
                position: relative;
                margin: 15px;
                margin-top: 10px;
            }
        }

        .card-img-top {

            width: 50%;
            margin-left: 27%;

        }

        .p {
            margin-left: 28%;
        }

        h5 {
            font-weight: 615;
        }
    </style>
@endpush

<div>
    <x-slot name="title">সর্বজনীন পিআইসির অনুরোধ</x-slot>

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

        <x-theme::layouts.backend.card style="margin-top: 2%">
            <div class="col-lg-12">
                <div class="row">
                    <div class="col-lg-12">

                        <x-theme::layouts.backend.card>
                            <x-slot name="card_title">
                                <h5 @style('margin:0px') class="text-light">
                                    <b> পিআইসির তথ্য</b>
                                </h5>
                            </x-slot>
                            <div class="row">

                                <div class="col-lg-2">
                                    <livewire:haorsys::search.haors wire:model="haor_id" name="haor_id"
                                        label="হাওরের নাম" read-only/>
            
                                </div>
                                <div class="col-lg-2">
                                    <livewire:haorsys::search.yearends wire:model="year_end" name="year_end"
                                        label="অর্থ বছর" />
                                </div>
                                <div class="col-lg-4">
                                    <livewire:haorsys::search.subschemes wire:model.live="sub_scheme_id"
                                        name="sub_scheme_id" label="উপ-প্রকল্প" :haor_id="$haor_id" :year_end="$year_end"
                                        :key="'sub_scheme_id'" />
                                </div>

                                <div class="col-lg-2">
                                    <x-theme::input.number wire:model.live="no_of_member" label="সদস্য"
                                        require="true" />
                                </div>
                                {{-- <div class="col-lg-2 mt-1">
                                    <x-theme::input.text wire:model="pic_no" label="পিআইসি নং" require="true" />
                                </div> --}}
                                <div class="col-lg-2">
                                    <x-theme::input.text wire:model="soil_total_cm" label="মাটির পরিমাণ (ঘঃমিঃ)"
                                        require="true" read-only />
                                </div>
                                <div class="col-lg-2 mt-3">
                                    <x-theme::input.text wire:model="work_total_km" label="মোট কাজ " require="true"
                                        read-only />
                                </div>

                                <div class="col-lg-2 mt-3">
                                    <x-theme::input.number wire:model.live="estimated_amount" label="প্রাক্কালিন চাহিদা"
                                        require="true" readonly />
                                </div>
                                {{-- <div class="col-lg-2 mt-2">
                                    <x-theme::input.number wire:model.live="approved_amount" label="অনুমোদিত অর্থ"
                                        require="true" />
                                </div> --}}
                                {{-- <div class="col-lg-2 mt-2">
                                    <x-theme::input.date wire:model.live="work_start" label="কাজ শুরু " />
                                </div>
                                <div class="col-lg-2 mt-2">
                                    <x-theme::input.date wire:model.live="work_end" label="কাজ শেষ" />
                                </div> --}}

                                <div class="col-lg-2 mt-3">
                                    <livewire:user::search.districts wire:model.live="district_gcode"
                                        name="district_gcode" :key="'district_gcode'" label="জেলা" readonly/>
                                </div>
                                <div class="col-lg-2 mt-3">
                                    <livewire:user::search.upazilas wire:model="upazila_gcode" name="upazila_gcode"
                                        label="উপজেলা" :district_id="isset($district_gcode) ? $district_gcode : null" :key="'upazila_gcode'" readonly/>
                                </div>
                                <div class="col-lg-2 mt-3">
                                    {{-- <x-theme::input.text wire:model="union_gcode" label="ইউনিয়ন" require="true" read-only/> --}}
                                <livewire:user::search.unions wire:model="union_gcode" name="union_gcode"
                                label="আপনার  ইউনিয়ন" :upazila_id="isset($upazila_gcode) ? $upazila_gcode : null" :key="'union_gcode'" />
                                </div>

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

                </div>
                <div class="row mt-3 {{ $no_of_member > 0 ? '' : 'd-none' }}">
                    <div class="col-lg-12">
                        <div class="row">
                            <div class="col-lg-12">
                                <x-theme::layouts.backend.card>
                                    <x-slot name="card_title">
                                        <h5 @style('margin:0px') class="text-light">
                                            <b> সদস্যদের তথ্য</b>
                                        </h5>
                                    </x-slot>
                                    <table class="table table-striped table-sm">
                                        <thead style="background-color: rgb(117, 193, 255); color:#fff;">
                                            <tr align="center">
                                                <th> নাম</th>
                                                <th> পিআইসিতে পদবী</th>
                                                <th> জাতীয় পরিচয়পত্র</th>
                                                <th> মোবাইল নম্বর</th>
                                                <th> ঠিকানা</th>
                                                <th> পেশা</th>
                                                <th> ছবি</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @for ($i = 0; $i < $no_of_member; $i++)
                                                <tr>
                                                    <td> <x-theme::input.text wire:model="name.{{ $i }}"
                                                            require="true" placeholder="নাম লিখুন" />
                                                    </td>
                                                    <td> <x-theme::input.select
                                                            wire:model="pic_designation.{{ $i }}"
                                                            require="true" :options="options('pic.designation')" />
                                                    </td>
                                                       <td> <x-theme::input.number wire:model="nid.{{ $i }}"
                                                            require="true" placeholder="জাতীয় পরিচয়পত্র নম্বর" />
                                                    </td>
                                                    <td> <x-theme::input.number wire:model="mobile.{{ $i }}"
                                                            require="true" placeholder="মোবাইল নম্বর লিখুন" />
                                                    </td>
                                                 
                                                    <td> <x-theme::input.text wire:model="union.{{ $i }}"
                                                            require="true" placeholder="ঠিকানা লিখুন" />
                                                    </td>
                                                    <td> <x-theme::input.text
                                                            wire:model="occupation.{{ $i }}" require="true"
                                                            placeholder="পেশা লিখুন" />
                                                    </td>
                                                    <td>
                                                        <div class="file-wrapper mb-2">
                                                            <input class="text-center" type="file"
                                                                wire:model="member_photo.{{ $i }}"
                                                                name="upload-img" accept="image/*" />

                                                            @error('photo')
                                                                <div class="invalid">{{ $message }}</div>
                                                            @else
                                                                @if (isset($member_photo[$i]) && $member_photo[$i])
                                                                    <img src="{{ $member_photo[$i]->temporaryUrl() }}"
                                                                        id="display-image" alt="image" width="46px"
                                                                        height="46px" />
                                                                @elseif(isset($member_photo_preview[$i]) && $member_photo_preview[$i])
                                                                    <img src="data:image/jpeg;base64,{{ base64_encode($member_photo_preview[$i]) }}"
                                                                        id="display-image" alt="image" width="46px"
                                                                        height="46px" />
                                                                @endif
                                                            @enderror

                                                        </div>
                                                    </td>
                                                </tr>
                                            @endfor
                                        </tbody>
                                    </table>
                                    <x-theme::button.success wire:click="picStore" wire:target='picStore'
                                        class="btn-sm float-end" icon="fa fa-check">{{ __('theme::default.save') }}
                                    </x-theme::button.success>
                                </x-theme::layouts.backend.card>

                            </div>

                        </div>
                    </div>


                </div>

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