@extends('web.layouts.layout')
@section('content')

    <main>
        <!-- Start section -->
        @include('web.layouts.header')

        <section class="register_pg section pt-4">
            <div class="container">
                <div class="inner mt-5">
                    <div class="row">
                        <div class="col-lg-5">
                            <div class="box">
                                <div class="zi-5">
                                    <img src="{{url('') }}/assets/web/images/logo.svg" class="logo mb-4" alt=""/>
                                    <p class="p mb-4 text-white">
                                         {!! $page->description !!}
                                    </p>
                                    <p class="text-white">
                                        {{ __('web.have_acc') }} <a href="{{route('login') }}" class="fw-bold text-white ms-2">{{__('web.login') }}</a>
                                    </p>
                                </div>
                                <img src="{{url('') }}/assets/web/images/header_bg_1.svg" class="bg" alt=""/>
                            </div>
                        </div>
                        <div class="col-lg-7">
                            <form method="post" action="{{$action}}" onsubmit="order(this)" class="form">
                                @CSRF
                                <h2 class="sec_title text-uppercase color-primary fw-bold text-center mb-5">
                                    {{__('web.company_regist') }}
                                    <img src="{{url('') }}/assets/web/images/title_line.svg" class="d-block m-auto" alt=""/>
                                </h2>
                                <div class="form_inner">

                                    <div class="row">
                                        @foreach(languages() as $language)
                                        <div class="col-md-6">
                                            <div class="form-group mb-4">
                                                <label class="label fw-bold"> {{__('web.company_name') }} {{$language->local}} </label>
                                                <input name="name_{{$language->local}}" type="text" class="form-control" placeholder="{{__('web.name') }}" />
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group mb-4">
                                                <label class="label fw-bold">{{__('web.purchasing') }} {{$language->local}} </label>
                                                <input name="purchasing_{{$language->local}}" type="text" class="form-control" placeholder="{{__('web.purchasing') }}" />
                                            </div>
                                        </div>
                                        @endforeach
                                        <div class="col-md-6">
                                            <div class="form-group mb-4">
                                                <label class="label fw-bold"> {{__('web.email') }} </label>
                                                <input type="email" name="email" class="form-control" placeholder="test@mail.com" />
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group mb-4">
                                                <label class="label fw-bold"> {{__('web.website_url') }} </label>
                                                <input type="text" name="website_url" class="form-control" placeholder="https://www.website.com/" />
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group mb-4">
                                                <label class="label fw-bold"> {{__('web.certificate_commercial') }} </label>
                                                <div class="drop_box">
                                                    <input id="demo1" name="certificate_commercial" class="demo1" type="file" placeholder="Supported files: PNG, JPG,PDF "  />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group mb-4">
                                                <label class="label fw-bold"> {{__('web.tax_certificate') }} </label>
                                                <div class="drop_box">
                                                    <input id="demo1" class="demo1" type="file" placeholder="Supported files: PNG, JPG, PDF" name="tax_certificate" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group mb-4">
                                                <label class="label fw-bold"> {{__('web.company_exhibition') }} </label>
                                                <div class="drop_box">
                                                    <input id="demo1" class="demo1" type="file" placeholder="Supported files: PNG, JPG, " name="company_exhibition" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group mb-4">
                                                <label class="label fw-bold"> {{__('web.company_showroom') }} </label>
                                                <div class="drop_box">
                                                    <input id="demo1" class="demo1" type="file" placeholder="Supported files: PNG, JPG " name="company_showroom" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group mb-4">
                                                <label class="label fw-bold"> {{__('web.other_photos') }} </label>
                                                <div class="upload__box">
                                                    <div class="upload__btn-box">
                                                        <label class="upload__btn">
                                                            <p>{{__('web.support_files') }}: PNG, JPEG, JPG</p>
                                                            <input type="file" name="photos[]" multiple="" data-max_length="20" class="upload__inputfile">
                                                        </label>
                                                    </div>
                                                    <div class="upload__img-wrap"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="links_box ">
                                            <label class="label fw-bold text-center d-block fs-6 links_label"> {{__('web.company_links') }}  </label>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group mb-4">
                                                        <label class="label fw-bold"> {{__('web.amazon_url') }}  </label>
                                                        <input type="text" name="amazon_url" class="form-control" placeholder="https://www.website.com/" />
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group mb-4">
                                                        <label class="label fw-bold"> {{__('web.noon_url') }}  </label>
                                                        <input type="text" name="noon_url" class="form-control" placeholder="https://www.website.com/" />
                                                    </div>
                                                </div>
                                                <div class="col-md-6 dynamic-field" id="dynamic-field-1">
                                                    <div class="form-group mb-4">
                                                        <label class="label fw-bold"> {{__('web.another_link') }}  </label>
                                                        <input type="text" name="links[]" class="form-control" placeholder="https://www.website.com/" />
                                                    </div>
                                                </div>

                                                <div class="butns d-flex justify-content-center">
                                                    <button type="button" id="add-button" class="sm_butn add_butn"><i class="fa fa-plus fa-fw"></i> {{__('web.add_another_link') }} </button>
                                                    <button type="button" id="remove-button" class="sm_butn remove_butn" disabled="disabled"><i class="far fa-trash-alt"></i></button>
                                                </div>
                                            </div>
                                        </div>



                                        <div class="col-md-6">
                                            <div class="form-group show_hide_password mb-4">
                                                <label class="label fw-bold"> {{__('web.password') }} </label>
                                                <input type="password" name="password" class="form-control shadow_input" placeholder="****** ">
                                                <i class="show_pass far fa-eye-slash"></i>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group show_hide_password mb-4">
                                                <label class="label fw-bold"> {{__('web.password_confirmation') }} </label>
                                                <input type="password" name="password_confirmation" class="form-control shadow_input" placeholder="****** ">
                                                <i class="show_pass far fa-eye-slash"></i>
                                            </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-check mb-4">
                                                <input class="form-check-input" required type="checkbox" value="" id="flexCheckDefault">
                                                <label class="form-check-label" for="flexCheckDefault">
                                                    {{__('web.agree_to') }} <a href="{{route('conditions.company') }}" target="_blank" class="color-gray2">{{ __('web.terms_conditions') }}  </a> {{__('web.and') }} <a href="{{route('privacy') }}" target="_blank" class="color-gray2"> {{__('web.privacy') }}  </a>
                                                </label>
                                            </div>
                                        </div>
                                    </div>


                                    <button type="submit" class="butn primary_butn mt-5 fs-6">{{__('web.submit') }} </button>

                                </div>



                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>


    <!-- Start section -->
        @include('web.layouts.newsletter')

    </main>

    <!--<button class="butn primary_butn fw-bold"  data-bs-toggle="modal" data-bs-target="#successModal2">-->
    <!--   modal-->
    <!--</button>-->
    
    <!-- Start modal -->
    <div class="modal successModal fade " tabindex="1" id="successModalRequest">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-body">
                    <div class="text-center">
                        <img src="{{url('')}}/assets/web/images/modals/checkMark.png" alt="" class="icon m-auto d-block mb-4"/>
                        <h3 class="fw-bold mb-4">{{__('web.success')}}  </h3>
                        <h5 class="mb-0"> {{__('web.sent_request')}} : <b class="color-primary" id="request_id"></b></h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    @section('inject_js')
    
        <script src="{{url('')}}/assets/web/js/lib/uploadFile.js"></script>
        <script>
            
        function order(elem)
        {
            event.preventDefault();
            var action = $(elem).attr('action');
            var method = $(elem).attr('method');
            if(method == 'GET')
            {
                var dataform = $(elem).serialize();
            }
            else
            {
                var dataform = new FormData( $(elem)[0]);
            }
        
            $.ajax
            ({
                url : action,
                type: method,
                data: dataform,
                dataType:'json',
                contentType: false,
                processData: false,
                success:function(data)
                {
                    if('data' in data)
                    {
                        if(data.message != '')
                        {
                            toasterSuccess(data.message);
                        }
                        if(data.data.url != '')
                        {
                            $('#request_id').html(data.data.request_id)
                            $('#successModalRequest').modal('show')
                            setTimeout(
                            function()
                            {
                                window.location.href = data.data.url
                            }, 1000);
                        }
                    }
                    else
                    {
                        toasterError(Object.values(data.errors)[0]);
                    }
                }
                ,error:function(data)
                {
                    toasterError(Object.values(data.responseJSON.errors)[0]);
                }
            })
        }
        </script>
        <script>
            jQuery(document).ready(function () {
                ImgUpload();
            });

            function ImgUpload() {
                var imgWrap = "";
                var imgArray = [];

                $('.upload__inputfile').each(function () {
                    $(this).on('change', function (e) {
                        imgWrap = $(this).closest('.upload__box').find('.upload__img-wrap');
                        var maxLength = $(this).attr('data-max_length');

                        var files = e.target.files;
                        var filesArr = Array.prototype.slice.call(files);
                        var iterator = 0;
                        filesArr.forEach(function (f, index) {

                            if (!f.type.match('image.*')) {
                                return;
                            }

                            if (imgArray.length > maxLength) {
                                return false
                            } else {
                                var len = 0;
                                for (var i = 0; i < imgArray.length; i++) {
                                    if (imgArray[i] !== undefined) {
                                        len++;
                                    }
                                }
                                if (len > maxLength) {
                                    return false;
                                } else {
                                    imgArray.push(f);

                                    var reader = new FileReader();
                                    reader.onload = function (e) {
                                        var html = "<div class='upload__img-box'><div style='background-image: url(" + e.target.result + ")' data-number='" + $(".upload__img-close").length + "' data-file='" + f.name + "' class='img-bg'><div class='upload__img-close'></div></div></div>";
                                        imgWrap.append(html);
                                        iterator++;
                                    }
                                    reader.readAsDataURL(f);
                                }
                            }
                        });
                    });
                });

                $('body').on('click', ".upload__img-close", function (e) {
                    var file = $(this).parent().data("file");
                    for (var i = 0; i < imgArray.length; i++) {
                        if (imgArray[i].name === file) {
                            imgArray.splice(i, 1);
                            break;
                        }
                    }
                    $(this).parent().parent().remove();
                });
            }
        </script>
        <script>


            $(document).ready(function() {
                var buttonAdd = $("#add-button");
                var buttonRemove = $("#remove-button");
                var className = ".dynamic-field";
                var count = 0;
                var field = "";
                var maxFields = 10;

                function totalFields() {
                    return $(className).length;
                }

                function addNewField() {
                    count = totalFields() + 1;
                    field = $("#dynamic-field-1").clone();
                    field.attr("id", "dynamic-field-" + count);
                    field.children("label").text("Field " + count);
                    field.find("input").val("");
                    $(className + ":last").after($(field));
                }

                function removeLastField() {
                    if (totalFields() > 1) {
                        $(className + ":last").remove();
                    }
                }

                function enableButtonRemove() {
                    if (totalFields() === 2) {
                        buttonRemove.removeAttr("disabled");
                        buttonRemove.addClass("shadow-sm");
                    }
                }

                function disableButtonRemove() {
                    if (totalFields() === 1) {
                        buttonRemove.attr("disabled", "disabled");
                        buttonRemove.removeClass("shadow-sm");
                    }
                }

                function disableButtonAdd() {
                    if (totalFields() === maxFields) {
                        buttonAdd.attr("disabled", "disabled");
                        buttonAdd.removeClass("shadow-sm");
                    }
                }

                function enableButtonAdd() {
                    if (totalFields() === (maxFields - 1)) {
                        buttonAdd.removeAttr("disabled");
                        buttonAdd.addClass("shadow-sm");
                    }
                }


                buttonAdd.click(function() {
                    addNewField();
                    enableButtonRemove();
                    disableButtonAdd();
                });

                buttonRemove.click(function() {
                    removeLastField();
                    disableButtonRemove();
                    enableButtonAdd();
                });
            });

        </script>
    @endsection

@endsection
