@extends('Partners.Layouts.Page')

@section('styles')
    <link rel="stylesheet" href="{{asset('css/contract.css')}}"/>
    <link rel="stylesheet" href="{{asset('css/gallery.css')}}"/>

    @if(!$accounts)
        <link rel="stylesheet" href="{{asset('css/animate.min.css')}}"/>
        <link rel="stylesheet" href="{{asset('css/gallery-card.css')}}"/>

        <style>
            svg#bank-icon {
                max-height: 150px
            }

            .card-body {
                display: flex;
                justify-content: center;
                align-items: center;
            }
        </style>
    @endif

    <link rel="stylesheet" href="{{asset('css/jquery.fancybox.min.css')}}"/>
    <link rel="stylesheet" href="{{asset('css/jquery.fancybox.min.css')}}"/>
    <link rel="stylesheet" href="{{asset('css/toastr.min.css')}}"/>

    <style>
        .card-footer {
            padding: 0 !important;
        }

        .video-field {
            display: none;
        }

        .video-field.active {
            display: block;
        }

        .progress {
            display: none;
            position: relative;
        }

        .resume-upload,
        .pause-upload,
        .stop-upload {
            display: none;
        }

        .progress-text {
            color: #3f3e3e;
            width: 100%;
            position: absolute;
            font-weight: 900;
            font-size: 18px;
            text-shadow: 0 0 1px #fff;
        }

        @media (max-width: 780px) {
            .step {
                padding-bottom: 80px;
            }

            .card-footer {
                position: absolute;
                bottom: 0;
                width: 100%;
            }

            .up-down-numeric {
                display: flex;
            }

            .numeric-form {
                flex-wrap: nowrap;
            }

            .hour-time .form-inline {
                flex-wrap: nowrap;
            }
        }
    </style>
@endsection

@section('content')

    <!-- Modal -->
    <div class="modal show fade" id="please-wait-dialog" data-bs-backdrop="static" data-bs-keyboard="false"
         tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="svg-loader">
                        <svg class="svg-container" height="100" width="100" viewBox="0 0 100 100">
                            <circle class="loader-svg bg" cx="50" cy="50" r="45"></circle>
                            <circle class="loader-svg animate" cx="50" cy="50" r="45"></circle>
                        </svg>
                    </div>

                    <p class="text-center mt-3">برجاء الانتظار ، جاري معالجة الطلب.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="form-container mt-5">
        <div class="card">
            @if($accounts)
                <div class="card-header">
                    <h3 class="card-title m-0">
                        <button type="button" class="prev"><i class="mdi mdi-arrow-right"></i></button>
                        <span id="current-step-title">معلومات العقار</span>
                    </h3>
                </div>
            @endif

            <div class="card-body p-0">

                @if($accounts)
                    <form id="gallery-form" method="post" action="{{partner_route('gallery.update', $unit->id)}}"
                          enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <div id="form-body">
                            <div class="">
                                @include('Messages')

                                <div id="available-error" style="display: none">
                                    <div class="alert alert-danger alert-dismissible fade show mb-0" role="alert">
                                        <span class="alert-inner--icon"><i class="fe fe-slash"></i></span>

                                        <span class="alert-inner--text alert-body">{{session()->get('error')}}</span>

                                        <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
                                            <span aria-hidden="true">×</span>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div id="unit-form">
                                <!-- معلومات العقار -->
                                @include('Partners.Reservations.Gallery.Steps.Step1')
                                <!-- عنوان العقار -->
                                @include('Partners.Reservations.Gallery.Steps.Step2')
                                <!-- تأكيد عنوان العقار -->
                                @include('Partners.Reservations.Gallery.Steps.Step3')
                                <!-- تفاصيل العقار -->
                                @include('Partners.Reservations.Gallery.Steps.Step4')
                                <!-- تفاصيل غرف النوم -->
                                @include('Partners.Reservations.Gallery.Steps.Step5')
                                <!-- تفاصيل المجالس -->
                                @include('Partners.Reservations.Gallery.Steps.Step6')
                                <!-- تفاصيل المسابح -->
                                @include('Partners.Reservations.Gallery.Steps.Step7')
                                <!-- تفاصيل دورات المياة -->
                                @include('Partners.Reservations.Gallery.Steps.Step8')
                                <!-- تفاصيل المطابخ -->
                                @include('Partners.Reservations.Gallery.Steps.Step9')
                                <!-- المرافق الاضافية (اختياري) -->
                                @include('Partners.Reservations.Gallery.Steps.Step10')
                                <!-- مميزات العقار -->
                                @include('Partners.Reservations.Gallery.Steps.Step11')
                                <!-- وصف العقار -->
                                @include('Partners.Reservations.Gallery.Steps.Step12')
                                <!-- صور العقار -->
                                @include('Partners.Reservations.Gallery.Steps.Step13')
                                <!-- تفاصيل اضافية -->
                                @include('Partners.Reservations.Gallery.Steps.Step14')
                            </div>

                        </div>

                        <div class="card-footer">
                            <div class="progress-outer">
                                @foreach($steps as $key => $step)
                                    <div class="progress-bar--ribbon" data-step-key="{{$key}}"
                                         data-step="{{$step}}"></div>
                                @endforeach
                            </div>

                            <div class="card-form-footer text-center p-4">
                                <button
                                    class="btn btn-success ml-2"
                                    type="submit"
                                    id="submit"
                                    style="margin: auto"
                                ><i class="si si-check"></i> <span
                                        class="text">{{$gallery->exists ? 'تعديل صور العقار' : 'تسجيل صور العقار'}}</span>
                                </button>

                                <button type="button" class="btn btn-success mx-2 button-icon mb-1 next"> التالي <i
                                        class="si si-arrow-left ms-2" style="float: left"></i></button>
                            </div>
                        </div>

                    </form>
                @else
                    @include('Partners.Reservations.Gallery.BankAccountMessage')
                @endif

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

    @include('Includes.Maps')

    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

