@extends('layouts.index')

@section('content')


<div class="" style="background-image: linear-gradient(to top, #EFEFEF, #FDFDFD);" x-data="formsUI()" x-cloak>
       {{-- Breadcrumb Section --}}
        @php

            $pages = [] ; $breadcrumbPage = [] ;
            $breadcrumbPage['title'] = __('lang.home') ; $breadcrumbPage['route'] = route('home') ; $breadcrumbPage['color'] = 'text_3' ;
            $pages[] = $breadcrumbPage ;
            $breadcrumbPage['title'] =  strtoupper(  isset($forms_setting) ? $forms_setting->forms_settings_name : '' )   ;
            $breadcrumbPage['route'] = 'javascript:void(0)' ;
            $breadcrumbPage['color'] = 'text_1' ;
            $pages[] = $breadcrumbPage ;
        @endphp
        @include('components.breadcrumb',$pages)

        <div class="container py-md-4 " >
            {{-- <h3 class="text-center my-md-5 my-4 text_7">{{ __('lang.contactUs')  }}</h3> --}}
            {{-- @include('includes.errors') --}}

            <div class="row m-0 ">
                <div class="col-12 fb-700 font-24 p-0 text_4 capitalize"> {{strtoupper(  isset($forms_setting) ? $forms_setting->forms_settings_name : '' )}}  </div>
                <div class="col-md-3 col-12 pages_underline p-0" > <hr/></div>
            </div>
            <div class="row mt-4 text_1 font-16">
                <div class="col-12 sentence-capitalize">
                    {!!  isset($forms_setting) ? $forms_setting->forms_settings_desc : '' !!}
                </div>
            </div>

            <div class="row">

                <div class="col-md-12 col-12 my-md-3 my-4 ">
                    <div class=" border-0 " x-show="!success">
                        <div class="">
                            <form class="custom-form contactus-form " action="{{route('forms.send',['page'=>$page])}}" id="formSubmit" method="POST" autocomplete="off" x-ref="form" @submit.prevent="submit">
                                @csrf
                                {{-- Anti-Spam Honeypot & Timestamp --}}
                                <div style="display: none !important;" aria-hidden="true">
                                    <label for="website_url_hp_field">Website</label>
                                    <input type="text" name="website_url_hp" id="website_url_hp_field" tabindex="-1" autocomplete="off" value="">
                                    <input type="hidden" name="form_init_time" value="{{ time() }}">
                                </div>
                                <input type="hidden" name="accountId" value="{{env('accountId')}}" >
                                <input type="hidden" name="forms_settings_id" value="{{$forms_setting->forms_settings_id}}" >
                                {{-- <input type="hidden" name="accounts_multiple_countries" value="{{$account->accounts_multiple_countries }}" >
                                <input type="hidden" name="mobile_digits_count" value="{{$account->accounts_country_mobile_digits_count ? $account->accounts_country_mobile_digits_count : '8'}}" > --}}
                                {{-- <input type="hidden" name="countryCode" id="countryCode" value="{{!$account->accounts_multiple_countries ? $account->accounts_country_code : ''}}" > --}}

                                <div class="row">
                                    @foreach($forms_setting->forms_settings_fields as $field)
                                                                                @if(in_array($field->type,['text','email'])  )
                                            <div class="col-md-6 row mx-0 px-0">
                                                <label for="{{ $field->name }}" class="form-label text_3 font-16 col-md-3 capitalize">{{$forms_setting->forms_settings_fields_trans->names->$fieldName ?? ''}} {{ in_array('required',explode('|',$field->validation)) ? '*' : '' }}</label>
                                                <div class="form-group col-md-9 ">
                                                    <input type="{{ $field->type }}" class="form-control {{ $errors->first($field->name) ? 'is-invalid' : '' }}" id="{{ $field->name }}" value="{{old($field->name)}}" name="{{ $field->name }}" @input="clearFieldError('{{ $field->name }}')">
                                                    {{-- @if ($errors->first($field->name)) --}}
                                                        <div class="invalid-feedback d-inline-block" dir="{{ $dir }}" id="error-msg-{{ $field->name }}">{{ $errors->first($field->name) }}</div>
                                                    {{-- @endif --}}
                                                </div>
                                            </div>
                                        @elseif($field->type == 'phone')
                                            <div class="col-md-6 row mx-0 px-0">
                                                <label for="{{ $field->name }}" class="form-label text_3 font-16 col-md-3 capitalize">{{$forms_setting->forms_settings_fields_trans->names->$fieldName ?? ''}} {{ in_array('required',explode('|',$field->validation)) ? '*' : '' }}</label>
                                                <div class="col-md-9" >
                                                    <div class="form-group" dir="ltr">
                                                        <input type="hidden" id="full_phone" name="{{ $field->name }}">
                                                        <input type="tel" dir="ltr" class="form-control {{ $errors->first($field->name) ? 'is-invalid' : '' }} " name="tel_{{ $field->name }}"  value="{{old($field->name)}}" id="phone" @input="clearFieldError('{{ $field->name }}')">
                                                        <span id="valid-msg" class="hidden text-success">✓ {{ __('lang.Valid') }}</span>
                                                        <span id="error-msg" class="hidden text-danger"></span>
                                                        <div class="invalid-feedback d-inline-block" dir="{{ $dir }}" id="error-msg-{{ $field->name }}">{{ $errors->first($field->name) }}</div>
                                                    </div>
                                                    {{-- @if ($errors->first($field->name)) --}}
                                                    {{-- @endif --}}
                                                </div>
                                            </div>
                                        @elseif($field->type == 'radio')
                                            <div class="col-md-6 row mx-0 px-0">

                                                <label for="{{ $field->name }}" class="form-label text_3 font-16 col-md-3 capitalize">{{$forms_setting->forms_settings_fields_trans->names->$fieldName ?? ''}} {{ in_array('required',explode('|',$field->validation)) ? '*' : '' }}</label>
                                                <div class="col-md-9" dir="ltr">
                                                    <div class="">
                                                        @foreach (explode(',',$field->options) as $option)
                                                            <div class="form-check d-inline-flex font-20 form-check-inline">
                                                                <input class="form-check-input me-2" type="radio" name="{{ $field->name }}" id="{{ $option }}" value="{{ $option }}" {{ old($field->name ) == $option ? 'checked' : ''}} @change="clearFieldError('{{ $field->name }}')">
                                                                <label class="form-check-label font-16" for="{{ $option }}">{{ $forms_setting->forms_settings_fields_trans->options->$fieldName->$option ?? '' }}</label>
                                                            </div>
                                                        @endforeach
                                                        {{-- @if ($errors->first($field->name)) --}}
                                                            <div class="invalid-feedback d-inline" id="error-msg-{{ $field->name }}">{{ $errors->first($field->name) }}</div>
                                                        {{-- @endif --}}
                                                    </div>
                                                </div>
                                            </div>
                                        @elseif($field->type == 'select')
                                            <div class="col-md-6 row mx-0 px-0">
                                                <label for="{{ $field->name }}" class="form-label text_3 font-16 col-md-3 capitalize">{{$forms_setting->forms_settings_fields_trans->names->$fieldName ?? ''}} {{ in_array('required',explode('|',$field->validation)) ? '*' : '' }}</label>
                                                <div class="col-md-9" >
                                                    <div class="">

                                                        <select class="form-select  {{ $errors->first('contacts_subjects_id') ? 'is-invalid' : '' }}" name="{{ $field->name }}" id="{{ $field->name }}" aria-label="Default select example" @change="clearFieldError('{{ $field->name }}')">
                                                            <option value="">{{ $forms_setting->forms_settings_fields_trans->names->$fieldName ?? '' }}</option>
                                                            @foreach (explode(',',$field->options) as $option)
                                                                <option value="{{ $option }}">{{ $forms_setting->forms_settings_fields_trans->options->$fieldName->$option ?? ''  }}</option>
                                                            @endforeach
                                                        </select>

                                                        {{-- @if ($errors->first($field->name)) --}}
                                                            <div class="invalid-feedback d-inline" id="error-msg-{{ $field->name }}">{{ $errors->first($field->name) }}</div>
                                                        {{-- @endif --}}
                                                    </div>
                                                </div>
                                            </div>

                                        @elseif($field->type == 'textarea')
                                            <div class="col-12 my-3">
                                                <hr>
                                            </div>
                                            <div class="col-md-12 row mx-0 px-0">
                                                <label for="{{ $field->name }}" class="form-label text_5 mb-3 font-18 col-md-12 capitalize">{{$forms_setting->forms_settings_fields_trans->names->$fieldName ?? ''}} {{ in_array('required',explode('|',$field->validation)) ? '*' : '' }}</label>
                                                <div class="form-group col-md-12 ">
                                                    <textarea class="form-control {{ $errors->first($field->name ) ? 'is-invalid' : '' }} " name="{{ $field->name }}" rows="8"  id="{{ $field->name }}" @input="clearFieldError('{{ $field->name }}')">{{old($field->name )}}</textarea>
                                                    {{-- @if ($errors->first($field->name)) --}}
                                                        <div class="invalid-feedback d-inline" id="error-msg-{{ $field->name }}">{{ $errors->first($field->name) }}</div>
                                                    {{-- @endif --}}
                                                </div>
                                            </div>

                                        @endif
                                    @endforeach

                                    <div class="col-12 my-3">
                                        <hr>
                                    </div>
                                    <div class="col-md-12 text-center ">
                                        <button type="submit" class="btn background_1 text_2 mt-3 px-5 capitalize" :disabled="submitting" x-text="submitting ? '{{ __('lang.sending') }}' : '{{ __('lang.send') }}' "></button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="border-0" x-show="success">
                        <div class="text-center py-5 my-4">
                            <svg class="success-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 14.2-4.2-4.2 1.4-1.4L11 13.4l4.8-4.8 1.4 1.4L11 16.2z"/></svg>
                            <h3 class="text_4 fb-700 mt-3 sentence-capitalize">{{ __('lang.formSubmittedSuccessfully') }}</h3>
                            <p class="text_1 font-16" x-text="successMessage"></p>
                            <button type="button" class="btn background_1 text_2 mt-3 sentence-capitalize" @click="resetForm()">{{ __('lang.backToForm') }}</button>
                        </div>
                    </div>


                </div>

            </div>

        </div>

    </div>
