@extends('layouts.main')

@section('css')
    <style>
        .del-img {
            text-align: center;
            cursor: pointer;
            color: #dc0000;
        }

        .del-img:hover {
            text-decoration: underline;
        }

        .photo-load:before {
            background-image: url('../../../img/ajax-loader.gif');
            content: ' ';
            background-repeat: no-repeat;
            position: absolute;
            background-size: 70% 70%;
            width: 90px;
            height: 90px;
            left: 13px;
            top: 10px;
            z-index: 1;
        }

        .steps-form {
            display: table;
            width: 100%;
            position: relative;
        }

        .steps-form .steps-row {
            display: table-row;
        }

        .steps-form .steps-row:before {
            top: 14px;
            bottom: 0;
            position: absolute;
            content: " ";
            width: 100%;
            height: 1px;
            background-color: #ccc;
        }

        .steps-form .steps-row .steps-step {
            display: table-cell;
            text-align: center;
            position: relative;
        }

        .steps-form .steps-row .steps-step p {
            margin-top: 0.5rem;
        }

        .steps-form .steps-row .steps-step button[disabled] {
            opacity: 1 !important;
            filter: alpha(opacity=100) !important;
        }

        .steps-form .steps-row .steps-step .btn-circle {
            width: 30px;
            height: 30px;
            text-align: center;
            padding: 6px 0;
            font-size: 12px;
            line-height: 1.428571429;
            border-radius: 15px;
            margin-top: 0;
        }

        #contact, #city_place {
            height: 39px;
        }

        #location_type, #contact_type {
            width: 130px;
        }

        .steps-form {
            display: table;
            width: 100%;
            position: relative;
        }

        .steps-form .steps-row {
            display: table-row;
        }

        .steps-form .steps-row:before {
            top: 14px;
            bottom: 0;
            position: absolute;
            content: "
            width: 100%;
            height: 1px;
            background-color: #ccc;
        }

        .steps-form .steps-row .steps-step {
            display: table-cell;
            text-align: center;
            position: relative;
        }

        .steps-form .steps-row .steps-step p {
            margin-top: 0.5rem;
        }

        .steps-form .steps-row .steps-step button[disabled] {
            opacity: 1 !important;
            filter: alpha(opacity=100) !important;
        }

        .steps-form .steps-row .steps-step .btn-circle {
            width: 30px;
            height: 30px;
            text-align: center;
            padding: 6px 0;
            font-size: 12px;
            line-height: 1.428571429;
            border-radius: 15px;
            margin-top: 0;
        }

    </style>
@endsection

