@extends('layout.user')
@section('content')

    <div class="page-title">
        <div class="left-column">
            <h4>Photos</h4>
        </div>
        <div class="right-column">
            <div class="search-field">
                {{--                <button class="btn-add del_check_photos"   style="margin-right: 10px">Delete Selected</button>--}}
                @if( \App\Helpers\HelperMethods::checkIfSubscriptionExists() )
                    <button class="plan-btn red-btn del_check_photos" id="delete-selected"   style="display: none;margin-right: 10px"><img
                            src="{{asset('images/delete.png')}}"/>Delete Selected
                    </button>
                    @if(count($photos)>0)
                        <button id="checkAll" class="plan-btn blue-btn"   style="margin-right: 10px">Select All
                        </button>
                    @endif
                    <button id="unCheckAll" class="plan-btn blue-btn"   style="display: none;">
                        Unselect All Items
                    </button>
                @else
                    <button class="plan-btn red-btn del_check_expired_photos" id="delete-selected" data-toggle="modal" data-target="#membership_expired_modal"   style="display: none;margin-right: 10px"><img
                            src="{{asset('images/delete.png')}}" />Delete Selected
                    </button>
                @endif


                <form>
                    <input type="text" class="white-field" onkeyup="searchFunction(this.value)"
                           placeholder="Search item"/>
                    <button type="button" role="button" class="btn-search"><img
                            src="{{asset('images/search-icon.png')}}"/></button>
                </form>
                @if( \App\Helpers\HelperMethods::checkIfSubscriptionExists() )
                    <button class="btn-add" data-toggle="modal" data-target="#upload_document">
                        + Add Photos
                        <i class="fa fa-info-circle"   style="color: white" data-toggle="tooltip" data-placement="bottom" title="Click here to add photos of the damage to your building."></i>
                    </button>
                @else
                    <button class="btn-add" data-toggle="modal" data-target="#membership_expired_modal">
                        + Add Photos
                        <i class="fa fa-info-circle"   style="color: white" data-toggle="tooltip" data-placement="bottom" title="Click here to add photos of the damage to your building."></i>
                    </button>
                @endif
                @if(count($photos)>0)
                    @if( \App\Helpers\HelperMethods::checkIfSubscriptionExists() )
                        <a class="btn-download-zip"   style="margin-right: 10px" href="{{route('policyholder.zip.damage_photo')}}">
                            Download Zip File
                            <i class="fa fa-info-circle"   style="color: white" data-toggle="tooltip" data-placement="bottom" title="Click here to download and save a .zip file of your photos."></i>
                        </a>
                    @else

                        <button class="btn-download-zip" data-toggle="modal" data-target="#membership_expired_modal">
                            Download Zip File
                            <i class="fa fa-info-circle"   style="color: white" data-toggle="tooltip" data-placement="bottom" title="Click here to download and save a .zip file of your photos."></i>
                        </button>
                    @endif
                @endif
            </div>
        </div>
    </div>
    @if(count($photos)>0)
        <section class="contact-form">
            <div class="photos-row" id="photos-row">
                @foreach($photos as $key=>$photo)
                    <div class="photos-column photo-listing-{{$key}}">

                            <div class="photos-inner-column">
                                <div>
                                    @if (file_exists(public_path($photo->image_path)))
                                        <a href="{{asset($photo->image_path)}}" class="fancybox" data-fancybox="images"    style="display: block">
                                            <img class="photo-img"   style="object-fit: cover;" src="{{asset('/').$photo->image_path}}">
                                        </a>
                                    @else
                                        <a href="{{($photo->image_path)}}" class="fancybox" data-fancybox="images"    style="display: block">
                                            <img class="photo-img"   style="object-fit: cover;" src="{{$photo->image_path}}">
                                        </a>
                                    @endif
                                    <div class="edit-btns"
                                           style="background-color:rgba(0, 0, 0, 0.5); border-radius: 5px;     top: 5px;">
                                        <div class="custom-checkbox"
                                               style="float: left ; margin-top: 2px;margin-left: 5px">
                                            <input type="checkbox" class="checkAllItems" value="{{$photo->id}}"
                                                   onclick="selectPhotosFromCheckbox()" id="checkbox{{$key}}"
                                                     style="display:none; "/>
                                            <label for="checkbox{{$key}}"></label>
                                        </div>
                                        <button   style="padding: 0;border: none;background: none;height: 25px;" href="#"
                                                onclick="deleteDamagePhoto({{$photo->id}},{{$photo}},{{$key}})">
                                            <i class="glyphicon glyphicon-trash red-btn"
                                                 style="margin-top: 4px; margin-left: 5px;margin-right: 5px"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="damage-content">
{{--                                    <h4>{{substr($photo->name,0, 16)}}{{(count_chars($photo->name)>17)? '. . . .':''}}</h4>--}}
                                    <h4>{{strlen($photo->name) > \App\AppConstants::DAMAGED_PHOTO_NAME_LENGTH ? substr($photo->name,0,\App\AppConstants::DAMAGED_PHOTO_NAME_LENGTH )."..." : $photo->name}}</h4>
                                    <p>{{round($photo->size, 2)}} KB</p>
                                </div>

                            </div>

                    </div>
                @endforeach

            </div>

        </section>
    @else
        <div class="">
            @if(\App\Helpers\HelperMethods::checkIfSubscriptionExists())
                @include('snippets.no_records', ['title' => "No Photos Found", 'message' => 'There is no damage photo.', 'target'=>'#upload_document','button'=> '+ Upload Photo' , 'image'=> asset('images/menu_icon3.png')])
            @else
                @include('snippets.no_records', ['title' => "No Photos Found", 'message' => 'There is no damage photo.', 'target'=>'#membership_expired_modal','button'=> '+ Upload Photo' , 'image'=> asset('images/menu_icon3.png')])
            @endif
        </div>
    @endif

    @include('modal.upload_document')
    <script nonce="{{config('app.nonce')}}">
        $('.dropdown-dots').click(function () {
            $(this).next('.menu-items').slideToggle();
        });

        $(document).ready(function () {
            $('[data-fancybox="images"]').fancybox({
                margin: [44, 0, 22, 0],
                thumbs: {
                    autoStart: true,
                    position: 'bottom',
                    axis: 'x'
                }
            })
        });
    </script>
    @if(count($photos)==0)
        <script nonce="{{config('app.nonce')}}" type="text/javascript">
            $(window).on('load', function () {
                // $('#upload_document').modal('show');
            });
        </script>
    @endif


@endsection
@section('js_file')
    <script nonce="{{config('app.nonce')}}" type="text/javascript" src="{{ asset('js/damage_photo.js?v=').time()}}"></script>
    <script nonce="{{config('app.nonce')}}" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.js"></script>
    <script nonce="{{config('app.nonce')}}">
    $(document).on('click', '#checkAll', function (evt) {
        if (!$('input:checkbox.checkAllItems').is('checked')) {
            $('input:checkbox.checkAllItems').prop('checked', true);
        }
        $('#checkAll').hide();
        $('#unCheckAll').show();
        $('#delete-selected').show();

    });

    $(document).on('click', '#unCheckAll', function (evt) {
        if (!$('input:checkbox.checkAllItems').is('checked')) {
            $('input:checkbox.checkAllItems').prop('checked', false);
            $('#checkAll').show();
            $('#unCheckAll').hide();
            $('#delete-selected').hide();
        }

    });

    </script>
@endsection