@extends('auth.signup-layout')

@section('title', 'Signup')

@section('header', 'Organization Information')

@section('content')  
   <ol class="steps mt-5 pt-2">
  <li class="step  is-complete" data-step="1">
    Personal Info
  </li>
  <li class="step is-active" data-step="2">
    Organization Info
  </li>
  <li class="step  " data-step="3">
    Contact Details
  </li>

</ol>
<form action="/organization" method="post" id="orgForm" class="px-3 mt-5 needs-validation" novalidate>
                     @csrf
                     <div class="form-group mt-2">
                        <label for="Company_name" class="form-label" style="font-size:12px; font-weight:bold">Company
                        Name</label>
                        <input type="text" required class="form-control py-3 {{ $errors->has('company_name')?'is-invalid':'' }}" name="company_name" value="{{ old('company_name') }}" placeholder="@lang('models/users.fields.company_name')">
                        <span class="invalid-feedback">
                        @if ($errors->has('company_name'))
                        <strong>{{ $errors->first('company_name') }}</strong>
                        @else
                        <strong>Please enter the company name.</strong>
                        @endif
                        </span>
                     </div>
                     <div class="mt-2 form-group">
                        <label for="Address1" class="form-label"
                           style="font-size:12px; font-weight:bold">Address 1</label>
                        <input required type="text" class="form-control py-3 {{ $errors->has('address_1')?'is-invalid':'' }}" name="address_1" value="{{ old('address_1') }}" placeholder="@lang('models/users.fields.address_1')">
                        <span class="invalid-feedback">
                        @if ($errors->has('address_1'))
                        <strong>{{ $errors->first('address_1') }}</strong>
                        @else
                        <strong>Please enter address.</strong>
                        @endif
                        </span>
                     </div>
                     <div class="mt-2 form-group">
                        <label for="Address2" class="form-label"
                           style="font-size:12px; font-weight:bold">Address 2</label>
                        <input type="text" class="form-control py-3 {{ $errors->has('address')?'is-invalid':'' }}" name="address_2" value="{{ old('address_2') }}" placeholder="@lang('models/users.fields.address_2')">
                        <span class="invalid-feedback">
                        @if ($errors->has('address_2'))
                        <strong>{{ $errors->first('address_2') }}</strong>
                        @endif
                        </span>
                     </div>
                     <div class="mt-2 form-group">
                        <label for="Address2" class="form-label"
                           style="font-size:12px; font-weight:bold">Registration No</label>
                        <input type="text" required class="form-control py-3 {{ $errors->has('address')?'is-invalid':'' }}" name="registration_no" value="{{ old('registration_no') }}" placeholder="@lang('models/users.fields.registration_no')">
                        <span class="invalid-feedback">
                        @if ($errors->has('registration_no'))
                        <strong>{{ $errors->first('registration_no') }}</strong>
                        @else
                        <strong>Enter a valid registratrion number</strong>
                        @endif
                        </span>
                     </div>
                     <div class="mt-2 d-flex form-group">
                        <div class="col-4">
                           <label for="city" class="form-label" style="font-size:12px; font-weight:bold">City</label>
                           <input type="text"  required class="form-control py-3 {{ $errors->has('city')?'is-invalid':'' }}" name="city" value="{{ old('city') }}" placeholder="@lang('models/users.fields.city')">
                           <span class="invalid-feedback">
                           @if ($errors->has('city'))
                           <strong>{{ $errors->first('city') }}</strong>
                           @else
                           <strong>Please enter city.</strong>
                           @endif
                           </span>
                        </div>
                        <div class="col-7 ms-auto">
                           <label for="country" class="form-label"
                              style="font-size:12px; font-weight:bold">Country</label>
                           <select required class="form-control py-3 {{ $errors->has('country')?'is-invalid':'' }}" name="country">
                              <option selected disabled>Select country</option>
                              @foreach ($countries as $country)
                              <option value="{{$country->code}}">{{$country->name}} - {{$country->code}}</option>
                              @endforeach
                           </select>
                           <span class="invalid-feedback">
                           @if ($errors->has('country'))
                           <strong>{{ $errors->first('country') }}</strong>
                           @else
                           <strong>Please select a country.</strong>
                           @endif
                           </span>
                        </div>
                     </div>
                     <div class="mt-2 d-flex form-group">
                        <div class="col-4">
                           <label for="postal" class="form-label"
                              style="font-size:12px; font-weight:bold">Postal Code</label>
                           <input type="text" required class="form-control py-3 {{ $errors->has('postal')?'is-invalid':'' }}" name="postal" value="{{ old('postal') }}" placeholder="@lang('models/users.fields.postal')">
                           <span class="invalid-feedback">
                           @if ($errors->has('postal'))
                           <strong>Please enter postal code.</strong>
                           @else
                           @endif
                           </span>
                        </div>
                        <div class="col-7 ms-auto">
                           <label for="industry_type" class="form-label"
                              style="font-size:12px; font-weight:bold">Industry Type</label>
                           <select required class="form-control py-3 {{ $errors->has('industry')?'is-invalid':'' }}" name="industry">
                              <option value="" disabled selected>Select industry type</option>
                              <option  value="Technology">Technology</option>
                              <option  value="Healthcare">Healthcare</option>
                              <option  value="Finance">Finance</option>
                              <option  value="Education">Education</option>
                              <option  value="Manufacturing">Manufacturing</option>
                              <option  value="Retail">Retail</option>
                              <option  value="Hospitality">Hospitality</option>
                              <option  value="Transportation">Transportation</option>
                              <option  value="Media">Media</option>
                              <option  value="Other">Other</option>
                           </select>
                           <span class="invalid-feedback">
                           @if ($errors->has('industry'))
                           <strong>{{ $errors->first('industry') }}</strong>
                           @else
                           <strong>Please select a industry.</strong>
                           @endif
                           </span>
                        </div>
                     </div>
                     <div id="selected-countries"></div>
                     <!-- <button type="button" class="my-3 text-white w-100 btn btn-primary" data-bs-toggle="modal" data-bs-target="#countryModal">
                     Select Faviroute Shipping Countries
                     </button> -->
                     <button type="submit"
                        class="mt-3 p-2 btn col-12 text-white btn-primary btn-block font-weight-bold"
                        style="font-size:15px;">CONTINUE</button>
               </div>
            </div>
         </div>
      </div>
      <div class="modal fade" id="countryModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
      <div class="modal-content">
      <div class="modal-header">
      <h5 class="modal-title" id="exampleModalLabel">                            Select Faviroute Shipping Countries
      </h5>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body d-flex justify-content-between flex-wrap">
      @foreach($continents as $index=> $cont)
      <h5 class="my-2 w-100">   <input type="checkbox" role="button" class="form-check-input continent-checkbox" name="{{$index}}" id="{{$index}}" value="{{$index}}"> {{$index}}  </h5>
      @foreach($cont as $country)
      <div class="form-check col-md-3 col-sm-4 my-2">
      <input class="form-check-input country {{$index}}" name="Favcountries[]" role="button" type="checkbox" value={{$country}}  >
      <label class="form-check-label" >
      {{$country}}
      </label>
      </div>
      @endforeach
      @endforeach
      <!-- Add more countries as needed -->
      </div>
      <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
      </div>
      </div>
      </div>
      </form>
     @endsection

