@extends('site.layout.layout')

@section('title',__('Join Us'))

@section('content')
    <main class="orders_page shopping_cart_page product_details_page py-2">
        <!-- ------- breadcrumb ---------- -->
        <nav aria-label="breadcrumb" class="py-2 px-3 px-lg-4">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ route('home') }}"><i class="fas fa-arrow-right-long"></i> {{ __('Home') }}</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page"> {{ __('Join Us') }}</li>
            </ol>
        </nav>
        <section class="all_products row py-3 px-3 px-lg-4 mb-5">
            <div class="col-sm-12 col-md-12">
                <section class="title_sec mb-4 text-center">
                    <h6 class="active" href="#" style="color:#e52982"> {{ __('Join Us') }}</h6>
                    <h3 class="section_title my-3"> {{ __("Expand your business and start selling with Tasahol") }}</h3>
                    <p style="margin:auto"> {{ __('At Tasahol, we enable merchants to easily and securely display and sell their e-products to a wide audience of customers. Join now and be part of a platform that combines innovation and trust.') }}</p>
                </section>
                <section class="container form-horizontal form-label-right">
                    <form class="general_form" action="{{ route('Site.JoinAction') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="row justify-content-center">
                            <h6 class="col-lg-10 section_title mb-2 pt-3"> {{ __('Store Owner Info') }}</h6>
                            <div class="form-group col-lg-5 mb-3">
                                <label for="name"> {{ __('Full Name') }}</label>
                                <input type="text" placeholder="{{ __('Full Name') }}" name="name" class="form-control" id="name" value="{{ old('name') }}">
                            </div>
                            <div class="form-group col-lg-5 mb-3">
                                <label for="email"> {{ __('Email') }}</label>
                                <input type="email" placeholder="{{ __('Enter user email') }}" name="email" class="form-control" id="email" value="{{ old('email') }}">
                            </div>
                            <div class="form-group col-lg-5 mb-3">
                                <label for="phone"> {{ __('Mobile Number') }}</label>
                                <input type="tel" placeholder="{{ __('Enter user mobile number') }}" name="mobile" class="form-control" id="phone-join" value="{{ old('mobile') }}">
                            </div>
                            <div class="form-group col-lg-5 mb-3">
                                <label for="password"> {{ __('Password') }}</label>
                                <input type="password" placeholder="{{ __('Enter user password') }}" name="password" class="form-control" id="password" value="{{ old('password') }}">
                            </div>
                            <h6 class="col-lg-10 section_title mb-2 pt-3"> {{ __('Store information') }}</h6>
                            <input type="hidden" name="web" value="1">
                            <div class="form-group col-lg-5 mb-3">
                                <p class="label mb-1"> {{ __('Store Logo') }}</p>
                                <label for="logo" class="file_label fit_height_center justify-content-center w-100 mb-0">
                                    <div class="icon_container">
                                        <i class="fas fa-file-arrow-up"></i>
                                    </div>
                                    <h6 class="section_title text-center w-100 my-2"> {{ __('Click or drag and drop') }}</h6>
                                    <p class="w-100 text-center"> {{ __('JPEG, PNG, JPG, GIF, PDF, SVG files only (Max size: 2MB)') }}</p>
                                </label>
                                <p class="w-100 text-center pt-1" id="logo_fileName"> </p>
                                <input type="file" id="logo" name="logo" class="form-control d-none cropper-input" accept=".jpeg, .png, .jpg, .gif, .pdf, .svg">
                            </div>
                            <div class="form-group col-lg-5 mb-3">
                                <p class="label mb-1"> {{ __('Store Cover Logo') }}</p>
                                <label for="cover_logo" class="file_label fit_height_center justify-content-center w-100 mb-0">
                                    <div class="icon_container">
                                        <i class="fas fa-file-arrow-up"></i>
                                    </div>
                                    <h6 class="section_title text-center w-100 my-2"> {{ __('Click or drag and drop') }}</h6>
                                    <p class="w-100 text-center"> {{ __('JPEG, PNG, JPG, GIF, PDF, SVG files only (Max size: 2MB)') }}</p>
                                </label>
                                <p class="w-100 text-center pt-1" id="cover_logo_fileName"> </p>
                                <input type="file" id="cover_logo" name="cover_logo" class="form-control d-none cropper-input" accept=".jpeg, .png, .jpg, .gif, .pdf, .svg">
                            </div>
                            <div class="form-group col-lg-5 mb-3">
                                <label for="title_input"> {{ __('Store Title') }}</label>
                                <input type="text" placeholder="{{ __('Enter store title in English') }}" name="title_en" class="form-control" id="title_input" value="{{ old('title_en') }}">
                            </div>
                            <div class="form-group col-lg-5 mb-3">
                                <label for="title_ar_input"> {{ __('Store Title') }}</label>
                                <input type="text" placeholder="{{ __('Enter store title in Arabic') }}" name="title_ar" class="form-control" id="title_ar_input" value="{{ old('title_ar') }}">
                            </div>
                            <div class="form-group col-lg-5 mb-3">
                                <label for="description_input"> {{ __('Store Description') }}</label>
                                <textarea type="text" name="description_en" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="{{ __('Enter store description in English') }}" rows="1">{{ old('description_en') }}</textarea>
                            </div>
                            <div class="form-group col-lg-5 mb-3">
                                <label for="description_ar_input"> {{ __('Store Description') }}</label>
                                <textarea type="text" name="description_ar" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="{{ __('Enter store description in Arabic') }}" rows="1">{{ old('description_ar') }}</textarea>
                            </div>
                            <h6 class="col-lg-10 section_title mb-2 pt-3"> {{ __('Bank account information') }}</h6>
                            <div class="form-group col-lg-5 mb-3">
                                <label for="name_input"> {{ __('Account holder name') }}</label>
                                <input type="text" placeholder="{{ __('Account holder name') }}" name="account_holder_name" class="form-control" id="name_input" value="{{ old('account_holder_name') }}">
                            </div>
                            <div class="form-group col-lg-5 mb-3">
                                <label for="bank_input"> {{ __('Bank name') }}</label>
                                <input type="text" placeholder="{{ __('Bank name') }}" name="bank_name" class="form-control" id="bank_input" value="{{ old('bank_name') }}">
                            </div>
                            <div class="form-group col-lg-10 mb-3">
                                <label for="iban_input">{{ __('IBAN number') }}</label>
                                <input type="text" placeholder="{{ __('IBAN number') }}" name="IBAN" class="form-control" id="iban_input" value="{{ old('IBAN') }}">
                            </div>

                            <h6 class="col-lg-10 section_title mb-2 pt-3"> {{ __('Documentation information') }}</h6>
                            <div class="form-group col-lg-5 mb-3">
                                <label for="commercial_registration_number"> {{ __('Commercial Registration Number') }}</label>
                                <input type="number" placeholder="{{ __('Enter store commercial registration number') }}" name="commercial_registration_number" class="form-control" id="commercial_registration_number" value="{{ old('commercial_registration_number') }}">
                            </div>
                            <div class="form-group col-lg-5 mb-3">
                                <label for="tax_number"> {{ __('Tax Number') }}</label>
                                <input type="number" placeholder="{{ __('Enter store tax number') }}" name="tax_number" class="form-control" id="tax_number" value="{{ old('tax_number') }}">
                            </div>
                            <div class="form-group col-lg-5 mb-3">
                                <p class="label mb-1"> {{ __('Commercial Registration File') }}</p>
                                <label for="commercial_registration_file" class="file_label fit_height_center justify-content-center w-100 mb-0">
                                    <div class="icon_container">
                                        <i class="fas fa-file-arrow-up"></i>
                                    </div>
                                    <h6 class="section_title text-center w-100 my-2"> {{ __('Click or drag and drop') }}</h6>
                                    <p class="w-100 text-center"> {{ __('JPEG, PNG, JPG, GIF, PDF, SVG files only (Max size: 2MB)') }}</p>
                                </label>
                                <p class="w-100 text-center pt-1" id="commercial_registration_file_fileName"> </p>
                                <input type="file" id="commercial_registration_file" name="commercial_registration_file" class="form-control d-none cropper-input" accept=".jpeg, .png, .jpg, .gif, .pdf, .svg">
                            </div>
                            <div class="form-group col-lg-5 mb-3">
                                <p class="label mb-1"> {{ __('Tax File') }}</p>
                                <label for="tax_file" class="file_label fit_height_center justify-content-center w-100 mb-0">
                                    <div class="icon_container">
                                        <i class="fas fa-file-arrow-up"></i>
                                    </div>
                                    <h6 class="section_title text-center w-100 my-2"> {{ __('Click or drag and drop') }}</h6>
                                    <p class="w-100 text-center"> {{ __('JPEG, PNG, JPG, GIF, PDF, SVG files only (Max size: 2MB)') }}</p>
                                </label>
                                <p class="w-100 text-center pt-1" id="tax_file_fileName"> </p>
                                <input type="file" id="tax_file" name="tax_file" class="form-control d-none cropper-input" accept=".jpeg, .png, .jpg, .gif, .pdf, .svg">
                            </div>
                            <div class="form-group col-lg-10 mb-3">
                                <p class="label mb-1"> {{ __('Upload a photo of your ID (such as an ID card or passport)') }}</p>
                                <label for="personal_id" class="file_label fit_height_center justify-content-center w-100 mb-0">
                                    <div class="icon_container">
                                        <i class="fas fa-file-arrow-up"></i>
                                    </div>
                                    <h6 class="section_title text-center w-100 my-2"> {{ __('Click or drag and drop') }}</h6>
                                    <p class="w-100 text-center"> {{ __('JPEG, PNG, JPG, GIF, PDF, SVG files only (Max size: 2MB)') }}</p>
                                </label>
                                <p class="w-100 text-center pt-1" id="personal_id_fileName"> </p>
                                <input type="file" id="personal_id" name="personal_id" class="form-control d-none cropper-input" accept=".jpeg, .png, .jpg, .gif, .pdf, .svg">
                            </div>
                            <h6 class="col-lg-10 section_title mb-2"> {{ __('Address') }}</h6>
                            <div class="form-group col-lg-5 mb-3">
                                <label for="area_input"> {{ __('Region') }}</label>
                                <input type="text" placeholder="{{ __('Region') }}" name="region" class="form-control" id="area_input" value="{{ old('region') }}">
                            </div>
                            <div class="form-group col-lg-5 mb-3">
                                <label for="slctCity" class="d-block" style="margin-top : 20px!important;"> {{ __('City') }}</label>
                                <select class="quantity-select w-100" id="slctCity" name="city_id">
                                    <option value="" disabled selected hidden>{{ __('Select city') }}</option>
                                    @foreach($cities as $city)
                                        <option value="{{ $city->id }}">{{ $city->getTranslation('city',app()->getLocale()) }}</option>
                                    @endforeach
                                </select>
                            </div>
                            {{-- Add reCAPTCHA --}}
                            <div class="col-md-10 mb-3">
                                <label for="message" class="form-label">{{ __('Are you a robot?') }}</label>
                                <div class="g-recaptcha" data-sitekey="6LfMYtArAAAAANgyzcj0Izlvi0s8QczJRsXCrBce"></div>
                            </div>
                            <p class="col-md-10"><i class="fas fa-info-circle mx-1"></i> {{ __('Your application will be reviewed by the Tasahal administration. Once approved, the selling feature will be activated on your account.') }}</p>
                            <div class="d-flex justify-content-center col-12 mt-5">
                                <button type="submit" class="primaryBgBtn floatBtn w-50 text-center d-block"> {{ __('Submit the request') }}</button>
                            </div>
                        </div>
                    </form>
                </section>
            </div>
        </section>
    </main>