@section('main.content')
    <div class="container" style="margin-top:50px;">
        <div class="row" style="display: flex;">
            <div class="ads col-xs-12 col-lg-8">
                @include('cabinet.partials.banner', ['class' => 'horizontal', 'banner' => $banners[1] ?? null])
                <div class="cardd">
                    <div class="card-body mb-4">
                        <h2 class="text-center font-weight-bold pt-4 pb-5"><strong>Новое объявление</strong></h2>
                        <!-- Stepper -->
                        <div class="steps-form">
                            <div class="steps-row setup-panel">
                                <div class="steps-step">
                                    <a href="#step-9" type="button" class="btn btn-indigo s btn-circle">1</a>
                                    <p>Информация</p>
                                </div>
                                <div class="steps-step">
                                    <a href="#step-10" type="button" class="btn btn-default btn-circle"
                                       disabled="disabled">2</a>
                                    <p>Объявление</p>
                                </div>
                            </div>
                        </div>
                        @if ($errors->any())
                            @foreach ($errors->all() as $error)
                                <div class="alert alert-danger">
                                    {{ $error }}
                                </div>
                            @endforeach
                        @endif
                        <form role="form" id="ad_form" action="{{URL::to('cabinet/ads/update', ['id' => $ads->id])}}" method="post" enctype="multipart/form-data">
                        @csrf
                        <!-- First Step -->
                            <div class="row setup-content" id="step-9">
                                <div class="col-md-12">
                                    <h3 class="font-weight-bold pl-0 my-4"><strong>Шаг 1</strong></h3>
                                    <div class="form-group md-form">
                                        <label for="name">Имя</label>
                                        <input id="name" name="name" type="text" required="required"
                                               placeholder="Ваше настоящее имя"
                                               class="form-control validate"
                                               value="{{ $ads->name }}">
                                    </div>
                                    <div class="form-group md-form">
                                        <label for="age">Возраст</label>
                                        <input id="age" name="age" type="number" min="18" max="110" required="required"
                                               placeholder="Ваш возраст" class="form-control validate"
                                               value="{{ $ads->age }}">
                                    </div>
                                    <div class="form-group md-form">
                                        <label>Роль</label>
                                        <div style="display: block;">
                                            <label class="radio-inline" style="margin-right: 10px;">
                                                <input  type="radio" value="passive" name="type" style="margin-right: 5px;">Пасс
                                            </label>
                                            <label class="radio-inline" style="margin-right: 10px;">
                                                <input  type="radio" value="active" name="type" style="margin-right: 5px;">Акт
                                            </label>
                                            <label class="radio-inline" style="margin-right: 10px;">
                                                <input  type="radio" value="uni" name="type" style="margin-right: 5px;">Уни
                                            </label>
                                            <label  class="radio-inline" style="margin-right: 10px;">
                                                <input  type="radio" value="other" name="type" style="margin-right: 5px;">Другое
                                            </label>
                                        </div>
                                    </div>


                            <div class="form-group col-md-12">
                                <div>
                                    <label for="contact_type" data-error="wrong" data-success="right">Место</label>
                                </div>
                                <div class="input-group">
                                    <div class="input-group-btn">
                                        <select id="location_type" name="location_type"
                                                class="btn btn-info dropdown-toggle">
                                            <option  value="city">
                                                Москва
                                            </option>
                                            <option  value="oblast">
                                                Область
                                            </option>
                                        </select>
                                    </div>

                                    <select id="metroid" name="metroid" class="form-control"
                                            disabled style="display: none">
                                        <option value="0" disabled selected>Выберите станцию метро</option>
                                        @foreach(DB::table('metro')->select('id', 'name')->orderBy('name','asc')->get()  as $metro)
                                            @if($ads->metroid == $metro->id)
                                                <option selected value="{{ $metro->id }}">{{$metro->name}}</option>
                                            @else
                                                <option value="{{ $metro->id }}">{{$metro->name}}</option>
                                            @endif
                                        @endforeach
                                    </select>

                                    <select id="cityid" name="cityid" class="form-control"
                                            disabled style="display: none">
                                        <option value="0" disabled selected>Выберите город</option>
                                        @foreach(DB::table('city')->select('id', 'name')->get() as $city)
                                            @if($ads->cityid == $city->id)
                                                <option selected value="{{$city->id }}">{{$city->name}}</option>
                                            @else
                                                <option value="{{$city->id }}">{{$city->name}}</option>
                                            @endif
                                        @endforeach
                                    </select>

                                </div>
                            </div>
                                    <div class="form-group md-form">
                                        <div>
                                            <label for="contact" data-error="wrong" data-success="right">Способ связи</label>
                                        </div>
                                        <div class="input-group">
                                            <div class="input-group-btn">
                                                <select name="contact_type" id="contact_type" class="btn btn-info dropdown-toggle">
                                                    <option   value="phone">Телефон</option>
                                                    <option   value="skype">Skype</option>
                                                    <option   value="email">Email</option>
                                                    <option   value="others">Остальное</option>
                                                </select>
                                            </div>
                                            <input class="form-control" type="text" name="contact" id="contact" required="required" placeholder=" Например +79999999..." value="{{$ads->contact}}"/>
                                        </div>
                                    </div>
                                    <button class="btn btn-primary nextBtn float-right" type="button">Дальше</button>
                                </div>
                            </div>
                            <!-- Second Step -->
                            <div class="row setup-content" id="step-10">
                                <div class="col-md-12">
                                    <h3 class="font-weight-bold pl-0 my-4"><strong>Шаг 2</strong></h3>
                                    <div class="form-group md-form mt-2">
                                        <label for="yourAddress" data-error="wrong" data-success="right">Сообщение</label>
                                        <textarea name="text" type="text" required="required" rows="4" maxlength="500" placeholder="Текст вашего сообщения" class="md-textarea validate form-control">{{$ads->text}}</textarea>
                                    </div>

                                    @if(count($ads->photos) > 0)
                                        <div class="photos">
                                            @foreach($ads->photos as $photo)
                                                <div class="photo">
                                                    <img src="{{ $photo->preview_path }}">
                                                    <div class="del-img" data-id="{{$photo->id}}">Удалить</div>
                                                </div>
                                            @endforeach
                                        </div>
                                    @endif

                                    <div class="form-group md-form mt-2">
                                        <label for="photos" data-error="wrong" data-success="right">Фото (не больше 5)</label>
                                        <input id="photos" type="file" name="photos[]" multiple="multiple" class="form-control">
                                    </div>

                                    <button class="btn btn-primary btn-rounded prevBtn float-left" type="button">Назад</button>
                                    <input class="btn btn-primary btn-rounded float-right" type="submit" value="Сохранить"/>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div></div>
            </div>
            <div class="sidebar hidden-md-down col-lg-4">
                @include('cabinet.partials.banner', ['class' => 'vertical', 'banner' => $banners[4] ?? null])
            </div>
        </div>
    </div>