<script>
   document.addEventListener('DOMContentLoaded', function() {
       const orgForm = document.getElementById('orgForm');
   
       orgForm.addEventListener('submit', function(event) {
           if (!orgForm.checkValidity()) {
               // Form has validation errors, prevent form submission
               event.preventDefault();
               event.stopPropagation();
           }
   
           orgForm.classList.add('was-validated'); // Add 'was-validated' class to enable Bootstrap's styles
       });
   });
   
</script>
<script>
   // Get all checkboxes with class 'country'
   const checkboxes = document.querySelectorAll('.country');
   
   // Get the div to display selected countries
   const selectedCountriesDiv = document.getElementById('selected-countries');
   
   // Function to update selected countries in the HTML tag
   function updateSelectedCountries() {
       const selectedCountries = Array.from(checkboxes)
           .filter(checkbox => checkbox.checked)
           .map(checkbox => checkbox.value);
   //        selectedCountriesDiv.textContent = `Selected Countries: ${selectedCountries.join(', ')}`;
   }
   
   
   // Add event listener to each checkbox
   checkboxes.forEach(checkbox => {
       checkbox.addEventListener('change', updateSelectedCountries);
   });
   // Get all continent checkboxes
   const continentCheckboxes = document.querySelectorAll('.continent-checkbox');
   
   // Function to handle continent checkbox change
   function handleContinentChange(event) {
   const continentName = event.target.value;
   const countryCheckboxes = document.querySelectorAll(`.country.${continentName}`);
   countryCheckboxes.forEach(checkbox => {
       checkbox.checked = event.target.checked;
       updateSelectedCountries();
   });
   }
   
   // Add event listener to continent checkboxes
   continentCheckboxes.forEach(checkbox => {
   checkbox.addEventListener('change', handleContinentChange);
   });
</script>