@endsection

@push('scripts')
    <script src='https://www.google.com/recaptcha/api.js'></script>
    <script>
         $('#slctCity').select2({
            allowClear: false,
            minimumResultsForSearch: Infinity,
            dir: "{{ app()->getLocale() == 'ar' ? 'ltr' : 'rtl' }}"
        });
        const fileInputs = [
            "personal_id",
            "logo",
            "cover_logo",
            "commercial_registration_file",
            "tax_file"
        ];

        fileInputs.forEach(function (id) {
            const input = document.getElementById(id);
            const output = document.getElementById(id + "_fileName");

            if (input && output) {
                input.addEventListener("change", function () {
                    if (input.files.length > 0) {
                        const fileName = input.files[0].name;
                        output.textContent = fileName;
                    } else {
                        output.textContent = '{{ __('No file selected.') }}';
                    }
                });
            }
        });
    </script>

    {{--   new    --}}
    <script src="{{ asset('admin/assets/plugins/global/telinput/intlTelInput.min.js') }}"></script>
    <script>
        let telInputJoin = $("#phone-join")

        // initialize
        telInputJoin.intlTelInput({
            initialCountry: "sa",
            hiddenInput: "full_phone",
            width: '100%',
            preferredCountries: ['sa', 'eg'],
            autoPlaceholder: 'aggressive',
            formatOnDisplay: false,
            utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.6/js/utils.js",
        });
    </script>
    <script>
        $("form").submit(function() {
            $("#country_code").val(($("#phone-join").intlTelInput("getSelectedCountryData").dialCode));
        });
    </script>
    @if(app()->getLocale() == 'ar')
    <script>
        $(document).ready(function () {
            $('#email').on('focus blur input', function () {
                $(this).css('direction', $(this).val().trim() === '' ? 'rtl' : 'ltr');
            });
        });
    </script>
    @endif
@endpush