@extends('vendor.layouts.master')
@section('content')
    <div class="card custom--card">
        <div class="card-body">
            <div class="row dashboard-widget-wrapper justify-content-center">
                <div class="col-lg-12 ">
                    <ul class="nav nav-tabs custom--tab mb-4 tab-two">
                        <a class="nav-link @if ($step == 1) active @endif" href="{{ @$property ? route('vendor.property.edit', $property->id) . '?step=1' : route('vendor.property.create') }}">
                            <i class="las la-warehouse"></i>
                            @lang('Property Setting')
                        </a>
                        <a class="nav-link @if ($step == 2) active @endif @if (!@$property) disabled @endif" href="{{ @$property ? route('vendor.property.edit', $property->id) . '?step=2' : 'javvascript:void(0)' }}">
                            <i class="las la-seedling"></i>
                            @lang('Investment Setting')
                        </a>
                        <a class="nav-link @if ($step == 3) active @endif @if (!@$property) disabled @endif" href="{{ @$property ? route('vendor.property.edit', $property->id) . '?step=3' : 'javvascript:void(0)' }}">
                            <i class="las la-cogs"></i>
                            @lang('SEO Setting')
                        </a>
                        <a class="nav-link @if ($step == 4) active @endif" href="{{ @$property ? route('vendor.property.edit', $property->id) . '?step=4' : route('vendor.property.create') }}">
                            <i class="las la-photo-video"></i>
                            @lang('Property Video')
                        </a>
                    </ul>
                    <form action="{{ route('vendor.property.store', @$property->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="step" value="{{ $step }}">
                        @include("vendor.property.step.$step")
                        <button type="submit" class="btn btn--base w-100 h-45 mt-4">@lang('Submit')</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('style-lib')
    <link rel="stylesheet" href="{{ asset('assets/global/css/select2.min.css') }}">
@endpush

@push('script-lib')
    <script src="{{ asset('assets/global/js/select2.min.js') }}"></script>
    <script src="{{ asset('assets/global/js/nicEdit.js') }}"></script>
@endpush

@push('script')
    <script>
        "use strict";
        bkLib.onDomLoaded(function() {
            $(".nicEdit").each(function(index) {
                $(this).attr("id", "nicEditor" + index);
                new nicEditor({
                    fullPanel: true
                }).panelInstance('nicEditor' + index, {
                    hasPanel: true
                });
            });
        });
        (function($) {
            $(document).on('mouseover ', '.nicEdit-main,.nicEdit-panelContain', function() {
                $('.nicEdit-main').focus();
            });

            $.each($('.select2'), function() {
                $(this)
                    .wrap(`<div class="position-relative"></div>`)
                    .select2({
                        dropdownParent: $(this).parent()
                    });
            });

            $.each($('.select2-auto-tokenize'), function() {
                $(this)
                    .wrap(`<div class="position-relative"></div>`)
                    .select2({
                        tags: true,
                        tokenSeparators: [','],
                        dropdownParent: $(this).parent()
                    });
            });

            function proPicURL(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        var preview = $(input).closest('.image-upload-wrapper').find('.image-upload-preview');
                        $(preview).css('background-image', 'url(' + e.target.result + ')');
                        $(preview).addClass('has-image');
                        $(preview).hide();
                        $(preview).fadeIn(650);
                    }
                    reader.readAsDataURL(input.files[0]);
                }
            }
            $(".image-upload-input").on('change', function() {
                proPicURL(this);
            });



        })(jQuery);
    </script>
@endpush


@push('style')
    <style>
        .select2.select2-container {
            width: 100% !important;
        }
    </style>
@endpush

@push('style')
    <style>
        .nav-tabs .nav-item.show .nav-link,
        .nav-tabs .nav-link.active {
            color: #212529c9;
            background-color: #fff;
            border-color: #dee2e6 #dee2e6 #fff;
        }

        .nav-tabs .nav-link {
            color: #212529c9;
        }

        @media(max-width: 380px) {
            .nav-link {
                padding: 8px 7px;
                font-size: 12px;
            }
        }

        .select2-container .select2-selection--multiple {
            min-height: 48px;
        }



        .input-group-text.input-group--text {
            border: none;
        }

        .tab-two .nav-link.active {
            background: hsl(var(--base));
            color: hsl(var(--white));
            border: 0;
        }

        .tab-two .nav-link {
            padding: 10px 20px;
        }

        @media screen and (max-width: 1199px) {
            .tab-two .nav-link {
                padding: 7px 12px !important;
                font-size: 14px;
            }
        }

        .tab-two {
            justify-content: flex-start;
            border-radius: 0;
        }

        /*  */

        .form--control {
            height: 48px;
        }

        .selection {
            display: block;
        }

        .input-group-text {
            border-radius: 5px !important;
        }

        .input-group:has(.form-control+.input-group-text) .input-group-text {
            border-top-left-radius: 0 !important;
            border-bottom-left-radius: 0 !important;
        }

        .input-group:has(.input-group-text+.form-control) .input-group-text {
            border-top-right-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
        }


        .select2-container--default .select2-selection--single {
            min-height: 48px;
            border-width: 1px !important;
            border-color: hsl(var(--border)) !important;
            border-radius: 5px !important;
        }

        .select2-container .dropdown-wrapper {
            display: none;
        }

        .select2-container--default .select2-search--dropdown .select2-search__field {
            border-color: hsl(var(--border)) !important;
            border-radius: 5px;
        }

        .select2-container--default .select2-search--dropdown .select2-search__field:focus {
            border-color: hsl(var(--base)) !important;
        }

        .select2-container--focus .select2-selection--single,
        .select2-container--open .select2-selection--single {
            border-color: hsl(var(--base)) !important;
            outline: none !important;
            box-shadow: none !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            top: 12px !important;
        }

        .select2-selection__choice {
            display: inline-flex !important;
        }

        .property-tag .select2-search,
        .select2-container--default .select2-selection--multiple .select2-selection__choice,
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 31px;
        }

        .select2-selection.select2-selection--single .select2-selection__rendered {
            font-size: 1rem;
            font-weight: 400;
            color: #212529;
        }

        .select2-container .select2-selection--multiple,
        .select2-container--default .select2-selection--single {
            min-height: 45px !important;
        }
    </style>
@endpush
