@extends('front.layouts.master')
@section('title', isset($title) ? $title : 'Home')
@section('description', isset($description) ? $description : '')
@section('keywords', isset($keywords) ? $keywords : '')
@section('content')
    <!-- Breadcrumb Area -->
    <div class="breadcrumb-area">
        <div class="container">
            <div class="breadcrumb-wrap text-center">
                <h2 class="page-title">{{ __('Membership') }}</h2>
                <ul class="breadcrumb-pages">
                    <li class="page-item"><a class="page-item-link" href="{{ route('front') }}">{{ __('Home') }}</a></li>
                    <li class="page-item">{{ __('Membership') }}</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Work Area -->
    <div class="section">
        <div class="container">
            <div class="card border-0 rscnMembershipCard">
                <div class="card-header pb-0 border-bottom-0 bg-transparent">
                    <div class="rscnMemberTit">{{ $title }}</div>
                </div>
                <form enctype="multipart/form-data" method="POST" action="{{ route('membershipForm.store') }}">
                    @csrf
                    <input type="hidden" id="type" name="type" value="{{ $type }}">
                    <div class="card-body pb-0">
                        @if ($type == 'individual')
                            @include('front.membership_new.from_fields.individual')
                        @elseif($type == 'employee')
                            @include('front.membership_new.from_fields.employee')
                        @elseif($type == 'family')
                            @include('front.membership_new.from_fields.family')
                        @elseif($type == 'corporate')
                            @include('front.membership_new.from_fields.corporate')
                        @elseif($type == 'honorary' && auth()->user() && auth()->user()->is_admin)
                            @include('front.membership_new.from_fields.honorary')
                        @endif
{{--
                        <div class="row">
                          <div class="col-12">
                              <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="terms_conditions" value="1" id="terms_conditions" {{ old('terms_conditions') == 1 ? 'checked' : ''}}>
                                <label class="form-check-label rscnMemberLabel" for="terms_conditions">
                                  <a href="{{ asset('frontend/assets/files/terms_ar.pdf') }}">{{ __('Terms & Conditions') }}</a>
                                </label>
                              </div>
                              @error('terms_conditions')
                                <span class="text-danger">{{ $message }}</span>
                              @else
                                <small class="text-danger required-txt">* {{ __('Required Field') }}</small>
                              @enderror
                          </div>
                        </div> --}}
                    </div>
                    <div class="card-footer border-top-0 bg-transparent">
                        <button type="submit" class="btn rscnSaveBtn">{{ __('Save & Continue') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @include('sweetalert::alert')
    <style>
      .rscnSearchable + .select2-container .select2-selection--single {
        height: 38px;
        display: flex;
        align-items: center;
        padding: 0;
        color: #9D9D9D;
        font-size: 16px;
        margin-bottom: 0;
        font-weight: 400;
        border: solid 1px #ced4da;
      }
    </style>
@endsection
@push('post_script')
  <script src="{{ asset('admin/js/jquery-3.6.0.min.js') }}"></script>
  <script src="{{ asset('admin/js/popper.min.js') }}"></script>
  <script src="{{ asset('admin/js/bootstrap.min.js') }}"></script>
  <script src="{{ asset('admin/js/custom/password-show.js') }}"></script>
  <script src="{{ asset('admin/js/custom/multiselect-dropdown.js') }}"></script>
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
  <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
  <script type="text/javascript">
    $(function() {
      let value = "962";
      $("#txtPhone").text(value);
      $("#country").change(function() {
        let countryCode = $(this).find('option:selected').data('country-code');
        $("#txtPhone").text(countryCode);
      });
    })
  </script>
  <script type="text/javascript">
    $(function() {
      let value = "962";
      $("#honorary_txtPhone").text(value);
      $("#honorary_country").change(function() {
          let countryCode = $(this).find('option:selected').data('country-code');
          $("#honorary_txtPhone").text(countryCode);
      });
    })
  </script>
  <script type="text/javascript">
    $(document).on("change", ".countryList", function() {
      let countryCode = $(this).find('option:selected').data('country-code');
      $(this).parent().parent().find(".txtPhone1").text(countryCode);
    });
    $('.countryList').change();
  </script>
  <script>
    $('.add').click(function() {
      var ele = $('.block').clone(true);
      ele.find('.add-more-section').each(function(index) {
        ele.find('input,select').each(function() {
            this.name = this.name.replace('[' + index + ']', '[' + (index + 1) + ']');
        });
      });
      $('.block:last').before(
        '<div class="block">' + ele[0].innerHTML +
        '<span class="remove rscnRemove">{{ __('Remove Option') }}</span><hr class="rscnFormDividorWith-my"></div>'
      );
      $('.countryList').change();
    });
    $('.optionBox').on('click', '.remove', function() {
      $(this).parent().remove();
    });

    $(document).ready(function() {
      var oldUserFamily = @json(old('user_families'));
      if (oldUserFamily && Object.keys(oldUserFamily).length > 0) {
        length = Object.keys(oldUserFamily).length
        for (let index = 0; index < length; index++) {
          var ele = $('.block').clone(true);
          ele.find('.add-more-section').each(function(index) {
            ele.find('input,select').each(function() {
              this.name = this.name.replace('[' + index + ']', '[' + (index + 1) +']');
              $('[name="user_families[' + index + '][family_name]"]').val(
                oldUserFamily[index]['family_name']);
            });
          });
          if (index >= 1) {
            $('.block:last').before(
              '<div class="block">' + ele[0].innerHTML +
              '<span class="remove rscnRemove">{{ __('Remove Option') }}</span><hr class="rscnFormDividorWith-my"></div>'
            );
          }
          $('[name="user_families[' + index + '][relative_relation]"]').val(oldUserFamily[
            index]['relative_relation']);
          $('[name="user_families[' + index + '][family_name]"]').val(oldUserFamily[
            index]['family_name']);
          $('[name="user_families[' + index + '][dob]"]').val(oldUserFamily[
            index]['dob']);
          $('[name="user_families[' + index + '][gender]"]').val(oldUserFamily[
            index]['gender']);
        }
      }
      var oldCorporetContact = @json(old('contact_person'));
      if (oldCorporetContact && Object.keys(oldCorporetContact).length > 0) {
        length = Object.keys(oldCorporetContact).length
        for (let index = 0; index < length; index++) {
          var ele = $('.block').clone(true);
          ele.find('.add-more-section').each(function(index) {
            ele.find('input,select').each(function() {
              this.name = this.name.replace('[' + index + ']', '[' + (index + 1) +
                ']');
            });
          });
          if (index >= 1) {
            $('.block:last').before(
              '<div class="block">' + ele[0].innerHTML +
              '<span class="remove rscnRemove">{{ __('Remove Option') }}</span><hr class="rscnFormDividorWith-my"></div>'
            );
          }
          $('[name="contact_person[' + index + '][name]"]').val(oldCorporetContact[
            index]['name']);

          $('[name="contact_person[' + index + '][mobile_country]"]').val(oldCorporetContact[
            index]['mobile_country']);
          $('[name="contact_person[' + index + '][mobile]"]').val(oldCorporetContact[
            index]['mobile']);
          $('.countryList').change();
        }
      }
    });
  </script>
  {{-- <script>
    $(function () {
      function initSearchSelects(context) {
        let dir = "{{ app()->getLocale() == 'en' ? 'ltr' : 'rtl' }}";
        $(context).find('.rscnSearchable').each(function () {
          if (!$(this).hasClass('select2-hidden-accessible')) {
            var $select = $(this);
            $(this).select2({
              // theme: 'bootstrap-5',
              width: '100%',
              dir: dir,
              placeholder: $(this).find('option:first').text(),
            });
            $select.next('.select2-container')
            .find('.select2-selection')
            .addClass('rscnMemberLabel');
          }
        });
      }

      initSearchSelects(document);

      $('.add').on('click', function () {
        setTimeout(function () {
          initSearchSelects($('.block:last').prev());
        }, 0);
      });
    });
  </script> --}}
@endpush