@overwrite

@section('post-scripts')
    <script>
        $(document).ready(function () {

            $('.del-img').click(function () {
                var id =  $(this).attr('data-id');
                $(this).parent().addClass('photo-load');
                var t = this;
                $.ajax({
                    url: window.location.origin + "/cabinet/ads/img/remove/" + id,
                    success: function(html){
                        $(t).parent().remove();
                    }
                });
            });

            $("[name=location_type]").change(function () {
                var value = $("select[name=location_type]").val();

                if (value == "oblast") {
                    $('[name=cityid]').show();
                    $('[name=cityid]').removeAttr('disabled');
                    $('[name=metroid]').hide();
                    $('[name=metroid]').attr('disabled', 'disabled');
                }

                if (value == "city") {
                    $('[name=cityid]').css('display', 'none');
                    $('[name=cityid]').attr('disabled', 'disabled');
                    $('[name=metroid]').css('display', 'block');
                    $('[name=metroid]').removeAttr('disabled');
                }
            });

            $("[name=register]").change(function () {
                var value = $("input[type=radio][name=register]:checked").val();
                if (value == "true") {
                    $('.email-address').removeClass('hide');
                } else {
                    $('.email-address').addClass('hide');
                }
            });

            var navListItems = $('div.setup-panel div a'),
                allWells = $('.setup-content'),
                allNextBtn = $('.nextBtn'),
                allPrevBtn = $('.prevBtn');

            allWells.hide();

            navListItems.click(function (e) {
                e.preventDefault();
                var $target = $($(this).attr('href')),
                    $item = $(this);

                if (!$item.hasClass('disabled')) {
                    navListItems.removeClass('btn-indigo').addClass('btn-default');
                    $item.addClass('btn-indigo');
                    allWells.hide();
                    $target.show();
                    $target.find('input:eq(0)').focus();
                }
            });

            allPrevBtn.click(function () {
                var curStep = $(this).closest(".setup-content"),
                    curStepBtn = curStep.attr("id"),
                    prevStepSteps = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a");

                prevStepSteps.removeAttr('disabled').trigger('click');
            });

            allNextBtn.click(function () {
                var curStep = $(this).closest(".setup-content"),
                    curStepBtn = curStep.attr("id"),
                    nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
                    curInputs = curStep.find("input[type='text'],select,input[type='number'],textarea,input[type='url']"),
                    isValid = true;

                $(".form-group").removeClass("has-danger");

                for (var i = 0; i < curInputs.length; i++) {
                    if (!curInputs[i].validity.valid) {
                        isValid = false;
                        $(curInputs[i]).closest(".form-group").addClass("has-danger");
                    }
                }

                if (isValid)
                    nextStepWizard.removeAttr('disabled').trigger('click');
            });

            $('div.setup-panel div a.btn-indigo').trigger('click');
        });
    </script>
@endsection