@extends('layouts/app')
@section('header_styles')
    <style type="text/css">
        .image-upload > input {
            display: none;
        }

        .image_preview {
            cursor: pointer;
        }

        .imageupload {
            position: absolute;
            top: 40%;
            left: 44%;
            font-size: xx-large;
        }

        .btndelete {
            position: absolute;
            font-size: xx-large;
            color: red;
            left: 16px;
            z-index: 1000;
        }

        .ahrefdelete {
            top: 0;
        }

        .lightbox {
            height: 100px;
            width: 200px;
            overflow: hidden;
        }

        form label {
            text-align: center;
        }

        .alert-danger {
            z-index: 1;
        }
    </style>
@endsection
@section('content')
    <!-- LISTING ADD -->
    <section class="page-header page-header-xs">
        <div class="container">

            <h1>Adding Images To Ad</h1>

            <!-- breadcrumbs -->
            <ol class="breadcrumb">
                Category:
                <li>Images</li>
                <li>Post Ads</li>
            </ol><!-- /breadcrumbs -->

        </div>
    </section>
    <section class="padding-top-30">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 margin-bottom-10">
                    @php
                        $i=0;
                    @endphp
                    @if ($paramsobj->addimagethumb)
                        @foreach($paramsobj->addimagethumb as $imageitems)
                            <div class="col-md-4 col-sm-6 margin-bottom-10" style="max-height: 101px"
                                 id="add-item-{{ $paramsobj->imagedata[$i]->id }}">
                                <a class="image-hover lightbox thumbnail"
                                   href="{{ $paramsobj->addimage[$i] }}"
                                   data-plugin-options='{"type":"image"}'>
                                                            <span class="image-hover-icon image-hover-dark">
                                                                <i class="fa fa-search-plus"></i>
                                                            </span>
                                    <img src="{{ $imageitems }}" alt="...">
                                </a>
                                <a href="javascript:void(0)"
                                   data-toggle="tooltip" class="ahrefdelete"
                                   title="Delete image"
                                   onclick="DestroyAddImage('{{ $paramsobj->imagedata[$i]->id }}','', '{{ $i+10 }}', true)"><i
                                            class="fa fa-times-circle btndelete"></i></a>

                            </div>
                            <div class="col-md-4 col-sm-6 margin-bottom-10"
                                 id="form-holder-{{ $i+10 }}" style="display: none">
                                <form method="POST" enctype="multipart/form-data" id="upload_image_form_{{ $i+10 }}"
                                      action="javascript:void(0)" class="margin-bottom-0">
                                    {{ csrf_field() }}

                                    <div class="fancy-file-upload fancy-file-primary thumbnail height-100 width-200">
                                        <label for="file-input">
                                            <img id="image_preview"
                                                 src="{{ asset('/addsimages/200/noimage.jpg') }}"
                                                 alt="preview image" class="image_preview">
                                            <i class="fa fa-plus-circle imageupload"></i>
                                        </label>
                                        <input type="file" class="form-control" name="image" id="image-{{ $i+10 }}"
                                               onchange="SubmitBtnShow(form.getAttribute('id'),{{ $i+10 }})">
                                    </div>
                                    <input type="hidden" value="{{ Request::segment(3) }} " name="adid">
                                    <button type="submit" class="btn btn-primary" id="submitbtn-{{ $i+10 }}"
                                            style="display: none"
                                            onclick="FormSubmit(form.getAttribute('id'), {{ $i+10 }})">Upload
                                    </button>
                                </form>
                                <div class="col-sm-12 alert-danger" id="alerterror-{{ $i+10 }}" style=""></div>
                            </div>
                            @php
                                $i++;
                            @endphp
                        @endforeach

                        @if($i<10)
                            @for($ii=1; $ii<(10-$i); $ii++)
                                @include('layouts.errors')
                                <div class="col-md-4 margin-bottom-10" style="max-height: 101px;">
                                    <div id="form-holder-{{ $ii }}">
                                        <form method="POST" enctype="multipart/form-data"
                                              id="upload_image_form_{{ $ii }}"
                                              action="javascript:void(0)" class="margin-bottom-0">
                                            {{ csrf_field() }}

                                            <div class="fancy-file-upload fancy-file-primary thumbnail height-100 width-200"
                                                 style="overflow: hidden">
                                                <label for="file-input">
                                                    <img id="image_preview"
                                                         src="{{ asset('/addsimages/200/noimage.jpg') }}"
                                                         alt="preview image" class="image_preview">
                                                    <i class="fa fa-plus-circle imageupload"></i>
                                                </label>
                                                <input type="file" class="form-control" name="image"
                                                       id="image-{{ $ii }}"
                                                       onchange="SubmitBtnShow(form.getAttribute('id'), {{ $ii }})">
                                            </div>
                                            <input type="hidden" value="{{ Request::segment(3) }} " name="adid">
                                            <button type="submit" style="display: none" id="submitbtn-{{ $ii }}"
                                                    class="btn btn-primary"
                                                    onclick="FormSubmit(form.getAttribute('id'), {{ $ii }})">Upload
                                            </button>
                                            <div class="col-sm-12 alert-danger" id="alerterror-{{ $ii }}"
                                                 style=""></div>
                                        </form>
                                    </div>
                                    <div class="col-sm-4 margin-bottom-10"
                                         style="min-hemax-height: 101px; display: none"
                                         id="add-item-{{ $ii }}">
                                        <a class="image-hover lightbox thumbnail" id="mainimage_preview_{{ $ii }}"
                                           data-plugin-options='{"type":"image"}'>
                                                            <span class="image-hover-icon image-hover-dark">
                                                                <i class="fa fa-search-plus"></i>
                                                            </span>
                                            <img id="image_preview_{{ $ii }}"
                                                 src="{{ asset('/addsimages/200/noimage.jpg') }}"
                                                 alt="preview image" class="image_preview width-200">
                                        </a>
                                        <a href="javascript:void(0)" class="ahrefdelete"
                                           style="position: absolute;left: 0"
                                           data-toggle="tooltip"
                                           title="Delete image" id="delete_image_{{ $ii }}"
                                           onclick="DestroyAddImage(document.getElementById('imageid_{{ $ii }}').value, null, '{{ $ii }}', true)"><i
                                                    class="fa fa-times-circle btndelete"></i></a>
                                        <input type="hidden" name="imageid" id="imageid_{{ $ii }}" value="">

                                    </div>
                                </div>

                                {{--                                    @break($ii==0)--}}
                            @endfor
                        @endif

                    @else
                        @for($ii=0; $ii<9; $ii++)
                            @include('layouts.errors')
                            <div class="col-md-4 margin-bottom-10" style="max-height: 101px;">
                                <form method="POST" enctype="multipart/form-data" id="upload_image_form_{{ $ii }}"
                                      action="javascript:void(0)" class="margin-bottom-0">
                                    {{ csrf_field() }}

                                    <div class="fancy-file-upload fancy-file-primary thumbnail height-100 width-200">
                                        <label for="file-input">
                                            <img id="image_preview"
                                                 src="{{ asset('/addsimages/200/noimage.jpg') }}"
                                                 alt="preview image" class="image_preview"
                                                 style="height: 100px; overflow: hidden">
                                            <i class="fa fa-plus-circle imageupload"></i>
                                        </label>
                                        <input type="file" class="form-control" name="image" id="image-{{ $ii }}"
                                               onchange="SubmitBtnShow(form.getAttribute('id'),{{ $ii }})">
                                    </div>
                                    <input type="hidden" value="{{ Request::segment(3) }} " name="adid">
                                    <button type="submit" class="btn btn-primary" id="submitbtn-{{ $ii }}"
                                            style="display: none"
                                            onclick="FormSubmit(form.getAttribute('id'), {{ $ii }})">Upload
                                    </button>
                                    <div class="col-sm-12 alert-danger" id="alerterror-{{ $ii }}" style=""></div>
                                </form>
                                <div class="col-sm-4 margin-bottom-10 no-padding"
                                     style="max-height: 101px; display: none"
                                     id="add-item-{{ $ii }}">
                                    <a class="image-hover lightbox thumbnail" id="mainimage_preview_{{ $ii }}"
                                       data-plugin-options='{"type":"image"}'>
                                                            <span class="image-hover-icon image-hover-dark">
                                                                <i class="fa fa-search-plus"></i>
                                                            </span>
                                        <img id="image_preview_{{ $ii }}"
                                             src="{{ asset('/addsimages/200/noimage.jpg') }}"
                                             alt="preview image" class="image_preview width-200">
                                    </a>
                                    <a href="javascript:void(0)" class="ahrefdelete"
                                       style="position: absolute;left: 0"
                                       data-toggle="tooltip"
                                       title="Delete image" id="delete_image_{{ $ii }}"
                                       onclick="DestroyAddImage(document.getElementById('imageid_{{ $ii }}').value, null, '{{ $ii }}', true)"><i
                                                class="fa fa-times-circle btndelete"></i></a>
                                    <input type="hidden" name="imageid" id="imageid_{{ $ii }}" value="">
                                </div>
                            </div>
                        @endfor
                    @endif
                </div>
                <div class="col-sm-12">
                    <div class="col-md-6 col-sm-12"><a href="{{ url('/user/listingads') }}">
                            <button type="button" class="btn btn-primary btn-lg btn-block btn-shadow-1 btn-round">Go To
                                My Ads
                            </button>
                        </a></div>
                    <div class="col-md-6 col-sm-12"><a href="{{ url('/listing/ad/'. Request::segment(3) .'') }}">
                            <button type="button" class="btn btn-primary btn-lg btn-block btn-shadow-1 btn-round">Go To
                                Current Ad
                            </button>
                        </a></div>
                </div>
            </div>
        </div>
    </section>
    <!-- END LISTING ADD -->

    <section>
        <div class="container">

            <div class="row">
                <!-- LEFT -->

                <div class="col-lg-8 col-md-8 col-sm-12">

                    @include('layouts.banners', ['banner' => '600x300x1'])

                </div>


                <!-- RIGHT -->
                <div class="col-lg-4 col-md-4 col-sm-12">

                    <!-- CATEGORIES -->
                    @include('layouts.sidebar', ['hotlinks' => true, 'sidemenucats' => false])

                </div>
            </div>
        </div>
    </section>
    <!-- PRELOADER -->
    <div id="preloader" style="display: none;">
        <div class="inner">
            <span class="loader"></span>
        </div>
    </div>
    <!-- /PRELOADER -->
    <!-- LOGIN MODAL FORM -->
    {{--    @include('auth.loginmodal')--}}
    <!-- /LOGIN MODAL FORM -->
    <!-- CATEGORIES -->
    @include('layouts.catsbox')
    <!-- /CATEGORIES -->


@endsection
@section('footer_scripts')

    <script src="{{ asset('js/jquery.validate.min.js') }}"></script>

    <!-- PAGE LEVEL SCRIPTS -->

    <script type="text/javascript" src="{{ asset('js/imagesupload.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/bladescripts.js') }}"></script>


@endsection