@extends('mycompany/main')

@php
	$companyDetail = ($company_details) ? $company_details[0] : array();
	$companyAddress = ($company_address) ? $company_address : array();
@endphp

@section('mycompany-content')
	<!-- Company Director Shareholder Content -->
   <div class="d-flex justify-content-between mb-3">
    <div class="text-left"></div>
    <div class="text-right"><button type="button" class="btn btn-primary me-3" id="add_address" data-pid="{{ $companyDetail['id'] }}" data-mode="add" onclick="open_myCompanyModal(this)">Add New</button></div>
  </div>

  <div class="row">
    <?php if((!empty($company_details[0]['address1']) || !empty($company_details[0]['address2'])) || !empty($companyAddress)){ ?>
        <div class="col-md-6 col-lg-4 col-12">
          <div class="card mb-4">
            <div class="card-body">
              <div class="d-flex justify-content-between mb-3">
                <div class="text-left"><small class="card-text text-uppercase text-left">Main Address</small></div>
                <div class="text-right"><button type="button" class="btn btn-primary btn-sm me-3 text-right" id="edit_addressPrimary" data-pid="{{ $companyDetail['id'] }}" data-mode="edit_addressPrimary" onclick="open_myCompanyModal(this)"><i class="fa-regular fa-edit"></i></button></div>
              </div>
              <div class="row">
                <div class="col-12">
                  <ul class="list-unstyled mb-4 mt-3">
                    <li class="d-flex align-items-center mb-3"><i class="ti ti-home text-heading"></i><span class="fw-medium mx-2 text-heading">Address:</span> <span>{{ (!empty($company_details[0]['address1']) && !empty($company_details[0]['address2'])) ? $company_details[0]['address1'].', '.$company_details[0]['address2'] : ((!empty($company_details[0]['address1'])) ? $company_details[0]['address1'] : ((!empty($company_details[0]['address2'])) ? $company_details[0]['address2'] : '')) }}</span></li>
                    <li class="d-flex align-items-center mb-3"><i class="ti ti-123 text-heading"></i><span class="fw-medium mx-2 text-heading">Postcode:</span> <span>{{ (!empty($company_details[0]['postcode'])) ? $company_details[0]['postcode'] : '' }}</span></li>
                    <li class="d-flex align-items-center mb-3"><i class="ti ti-building text-heading"></i><span class="fw-medium mx-2 text-heading">City:</span> <span>{{ (!empty($company_details[0]['city'])) ? $company_details[0]['city'] : '' }}</span></li>
                    <li class="d-flex align-items-center mb-3"><i class="ti ti-map-pin text-heading"></i><span class="fw-medium mx-2 text-heading">State:</span> <span>{{ (!empty($company_details[0]['state'])) ? $company_details[0]['state'] : '' }}</span></li>
                    <li class="d-flex align-items-center mb-3"><i class="ti ti-world text-heading"></i><span class="fw-medium mx-2 text-heading">Country:</span> <span>{{ (!empty($company_details[0]['country'])) ? $company_details[0]['country'] : '' }}</span></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>

      <?php if(!empty($companyAddress)) foreach ($companyAddress as $key => $row) { ?>
        <div class="col-md-6 col-lg-4 col-12">
          <div class="card mb-4">
            <div class="card-body">
              <div class="d-flex justify-content-between mb-3">
                <div class="text-left"><small class="card-text text-uppercase text-left">Other Address {{ $key+1 }}</small></div>
                <div class="text-right"><button type="button" class="btn btn-primary btn-sm me-3 text-right" id="edit_addressOther_{{ $row['other_address_id'] }}" data-pid="{{ $companyDetail['id'] }}" data-oid="{{ $row['other_address_id'] }}" data-mode="edit_addressOther" onclick="open_myCompanyModal(this)"><i class="fa-regular fa-edit"></i></button></div>
              </div>
              <div class="row">
                <div class="col-12">
                  <ul class="list-unstyled mb-4 mt-3">
                    <li class="d-flex align-items-center mb-3"><i class="ti ti-home text-heading"></i><span class="fw-medium mx-2 text-heading">Address:</span> <span>{{ (!empty($row['address1']) && !empty($row['address2'])) ? $row['address1'].', '.$row['address2'] : ((!empty($row['address1'])) ? $row['address1'] : ((!empty($row['address2'])) ? $row['address2'] : '')) }}</span></li>
                    <li class="d-flex align-items-center mb-3"><i class="ti ti-123 text-heading"></i><span class="fw-medium mx-2 text-heading">Postcode:</span> <span>{{ (!empty($row['postcode'])) ? $row['postcode'] : '' }}</span></li>
                    <li class="d-flex align-items-center mb-3"><i class="ti ti-building text-heading"></i><span class="fw-medium mx-2 text-heading">City:</span> <span>{{ (!empty($row['city'])) ? $row['city'] : '' }}</span></li>
                    <li class="d-flex align-items-center mb-3"><i class="ti ti-map-pin text-heading"></i><span class="fw-medium mx-2 text-heading">State:</span> <span>{{ (!empty($row['state'])) ? $row['state'] : '' }}</span></li>
                    <li class="d-flex align-items-center mb-3"><i class="ti ti-world text-heading"></i><span class="fw-medium mx-2 text-heading">Country:</span> <span>{{ (!empty($row['country'])) ? $row['country'] : '' }}</span></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      <?php } ?>
    <?php } else { ?>
      <div class="col-3"></div>
      <div class="col-7">
        <img src="{{asset('assets/images/no-data.jpg')}}" class="text-center" alt="No Data Found" height="500" width="500">
      </div>
    <?php } ?>
  </div>
	<!-- Company Director Shareholder Content -->

  <script>
    function open_myCompanyModal(elem)
    {
        var tempInput         = '';
        var tempAttach        = '';
        var tempTitle         = '';
        var tempsubTitle      = '';
        var Address1          = '';
        var Address2          = '';
        var AddressCity       = '';
        var AddressPostCode   = '';
        var AddressCountry    = 0;
        var AddressState      = 0;
        var clientID          = $('#' + $(elem).attr('id')).attr('data-pid');
        var addressID         = (mode == 'edit_addressOther') ? $('#' + $(elem).attr('id')).attr('data-oid') : 0;
        var mode              = $('#' + $(elem).attr('id')).attr('data-mode');
        const req1            = axios.post('{{ env('APP_URL') }}' + '/my-company/companyDetail/ajax', { client_id : clientID, mode : mode, address_id : addressID });

        blockUi();

        Promise.all(([req1]))
        .then(([res1]) => {
          var companyDetails    = (res1.data.data.company_details.length > 0) ? res1.data.data.company_details[0] : [];
          var companyAddresss   = (res1.data.data.company_addresss.length > 0) ? res1.data.data.company_addresss[0] : [];
          var companyCountries  = (res1.data.data.company_countries.length > 0) ? res1.data.data.company_countries : [];
          var companyStates     = (res1.data.data.company_states.length > 0) ? res1.data.data.company_states : [];

          Address1          = (mode == 'edit_addressPrimary') ? companyDetails.address1 : ( (mode == 'edit_addressOther') ? companyAddresss.address1 : '' );
          Address2          = (mode == 'edit_addressPrimary') ? companyDetails.address2 : ( (mode == 'edit_addressOther') ? companyAddresss.address2 : '' );
          AddressCity       = (mode == 'edit_addressPrimary') ? companyDetails.city : ( (mode == 'edit_addressOther') ? companyAddresss.city : '' );
          AddressPostCode   = (mode == 'edit_addressPrimary') ? companyDetails.postcode : ( (mode == 'edit_addressOther') ? companyAddresss.postcode : '' );
          AddressCountry    = (mode == 'edit_addressPrimary') ? companyDetails.country_id : ( (mode == 'edit_addressOther') ? companyAddresss.country_id : '' );
          AddressState      = (mode == 'edit_addressPrimary') ? companyDetails.state_id : ( (mode == 'edit_addressOther') ? companyAddresss.state_id : '' );

          tempInput += '<div class="col-12 col-sm-6">\
            <label class="form-label" for="'+ mode +'Addrees1">Address Line 1</label>\
            <input type="text" id="'+ mode +'addressID" name="'+ mode +'addressID" value="'+ addressID +'" class="form-control" hidden />\
            <input type="text" id="'+ mode +'Addrees1" name="'+ mode +'Addrees1" class="form-control" value="'+ Address1 +'" placeholder="Building number, unit, floor, etc." />\
          </div>\
          <div class="col-12 col-md-6">\
            <label class="form-label" for="'+ mode +'Postcode">Postcode</label>\
            <input type="text" id="'+ mode +'Postcode" name="'+ mode +'Postcode" class="form-control" value="'+ AddressPostCode +'" placeholder="50088" />\
          </div>\
          <div class="col-12 col-sm-6">\
            <label class="form-label" for="'+ mode +'Addrees2">Address Line 2</label>\
            <input type="text" id="'+ mode +'Addrees2" name="'+ mode +'Addrees2" class="form-control" value="'+ Address2 +'" placeholder="Street address" />\
          </div>\
          <div class="col-12 col-md-6">\
            <label class="form-label" for="' + mode + 'Country">Country</label>\
            <select class="form-select select2" tabindex="0" id="' + mode + 'Country" name="' + mode + 'Country" onchange="change_state_input('+ "'" + mode + "'" +')">\
              <option value="-1" selected >-- Please Select --</option>';

              if(companyCountries.length > 0)
              {
                $.each(companyCountries, function(key, row){
                  tempInput += '<option value="'+ row.id +'">'+ row.country +'</option>';
                });
              }

            tempInput += '</select>\
          </div>\
          <div class="col-12 col-md-6">\
            <label class="form-label" for="' + mode + 'City">City</label>\
            <input type="text" id="' + mode + 'City" name="' + mode + 'City" class="form-control" value="'+ AddressCity +'" placeholder="Kuala Lumpur" />\
          </div>\
          <div class="col-12 col-md-6">\
            <label class="form-label" for="' + mode + 'State">State</label>\
            <select class="form-select" tabindex="0" id="' + mode + 'State" name="' + mode + 'State">\
              <option value="-1" selected disabled>-- Please Select --</option>';

              if(companyStates.length > 0)
              {
                $.each(companyStates, function(key, row){
                  tempInput += '<option value="'+ row.id +'">'+ row.state +'</option>';
                });
              }

            tempInput += '</select>\
          </div>';

          if(mode == 'add')
          {
            tempInput += '<div class="col-12 col-md-6">\
              <label class="switch">\
              <input type="checkbox" class="switch-input" id="' + mode + 'addressSwitchPrimary">\
                <span id="' + mode + 'addressSwitchPrimary2" class="switch-toggle-slider">\
                  <span class="switch-on"></span>\
                  <span class="switch-off"></span>\
                </span>\
                <span class="switch-label">Set as primary</span>\
              </label>\
            </div>';

            tempTitle = 'Add Company Info';
            tempsubTitle = 'Add New Address';
          }else{
            tempTitle = 'Edit Company Info';
            tempsubTitle = (mode == 'edit_addressPrimary') ? 'Edit Address Primary' : 'Edit Address Other';
          }
        })
        .catch((error) => {
          console.log('error');
          console.log(error);
        })
        .finally(() => {

          $('#editMyCompanyModal_title').html(tempTitle);
          $('#editMyCompanyModal_sub-title').html(tempsubTitle);
          $('#editMyCompanyModal').modal('show');
          $('#editMyCompanyModal_content').html(tempInput);
          $('#modeMyCompanyModal').val(mode);
          $('#changeTypeMyCompanyModal').val('address');
          $('#clientID').val(clientID);

          $('#' + mode + 'Country').val((AddressCountry > 0) ? AddressCountry : '-1');
          $('#' + mode + 'State').val((AddressState > 0) ? AddressState : '-1');

          $(".select2").select2({
            dropdownParent: $('.select2').parent(),
          });

          getMyCompanyAttachmentExist();
          tooltip();

          $.unblockUI();
        });
    }

    function change_state_input(mode)
    {
      var countryIDs  = $('#' + mode + 'Country').val();
      var tempInput   = '';
      const req1      = axios.post('{{ env('APP_URL') }}' + '/my-company/companyDetail/ajax', { country_id : countryIDs });

      blockUi();

      // $('#' + mode + 'State').select2('destroy');
      $('#' + mode + 'State').html('');

      Promise.all(([req1]))
      .then(([res1]) => {
        var companyStates     = (res1.data.data.company_states.length > 0) ? res1.data.data.company_states : [];
        console.log(companyStates);

        tempInput += '<option value="-1" selected disabled>-- Please Select --</option>';
        if(companyStates.length > 0)
        {
          $.each(companyStates, function(key, row){
            tempInput += '<option value="'+ row.id +'">'+ row.state +'</option>';
          });
        }
      })
      .catch((error) => {
        console.log('error');
        console.log(error);
      })
      .finally(() => {

        $('#' + mode + 'State').append(tempInput);

        // $(".select2").select2({
        //   dropdownParent: $('.select2').parent(),
        // });

        $.unblockUI();
      });
    }
  </script>
@endsection