@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);
        }
    </style>
@endpush
<div>

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

            <div class="row">
                <div class="col-xl-4 col-lg-6 col-md-12">
                    <h4><u><b>{{ __('haorsys::haor.haor_images') }}</b></u></h4>
                    <ul class="image-big-list">
                        @foreach ($Haor->HaorImage as $key => $HaorImages)
                            <li class="image-big-list-item {{ $key == 0 ? 'active' : '' }}">
                                <img src="data:image/jpeg;base64,{{ base64_encode($HaorImages->image) }}"
                                    style="height: 250px; width: 580px;" class="img-fluid">
                            </li>
                        @endforeach
                    </ul>
                    <ul class="image-small-list mt-2" style="margin-left: 7%">
                        @foreach ($Haor->HaorImage as $HaorImages)
                            <li class="image-small-list-item active">
                                <img src="data:image/jpeg;base64,{{ base64_encode($HaorImages->image) }}"
                                    style="height: 90px; width: 100px;" class="img-fluid">
                            </li>
                        @endforeach
                    </ul>
                </div>
                <div class="col-xl-8 col-lg-6 col-md-12">
                    <h4><u><b>{{ __('haorsys::haor.details') }}</b></u></h4>
                    <div class="row">
                        <div class="col-md-6 col-sm-12">
                            <table class="table table-sm table-striped">
                                <tr>
                                    <th width="25%">
                                        <h5><b class="highlight">{{ __('haorsys::haor.haor_name') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>:<b> {{ $Haor->haor_name_bn }}</b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight"> {{ __('haorsys::haor.district') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>:<b>
                                                {{ $Haor->HaorLocation?->pluck('District.district_bn')->unique()->implode(', ') }}</b>
                                        </h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.upazila') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>:<b>
                                                {{ $Haor->HaorLocation?->pluck('Upazila.upazila_bn')->unique()->implode(', ') }}</b>
                                        </h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight"> {{ __('haorsys::haor.union') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>:<b>
                                         {{ $Haor->HaorLocation?->pluck('Union.union_bn')->unique()->implode(', ') }}</b>   
                                      
                                    </h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.area') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>:<b> {{ $Haor->haorArea }}</b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.haor_type') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>:<b> {{ $Haor->haor_type }}</b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.lat') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>:<b>
                                                {{ app()->getLocale() == 'bn' ? numberEnToBn($Haor->lat) : $Haor->lat }}</b>
                                        </h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.lon') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>:<b>
                                                {{ app()->getLocale() == 'bn' ? numberEnToBn($Haor->lon) : $Haor->lon }}</b>
                                        </h5>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6 col-sm-12">
                            <table class="table table-sm table-striped">
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.no_of_village') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>:<b>
                                                {{ app()->getLocale() == 'bn' ? numberEnToBn($Haor->no_of_village) : $Haor->no_of_village }}</b>
                                        </h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th width="35%">
                                        <h5><b
                                                class="highlight">{{ __('haorsys::haor.cultivable_area') . ' ' . __('haorsys::haor.hector') }}</b>
                                        </h5>
                                    </th>
                                    <td>
                                        <h5>:<b> {{ app()->getLocale() == 'bn' ? numberEnToBn($Haor->irrigation_he) : $Haor->irrigation_he }}
                                            </b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.connecting_river') }}</b>
                                        </h5>
                                    </th>
                                    <td>
                                        <h5>:<b></b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">
                                                {{ __('haorsys::haor.dam') . ' ' . __('haorsys::haor.km') }}</b>
                                        </h5>
                                    </th>
                                    <td>
                                        <h5>:<b>
                                                {{ app()->getLocale() == 'bn' ? numberEnToBn($Haor->embankment_total_km) : $Haor->embankment_total_km }}</b>
                                        </h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b
                                                class="highlight">{{ __('haorsys::haor.no_of_dam') . ' ' . __('haorsys::haor.km') }}</b>
                                        </h5>
                                    </th>
                                    <td>
                                        <h5>:<b></b></h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight"> {{ __('haorsys::haor.regulator_no') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>:<b>
                                                {{ app()->getLocale() == 'bn' ? numberEnToBn($Haor->regulator_no) : $Haor->regulator_no }}</b>
                                        </h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight">{{ __('haorsys::haor.no_of_bill') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>:<b>
                                                {{ app()->getLocale() == 'bn' ? numberEnToBn($Haor->no_of_bill) : $Haor->no_of_bill }}</b>
                                        </h5>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        <h5><b class="highlight"> {{ __('haorsys::haor.budget') }}</b></h5>
                                    </th>
                                    <td>
                                        <h5>:<b></b></h5>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </x-theme::layouts.backend.card>
    </x-theme::layouts.backend.container>
    <x-theme::layouts.backend.container>

        <div class="row">
            <div class="col-xl-4">
                <x-theme::layouts.backend.card>
                    <div class="row">
                        <x-slot name="card_title">
                            <h5 @style('font-weight: bold;') class="text-light"><b> {{ __('haorsys::haor.location') }}</b></h5>
                        </x-slot>

                        <img src="data:image/jpeg;base64,{{ base64_encode($Haor->haor_map) }}" alt="location"
                            height="400px" width="600px">
                    </div>

                </x-theme::layouts.backend.card>
            </div>
            <div class="col-xl-8">
                <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 text-right">
                            {{-- <livewire:haorsys::search.yearends wire:model.live="year_end" name="year_end"
                                placeholder="{{ __('haorsys::dashboard.select_year') }}" /> --}}
                        </div>
                    </div>

                    <div class="row mt-3">
                        <div class="col-md-12">
                            <table class="table border table-sm table-striped">
                                <thead>
                                    <tr>
                                        <th>
                                            <h5><b>{{ __('haorsys::haor.pic_no') }}</b></h5>
                                        </th>
                                        <th>
                                            <h5><b>{{ __('haorsys::haor.pic_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.member') }}</b></h5>
                                        </th>
                                        <th>
                                            <h5><b>{{ __('haorsys::haor.secretary') }}</b></h5>
                                        </th>
                                        <th>
                                            <h5><b>{{ __('haorsys::haor.secretary_name') }}</b></h5>
                                        </th>
                                        <th>
                                            <h5><b>{{ __('haorsys::haor.allocation') }}</b></h5>
                                        </th>
                                        <th>
                                            <h5><b>{{ __('haorsys::default.actions') }}</b></h5>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($pics as $pic)
                                        <tr>
                                            <td>
                                                <h5><b>{{ $loop->iteration }}</b></h5>
                                            </td>
                                            <td>
                                                <h5><b>{{ $pic->pic_no ? $pic->pic_no : null }}</b></h5>
                                            </td>
                                            <td>
                                                <h5><b>{{ $pic->districtNames ? $pic->districtNames : null }}</b></h5>
                                            </td>
                                            <td>
                                                <h5><b>{{ $pic->upazilaNames ? $pic->upazilaNames : null }}</b></h5>
                                            </td>
                                            <td>
                                                <h5><b>{{ $pic->unionNames ? $pic->unionNames : null }}</b></h5>
                                            </td>
                                            <td>
                                                <h5><b>{{ $pic->no_of_member }}</b></h5>
                                            </td>
                                            <td>
                                                <h5><b>{{ $pic->secretary }}</b></h5>
                                            </td>
                                            <td>
                                                <h5><b>{{ $pic->member_secretary }}</b></h5>
                                            </td>
                                            <td>
                                                <h5><b></b></h5>
                                            </td>
                                            <td>
                                                @ucan('haorsys.progress_report.view')
                                                    <a
                                                        href="{{ route('haorsys.member.progress_info', ['pic_id' => $pic->pic_id, 'district_name' => $pic->districtNames, 'upazila_name' => $pic->upazilaNames,'union_name' => $pic->unionNames]) }}">
                                                        <x-theme::button.success class="btn-sm" icon="fa fa-spinner">
                                                            {{ __('haorsys::haor.progress') }}
                                                        </x-theme::button.success>
                                                    </a>
                                                @enducan

                                                <x-theme::button.warning wire:click="picModal({{ $pic->pic_id }})"
                                                    class="btn-sm" icon="fas fa-user-friends">
                                                    {{ __('haorsys::haor.member') }}
                                                </x-theme::button.warning>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>


                </x-theme::layouts.backend.card>
            </div>
        </div>
    </x-theme::layouts.backend.container>
    <x-theme::modal id="picModal" size="xl" class="modal fade"
        title="{{ __('haorsys::haor.pic_member_details') }}">
        <div class="row">
            @if ($PicMembers)
                @foreach ($PicMembers as $picMember)
                    {{-- {{dd($picMember)}} --}}
                    <div class="col-md-3">
                        <figure class="snip1527">
                            <div class="image"><img src="{{ $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.address') }} : {{ $picMember->address }}</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>

@push('js')
    <script>
        $(document).ready(function() {
            var $bigItem = $('.image-big-list-item');

            var $smallItem = $('.image-small-list-item');

            $smallItem.on('click mouseenter', function() {

                $bigItem.removeClass('active');
                $smallItem.removeClass('active');
                $bigItem.eq($(this).index()).addClass('active');
                $smallItem.eq($(this).index()).addClass('active');
            });

        });

        $(".hover").mouseleave(
            function() {
                $(this).removeClass("hover");
            }
        );
    </script>
@endpush