@endsection

@include('includes.intltel-config')
@push('js')
<script>
function formsUI() {
  return {
    submitting: false,
    success: false,
    successMessage: '',
    errors: {},
    async submit(e) {
      this.submitting = true;
      this.success = false;
      this.errors = {};

      // Validate phone if function exists
      if (window.validatePhoneInput) {
          window.validatePhoneInput();
          if (!window.formSubmit) {
              this.submitting = false;
              // Optionally scroll to phone input or show error
              const phoneInput = document.querySelector("#phone");
              if(phoneInput) phoneInput.focus();
              return;
          }
      }

      const form = this.$refs.form;
      const fd = new FormData(form);
      const url = form.getAttribute('action');
      const token = form.querySelector('input[name="_token"]').value;
      try {
        const res = await fetch(url, {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': token
          },
          body: fd
        });
        const json = await res.json().catch(() => ({}));
        if (res.ok && json.status === 200) {
          this.success = true;
          this.successMessage = json.message || "{{ __('lang.formSubmittedSuccessfully') }}";
          this.clearErrorsUI();
        } else if (res.status === 422) {
          this.errors = json.errors || {};
          this.applyErrorsUI();
        } else {
          this.errors = json.errors || { general: ["{{ __('lang.unexpectedError') }}"] };
          this.applyErrorsUI();
          if (!navigator.onLine) {
            showErrorToastify("{{ __('lang.internet_connection_lost') }}");
          }else{
            showErrorToastify("{{ __('lang.unexpectedError') }}");
          }

        }
      } catch (err) {
        this.errors = { general: ["{{ __('lang.networkErrorTryAgain') }}"] };
        this.applyErrorsUI();
        showErrorToastify("{{ __('lang.internet_connection_lost') }}");
      } finally {
        this.submitting = false;
      }
    },
    resetForm() {
      this.success = false;
      this.successMessage = '';
      this.errors = {};
      const form = this.$refs.form;
      form.reset();
      this.clearErrorsUI();
      form.scrollIntoView({ behavior: 'smooth', block: 'start' });
    },
    applyErrorsUI() {
      this.clearErrorsUI();
      Object.entries(this.errors).forEach(([field, messages]) => {
        const msg = Array.isArray(messages) ? messages[0] : messages;
        const el = document.getElementById(`error-msg-${field}`);
        if (el) { el.textContent = msg || ''; el.style.display = 'inline'; }
        const inputById = document.getElementById(field);
        if (inputById) { inputById.classList.add('is-invalid'); }
        const inputsByName = this.$refs.form.querySelectorAll(`[name="${field}"]`);
        inputsByName.forEach(i => i.classList.add('is-invalid'));
        const inputsByTelName = this.$refs.form.querySelectorAll(`[name="tel_${field}"]`);
        inputsByTelName.forEach(i => i.classList.add('is-invalid'));
      });
    },
    clearErrorsUI() {
      const nodes = document.querySelectorAll('[id^="error-msg-"]');
      nodes.forEach(n => { n.textContent=''; n.style.display='none'; });
      const invalids = this.$refs.form.querySelectorAll('.is-invalid');
      invalids.forEach(i => i.classList.remove('is-invalid'));
      document.querySelectorAll('#valid-msg').forEach(n => { n.style.display='none'; });
      document.querySelectorAll('#error-msg').forEach(n => { n.style.display='none'; });
    },
    clearFieldError(field) {
      const el = document.getElementById(`error-msg-${field}`);
      if (el) { el.textContent=''; el.style.display='none'; }
      const byId = document.getElementById(field);
      if (byId) { byId.classList.remove('is-invalid'); }
      const byName = this.$refs.form.querySelectorAll(`[name="${field}"]`);
      byName.forEach(i => i.classList.remove('is-invalid'));
      const byTelName = this.$refs.form.querySelectorAll(`[name="tel_${field}"]`);
      byTelName.forEach(i => i.classList.remove('is-invalid'));
      if (this.errors && this.errors[field]) { delete this.errors[field]; }
    }
  }
}
</script>
@endpush
@push('css')
    <style>
        [x-cloak] { display: none !important; }
        .success-check { width: 72px; height: 72px; color: var(--background_1, #28a745); }
    </style>
@endpush