@extends('layouts.app',['dashBoardTitle'=>'EDIT COMPANY DETAILS'])
@php
use App\Master\Master_Emirates;
$emirate=Master_Emirates::get_emirates();
@endphp
@section('content')
<div class="container mt-4">
  @if(session('status'))
    <div class="alert alert-success">
        {{ session('status') }}
    </div>
  @endif 
    <div class="card-body clr-al">
      <form name="add-blog-post-form" id="add-blog-post-form" method="post" action="{{URL::to('/add_company')}}">
       @csrf
        <input type="hidden" name="id" value="{{$details->id}}">
        <input type="hidden" name="taxpayer"  value="{{$details->taxpayer}}">
        <div class="form-group">
          <label class="bold pad-al" for="exampleInputEmail1">{{trans('Taxpayer')}} </label>
          <input name="taxpayer" class="form-control" required="" value="{{$details->taxpayer}}" disabled>
        </div>

        <div class="form-group">
          <label class="bold pad-al" for="exampleInputEmail1">{{trans('Address')}} <span style=color:red>*</span></label>
          <textarea name="address" class="form-control" required=""  >{{$details->address->line1}} </textarea>

          <div class="form-group row">
          <div class="col-sm-6">
            <label class="bold pad-al" for="exampleInputEmail1">{{trans('Emirates')}} <span style=color:red>*</span></label>
              <select class="form-select" name="countrynameid" id="countryDropdown" onchange="updateCountryCode()" required>
              <option value="">Select Emirates</option>
                  @foreach($emirate as $emirates)
                       <option value="{{ $emirates->id }}" {{ $emirates->id == $details->emirates_id ? 'selected' : ''}}>{{ $emirates->name }}</option>
                  @endforeach 
                </select>
           </div>
           
          <div class="col-sm-2">
         
           <label class="bold pad-al" for="exampleInputEmail1">{{trans('Mobile No')}} <span style=color:red>*</span></label>  
           <div class="d-flex">
              <input type="text" class="form-control" id="countryCodeInput" readonly name="countrycode"  style="width: 160px" value="{{ substr($details->mobile, 0, strpos($details->mobile, '-')) }}" required="">
          
              <div class="d-flex">
              <div class="col-sm-30">
             
                  <input id="phoneNumberInput" name="mobileno" class="form-control"  minlength=9 maxlength=9 required="" readonly="readonly" name=mobile style="width:330px" value="{{ substr($details->mobile, strpos($details->mobile, '-') + 1) }}" required="" >
                  
                    @error('mobile number')
                      <span class="invalid-feedback" role="alert">
                          <strong>{{ $message }}</strong>
                      </span>
                  @enderror
              </div>
          </div>           
          </div>
        
        </div>
       

        <div class="form-group row">
          <div class="col-sm-6">
          <label class="bold pad-al" for="exampleInputEmail1">{{trans('Tax Registration Number')}}</label>
          <input type ="text" id="TaxRegInput" name="tax_registration_number" class="form-control" required="" value="{{$details->tax_registration_number}}" disabled>
          </div>

          <div class="col-sm-6">
          <label class="bold pad-al" for="exampleInputEmail1">{{trans('Residential Status')}}<span style=color:red>*</span></label>
          <select class="form-select" name="rs" id="rs">
            <option value="1" {{ $details->residential_status == '1' ? 'selected' : '' }}>{{trans('Resident')}}</option>
            <option value="2" {{ $details->residential_status == '2' ? 'selected' : '' }}>{{trans('Non Resident')}}</option>
            </select>
           </div>
        </div>

        <div class="form-group row">
          <div class="col-sm-4">
          <label class="bold pad-al" for="exampleInputEmail1">{{trans('Date Of Incorporation')}}</label>
          <input type ="date" id="date" name="date_of_incorporation" class="form-control" required="" value="{{$details->date_of_incorporation}}" disabled>
          </div>

          <div class="col-sm-4">
          <label class="bold pad-al" for="exampleInputEmail1">{{trans('Type Of Company')}}</label>
          <select class="form-select" name="type_of_company" id="type_of_company" disabled>
            <option value="1" {{ $details->type_of_company == '1' ? 'selected' : '' }}>{{trans('Mainland')}}</option>
            <option value="2" {{ $details->type_of_company == '2' ? 'selected' : '' }}>{{trans('Free Zone')}}</option>
          </select>
          </div>

          <div class="col-sm-4">
          <label class="bold pad-al" for="exampleInputEmail1">{{trans('Legal Status')}}</label>
          <select class="form-select" name="legal_status" id="legal_status" disabled>
            <option value="1" {{ $details->legal_status == '1' ? 'selected' : '' }}>{{trans('Domestic Company')}}</option>
            <option value="2" {{ $details->legal_status == '2' ? 'selected' : '' }}>{{trans('Foreign Company')}}</option>
            <option value="3" {{ $details->legal_status == '3' ? 'selected' : '' }}>{{trans('Natural Person')}}</option>
          </select>
          </div>
        </div>
        <div class="p-2">
        <button type="submit" class="btn btn-success float-right">{{trans('Save')}}</button>
        </div>
      </form>
    </div>
  </div>
