@push('css')
    <style>
     .modal-xl {
            --bs-modal-width: 1140px;
        }

        table thead {
            background-color: #4c79cd;
            color: white;
        }


        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }


        .image-big-list-item.active {
            display: block;
        }

        .image-big-list-item {
            display: none;
            margin: 0 auto;
            text-align: left;
        }


        .image-small-list-item img {
            border: 3px solid #fff;
        }

        .image-small-list-item.active img {
            border: 3px solid #ddd;
        }

        .image-small-list-item {
            display: inline-block;
            margin: 0 3px;
        }

        .page-container {
            width: 960px;
            margin: 0 auto;
        }

        .highlight {
            color: #4e46b8;
        }

      
        a {
            text-decoration: none;
        }

        @import url(https://fonts.googleapis.com/css?family=Lato:400,600,700);

        .snip1527 {
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
            color: #ffffff;
            float: left;
            font-family: 'SolaimanLipi', sans-serif !important;
            font-size: 16px;
            margin: 10px 1% 0 0%;
            max-width: 310px;
            min-width: 250px;
            overflow: hidden;
            position: relative;
            text-align: left;
            width: 100%;
        }

        .snip1527 * {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-transition: all 0.25s ease;
            transition: all 0.25s ease;
        }

        .snip1527 img {
            max-width: 100%;
            vertical-align: top;
            position: relative;
        }

        .snip1527 figcaption {
            /* width: 307px; */
            padding: 25px 20px 25px;
            position: absolute;
            bottom: 0;
            z-index: 1;
        }

        .snip1527 figcaption:before {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: ;
            content: '';
            background: -moz-linear-gradient(90deg, #115ca1 0%, #52abff 100%, #52abff 100%);
            background: -webkit-linear-gradient(90deg, #115ca1 0%, #52abff 100%, #52abff 100%);
            background: linear-gradient(90deg, #115ca1 0%, #52abff 100%, #52abff 100%);
            opacity: 0.8;
            z-index: -1;
        }

        .snip1527 .date {
            background-color: #fff;
            border-radius: 50%;
            color: #032266;
            font-size: 18px;
            font-weight: 700;
            min-height: 38px;
            min-width: 38px;
            padding: 10px 0;
            position: absolute;
            right: 15px;
            text-align: center;
            text-transform: uppercase;
            top: -25px;
        }

        .snip1527 .date span {
            display: block;
            line-height: 14px;
        }

        .snip1527 .date .month {
            font-size: 11px;
        }

        .snip1527 h3,
        .snip1527 p {
            margin: 0;
            padding: 0;
        }

        .snip1527 h3 {
            display: inline-block;
            font-weight: 700;
            letter-spacing: -0.4px;
            margin-bottom: 5px;
        }

        .snip1527 p {
            font-size: 0.8em;
            line-height: 1.6em;
            margin-bottom: 0px;
        }

        .snip1527 a {
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            position: absolute;
            z-index: 1;
        }

        .snip1527:hover img,
        .snip1527.hover img {
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }

        .form-control {
            margin-left: 30%;
            width: 68%;

        }
    </style>
@endpush

<div>
    <x-slot name="title">{{ __('haorsys::haor.Public_request_list_info') }}</x-slot>
    <x-slot name="header">{{ __('haorsys::haor.Public_request_list_info') }}</x-slot>
    <x-theme::layouts.backend.container>
        <x-slot name="title">{{ __('haorsys::haor.Public_request_list_info') }}</x-slot>
        <x-theme::layouts.backend.card>

            <div class="row">
                <div class="col-md-10 text-right">
                    {{-- <h4><u><b>{{ __('haorsys::haor.pic_info') }}</b></u> </h4> --}}
                </div>
                <div class="col-md-2" style="margin-top:0px; margin-bottom: -1px">
                    <input type="text" class="form-control" placeholder="{{ __('haorsys::haor.search_haor') }}"
                        wire:model.live="search" id="search-field">
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-12">
                    <table class="table border table-sm table-striped">
                        <thead>
                            <tr>
                                <td>
                                    <h5><b>{{ __('haorsys::default.sn') }}</b></h5>
                                </td>
                                <th>
                                    <h5><b>{{ __('haorsys::haor.public_pic_requester_name') }}</b></h5>
                                </th>
                                <th>
                                    <h5><b>{{ __('haorsys::haor.mobile_no') }}</b></h5>
                                </th>
                                <th>
                                    <h5><b>{{ __('haorsys::haor.nid') }}</b></h5>
                                </th>
                                <th>
                                    <h5><b>{{ __('haorsys::haor.haor_name') }}</b></h5>
                                </th>
                                <th>
                                    <h5><b>{{ __('haorsys::haor.district') }}</b></h5>
                                </th>
                                <th>
                                    <h5><b>{{ __('haorsys::haor.upazila') }}</b></h5>
                                </th>
                                <th>
                                    <h5><b>{{ __('haorsys::haor.union') }}</b></h5>
                                </th>
                                <th>
                                    <h5><b>{{ __('haorsys::haor.post_code') }}</b></h5>
                                </th>

                                <th>
                                    <h5><b>{{ __('haorsys::haor.no_of_pic_member') }}</b></h5>
                                </th>
                                <th>
                                    <h5><b>{{ __('haorsys::haor.year_end') }}</b></h5>
                                </th>
                                <th>
                                    <h5><b>{{ __('haorsys::haor.estimated_amount') }}</b></h5>
                                </th>
                                <th>
                                    <h5><b>{{ __('haorsys::default.actions') }}</b></h5>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($picreqs as $picreq)
                                <tr>
                                    <td>
                                        <h5>{{ $loop->iteration }}</h5>
                                    </td>
                                    <td>{{ $picreq->name }}</td>
                                    <td>{{ $picreq->mobile_no }}</td>
                                    <td>{{ $picreq->nid }}</td>
                                    <td>{{ $picreq->Haor->haor_name_bn }}</td>
                                    <td>
                                        {{ $picreq->District->district_bn }}
                                    </td>
                                    <td> {{ $picreq->Upazila->upazila_bn }}</td>
                                    <td>{{ $picreq->union_gcode }}</td>
                                    <td>{{ $picreq->post_code }}</td>
                                    <td>{{ $picreq->Pic->no_of_member ?? '' }}</td>
                                    <td>{{ $picreq->Pic->year_end ?? '' }}</td>
                                    <td>{{ $picreq->Pic->estimated_amount ?? '' }}</td>
                                    <td>
                                        <x-theme::button.warning
                                            wire:click="picModal({{ $picreq->Pic->pic_id ?? '' }})" class="btn-sm"
                                            icon="fas fa-user-friends">
                                            {{ __('haorsys::haor.member') }}
                                        </x-theme::button.warning>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <div class="pagination">
                        {{ $picreqs->links() }}
                    </div>
                </div>
            </div>
        </x-theme::layouts.backend.card>
    </x-theme::layouts.backend.container>
    <x-theme::modal id="picModal"  size="xl" title="{{ __('haorsys::haor.pic_member_details') }}">
        <div class="row">
            @if ($PicMembers)
                @foreach ($PicMembers as $picMember)
                    <div class="col-md-3">
                        <figure class="snip1527">
                            <div class="image"><img src="data:image/jpeg;base64,{{ $picMember->member_photo }}"
                                    alt="pr-sample23" width="310px" height="350px" /></div>
                            <figcaption>
                                <div class="date"><span class="day"> {{ $loop->iteration }}</div>
                                <h3>{{ $picMember->name }}</h3>
                                <h5><b>{{ __('haorsys::haor.designation_name_of_pic') }} :
                                        {{ $picMember->pic_designation == 1
                                            ? __('haorsys::haor.pic_president')
                                            : ($picMember->pic_designation == 2
                                                ? __('haorsys::haor.secretary')
                                                : ($picMember->pic_designation == 3
                                                    ? __('haorsys::haor.member')
                                                    : $picMember->pic_designation)) }}
                                    </b></h5>
                                <h5><b>{{ __('haorsys::haor.mobile_no') }} : {{ $picMember->mobile }} </b></h5>
                                <h5><b>{{ __('haorsys::haor.occupation') }} : {{ $picMember->occupation }} </b></h5>
                            </figcaption>
                        </figure>
                    </div>
                @endforeach
            @endif
        </div>
        <x-slot name="footer">
                                
        </x-slot>
    </x-theme::modal>
</div>