@extends('adminlte::page')

@section('title', 'Add Deal')

@section('css')
    <link rel="stylesheet" href="{{ asset('vendor/daterangepicker/daterangepicker.css') }}" />
    <link href="{{ asset('vendor/toastr/toastr.min.css') }}" rel="stylesheet"/>
    <link rel="stylesheet" href="{{ asset('vendor/dropzone/dropzone.min.css') }}" type="text/css" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet"/>
    <style>
        .d-none {
            display: none;
        }

        .iti{
            display: block !important;
        }
        .error {
            color: red;
            font-weight: 400 !important;
        }
    </style>
    </style>
@endsection
@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Add Deal</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.deals') }}">Deals</a></li>
                    <li class="breadcrumb-item active">Add Deal</li>
                </ol>
            </div>
        </div>
    </div>
</section>
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Add Deal</h3>
                    </div>
                    <div class="card-body">
                        <form class="row" id="AddListingForm" method="POST" >
                            @csrf

                            <div class="col-md-12 col-sm-12 col select-category form-group ">
                                <label for="category" class="form-label">{{ __('Select Category Type') }}</label>
                                <select id="cat_type" class="form-control">
                                    <option value="" selected="selected">Select Category Type</option>
                                    <option value="0">Product</option>
                                    <option value="1">Service</option>
                                </select>
                            </div>

                            <div class="col select-category category-service form-group">
                                <label for="category" class="form-label">{{ __('Select Category') }}</label>
                                <select id="category" class="form-control" name="category_id">
                                    <option value="">Select Category</option>
                                </select>
                            </div>

                            <div class="col-md-12 select-sub-category select-category form-group">
                                <label for="service-category" class="form-label">{{ __('Select Service') }}</label>
                                <select id="service-category" class="form-control" name="service_id">
                                    <option>Select Service</option>
                                </select>
                            </div>
                            <div class="d-flex flex-wrap listing-type col-lg-12 row pr-0">
                                <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-12 form-check regular-listing card m-2 bg-dark">
                                    <div class="card-body custom-control custom-radio">
                                        <input class="form-check-input custom-control-input" type="radio" name="type" id="type" value="0" checked>
                                        <label class="form-check-label font-weight-bold custom-control-label" for="type">{{ __('Regular Listing') }}</label>
                                        <label class="form-check-label d-block"><small>{{ __('For business that has a physical address') }}</small></label>
                                    </div>
                                </div>
                                <div class="col form-check paid-listing card m-2 mr-0 bg-secondary">
                                    <div class="card-body">
                                        <div class="custom-control custom-radio pl-0">
                                            <input class="form-check-input custom-control-input" type="radio" name="type" id="paid-listing" value="1">
                                            <label class="form-check-label custom-control-label font-weight-bold" for="paid-listing">{{ __('Paid Listing') }}</label>
                                        </div>
                                        <div class="listings-type mt-1">
                                            <div class="d-flex align-items-center">
                                                <!-- banner radio -->
                                                <div class="custom-control custom-radio">
                                                    <input type="radio" id="banner" name="p_listing" class="paid__listing__plan custom-control-input custom-control-input-purple" value="1">
                                                    <label for="banner" class="custom-control-label"><span class="text-white mr-2">{{ __('Banner') }}</span></label>
                                                </div>
                                                <!-- offer radio -->
                                                <div class="custom-control custom-radio">
                                                    <input type="radio" id="offer" name="p_listing" class="ms-3 paid__listing__plan custom-control-input custom-control-input-purple" value="2">
                                                    <label for="offer" class="custom-control-label"><span class="text-white mr-2">{{ __('Offer') }}</span></label>
                                                </div>
                                                <!-- permium listing -->
                                                <div class="custom-control custom-radio">
                                                    <input type="radio" id="listing" name="p_listing" class="ms-3 paid__listing__plan custom-control-input custom-control-input-purple" value="3">
                                                    <label for="listing" class="custom-control-label"><span class="text-white mr-2">{{ __('Listing') }}</span></label>
                                                </div>
                                            </div>
                                            <div>

                                                <article class="on">
                                                    <div class="subscription-type flex-wrap align-items-center d-none">
                                                        <div class="d-flex">
                                                            <div class="form-check form-check-inline custom-control custom-checkbox mx-0">
                                                                <input class="form-check-input custom-control-input custom-control-input-dark" type="radio" name="pl_listing" id="inlineRadio1" value="3">
                                                                <label class="form-check-label custom-control-label" for="inlineRadio1">
                                                                    {{-- <img src="{{ asset('vendor/front/images/platinum.png') }}" class="me-1" alt=""> --}}
                                                                    {{ __('Platinum') }}
                                                                </label>
                                                            </div>
                                                            <div class="form-check form-check-inline custom-control custom-checkbox mx-0 pl-2">
                                                                <input class="form-check-input custom-control-input custom-control-input-dark" type="radio" name="pl_listing" id="inlineRadio2" value="4">
                                                                <label class="form-check-label custom-control-label" for="inlineRadio2">
                                                                    {{-- <img src="{{ asset('vendor/front/images/gold.png') }}" class="me-1" alt=""> --}}
                                                                    {{ __('Gold') }}
                                                                </label>
                                                            </div>
                                                            <div class="form-check form-check-inline custom-control custom-checkbox mx-0 pl-2">
                                                                <input class="form-check-input custom-control-input custom-control-input-dark" type="radio" name="pl_listing" id="inlineRadio3" value="5">
                                                                <label class="form-check-label custom-control-label" for="inlineRadio3">
                                                                    {{-- <img src="{{ asset('vendor/front/images/silver.png') }}" class="me-1" alt=""> --}}
                                                                    {{ __('Silver') }}
                                                                </label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </article>

                                                <article class="on">
                                                    <div class="subscription-duration align-items-center w-auto d-none">
                                                        <div class="d-flex border py-2 rounded mt-2">
                                                            <div class="form-check form-check-inline custom-control custom-checkbox mx-0">
                                                                <input class="form-check-input custom-control-input custom-control-input-dark" type="radio" checked name="day_month" id="day_month1" value="3">
                                                                <label class="form-check-label custom-control-label" for="day_month1">
                                                                    {{-- <img src="{{ asset('vendor/front/images/platinum.png') }}" class="me-1" alt=""> --}}
                                                                    {{ __('3 Months') }}
                                                                </label>
                                                            </div>
                                                            <div class="form-check form-check-inline custom-control custom-checkbox mx-0 pl-2">
                                                                <input class="form-check-input custom-control-input custom-control-input-dark" type="radio" name="day_month" id="day_month2" value="6">
                                                                <label class="form-check-label custom-control-label" for="day_month2">
                                                                    {{-- <img src="{{ asset('vendor/front/images/gold.png') }}" class="me-1" alt=""> --}}
                                                                    {{ __('6 Months')  }}
                                                                </label>
                                                            </div>
                                                            <div class="form-check form-check-inline custom-control custom-checkbox mx-0 pl-2">
                                                                <input class="form-check-input custom-control-input custom-control-input-dark" type="radio" name="day_month" id="day_month3" value="12">
                                                                <label class="form-check-label custom-control-label" for="day_month3">
                                                                    {{-- <img src="{{ asset('vendor/front/images/silver.png') }}" class="me-1" alt=""> --}}
                                                                    {{ __('12 Months')  }}
                                                                </label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </article>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <label for="title" class="form-label">{{ __('Title') }}</label>
                                <input type="text" class="form-control" id="title" name="title" placeholder="">
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <label for="listing_owner" class="form-label">{{ __('Listing owner') }}</label>
                                <input type="email" class="form-control" id="listing_owner" name="listing_owner" placeholder="My self ( {{ \Auth::user()->email }} )">
                                <label for="listing_owner" class="form-label">
                                    <small>{{ __('Listing owner cannot change after creation') }}</small>
                                </label>
                            </div>
                            <div class="col-lg-12 row g-4 mx-0 px-0 mb-2">
                                <div class="col-md-4 col-sm-12">
                                    <label for="phone_number" class="form-label d-block">{{ __('Phone') }}</label>
                                    <input type="text" class="form-control" id="phone_number" placeholder="" name="phone_number" maxlength="7" oninput="javascript: this.value = this.value.replace(/[^0-9]/g, ''); if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);">
                                </div>
                                <div class="col">
                                    <label for="yt_video_id" class="form-label">{{ __('Youtube video id') }}</label>
                                    <input type="url" class="form-control" id="yt_video_id" placeholder="" name="yt_video_id">
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12 form-group">
                                <label for="state" class="form-label">{{ __('State') }}</label>
                                <select id="state" class="form-select" placeholder="Select State" name="state" multiple>
                                    {{-- <option value="">select region</option> --}}
                                    @foreach($regions as $region)
                                        @if($region->id != 1)
                                            <option value="{{ $region->id }}">{{ $region->name }}</option>
                                        @endif
                                    @endforeach
                                </select>
                                <label for="{{ __('Country Wide') }}" class="form-label mt-1">
                                    <span class="me-2"> {{ __('Country Wide') }}</span>
                                    <input type="checkbox" id="test">
                                </label>
                            </div>
                            <div class="col-md-6 col-sm-12 form-group">
                                <label for="city" class="form-label">{{ __('City') }}</label>
                                <select id="city" class="form-select" placeholder="Select City" name="city" multiple>
                                    @foreach($regions[0]->areas as $area)
                                    <option value="{{ $area->id }}">{{ $area->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            {{-- <div class="col-md-4 col-sm-12">
                                <label for="postal_code" class="form-label">{{ __('Postal Code') }}</label>
                                <input type="text" class="form-control" id="postal_code" placeholder="" name="postal_code" maxlength="6" oninput="javascript: this.value = this.value.replace(/[^0-9]/g, ''); if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);">
                            </div> --}}
                            <div class="col-xxl-12 col-xl-12 col-md-12 col-sm-12">
                                <label for="inputAddress" class="form-label">{{ __('Address') }}</label>
                                <textarea class="form-control" id="inputAddress" rows="6" name="address"></textarea>
                            </div>
                            <div class="form-check custom-control custom-checkbox ps-2 mt-1 col-12">
                                <input class="custom-control-input form-check-input ms-1 p-2 me-3" type="checkbox" name="hide_address" value="0" id="hide_address">
                                <label class="custom-control-label hide-address ml-2" for="hide_address">
                                    {{ __('Hide Address') }}
                                    <small><b class="ms-2">{{ __('(The address will hide from front business listing page except state and city.)') }}</b></small>
                                </label>
                            </div>
                            <div class="col-12 lmg__duration">
                                <label class="form-label">{{ __('Select Listing Duration') }}</label>
                                <input type="text" name="duration" class="form-control" id="duration">
                            </div>
                            <div class="col-12 my-2">
                                <label for="description" class="form-label">{{ __('Description') }}</label>
                                <textarea class="form-control" id="description" rows="6" name="description"></textarea>
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12">
                                <label for="website_url" class="form-label">{{ __('Website') }}</label>
                                <input type="url" class="form-control" id="website_url" placeholder="" name="website_url">
                                <label for="website_url" class="form-label">
                                    <small>{{ __('Only URL allowed (include http:// or https://)') }}</small>
                                </label>
                            </div>
                            <div class="col-lg-3 col-md-6 col-sm-12">
                                <label for="facebook" class="form-label">{{ __('Facebook') }}</label>
                                <input type="url" class="form-control" id="facebook" placeholder="" name="facebook_url">
                                <label for="facebook" class="form-label">
                                    <small>{{ __('Only URL allowed (include http:// or https://)') }}</small>
                                </label>
                            </div>
                            <div class="col-lg-3 col-md-6 col-sm-12">
                                <label for="twitter" class="form-label">{{ __('Twitter') }}</label>
                                <input type="url" class="form-control" id="twitter" placeholder="" name="twitter_url">
                                <label for="twitter" class="form-label">
                                    <small>{{ __('Only URL allowed (include http:// or https://)') }}</small>
                                </label>
                            </div>
                            <div class="col-12" id="dropzone">
                                <label for="lmg-dropzone" class="form-label">{{ __('Upload Images') }}</label>

                                        <div class="fallback dropzone needsclick dz-clickable" id="lmg-dropzone">
                                            <div class="dz-message needsclick">
                                                <span class="text">
                                                    {{ __('Add Images here') }}
                                                </span>
                                                <span class="plus" >{{ __('+') }}</span>
                                            </div>
                                        </div>


                                <input type="hidden" name="images">
                            </div>
                            <div class="row justify-content-center">
                                <div class="col-auto review_btn mt-4">
                                    <button class="btn btn-primary" id="lmg__add-listing-submit-btn">{{ __('Submit') }}</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@section('adminlte_js')
    <script src="{{ asset('vendor/moment/moment.min.js') }}"></script>
    <script src="{{ asset('vendor/jquery-validation/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('vendor/jquery-validation/additional-methods.min.js') }}"></script>
    <script src="{{ asset('vendor/daterangepicker/daterangepicker.js') }}"></script>
    <script src="{{ asset('vendor/toastr/toastr.min.js') }}"></script>
    <script src="{{ asset('vendor/dropzone/dropzone.min.js') }}"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.15/css/intlTelInput.css" integrity="sha512-gxWow8Mo6q6pLa1XH/CcH8JyiSDEtiwJV78E+D+QP0EVasFs8wKXq16G8CLD4CJ2SnonHr4Lm/yY2fSI2+cbmw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.15/js/intlTelInput.min.js" integrity="sha512-L3moecKIMM1UtlzYZdiGlge2+bugLObEFLOFscaltlJ82y0my6mTUugiz6fQiSc5MaS7Ce0idFJzabEAl43XHg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.15/js/utils.min.js" integrity="sha512-LFWtoG1tvcDc6wZLVmditfb3DDPT+qd1NN/KJPQFgo//p5jvYiwcJsm4YjxDvao/JfT1xOzFJqzXOZkhLPpUvQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>

    <script>
        $('#state').select2({
          width: '100%',
          placeholder: "Select an Region",
          allowClear: false,
          closeOnSelect: false,
        //   allowClear: true,
        });
    
        $('#city').select2({
          width: '100%',
          allowClear: false,
          placeholder: "Select an City",
        //   allowClear: true,
          closeOnSelect: false
        });
    </script>
    <script>
        $(document).on('click', '#test', function () {
            if($("#test").is(':checked') ){ //select all
                $("#state").find('option').prop("selected",true);
                $('#state option[value="1"]').prop('selected', false);
                $("#state").trigger('change');
                $('#state').prop('disabled',true);
                
            } else { //deselect all
                $("#state").find('option').prop("selected",false);
                $('#state').prop('disabled',false);
                $("#state").trigger('change');
            }
        });

        var myDropzone;
        var _token = '{{ csrf_token() }}';
        Dropzone.autoDiscover = false;
        Dropzone.options.dropImage = {
            autoProcessQueue:false,
        }

        var input = document.querySelector("#phone_number");
        window.intlTelInput(input, {
            onlyCountries: ["gm"],
            formatOnDisplay : false,
            separateDialCode: true,
        });

        jQuery.validator.addMethod("lettersonly", function(value, element) {
            return this.optional(element) || /^[a-z\s]+$/i.test(value);
        }, "Only alphabetical characters");

        jQuery.validator.addMethod("twittererror", function(value, element) {
            if(value) {
                let re = new RegExp(/^(https?:\/\/)?(www\.)?twitter\.com.*$/);
                return this.optional(element) || re.test(value);
            }
            return true;
        }, "Please enter valid twitter URL");

        jQuery.validator.addMethod("youtubeerror", function(value, element) {
            if(value) {
                let re = new RegExp(/^(https?:\/\/)?(www\.)?youtube\.com.*$/);
                return this.optional(element) || re.test(value);
            }
            return true;
        }, "Please enter valid youtube URL");

        jQuery.validator.addMethod("linkedinerror", function(value, element) {
            let re = new RegExp(/^(https?:\/\/)?(([a-z]{2,3})\.)?linkedin\.com.*$/);
            return this.optional(element) || re.test(value);
        }, "Please enter valid linkedin URL");

        jQuery.validator.addMethod("facebookerror", function(value, element) {
            if(value) {
                let re = new RegExp(/^(https?:\/\/)?((www|[a-z]{2}-[a-z]{2})\.)?facebook\.com.*$/);
                return this.optional(element) || re.test(value);
            }
            return true;
        }, "Please enter valid facebook URL");

        jQuery.validator.addMethod('off_words', function (value, element) {
            if("{!!$offensiveWords!!}" == '|' || "{!!$offensiveWords!!}" == '') {
            
                return true;
            }
            let re = new RegExp(/({!!$offensiveWords!!})/i);
            return this.optional(element) || !re.test(value);
        }, "Offensive words not allowed");

        $.validator.addMethod("wordCount", function(value, element) {
            var words = value.match(/\S+/g).length;
            return words <= 250;
        }, 'You can enter max 250 words in description');
        // initialize dropzone
        Dropzone.autoDiscover = false;
        myDropzone = new Dropzone(
            "#lmg-dropzone",
            {
                url: "{{ route('admin.deals.store') }}",
                autoProcessQueue: false,
                addRemoveLinks: true,
                uploadMultiple: true,
                parallelUploads: 10,
                maxFiles: 10,
                maxFilesize: 10,
                paramName: "images",
                acceptedFiles: ".jpeg,.jpg,.png,.webp",
                addRemoveLinks: true,
                renameFile: function (file) {
                    let newName = new Date().getTime() + '_list_img.' + file.name.split('.').pop();
                    return newName;
                },
                maxfilesexceeded: function (file) {
                    toastr.error('Allowed upto 10 images');
                    dzClosure.removeFile(file);
                },
                init: function () {
                    dzClosure = this;
                    var form = $('#AddListingForm');
                    form.validate({
                        ignore: [],
                        rules: {
                            "cat_type" : {
                                required:true
                            },
                            "category_id" : {
                                required : true
                            },
                            "service_id" : {
                                required: function(element) {
                                    return $(element).find("option").length > 1;
                                }
                            },
                            "type" : {
                                required : true
                            },
                            "title" : {
                                required : true,
                                maxlength: 255,
                                lettersonly : true,
                                off_words: true
                            },
                            "listing_owner" : {
                                required : true,
                                email: true
                            },
                            "phone_number" : {
                                required : true,
                                digits: true,
                                minlength: 7,
                                maxlength: 7,
                            },
                            "yt_video_id" : {
                                url: true,
                                youtubeerror:true
                            },
                            "banner_status" : {
                                required : true
                            },
                            "state" : {
                                required : true
                            },
                            "city" : {
                                required : true
                            },
                            "address" : {
                                required : true,
                                maxlength: 255,
                            },
                            "duration" : {
                                required: function(element) {
                                    return $("input[name='type']").val() == "1";
                                },
                            },
                            "description" : {
                                required : true,
                                wordCount: true,
                                off_words: true
                            },
                            "facebook_url" : {
                                url: true,
                                facebookerror:true
                            },
                            "twitter_url" : {
                                url: true,
                                twittererror:true
                            },
                            "website_url" : {
                                url: true
                            },
                            "p_listing" : {
                                required: function(element) {
                                    return $("input[name='type']").val() == "1";
                                },
                            },
                            "pl_listing" : {
                                required: function(element) {
                                    return $("input[name='p_listing']").val() == "3";
                                },
                            },
                        },
                        errorPlacement: function (error, element) {
                            element.addClass('is-invalid');
                            if($(element).attr("id") == 'phone_number') {
                                return $(error).appendTo( $(element).parent().parent());
                            }
                            element.after(error);
                        },
                        messages : {
                            // title : {
                            //     required : "Title Field is Required"
                            // }
                        },
                        submitHandler: function (form) {
                            $('#lmg__add-listing-submit-btn').click();
                        }
                    });
                    $(document).on('click', '#lmg__add-listing-submit-btn', function(e) {
                        // Make sure that the form isn't actually being sent.
                        e.preventDefault();
                        e.stopPropagation();
                        var formValid = form.valid();
                        var cover_image_length = $('.dz_cover_image').not('.d-none').length;
                        if (myDropzone.getQueuedFiles().length >= 1) {
                            if (formValid) {
                                var files = myDropzone.getAcceptedFiles();
                                var i = 0;
                                $.each(files, function (index, value) {
                                    if (value) {
                                        if ($(value.previewElement).find('.dz-image.active').length) {
                                            value.cover_image = true;
                                            cover_image = value;
                                            i = 1;
                                            if (myDropzone.getQueuedFiles().length > 1) {
                                                myDropzone.removeFile(value);
                                            } else {
                                                cover_image = '';
                                            }
                                        }
                                    }
                                });

                                if ((myDropzone.getQueuedFiles().length > 1 && !cover_image) || (myDropzone.getQueuedFiles().length > 1 && cover_image_length == 0) || (myDropzone.getQueuedFiles().length > 1 && i == 0)) {
                                    toastr.error('Please select Cover Image');
                                    return false;
                                }
                                // showLoader();
                                myDropzone.processQueue();
                            } else {
                                $($('.error')[0]).focus()
                                return formValid;
                            }
                        } else {
                            if (formValid) {
                                var scrollToDropzone =  $("#dropzone").offset().top;
                                $(window).scrollTop(scrollToDropzone);
                                toastr.error('Please add at least one Image');
                                return false;
                            } else {
                                return formValid;
                            }
                        }
                    });
                }
                // ..your other parameters..
            }
        );

        myDropzone.on("addedfiles", function (files) {
            $(".dz-progress").remove();
        });

        myDropzone.on('success', function (file, response) {
            console.log('success');
            if (response.success) {
                toastr.success(response.message);
                // window.location.href = response.redirectURL;
            } else {
                $.each(myDropzone.files, function(i, file) {
                    file.status = Dropzone.QUEUED
                });
                hideLoader();
                toastr.error(response.message)
            }
        });

        // listen to thumbnail event
        myDropzone.on('thumbnail', function (file) {
            var $dz_cover_image = $('<div class="dz_cover_image d-none notranslate">Cover Image</div>');
            $(file.previewElement).append($dz_cover_image);

            var blob = URL.createObjectURL(file)
            var $file = $('<span style="display: none;" class="js-file" data-file="' + blob + '" data-file-name="' + file.name + '"></span>');
            $(file.previewElement).append($file);
        });

        myDropzone.on("sendingmultiple", function (data, xhr, formData) {
            $('#AddListingForm').find("input, select, textarea").each(function(){
                if($(this).val()) {
                    formData.append($(this).attr("name"), $(this).val());
                }
            });
            formData.append('start_duration', $("#duration").data('daterangepicker').startDate.format('YYYY-MM-DD'));
            formData.append('end_duration', $("#duration").data('daterangepicker').endDate.format('YYYY-MM-DD'));
            var type = '';
            if ($('input[name=type]:checked').val() == 1) {
                if ($('input[name=p_listing]:checked').val() == 3) {
                    type = $('input[name=pl_listing]:checked').val();
                } else {
                    type = $('input[name=p_listing]:checked').val();
                }
            } else {
                type = 0;
            }
            if (type === '') {
                toastr.error('Something Went Wrong');
                window.location.reload();
                return false;
            }
            formData.set('type', type);
            if ($('input[name=hide_address]').is(':checked')) {
                formData.set('hide_address', 1);
            } else {
                formData.set('hide_address', 0);
            }
            if (cover_image) {
                formData.set('cover_image', cover_image);
            }
        });

        myDropzone.on('error', function (file, errorMessage) {

            if ($.type(errorMessage) === 'string') {
                var message = errorMessage //dropzone sends it's own error messages in string
            } else {
                var message = errorMessage.errors.file
                if(errorMessage.errors.file) {
                    file.previewElement.classList.add('dz-error')
                    _ref = file.previewElement.querySelectorAll('[data-dz-errormessage]');
                    _results = []
                    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
                        node = _ref[_i];
                        node.parentElement.style.opacity = 1;
                        _results.push(node.textContent = message)
                    }
                }
                else {
                    file.previewElement.classList.remove('dz-error')
                    _ref = file.previewElement.querySelectorAll('[data-dz-errormessage]');
                    _results = [];
                    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
                        node = _ref[_i];
                        node.parentElement.style.opacity = 0;
                        _results.push(node.textContent = message)
                    }
                }
            }


            // check error after file upload and form submitted
            $.each(errorMessage.errors, function (index, value) {
                var error_message = '<label id="'+ index +'-error" class="error" for="' + index + '">' + value + '</label>';
                if (index.split('.')[1]) {
                    index = index.split('.')[0] + '[]';
                    if (index == 'images[]') {
                        index = 'images';
                        $('#image-err').html(error_message);
                        $('#image-err').addClass('error');
                    }
                } else {
                    index = index.split('.')[0];
                }
                $('[name="' + index + '"]').after(error_message);
            });

            if (file.accepted) {
                var errs = JSON.parse(JSON.stringify(errorMessage.errors))
                $.each(errs, function (key, val) {
                    $('#err').append(val)
                });
            } else {
                if (myDropzone.getQueuedFiles().length < 10) {
                    toastr.error('You can upload image of allowed size 10MB each');
                }
                myDropzone.removeFile(file)
            }
            $.each(myDropzone.files, function(i, file) {
                file.status = Dropzone.QUEUED
            });

            $('#lmg__add-listing-submit-btn').removeAttr('disabled')
            hideLoader()
        });

        var cover_image = '';

        $('#lmg-dropzone').on('click', '.dz-preview.dz-image-preview', function(e) {
            var _eThis = $(this);
            $('.dz-image').removeClass('active');
            $('.dz_cover_image').not('.d-none').addClass('d-none');
            var blob = _eThis.find('.js-file').attr('data-file');
            var blob_name = _eThis.find('.js-file').attr('data-file-name');

            cover_image = new File([blob], blob_name, { type : 'image/' + blob_name.split('.').pop(), cover_image : true });
            _eThis.find('.dz-image').addClass('active');
            _eThis.find('.dz_cover_image').removeClass('d-none');
        });

        $(function() {
            $('input[name="duration"]').daterangepicker({
                timePicker:false,
                minDate: moment().add(1, 'day'),
                startDate: moment().add(1, 'day'),
                endDate: moment().add(3, 'day'),
                dateFormat: 'yyyy-mm-dd',
            });
        });

        let categories = {!! json_encode($categories->flatten()) !!};
        let sub_categories = {!! json_encode($categories->pluck('subCategories')->flatten()) !!};
        let areas = {!! json_encode($regions->pluck('areas')->flatten()) !!};
        let states = {!! json_encode($states) !!};

        $(document).on('change', '#cat_type', function () {
        let type = $(this).val();
        let filter_categories = categories.filter(function(val) {
            return val.type == type;
        });

        let options = '<option value="">Choose Category</option>';
        $.each(filter_categories, function (key, value) {
            options += '<option value="'+ value.id +'">'+ value.name +'</option>';
        });
        $('#category').html(options);
        $('#category').trigger("change");
    });

    $(document).on("change", "#category", function(){

        let id = $(this).val();

        let filter_sub_categories = sub_categories.filter(function(val) {
            return val.parent_id == id;
        });

        let options = '';
        $.each(filter_sub_categories, function (key, value) {
            options += '<option value="'+ value.id +'">'+ value.name +'</option>';
        });

        if(filter_sub_categories.length)
            $(".select-sub-category").show();
        else
            $(".select-sub-category").hide();

        $("#service-category").html(options);

    });

        // $(document).on('change', '#state', function () {
        //     let id = $(this).val();
        //     let filter_areas = areas.filter(function(val) {
        //         return val.region_id == id;
        //     });

        //     let options = '';
        //     $.each(filter_areas, function (key, value) {
        //         options += '<option value="'+ value.id +'">'+ value.name +'</option>';
        //     });
        //     $('#city').html(options);
        // });

        $(document).on('change', '#state', function () {
            const ids = [];
            $('#state').each(function () {
                ids.push($(this).val());
            });
            
            console.log(states);
            var res = JSON.parse('['+ids+']');
            let options = '';
            if(JSON.stringify(res) == JSON.stringify(states)) {
                options += '<option value="'+ 1 +'" selected>'+ "All" +'</option>';
                $('#city').prop('disabled',true);
            } else {
                $('#city').prop('disabled',false);
                let filter_areas = areas.filter(function(val)  {
                    return ids[0].includes(val.region_id.toString()); 
                });
                
                $.each(filter_areas, function (key, value) {
                    options += '<option value="'+ value.id +'">'+ value.name +'</option>';
                });
            }
            $('#city').html(options);
            
        });

        $(document).on('change', '.form-control.valid, .form-control.error, .form-check-input.error', function () {
            var _eThis = $(this);
            if (_eThis.valid()) {
                _eThis.removeClass('is-invalid');
            } else {
                _eThis.addClass('is-invalid');
            }
        });

        $('.paid__listing__plan').prop('disabled', true);
        $('.lmg__duration').not('.d-none').addClass('d-none');

        $(document).on('change', 'input[name=type]', function () {
            var _eThis = $(this);
            if (_eThis.val() == 1) {
                $('.paid__listing__plan').prop('disabled', false);
                $('.lmg__duration').removeClass('d-none');
                $($('.paid__listing__plan')[0]).prop('checked', true);
            } else {
                $('.paid__listing__plan').prop('checked', false);
                $('input[name=pl_listing]').prop('checked', false);

                $('.paid__listing__plan').prop('disabled', true);

                $(".subscription-type").addClass("d-none");
                $('.lmg__duration').not('.d-none').addClass('d-none');
                $(".banner__status").removeClass("d-none");
            }
        });
        $(document).on("click", ".paid__listing__plan", function(){
            $(".subscription-type").addClass("d-none");
            $(".banner__status").addClass("d-none");
            $('.lmg__duration').hide();
            if ($(this).val() == 3) {
                $(".subscription-type").removeClass("d-none");
                $($('input[name=pl_listing]')[0]).prop('checked', true);
            } else {
                $('.lmg__duration').show();
                $('input[name=pl_listing]').prop('checked', false);
            }
        });
    </script>
@endsection