</div> 

<script>
    // Object mapping country names to codes
    const countryCodes = {
        @foreach($emirate as $emirates)
             '{{$emirates->name}}':'{{$emirates->code}}',
        @endforeach
      // Add more country code mappings here
    };

    // Function to update country code
    function updateCountryCode() {
      const dropdown = document.getElementById("countryDropdown");
   // console.log(dropdown.selectedIndex);
      const selectedCountry = dropdown.options[dropdown.selectedIndex].text;
      const countryCodeInput = document.getElementById("countryCodeInput");
      const phoneNumberInput = document.getElementById("phoneNumberInput");

      // Check if the selected country exists in the countryCodes object
      if (selectedCountry in countryCodes) {
        const countryCode = countryCodes[selectedCountry];
        countryCodeInput.value = countryCode;
        phoneNumberInput.removeAttribute('readonly');
        phoneNumberInput.removeAttribute('disabled');
       } else {
        countryCodeInput.value = "";
        phoneNumberInput.disabled = true;
      }
    }
  </script>
  <script>
    // Object mapping country codes to names
    const countryCodes = {
        @foreach($emirate as $emirates)
            '{{ $emirates->id }}':'{{ $emirates->name }}',
        @endforeach
    };

    // Function to update country name based on selected country code
    function updateCountryName() {
        const dropdown = document.getElementById("countryDropdown");
        const selectedCountryId = dropdown.value;
        const countryNameInput = document.getElementById("countryCodeInput");

        // Check if the selected country ID exists in the countryCodes object
        if (selectedCountryId in countryCodes) {
            const countryName = countryCodes[selectedCountryId];
            countryNameInput.value = countryName;
        } else {
            countryNameInput.value = ""; // Clear the input if the country ID is not found
        }
    }

    // Call the updateCountryName function on page load to set the initial selected country
    updateCountryName();
</script>


  <style>
    .error {
      color: red;
    }
  </style>

  <script>
      $(document).ready(function () {
        $("#phoneNumberInput").on("input", function() {
      var input = $(this).val();
      var regex=/^[5]{1}[0-9()]*$/;
      
    // var regex = /^\d{0,16}$/; // Regular expression to allow up to 16 digits only
      //var regex = /^\+971\s\d{2}\s\d{3}\s\d{4}$/;
      if (!regex.test(input)) {
       
        $(this).val(input.slice(0, -1)); // Remove the last character if it doesn't match the pattern
        alert("Mobile Number Allow Numbers & Start with 5 only");
      }
      else{
        ("error");
      }

    });
      });
  </script>
  <script>
      $(document).ready(function () {
        $("#TaxRegInput").on("input", function() {
      var input = $(this).val();
      var regex=/^[0-9()a-zA-Z]*$/;
      
    // var regex = /^\d{0,16}$/; // Regular expression to allow up to 16 digits only
      //var regex = /^\+971\s\d{2}\s\d{3}\s\d{4}$/;
      if (!regex.test(input)) {
       
        $(this).val(input.slice(0, -1)); // Remove the last character if it doesn't match the pattern
        alert("Invalid Input");
      }
      else{
        ("error");
      }

    });
      });
  </script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    $('#countryName').change(function() {
      var countryName = $(this).val();
      if (countryName !== '') {
        $.ajax({
          url: "{{ route('getCountryCode', ['countryName' => '']) }}/" + countryName,
          type: 'GET',
          success: function(response) {
            if (response.code) {
              $('#countryCode').val(response.code);
            } else {
              $('#countryCode').val('');
              console.error(response.error);
            }
          },
          error: function(xhr, status, error) {
            console.error(error);
          }
        });
      } else {
        $('#countryCode').val('');
      }
    });
  });
</script>

@endsection