@extends('admin.layouts.app')
@section('panel')

    <div class="row mb-none-30">
        <div class="col-lg-12 col-md-12 mb-30">
            <div class="card">
                <div class="card-body">

                <form action="{{ route('admin.listing.store_admin_listing') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="create-listing-form">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group ">
                                    <label> @lang('Title')</label>
                                    <input class="form-control" type="text" name="title" required value="">
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="form--label required">@lang('Description')</label>
                                    <textarea class="form-control " name="description" rows="5" style="line-height:24px;">{{ old('description') }}</textarea>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="form-label">@lang('Category')</label>
                                    <select name="category_id" class="form-control" required>
                                        <option disabled selected value="">@lang('Select one')</option>
                                        @foreach ($categories as $category)
                                            <option value="{{ $category->id }}">
                                                {{ __($category->name) }} </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="form-label">@lang('Region')</label>
                                    <select name="region_id" class="form-control select2" onchange="get_region_cities(this.value)" required>
                                        <option disabled selected value="">@lang('Select one')</option>
                                        @foreach ($regions as $region)
                                            <option value="{{ $region->id }}">
                                                {{ __($region->name) }} </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="form-label">@lang('City')</label>
                                    <select name="city_id" class="form-control select2" required>
                                        <option disabled selected value="">@lang('Select one')</option>
                                        
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="form-group">
                                    <label class="form-label">@lang('Location')</label>
                                    <input type="text" name="location" class="form-control" value="{{ old('location') }}" required>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="form-label">@lang('Google Map') <i class="las la-info-circle" title="@lang('Embed link')"></i></label>

                                    <input type="text" class="form-control" name="map" value="{{ old('map') }}" />
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="form-label">@lang('Tags') </label>
                                    <small class="ms-2">@lang('Separate multiple keywords by') <code>,</code>(@lang('comma'))
                                        @lang('or') <code>@lang('enter')</code> @lang('key')</small>
                                    <select class="form-control select2-auto-tokenize listingTags" name="tags[]" multiple="multiple">
                                        
                                    </select>
                                </div>
                            </div>

                            <div class="create-listing-form-body border-top">
                                <h5 class="d-inline me-2">@lang('Amenities')</h5>
                                <small class="text--danger"> (@lang('You can add maximum amount of') 5 @lang('amenities'))</small>

                                <div class="d-flex justify-content-end align-items-center mb-3">
                                    <button type="button" class="btn btn--sm btn-outline--secondary amenityAddBtn">
                                        <la class="la la-plus"></la> @lang('Add Amenity')
                                    </button>
                                </div>

                                <div class="amenities-wrapper d-flex gap-3 flex-wrap mb-2">
                                    
                                    

                                </div>
                            </div>

                            <div class="create-listing-form-body border-top">
                                <h5>@lang('Operating Hours')</h5>

                                <div class="row">

                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="form-label">@lang('Day Off')</label>
                                            <select class="form-control dayOff" name="day_off[]" multiple>
                                                <option value="saturday">@lang('Saturday')</option>
                                                <option value="sunday">@lang('Sunday')</option>
                                                <option value="monday">@lang('Monday')</option>
                                                <option value="tuesday">@lang('Tuesday')</option>
                                                <option value="wednesday">@lang('Wednesday')</option>
                                                <option value="thursday">@lang('Thursday')</option>
                                                <option value="friday">@lang('Friday')</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            @php $openTime = @$listing->open_time ? showDateTime(@$listing->open_time, 'H:i') : '' @endphp
                                            <label class="form--label">@lang('Office Open')</label>
                                            <input type="time" class="form-control form--control" name="open_time" value="{{ old('open_time', $openTime) }}" autocomplete="off" />
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            @php $closeTime = @$listing->close_time ? showDateTime(@$listing->close_time, 'H:i') : '' @endphp
                                            <label class="form--label">@lang('Office Close')</label>
                                            <input type="time" class="form-control form--control" name="close_time" value="{{ old('close_time', $closeTime) }}" autocomplete="off" />
                                        </div>
                                    </div>
                                </div>


                            </div>

                            <div class="create-listing-form-body border-top">
                                <h5>@lang('Media Content')</h5>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label class="form-label">@lang('Display Image') </label>
                                            <input type='file' class="form-control form-control" name="display_image" id="listingCoverUpload" accept=".png, .jpg, .jpeg" @if (!@$listing->id) required @endif />
                                            <small>
                                                <i class="la la-info-circle"></i> @lang('The image will be resized into') {{ getFileSize('listing') }}
                                            </small>

                                            <div class="image-preview">
                                                <img src="@if (@$listing->display_image) {{ getImage(getFilePath('listing') . '/' . @$listing->display_image) }} @else {{ asset('assets/images/placeholder-image.png') }} @endif" alt="">
                                            </div>

                                        </div>
                                    </div>

                                    
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="form-label">@lang('Gallery Images') <small class="text--danger"> (@lang('You can add maximum amount of') 5 @lang('images'))</small></label>
                                            </label>
                                            <div class="row">
                                                <div class="input-images pb-3"></div>
                                            </div>
                                        </div>
                                    </div>
                                    

                                    
                                    <div class="col-md-12">
                                        <div class="form-group">

                                            <div class="file-upload">

                                                <div class="d-flex justify-content-between">
                                                    <label class="form-label">
                                                        @lang('Videos') <i class="las la-info-circle" title="@lang('You need to put the youtube embed link only.')"></i>
                                                        <small class="text--danger"> @lang('You can add maximum amount of') 5 @lang('videos')</small>
                                                    </label>
                                                    <button type="button" class="btn btn--sm btn-outline--secondary addVideoBtn">
                                                        <i class="las la-plus"></i> @lang('Add Video')
                                                    </button>
                                                </div>

                                                
                                                    
                                                

                                                <div id="listingVideoContainer"></div>

                                            </div>

                                        </div>
                                    </div>
                                    

                                </div>
                                <button type="submit" class="btn btn--primary w-100 h-45">@lang('Submit')</button>
                            </div>

                        </div>
                    </div>


                </form>

                </div>
            </div>
        </div>  
    </div>

