@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">{{ __('haorsys::haor.pic_list') }}</x-slot>
    <x-slot name="header">{{ __('haorsys::haor.pic_list') }}</x-slot>
    <x-theme::layouts.backend.container>
        <x-slot name="title">{{ __('haorsys::haor.pic_list') }}</x-slot>

        <x-theme::layouts.backend.card>
            {{-- <x-slot name="card_header"> --}}
            <div class="float-end" style="width: 10%">
                <livewire:haorsys::search.yearends wire:model.live="year_end" name="year_end"
                    placeholder="{{ __('haorsys::dashboard.select_year') }}" />
            </div>
            {{-- </x-slot> --}}
            <livewire:haorsys::datatable.pic-list-table :yearpass="$years" :key="$years" />
        </x-theme::layouts.backend.card>
        <div class="mt-4 text-lg font-semibold text-center text-blue-600">
            {{-- Selected Year: {{ $years }} --}}
        </div>
    </x-theme::layouts.backend.container>

    <x-theme::modal id="picModal"
        title="{{ __('theme::default.pic') }} {{ $pic_id ? __('theme::default.update') : __('theme::default.create') }}"
        size="fullscreen">
        <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> {{ __('theme::haor.pic_information') }}</b>
                            </h5>
                        </x-slot>
                        <div class="row">

                            <div class="col-lg-3 mt-1">
                                <x-theme::input.text wire:model="pic_name" :label="__('theme::default.name')" require="true" />
                            </div>
                            <div class="col-lg-3 mt-1">
                                <x-theme::input.text wire:model="pic_name_bn" :label="__('haorsys::haor.name_bn')" require="true" />
                            </div>
                            <div class="col-lg-3">
                                <livewire:haorsys::search.haors wire:model.live="haor_id" name="haor_id"
                                    :label="__('haorsys::haor.haor_name')" />
                            </div>
                            <div class="col-lg-3 mt-1">
                                <x-theme::input.text wire:model="address" :label="__('theme::haor.address')" />
                            </div>
                            <div class="col-lg-1 mt-2">
                                <x-theme::input.number wire:model.live="no_of_member" :label="__('haorsys::haor.no_of_member')"
                                    require="true" />
                            </div>
                            <div class="col-lg-2 mt-2">
                                <x-theme::input.date wire:model.live="expire_date" :label="__('theme::haor.validity')" />
                            </div>
                            <div class="col-lg-2 mt-2">
                                <x-theme::input.text wire:model="chainage_from" require="true" :placeholder="__('theme::haor.chainage_from')"
                                    :label="__('theme::haor.chainage_from')" />
                            </div>
                            <div class="col-lg-2 mt-2">
                                <x-theme::input.text wire:model="chainage_to" require="true" :placeholder="__('theme::haor.chainage_to')"
                                    :label="__('theme::haor.chainage_to')" />
                            </div>
                            <div class="col-lg-2 mt-2">
                                <x-theme::input.text wire:model="pic_volume" :label="__('theme::haor.volume')" require="true" />
                            </div>
                            <div class="col-lg-2 mt-2">
                                <x-theme::input.text wire:model="pic_unit" :label="__('theme::haor.unit')" require="true" />
                            </div>

                            <div class="col-lg-1 mt-2">
                                <x-theme::input.select wire:model="status" :label="__('theme::setting.status')" :options="options('haor.status')" />
                            </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> {{ __('theme::haor.member_information') }}</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>{{ __('theme::default.name') }}</th>
                                            <th>{{ __('theme::haor.pic_designation') }}</th>
                                            <th>{{ __('theme::haor.mobile_no') }}</th>
                                            <th>{{ __('theme::haor.address') }}</th>
                                            <th> {{ __('theme::haor.occupation') }}</th>
                                            <th>{{ __('theme::haor.image') }}</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="__('theme::default.name')" />
                                                </td>
                                                <td> <x-theme::input.select
                                                        wire:model="pic_designation.{{ $i }}" require="true"
                                                        :options="options('pic.designation')" />
                                                </td>
                                                <td> <x-theme::input.text wire:model="mobile.{{ $i }}"
                                                        require="true" :placeholder="__('theme::haor.mobile_no')" />
                                                </td>
                                                <td> <x-theme::input.text
                                                        wire:model="member_address.{{ $i }}" require="true"
                                                        :placeholder="__('theme::haor.address')" />
                                                </td>
                                                <td> <x-theme::input.text wire:model="occupation.{{ $i }}"
                                                        require="true" :placeholder="__('theme::haor.occupation')" />
                                                </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::layouts.backend.card>

                        </div>

                    </div>
                </div>


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

    {{-- <x-theme::modal id="demandModal" title="{{ __('theme::haor.demand') . ' ' . __('theme::default.create') }}"
        size="lg">
        <div class="row">
            <div class="col-xl-12">
                <x-theme::layouts.backend.card>

                    <div class="row">
                        <x-slot name="card_title">
                            <h6 @style('font-weight: bold; margin:0px;') class="text-light"><b>{{ __('haorsys::haor.fundamental_info') }}</b>
                            </h6>
                        </x-slot>
                        <div class="col-md-6">
                            <table class="table table-sm bordered-buttum  table-striped">
                                <tr>
                                    <th width="26%">
                                        <b class="highlight">{{ __('haorsys::haor.haor_name') }}</b>
                                    </th>
                                    <td>
                                        : <b>{{ $haor_name }}</b>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <b class="highlight"> {{ __('haorsys::haor.pic_name') }}</b>
                                    </th>
                                    <td>
                                        : <b>{{ $pic_name_bn ? $pic_name_bn : $pic_name }}</b>
                                    </td>

                                </tr>
                                <tr>
                                    <th>
                                        <b class="highlight">{{ __('haorsys::haor.pic_address') }}</b>
                                    </th>
                                    <td>
                                        : <b>{{ $address }}</b>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <b class="highlight">{{ __('haorsys::haor.no_of_pic_member') }}</b>
                                    </th>
                                    <td>
                                        : <b>{{ $no_of_member }}</b>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-sm bordered-buttum  table-striped">
                                <tr>
                                    <th width="30%">
                                        <b class="highlight">{{ __('haorsys::haor.chainage_from') }}</b>
                                    </th>
                                    <td>
                                        : <b>{{ $chainage_from }}</b>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <b class="highlight"> {{ __('haorsys::haor.chainage_to') }}</b>
                                    </th>
                                    <td>
                                        : <b>{{ $chainage_to }}</b>
                                    </td>

                                </tr>
                                <tr>
                                    <th>
                                        <b class="highlight">{{ __('haorsys::haor.volume') }}</b>
                                    </th>
                                    <td>
                                        : <b>{{ $pic_volume }}</b>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <b class="highlight">{{ __('haorsys::haor.unit') }}</b>
                                    </th>
                                    <td>
                                        : <b>{{ $pic_unit }}</b>
                                    </td>
                                </tr>
                            </table>
                        </div>

                    </div>

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

            </div>

            <div class="col-xl-8">

                <x-theme::layouts.backend.card>
                    <x-slot name="card_title">
                        <h6 @style('font-weight: bold; margin:0px;') class="text-light"><b>{{ __('haorsys::haor.Pic_member_info') }}</b></h6>

                    </x-slot>
                    <div class="row">
                        <div class="col-md-6">
                            <img src="{{ isset($secretary->image) ? asset_storage($secretary->image) : '' }}"
                                height="90px" width="100px" class="card-img-top" alt="...">

                            <h6 class="p mt-2"><b>{{ __('haorsys::default.name') }}:
                                    {{ isset($secretary->name) ? $secretary->name : '' }}</b></h6>
                            <h6 class="p"><b>{{ __('haorsys::haor.occupation') }}
                                    :{{ isset($secretary->occupation) ? $secretary->occupation : '' }}</b></h6>
                            <h6 class="p"><b>{{ __('haorsys::haor.designation') }} :
                                    {{ isset($secretary->pic_designation) ? $secretary->pic_designation : '' }}</b>
                            </h6>

                        </div>
                        <div class="col-md-6">
                            <img src="{{ isset($member_secretary->image) ? asset_storage($member_secretary->image) : '' }}"
                                height="90px" class="card-img-top" alt="...">
                            <h6 class="p mt-2">
                                <b>{{ __('haorsys::default.name') }}:{{ isset($member_secretary->name) ? $member_secretary->name : '' }}</b>
                            </h6>
                            <h6 class="p"><b>{{ __('haorsys::haor.occupation') }} :
                                    {{ isset($member_secretary->occupation) ? $member_secretary->occupation : '' }}</b>
                            </h6>
                            <h6 class="p"><b>{{ __('haorsys::haor.designation') }} :
                                    {{ isset($member_secretary->pic_designation) ? $member_secretary->pic_designation : '' }}</b>
                            </h6>
                        </div>
                    </div>
                </x-theme::layouts.backend.card>

            </div>
            <div class="col-xl-4">
                <x-theme::layouts.backend.card>
                    <x-slot name="card_title">
                        <h6 @style('font-weight: bold; margin:0px;') class="text-light"><b>{{ __('haorsys::haor.demand') }}</b></h6>
                    </x-slot>
                    <x-theme::input.text wire:model="demand" :label="__('haorsys::haor.demand')" require="true" />
                    <x-theme::button.success wire:click="demandStore" wire:target="demandStore" class="btn-sm mt-3"
                        icon="fa fa-check">{{ __('theme::default.submit') }}
                    </x-theme::button.success>
                </x-theme::layouts.backend.card>
            </div>

        </div>
    </x-theme::modal>

    <x-theme::modal id="allocateModal"
        title="{{ __('theme::haor.allocate') . ' ' . __('haorsys::default.provide') }}" size="lg">
        <div class="row">
            <div class="col-xl-6">
                <x-theme::layouts.backend.card>

                    <div class="row">
                        <x-slot name="card_title">
                            <h6 @style('font-weight: bold;') class="text-light"><b>{{ __('haorsys::haor.fundamental_info') }}</b>
                            </h6>
                        </x-slot>
                        <table class="table bordered-buttum table-sm table-striped">
                            <tr>
                                <th width="28%">
                                    <h6><b class="highlight">{{ __('haorsys::haor.haor_name') }}</b></h6>
                                </th>
                                <td>
                                    <h6>: <b>{{ $pic_name_bn ? $pic_name_bn : $pic_name }}</b></h6>
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    <h6><b class="highlight"> {{ __('haorsys::haor.pic_name') }}</b></h6>
                                </th>
                                <td>
                                    <h6>: <b>{{ $pic_name_bn ? $pic_name_bn : $pic_name }}</b></h6>
                                </td>

                            </tr>
                            <tr>
                                <th>
                                    <h6><b class="highlight">{{ __('haorsys::haor.pic_address') }}</b></h6>
                                </th>
                                <td>
                                    <h6>: <b>{{ $address }}</b></h6>
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    <h6><b class="highlight">{{ __('haorsys::haor.no_of_pic_member') }}</b></h6>
                                </th>
                                <td>
                                    <h6>: <b>{{ $no_of_member }}</b></h6>
                                </td>
                            </tr>
                        </table>
                    </div>

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

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

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

                            <tr>
                                <th width="22%">
                                    <h6><b class="highlight"> {{ __('haorsys::haor.work_name') }}</b></h6>
                                </th>
                                <td>
                                    <h6>:<b> Data needed</b></h6>
                                </td>

                            </tr>
                            <tr>
                                <th>
                                    <h6><b class="highlight">{{ __('haorsys::haor.scheme_description') }}</b></h6>
                                </th>
                                <td>
                                    <h6>: <b> বাধেঁর ভাঙ্গা (ব্রীচ) বন্ধকরন এবং নকশা মোতাবেক বাধঁ পুনরাকৃতিকরণ</b></h6>
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    <h6><b class="highlight">{{ __('haorsys::haor.scheme_quantity') }}</b></h6>
                                </th>
                                <td>
                                    <h6>: <b> 2</b></h6>
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    <h6><b class="highlight">{{ __('haorsys::haor.chainage_from') }}</b></h6>
                                </th>
                                <td>
                                    <h6>: <b> 0.1</b></h6>
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    <h6><b class="highlight">{{ __('haorsys::haor.chainage_to') }}</b></h6>
                                </th>
                                <td>
                                    <h6>: <b> 0.5</b></h6>
                                </td>
                            </tr>

                        </table>
                    </div>

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

            </div>
            <div class="col-xl-6">

                <x-theme::layouts.backend.card>
                    <x-slot name="card_title">
                        <h6 @style('font-weight: bold;') class="text-light"><b>{{ __('haorsys::haor.Pic_member_info') }}</b></h6>

                    </x-slot>
                    <div class="row">
                        <div class="col-md-6">
                            <img src="{{ isset($secretary->image) ? asset_storage($secretary->image) : '' }}"
                                height="100px" width="100px" class="card-img-top" alt="...">

                            <h6 class="p mt-2"><b>{{ __('haorsys::default.name') }}:
                                    {{ isset($secretary->name) ? $secretary->name : '' }}</b>
                            </h6>
                            <h6 class="p"><b>{{ __('haorsys::haor.occupation') }} :
                                    {{ isset($secretary->occupation) ? $secretary->occupation : '' }}</b></h6>

                        </div>
                        <div class="col-md-6">
                            <img src="{{ isset($member_secretary->image) ? asset_storage($member_secretary->image) : '' }}"
                                height="100px" class="card-img-top" alt="...">
                            <h6 class="p mt-2"><b>{{ __('haorsys::default.name') }}:
                                    {{ isset($member_secretary->name) ? $member_secretary->name : '' }}</b>
                            </h6>
                            <h6 class="p"><b>{{ __('haorsys::haor.occupation') }}
                                    :{{ isset($member_secretary->occupation) ? $member_secretary->occupation : '' }}</b>
                            </h6>
                        </div>
                    </div>
                </x-theme::layouts.backend.card>

            </div>
            <div class="col-xl-3">
                <x-theme::input.text wire:model="demand" :label="__('haorsys::haor.demand')" require="true" read-only />
            </div>
            <div class="col-xl-3">
                <x-theme::input.text wire:model="allocation" :label="__('haorsys::haor.allocate')" require="true" />
            </div>
            <div class="col-xl-4">
                <x-theme::button.success wire:click="allocationStore" wire:target="allocationStore"
                    class="btn-sm ms-2" icon="fa fa-check" style="margin-top: 14%">{{ __('theme::default.submit') }}
                </x-theme::button.success>
            </div>
        </div>
    </x-theme::modal> --}}
</div>

@push('js')
    <script>
        $(document).ready(function() {
            $('#myModal').modal('show');
        });
    </script>
@endpush