@extends('adminlte::page')

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

@section('css')
    <link rel="stylesheet" href="{{ asset('vendor/daterangepicker/daterangepicker.css') }}" />
    <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
    <style>
        .d-none {
            display: none;
        }
    </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('manager.dashboard') }}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('manager.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" action="{{ route('vendor.listing.store') }}">
                            @csrf
                            <div class="col select-category category-service form-group">
                                <label for="category" class="form-label">{{ __('Select category') }}</label>
                                <select id="category" class="form-select form-control" name="category_id">
                                    @foreach ($categories->sortBy('name') as $category)
                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                    @endforeach
                                </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-select form-control" name="service_id">
                                    @foreach($categories->sortBy('name')->first()->subCategories->sortBy('name') as $category)
                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                    @endforeach
                                </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">
                                                    <h2></h2>
                                                </article>
                                                <article class="on">
                                                    <h2></h2>
                                                </article>
                                                <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>
                                            </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="Myself (admin@mail.com)">
                                <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">
                                <div class="col-md-4 col-sm-12">
                                    <label for="phone_number" class="form-label">{{ __('Phone') }}</label>
                                    <input type="text" class="form-control" id="phone_number" placeholder="" name="phone_number" maxlength="10" 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 class="banner__status col-md-4 col-sm-12 form-group">
                                    <label for="banner_status" class="form-label">{{ __('Status') }}</label>
                                    <select id="banner_status" class="form-select form-control" name="banner_status">
                                        <option selected="" value="1">{{ __('Published') }}</option>
                                        <option value="2">...</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-12 form-group">
                                <label for="state" class="form-label">{{ __('State') }}</label>
                                <select id="state" class="form-select form-control" placeholder="Select State" name="state">
                                    @foreach($regions as $region)
                                    <option value="{{ $region->id }}">{{ $region->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4 col-sm-12 form-group">
                                <label for="city" class="form-label">{{ __('City') }}</label>
                                <select id="city" class="form-select form-control" placeholder="Select City" name="city">
                                    @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-3 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-lg-3 col-md-6 col-sm-12">
                                <label for="LinkedIn" class="form-label">{{ __('LinkedIn') }}</label>
                                <input type="url" class="form-control" id="LinkedIn" placeholder="" name="linkedin_url">
                                <label for="LinkedIn" 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">
                                            {{ __('Drop Images Here') }}
                                        </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="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
    <script>
        var myDropzone;
        var _token = '{{ csrf_token() }}';
        Dropzone.autoDiscover = false;
        Dropzone.options.dropImage = {
            autoProcessQueue:false,
        }

        // initialize dropzone
        Dropzone.autoDiscover = false;
        myDropzone = new Dropzone(
            "#lmg-dropzone",
            {
                url: "{{ route('vendor.listing.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: {
                            "category_id" : {
                                required : true
                            },
                            "service_id" : {
                                required : true
                            },
                            "type" : {
                                required : true
                            },
                            "title" : {
                                required : true,
                                maxlength: 255
                            },
                            "listing_owner" : {
                                required : true,
                                email: true
                            },
                            "phone_number" : {
                                required : true,
                                digits: true
                            },
                            "yt_video_id" : {
                                required : true,
                                url: true
                            },
                            "banner_status" : {
                                required : true
                            },
                            "state" : {
                                required : true
                            },
                            "city" : {
                                required : true
                            },
                            "postal_code" : {
                                required : true,
                                digits: true
                            },
                            "address" : {
                                required : true,
                                maxlength: 255,
                            },
                            "duration" : {
                                required: function(element) {
                                    return $("input[name='type']").val() == "1";
                                },
                            },
                            "description" : {
                                required : true,
                                maxlength: 255,
                            },
                            "website_url" : {
                                required : true,
                                url: true
                            },
                            "facebook_url" : {
                                required : true,
                                url: true
                            },
                            "twitter_url" : {
                                required : true,
                                url: true
                            },
                            "linkedin_url" : {
                                required : true,
                                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 errorPlacement(error, element) {
                            element.addClass('is-invalid');
                            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 {
                            $($('.error')[0]).focus()
                            return formValid;
                        }
                    });
                }
                // ..your other parameters..
            }
        );

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

        myDropzone.on('success', function (file, response) {
            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(){
                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) {
            // 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 sub_categories = {!! json_encode($categories->pluck('subCategories')->flatten()) !!};
        let areas = {!! json_encode($regions->pluck('areas')->flatten()) !!};

        $(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', '.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");

            if ($(this).val() == 3) {
                $(".subscription-type").removeClass("d-none");
                $($('input[name=pl_listing]')[0]).prop('checked', true);
            } else if ($(this).val() == 1) {
                $(".banner__status").removeClass("d-none");
                $('input[name=pl_listing]').prop('checked', false);
            } else {
                $('input[name=pl_listing]').prop('checked', false);
            }
        });
    </script>
@endsection