@extends('website.layouts.master')
@php
    $countries = getCountry();

@endphp
@section('css')
    <link href="{{ asset('panel/assets/iti/intlTelInput.css') }}" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/material-design-iconic-font@2.2.0/dist/css/material-design-iconic-font.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" />

    <style>
        .error {
            color: red;
        }

        .iti__country-list {
            z-index: 9999 !important;
        }
    </style>
@endsection
@section('content')
    <!--Slider Banner-->
    <section id="inner-header">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcrumbs-list">
                        <h4 style="text-transform: uppercase;">{{__('common.registration_form')}}</h4>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!--Registration Form-->
    <section id="main-form">
        <div class="container">
            <div class="row">
                <div class="col-lg-7 offset-lg-3">
                    <form action="{{ route('company.company-register-submit') }}" id="ajax-submit" method="POST">
                        @csrf
                        <div class="company-form mb-3">
                            <h3>{{__('common.company')}} {{__('common.registration')}}</h3>
                            <div class="row">
                                <div class="col-lg-4 col-sm-12">
                                    <div class="mb-3 @error('name') is-invalid @enderror">
                                        <label for="exampleInputEmail1" class="form-label">{{__('common.company')}} {{__('common.name')}}</label>
                                        <input type="text" name="name" id="name" class="form-control"
                                            id="exampleInputEmail1" aria-describedby="emailHelp"
                                            placeholder="Enter Company Name">
                                        <div class="invalid-feedback" id="nameError"></div>

                                    </div>
                                </div>
                                <div class="col-lg-4 col-sm-12">
                                    <div class="mb-3 @error('email') is-invalid @enderror">
                                        <label for="exampleInputEmail1" class="form-label">{{__('common.email')}}</label>
                                        <input type="email" class="form-control" id="email" name="email"
                                            aria-describedby="emailHelp">
                                        <div class="invalid-feedback" id="emailError"></div>

                                    </div>
                                </div>
                                <div class="col-lg-4 col-sm-12">
                                    <div class="mb-3 @error('country') is-invalid @enderror">
                                        <label for="exampleInputEmail1" class="form-label">{{__('common.select_country')}}</label>
                                        <select class="form-select @error('country') is-invalid  @enderror select2"
                                            aria-label="Default select example" name="country" id="country">
                                            <option value="">{{__('common.select_country')}}</option>
                                            @foreach ($countries as $country)
                                                <option value="{{ $country }}">{{ $country }}</option>
                                            @endforeach
                                        </select>
                                        <div class="invalid-feedback" id="countryError"></div>

                                    </div>
                                </div>

                            </div>

                            <div class="row">
                                <div class="col-lg-4 col-sm-12">
                                    <div class="mb-3 @error('phone_number') is-invalid @enderror">
                                        <label for="exampleInputEmail1" class="form-label">{{__('common.phone')}}</label>
                                        <input type="text" class="form-control" id="phone" name="phone_number"
                                            aria-describedby="emailHelp">
                                        <input type="hidden" id="dial_code" value="+39" name="dial_code">
                                        <input type="hidden" id="dial_code_iso" value="IT" name="dial_code_iso">
                                        <div class="invalid-feedback" id="phone_numberError"></div>

                                    </div>
                                </div>
                                <div class="col-lg-4 col-sm-12">
                                    <div class="mb-3 @error('password') is-invalid @enderror">
                                        <label for="exampleInputEmail1" class="form-label">{{__('common.password')}}</label>
                                        {{-- <input type="password" name="password" id="password" class="form-control"
                                            aria-describedby="emailHelp"> --}}

                                            <div class="input-group">
                                              <span class="input-group-text toggle-password" toggle="#password" style="cursor:pointer;">
                                                  <i class="fas fa-eye"></i>
                                              </span>
                                              <input type="password" class="form-control" name="password" id="password">
                                          </div>

                                        <div class="invalid-feedback" id="passwordError"></div>

                                    </div>
                                </div>
                                <div class="col-lg-4 col-sm-12">
                                    <div class="mb-3 @error('confirm-password') is-invalid @enderror">
                                        <label for="exampleInputEmail1" class="form-label">{{__('common.confirm')}} {{__('common.password')}}</label>
                                        <div class="input-group">
                                          <span class="input-group-text toggle-password" toggle="#confirm_password" style="cursor:pointer;">
                                              <i class="fas fa-eye"></i>
                                          </span>
                                          <input type="password" class="form-control"  name="confirm-password" id="confirm_password">
                                      </div>
                                        {{-- <input type="password" name="confirm-password" id="confirm-password"
                                            class="form-control" aria-describedby="emailHelp"> --}}
                                        <div class="invalid-feedback" id="confirm-passwordError"></div>

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

                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="mb-3 @error('image') is-invalid @enderror">
                                        <label for="exampleInputEmail1" class="form-label">{{__('common.company')}} {{__('common.logo')}}</label>
                                        <input class="form-control" type="file" name="image" id="image">
                                        <div class="invalid-feedback" id="imageError"></div>

                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="mb-3 @error('bio') is-invalid @enderror">
                                        <label for="exampleInputEmail1" class="form-label">{{__('common.write_something_about_your_company')}}</label>
                                        <textarea rows="3" name="bio" id="bio" class="form-control"></textarea>
                                        <div class="invalid-feedback" id="bioError"></div>

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

                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="sub_btn mb-2">
                                        <button type="submit" class="btn btn-primary" style="text-transform: uppercase;">{{__('common.register')}} {{__('common.now')}}</button>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="login-box">
                                        <p>{{__('common.already_have_an_account')}} <a href="{{ route('company-login') }}">{{__('common.login')}}</a></p>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('bottom_script')

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    
    <!--@if(session('success'))-->
    <!--<script>-->
    <!--    Swal.fire({-->
    <!--        icon: 'success',-->
    <!--        title: 'Success',-->
    <!--        text: "{{ session('success') }}",-->
    <!--        confirmButtonColor: '#3085d6',-->
    <!--        confirmButtonText: 'OK'-->
    <!--    });-->
    <!--</script>-->
    <!--@endif-->

    <!--@if(session('error'))-->
    <!--<script>-->
    <!--    Swal.fire({-->
    <!--        icon: 'error',-->
    <!--        title: 'Error',-->
    <!--        text: "{{ session('error') }}"-->
    <!--    });-->
    <!--</script>-->
    <!--@endif-->

    <script type="text/javascript">
        window.addEventListener('DOMContentLoaded', (event) => {
            let input = document.getElementById("phone");
            let dialing_code = document.getElementById("dial_code");
            let dialing_code_iso = document.getElementById("dial_code_iso");
            let iti = window.intlTelInput(input, {
                initialCountry: "IT",
            });
            iti.setNumber('');

            if (iti !== undefined) {
                dialing_code_iso.value = iti.getSelectedCountryData().iso2.toUpperCase();
            }

            input.addEventListener("countrychange", function() {
                let number = iti.selectedCountryData.dialCode;
                dialing_code.value = '+' + number;
                dialing_code_iso.value = iti.selectedCountryData.iso2.toUpperCase();
            });
        });

        $(".toggle-password").click(function() {
                const input = $($(this).attr("toggle"));
                const icon = $(this).find("i");
                const isPassword = input.attr("type") === "password";

                input.attr("type", isPassword ? "text" : "password");
                icon.toggleClass("fa-eye fa-eye-slash");
            });

        function showLoader() {
            $('#global-loader').show();
        }

        function hideLoader() {
            $('#global-loader').hide();
        }

        $(document).ready(function() {
            // $('#join_modal').modal('show');

            $('#ajax-submit').submit(function(e) {
                e.preventDefault(); // Prevent the default form submission
                $('#ajax-submit').find(".is-invalid").removeClass('is-invalid');
                $('#ajax-submit').find(
                    "#phone_numberError, #first_nameError, #last_nameError, #emailError, #cityError, #countryError, #passwordError, #confirm-passwordError, #imageError"
                ).html('');

                // var formData = $(this).serialize();
                var form_data = $(this).serializeArray();
                var imageFile = $('#image')[0].files[0];
                var formData = new FormData();

                if (imageFile != null && imageFile != undefined) {
                    formData.append('image', imageFile);
                }


                $.each(form_data, function(key, input) {
                    formData.append(input.name, input.value);
                });


                $.ajax({
                    type: $(this).attr('method'),
                    url: $(this).attr('action'),
                    data: formData,
                    headers: {
                        "X-CSRF-Token": $('input[name="_token"]').val()
                    },
                    contentType: false,
                    processData: false, // Important! Don't process the files
                    beforeSend: function() {
                        showLoader();
                    },
                    // success: function(response) {
                    //     hideLoader();
                    //     if (response.status === 204) {
                    //         toastr.error(response.errors, 'Opps', {
                    //             progressBar: true,

                    //         });
                    //     } else if (response.status === 200) {
                    //         $('#ajax-submit')[0].reset();
                    //         toastr.success(response.success, 'Success', {
                    //             progressBar: true,
                    //             timeOut: "7000",
                    //         });
                    //     } else {
                    //         toastr.error('Oops! Something went wrong', {
                    //             progressBar: true,
                    //             timeOut: "5000",
                    //         });
                    //     }
                    // },
                    success: function(response) {
                        hideLoader();

                        if (response.status === 204) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Oops!',
                                text: response.errors,
                                confirmButtonColor: '#d33'
                            });
                        } else {
                            $('#ajax-submit')[0].reset();
                            Swal.fire({
                                icon: 'success',
                                title: 'Success',
                                text: response.success,
                                confirmButtonColor: '#3085d6',
                                timer: 7000
                            });
                        }
                        // } else if (response.status === 200) {
                        //     $('#ajax-submit')[0].reset();
                        //     Swal.fire({
                        //         icon: 'success',
                        //         title: 'Success',
                        //         text: response.success,
                        //         confirmButtonColor: '#3085d6',
                        //         timer: 7000
                        //     });
                        // } else {
                        //     Swal.fire({
                        //         icon: 'error',
                        //         title: 'Error',
                        //         text: 'Oops! Something went wrong',
                        //         confirmButtonColor: '#d33'
                        //     });
                        // }
                    },
                    error: function(xhr) {
                        hideLoader();
                        if (xhr.status === 422) {
                            var errors = xhr.responseJSON.errors;
                            $.each(errors, function(key, value) {
                                $('#' + key).addClass('is-invalid');
                                $('#' + key + 'Error').text(value[0]).show();
                            });
                        }
                    }
                });
            });
        });

        function numaric(e, object) {
            var KeyID = (window.event) ? event.keyCode : e.which;
            // console.log(KeyID);
            if ((KeyID >= 65 && KeyID <= 90) || (KeyID >= 100 && KeyID <= 122) || (KeyID >= 33 && KeyID <= 45) || (KeyID >=
                    58 && KeyID <= 64) || (KeyID >= 91 && KeyID <= 95) || (KeyID >= 123 && KeyID <= 126 || KeyID == 98 ||
                    KeyID == 99 || KeyID == 97 || KeyID == 47)) {
                return false;
            }
        }
    </script>
     <script>
      $(document).ready(function() {
          $('.select2').select2();
      });
  </script>
      <script src="{{ asset('panel/assets/iti/intlTelInput.js') }}"></script>
      <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
@endsection