@endsection

@push('style')
    <style>
        .form--control,
        .image-uploader {
            border-radius: 0.5rem;
        }

        .image-uploader {
            border: 1px solid hsl(var(--black)/0.1);
        }

        .image-preview {
            margin-top: .8rem;
            width: 217px;
            height: 126px;
            padding: 2px;
            border: 1px solid hsl(var(--black)/0.1);
            border-radius: 3px;
        }

        .image-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .input-group-text {
            background-color: #fbfbfb;
            border: 1px solid #e9e9e9;
            border-radius: .5rem;
        }

        :focus-visible {
            outline: none !important;
        }
        .upload-text, .image-preview{
            border: 1px solid #e5e3e3;
            border-radius: 4px;
        }
    </style>
@endpush

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

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

@push('script')
    <script>

        (function($) {
            "use strict";

            @if (old() && old('category_id'))
                $('[name=category_id]').val(@json(old('category_id')));
            @endif

            @if (old() && old('city_id'))
                $('[name=city_id]').val(@json(old('city_id')));
            @endif

            @if (old() && old('day_off'))
                $('.dayOff').val(@json(old('day_off')));
            @elseif (isset($listing->day_off))
                $('.dayOff').val(@json($listing->day_off));
            @endif

            bkLib.onDomLoaded(function() {
                $(".nicEdit").each(function(index) {
                    $(this).attr("id", "nicEditor" + index);
                    new nicEditor({
                        fullPanel: true
                    }).panelInstance('nicEditor' + index, {
                        hasPanel: true
                    });
                });
            });

            $(document).on('mouseover ', '.nicEdit-main,.nicEdit-panelContain', function() {
                $('.nicEdit-main').focus();
            });

            $('.select2-auto-tokenize-aminity').select2({
                dropdownParent: $('.create-listing-form'),
                tags: true,
                maximumSelectionLength: 5,
                tokenSeparators: [','],
            });

            $('.select2-auto-tokenize').select2({
                dropdownParent: $('.create-listing-form'),
                tags: true,
                maximumSelectionLength: 10,
                tokenSeparators: [','],
            });

            // image uploder
            @if (isset($images))
                let preloaded = @json($images);
            @else
                let preloaded = [];
            @endif

            $('.input-images').imageUploader({
                preloaded: preloaded,
                imagesInputName: 'images',
                preloadedInputName: 'old',
                maxSize: 3 * 1024 * 1024,
                maxFiles: 5,
            });

            $('.addVideoBtn').on('click', function() {
                let count = $(document).find('.singleVideo').length;
                let max =5 * 1;

                if (count < max) {
                    $("#listingVideoContainer").append(`
                        <div class="input-group my-3 singleVideo">
                            <input type="text" name="videos[]" placeholder="i.e. https://www.youtube.com/embed/WOb4cj7izpE" class="form-control form--control control-two" required />
                            <button type="button" class="input-group-text btn--danger remove-btn text-white"><i class="las la-times"></i></button>
                        </div>
                    `)
                }
            });

            $(document).on('click', '.remove-btn', function() {
                $(this).parent().remove();
            });

            $('.amenityAddBtn').on('click', function() {
                let count = $(document).find('.singleAmenity').length;
                let max = 5 * 1;
                if (count < max) {
                    $('.amenities-wrapper').append(`
                        <div class="input-group singleAmenity">
                            <input type="text" name="amenities[${count}][name]" placeholder="@lang('Name')" class="form-control form--control">
                            <input type="text" name="amenities[${count}][value]" placeholder="@lang('Value')" class="form-control form--control">
                            <button type="button" class="btn btn-sm btn--danger h-auto py-0 px-3 amenityRemoveBtn"><i class="la la-times"></i></button>
                        </div>
                    `);
                }
            });

            $(document).on('click', '.amenityRemoveBtn', function() {
                $(this).parent().remove();
            });

            $('.dayOff').select2();


            //image
            function displayImage(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        var preview = $(input).parent().find('.image-preview img');
                        $(preview).attr('src', e.target.result);
                        $(preview).addClass('has-image');
                        $(preview).hide();
                        $(preview).fadeIn(650);
                    }
                    reader.readAsDataURL(input.files[0]);
                }
            }

            $("#listingCoverUpload").on('change', function() {
                displayImage(this);
            });

        })(jQuery);

        function get_region_cities(region_id){

            $.get('/get_region_cities/'+region_id, function(res){
                $('#city_id').empty();
                $.each(res.cities, function(index, city) {
                    
                    $('#city_id').append($('<option>', { 
                        value: city.id,
                        text : city.name 
                    }));
                });
            });
        }
    </script>
@endpush