@endsection

@section('scripts')
    <script src="{{asset('js/moment.min.js')}}"></script>
    <script src="{{asset('js/gallery.js')}}"></script>

    <script src="{{asset('js/jquery.form.min.js')}}"></script>
    <script src="{{asset('js/jquery.fancybox.min.js')}}"></script>
    <script src="{{asset('js/toastr.min.js')}}"></script>
    <script src="{{asset('js/tus.min.js')}}"></script>

    <script>

        // $(document).ready(function () {
        //     $('#please-wait-dialog').modal('show');
        // });

        $('#submit').on('click', function (){
            console.log('Clicked');
        })


        $('#gallery-form').ajaxForm({
            // beforeSerialize: function($form, options) {
            //     // Remove the video input field from the form data
            //     $form.find('#encrypted_video').remove();
            //     $form.find('#gallery').remove();
            //
            //     $('#submit').attr('disabled', true)
            // },
            beforeSubmit: function (formData, $form, options) {
                // Remove the video field from the form data
                $('#gallery').val('')
                $('#encrypted_video').val('')
                $('#submit').attr('disabled', true)
                $('#please-wait-dialog').modal('show');
            },
            success: function () {
                toastr.success('تم استقبال الطلب بنجاح.')
                window.location.href = '{{partner_route('units.index')}}'
            },
            error: function () {
                toastr.error('هناك مشكلة في قبول الطلب.')
            }
        });

        loadTitle($('.step.active'))

        checkUnitContents()

        $('#unit_id').on('change', function () {
            let url = '{{partner_route('gallery.edit', ':id')}}'
            url = url.replace(':id', $(this).val());
            window.location.href = url
        });

        $('.up-down-numeric input').each(function () {
            if ($(this).val() === '' || $(this).val() === 0)
                $(this).attr('placeholder', 'لا يوجد');
        });

        $("a.single-image-link").fancybox();

        $('#unit_id').select2()

        $('.select2').select2({
            dropdownParent: $('.card-body')
        });

        if ($('#province_id').val() != '') {
            loadCities($('#province_id').val())
        }

        $('#province_id').on('change', function () {
            loadCities($(this).val())
        });

        function loadCities(province) {
            let city_url = '{{partner_route('available-cities', ':id')}}';

            city_url = city_url.replace(':id', province)

            $('#city_id').select2({
                placeholder: 'برجاء اختيار المدينة',
                allowClear: true,
                ajax: {
                    url: city_url,
                    processResults: function (data) {
                        $('#city_id').select2("val", 1);

                        return {
                            results: data.data
                        };
                    }
                }
            });
        }

        function loadTitle(ele) {
            const title = $(ele).data('title');
            $('#current-step-title').html(title);
        }

        // Handle Next & Prev
        $('.next').on('click', function (e) {
            e.preventDefault();

            // for (var i = 0; i < $('[name="unit_type_id"]').length; i++) {
            //     if ($('[name="unit_type_id"]')[i].checked){
            //         break;
            //     }
            // }

            let required = 0;

            $('[name="unit_type_id"]').each(function (index) {
                if ($(this).is(':checked'))
                    required = 1
            });

            $(this).attr('disabled', true).addClass('button-loading');

            let activeStep = $('.step.active'),
                currentStep = activeStep.data('step'),
                zeroImagesWrapper = 0;

            const checkFile = activeStep.find('.image-upload-box .uploaded .uploaded-image');
            // const checkRequiredInputs = checkFile.length === 0 && activeStep.hasClass('required');
            const checkRequiredInputs = activeStep.hasClass('image-with-select');
            // const lengthRequiredOfImages = parseInt(activeStep.find('select').val());
            // const lengthOfImages = checkFile.length


            const selectValue = activeStep.find('select').val()
            const imageWrappers = activeStep.find('.images-wrapper')

            imageWrappers.each(function (index) {
                if ($(this).find('.single-image-link').length == 0)
                    zeroImagesWrapper = 1
            })

            validateStep(activeStep);

            if (currentStep === 13 && validateStep(activeStep)) {
                $(this).hide()
                $('#submit').show()
            }

            // if(currentStep === 2){
            //     $('#available-error').hide().find('.alert-body').html('');
            //     $('#from, #to').removeClass('has-error').addClass('valid')
            //     goNext(currentStep)
            // if {
            // let requiredInput = activeStep.find('input[required]'),
            //     selectMenus = activeStep.find('select[required]');
            //
            // let errorsCount = 0;

            // requiredInput.each(function () {
            //     if ($(this).val() === '') {
            //         // errors.push($(this).val());
            //         $(this).addClass('has-error').parents('.form-group').find('.text-danger').addClass('active').html('هذا الحقل مطلوب ، برجاء إدخال القيمة المطلوبة.')
            //         errorsCount++;
            //     } else {
            //         const fieldSize = $(this).data('size');
            //         const fieldMaxSize = $(this).data('max-size');
            //
            //         if ($(this).val().length === fieldSize || typeof (fieldSize) === "undefined")
            //             $(this).removeClass('has-error').addClass('valid').parents('.form-group').find('.text-danger').removeClass('active').html('')
            //         else {
            //             $(this).addClass('has-error').parents('.form-group').find('.text-danger').addClass('active').html('يجب ان يكون عدد الحروف أو الارقام في تلك الخانة ' + fieldSize)
            //             errorsCount++;
            //         }
            //     }
            // })

            // if (checkRequiredInputs && (imageWrappers.length != selectValue || (selectValue > 0 && zeroImagesWrapper))){
            // if (!validateStep(activeStep)) {
            // $('#available-error').show().find('.alert-body').html('برجاء اكمال كل العناصر المطلوبة.')
            // } else {

            // console.log(validateStep(activeStep))

            if (!validateStep(activeStep)) {
                $('#available-error').show().find('.alert-body').html('برجاء اكمال كل العناصر المطلوبة.')
            } else {
                if (currentStep >= 1)
                    $('.prev').show()

                $('#available-error').hide().find('.alert-body').html()

                getCheckBoxesClasses(activeStep)

                console.log('Hello');


                goNext(currentStep)
            }

            // if (errorsCount == 0)
            //     goNext(currentStep)
            // }

            $('html, body').animate({scrollTop: $('.form-container').offset().top}, 'fast');

            $(this).attr('disabled', false).removeClass('button-loading');
        })

        $('.prev').on('click', function (e) {
            e.preventDefault();

            $(this).attr('disabled', true)

            $('#submit').hide()
            $('.next').show()

            let currentStep = $('.step.active').data('step');

            if (currentStep === 2)
                $(this).hide()

            const prevStep = $('.step.active').prevAll('.required')[0];

            loadTitle(prevStep);

            $('body').find('.step.active').hide().removeClass('active');
            $(prevStep).fadeIn().addClass('active')

            $('html, body').animate({scrollTop: $('.form-container').offset().top}, 'slow');
            $(this).attr('disabled', false)
        })
        const modal = $();

        $(document).ready(function () {
            $('.preloader-wrapper').remove()
        })

        function goNext(currentStep) {
            $(".progress-bar--ribbon[data-step-key=" + (currentStep - 1) + "]").addClass('active')
            const nextStep = $('.step.active').nextAll('.required')[0]
            loadTitle(nextStep)
            $('body').find('.step.active').hide().removeClass('active')
            $(nextStep).fadeIn().addClass('active')
        }

        $('form').on('submit', function (e) {
            // e.preventDefault();

            // alert('submit')
            console.log('Hello')
            // $('#submit-form').attr('disabled', true)
        })

    </script>

    @include('Includes.UploadVideo')
@endsection