@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="rscnSupportSection section">
    
    {{-- Slider --}}
    <div class="container-fluid">
      <div class="four-sildes-slider">
        @foreach ($membershipSliders as $membershipSlider )
        <div>
          <img src="{{ $membershipSlider->full_path_image }}" class="rscnMembershipSliderImg" />
        </div>
        @endforeach
      </div>
    </div>
    {{-- /Slider --}}

    <div class="rscnSupportBox">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <div class="rscnSupportTit">
              {{ langConverter(
                isset($informativedata['membership_title_en_sec1']) ? $informativedata['membership_title_en_sec1'] : '',
                isset($informativedata['membership_title_ar_sec1']) ? $informativedata['membership_title_ar_sec1'] : '') 
              }}
            </div>
            <div class="rscnSupportTxt">
              {!! langConverter(
                isset($informativedata['membership_description_en_sec1']) ? $informativedata['membership_description_en_sec1'] : '',
                isset($informativedata['membership_description_ar_sec1']) ? $informativedata['membership_description_ar_sec1'] : '') 
              !!}
            </div>
            {{-- 
            <div class="rscnSupportTxt">Our wildlife and beautiful landscapes are in ever-increasing danger. Everyday habitats and species are being damaged or destroyed by uncontrolled development pressure, over hunting and intensive agriculture. We need people to show they care and provide public support to our natural heritage which is vitally needed to endure to the next generation.</div>
            <div class="rscnSupportList">
              <label class="rscnSupportListTit">Membership Benefits:</label>
              <ul class="list-unstyled">
                <li>Make a difference</li>
              </ul>
            </div> --}}
          </div>
          <div class="col-md-6">
            {{-- <img src="{{ asset('frontend/assets/images/support_img.png') }}" class="rscnSupportImg"> --}}
            <img src="{{ asset(isset($informativedata['membership_img_sec1']) ? IMG_membershipPageSec1 .  $informativedata['membership_img_sec1'] : 'frontend/assets/images/support_img.png') }}" class="rscnSupportImg">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="rscnBenefitSection">
    <div class="rscnBenefitHeader">
      <div class="container">
        <div class="text-center">
          <div class="rscnBenefitsTit">For More Details About The <span class="rscnBenefitsTit2">Membership Benefits</span></div>
        </div>
      </div>
    </div>
    <div class="rscnBenefitHeaderCards">
      <div class="container">
        <div class="row"> 
          <div class="col-md-3 d-flex">
            <button type="button" data-bs-toggle="modal" data-bs-target="#benefitIndividualModal" class="btn rscnBenefitCard w-100">
              <div class="rscnBenefitCardBox">
                <img src="{{ asset('frontend/assets/images/user4.png') }}" class="rscnBenefitCardIcon">
                <hr class="rscnBenefitDividor">
                <div class="rscnBenefitCardTxt">
                  {{ langConverter(
                    isset($informativedata['individual_MembershipEn']) ? $informativedata['individual_MembershipEn'] : '',
                    isset($informativedata['individual_MembershipAr']) ? $informativedata['individual_MembershipAr'] : '') 
                  }}
                </div>
              </div>
            </button>
          </div>
          <div class="col-md-3 d-flex">
            <button type="button" data-bs-toggle="modal" data-bs-target="#benefitFamilyModal" class="btn rscnBenefitCard w-100">
              <div class="rscnBenefitCardBox">
                <img src="{{ asset('frontend/assets/images/familyMember.png') }}" class="rscnBenefitCardIcon">
                <hr class="rscnBenefitDividor">
                <div class="rscnBenefitCardTxt">
                  {{ langConverter(
                    isset($informativedata['Family_MembershipEn']) ? $informativedata['Family_MembershipEn'] : '',
                    isset($informativedata['Family_MembershipAr']) ? $informativedata['Family_MembershipAr'] : '') 
                  }}
                </div>
              </div>
            </button>
          </div>
          <div class="col-md-3 d-flex">
            <button type="button" data-bs-toggle="modal" data-bs-target="#benefitCorporateModal" class="btn rscnBenefitCard w-100">
              <div class="rscnBenefitCardBox">
                <img src="{{ asset('frontend/assets/images/corporate.png') }}" class="rscnBenefitCardIcon">
                <hr class="rscnBenefitDividor">
                <div class="rscnBenefitCardTxt">
                  {{ langConverter(
                    isset($informativedata['corporate_MembershipEn']) ? $informativedata['corporate_MembershipEn'] : '',
                    isset($informativedata['corporate_MembershipAr']) ? $informativedata['corporate_MembershipAr'] : '') 
                  }}
                </div>
              </div>
            </button>
          </div>
          <div class="col-md-3 d-flex">
            <button type="button" data-bs-toggle="modal" data-bs-target="#benefitHonoraryModal" class="btn rscnBenefitCard w-100">
              <div class="rscnBenefitCardBox">
                <img src="{{ asset('frontend/assets/images/Honorary.png') }}" class="rscnBenefitCardIcon">
                <hr class="rscnBenefitDividor">
                <div class="rscnBenefitCardTxt">
                  {{ langConverter(
                    isset($informativedata['honorary_MembershipEn']) ? $informativedata['honorary_MembershipEn'] : '',
                    isset($informativedata['honorary_MembershipAr']) ? $informativedata['honorary_MembershipAr'] : '') 
                  }}
                </div>
              </div>
            </button>
          </div>
        </div>
        <div class="rscnPaymentMethodSection">
          <div class="rscnPayTit rscnPayTit22">{{ __('If you are RSCN Employee,') }} <span class="rscnBenefitsTit2"> <a href="/membership/employee" class="rscnBenefitsTit2">{{ __('Register Here') }}</a></span></div>
          <div class="rscnPayTit2">{{ __('Payment Methods') }}</div>
          <div class="rscnPayTxt">{{ __('Payments are to be made in direct deposit to RSCN’s Bank account. Account number 26666/3/704, Arab bank / Jubaiha Branch; please send us the receipt at our fax or email address below to confirm your membership.') }} </div>
          <div class="rscnContacPayBox">
            <span>{{ __('Communication office,') }}</span>
            <div class="d-flex align-items-center mx-1">
              <span class="rscnContacPayTxt">{{ __('Tel:') }}</span>
              <a href="#" class="rscnBenefitsTit2 mx-1">+962-6-5157656/5157665</a>
            </div>
            <div class="d-flex align-items-center mx-1">
              <span class="rscnContacPayTxt">{{ __('Fax:') }}</span>
              <a href="#" class="rscnBenefitsTit2 mx-1">+ 962-6-5155195</a>
            </div>
            <div class="d-flex align-items-center mx-1">
              <span>{{ __('or please ') }}<span class="rscnContacPayTxt">{{ __('contact us') }}</span> {{ __('at') }}</span>
              <a href="#" class="rscnBenefitsTit2 mx-1">member@rscn.org.jo</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  {{--Individual Modal --}}
  <div class="modal fade" id="benefitIndividualModal" tabindex="-1" aria-labelledby="benefitIndividualModalLabel" aria-hidden="true">
    <div class="modal-dialog benefitDialog">
      <div class="modal-content">
        <div class="modal-header border-bottom-0">
          <h5 class="modal-title" id="benefitIndividualModalLabel">
            {{ langConverter(
              isset($informativedata['individual_MembershipEn']) ? $informativedata['individual_MembershipEn'] : '',
              isset($informativedata['individual_MembershipAr']) ? $informativedata['individual_MembershipAr'] : '') 
            }}
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          {{-- <ul class="list-unstyled benefitModalList">
            <li>Members will receive emails and announcements from the Public Relations office.</li>
          </ul> --}}
          {!! langConverter(
            isset($informativedata['individual_Membership_descriptionEn']) ? $informativedata['individual_Membership_descriptionEn'] : '',
            isset($informativedata['individual_Membership_descriptionAr']) ? $informativedata['individual_Membership_descriptionAr'] : '') 
          !!}
        </div>
        <div class="modal-footer border-top-0 justify-content-start">
          <a href="{{ route('membership-individual.create') }}" class="btn rscnBtnRegister" name="register">Register</a>
        </div>
      </div>
    </div>
  </div>
  {{-- /Individual Modal --}}
  {{--Family Modal --}}
  <div class="modal fade" id="benefitFamilyModal" tabindex="-1" aria-labelledby="benefitFamilyModalLabel" aria-hidden="true">
    <div class="modal-dialog benefitDialog">
      <div class="modal-content">
        <div class="modal-header border-bottom-0">
          <h5 class="modal-title" id="benefitFamilyModalLabel">
            {{ langConverter(
              isset($informativedata['Family_MembershipEn']) ? $informativedata['Family_MembershipEn'] : '',
              isset($informativedata['Family_MembershipAr']) ? $informativedata['Family_MembershipAr'] : '') 
            }}
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          {!! langConverter(
            isset($informativedata['Family_Membership_descriptionEn']) ? $informativedata['Family_Membership_descriptionEn'] : '',
            isset($informativedata['Family_Membership_descriptionAr']) ? $informativedata['Family_Membership_descriptionAr'] : '') 
          !!}
        </div>
        <div class="modal-footer border-top-0 justify-content-start">
          <a href="{{ route('membership-family.create') }}" class="btn rscnBtnRegister" name="register">Register</a>
        </div>
      </div>
    </div>
  </div>
  {{-- /Family Modal --}}
  {{--Corporate Modal --}}
  <div class="modal fade" id="benefitCorporateModal" tabindex="-1" aria-labelledby="benefitCorporateModalLabel" aria-hidden="true">
    <div class="modal-dialog benefitDialog">
      <div class="modal-content">
        <div class="modal-header border-bottom-0">
          <h5 class="modal-title" id="benefitCorporateModalLabel">
            {{ langConverter(
              isset($informativedata['corporate_MembershipEn']) ? $informativedata['corporate_MembershipEn'] : '',
              isset($informativedata['corporate_MembershipAr']) ? $informativedata['corporate_MembershipAr'] : '') 
            }}
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          {!! langConverter(
            isset($informativedata['corporate_Membership_descriptionEn']) ? $informativedata['corporate_Membership_descriptionEn'] : '',
            isset($informativedata['corporate_Membership_descriptionAr']) ? $informativedata['corporate_Membership_descriptionAr'] : '') 
          !!}
        </div>
        <div class="modal-footer border-top-0 justify-content-start">
          <a href="{{ route('membership-corporate.create') }}" class="btn rscnBtnRegister" name="register">Register</a>
        </div>
      </div>
    </div>
  </div>
  {{-- /Corporate Modal --}}
  {{-- Honorary Modal --}}
  <div class="modal fade" id="benefitHonoraryModal" tabindex="-1" aria-labelledby="benefitHonoraryModalLabel" aria-hidden="true">
    <div class="modal-dialog benefitDialog">
      <div class="modal-content">
        <div class="modal-header border-bottom-0">
          <h5 class="modal-title" id="benefitHonoraryModalLabel">
            {{ langConverter(
              isset($informativedata['honorary_MembershipEn']) ? $informativedata['honorary_MembershipEn'] : '',
              isset($informativedata['honorary_MembershipAr']) ? $informativedata['honorary_MembershipAr'] : '') 
            }}
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          {!! langConverter(
            isset($informativedata['honorary_Membership_descriptionEn']) ? $informativedata['honorary_Membership_descriptionEn'] : '',
            isset($informativedata['honorary_Membership_descriptionAr']) ? $informativedata['honorary_Membership_descriptionAr'] : '') 
          !!}
        </div>
      </div>
    </div>
  </div>
  {{-- /Honorary Modal --}}

@endsection