@extends('mycompany/main')

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

@section('mycompany-content')
	<!-- Company Contact 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_contact" data-pid="{{ $companyDetail['id'] }}" data-mode="add" onclick="open_myCompanyModal(this)">Add New</button></div>
  </div>

  <!-- Primary -->
  <div class="row">
    <?php if(!empty($companyDetail['phone']) || !empty($companyContact)){ ?>
      <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">Primary</small></div>
              <div class="text-right"><button type="button" class="btn btn-primary btn-sm me-3 text-right" id="edit_contactPrimary" data-pid="{{ $companyDetail['id'] }}" data-mode="edit_contactPrimary" 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-phone text-heading"></i><span class="fw-medium mx-2 text-heading">Phone:</span> <span>{{ $companyDetail['phone'] }}</span></li>
                  <li class="d-flex align-items-center mb-3"><i class="ti ti-printer text-heading"></i><span class="fw-medium mx-2 text-heading">Fax:</span> <span>{{ $companyDetail['fax'] }}</span></li>
                  <li class="d-flex align-items-center mb-3"><i class="ti ti-at text-heading"></i><span class="fw-medium mx-2 text-heading">Email.:</span> <span>{{ $companyDetail['email'] }}</span></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Other contact -->
      <?php if($companyContact) foreach ($companyContact 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">{{ $row['contact_name'] }}</small></div>
                <div class="text-right"><button type="button" class="btn btn-primary btn-sm me-3 text-right" id="edit_contactOther_{{ $row['contact_id'] }}" data-pid="{{ $companyDetail['id'] }}" data-cid="{{ $row['contact_id'] }}" data-mode="edit_contactOther" 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-phone text-heading"></i><span class="fw-medium mx-2 text-heading">Phone:</span> <span>{{ (!empty($row['contact_mobile'])) ? $row['contact_mobile'] : $row['contact_work'] }}</span></li>
                    <li class="d-flex align-items-center mb-3"><i class="ti ti-printer text-heading"></i><span class="fw-medium mx-2 text-heading">Position:</span> <span>{{ (!empty($row['contact_position'])) ? $row['contact_position'] : "" }}</span></li>
                    <li class="d-flex align-items-center mb-3"><i class="ti ti-printer text-heading"></i><span class="fw-medium mx-2 text-heading">Fax:</span> <span>{{ (!empty($row['contact_fax'])) ? $row['contact_fax'] : "" }}</span></li>
                    <li class="d-flex align-items-center mb-3"><i class="ti ti-at text-heading"></i><span class="fw-medium mx-2 text-heading">Email.:</span> <span>{{ (!empty($row['contact_email'])) ? $row['contact_email'] : "" }}</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>

  <script>
    function open_myCompanyModal(elem)
    {
        var tempInput     = '';
        var tempAttach    = '';
        var tempTitle     = '';
        var tempsubTitle  = '';
        var clientID      = $('#' + $(elem).attr('id')).attr('data-pid');
        var mode          = $('#' + $(elem).attr('id')).attr('data-mode');
        var contactID     = (mode == 'edit_contactOther') ? $('#' + $(elem).attr('id')).attr('data-cid') : 0;
        const req1        = axios.post('{{ env('APP_URL') }}' + '/my-company/companyDetail/ajax', { client_id : clientID, mode : mode, contact_id : contactID });

        blockUi();

        Promise.all(([req1]))
        .then(([res1]) => {
          var companyDetails  = (res1.data.data.company_details.length > 0) ? res1.data.data.company_details[0] : [];
          var companyContacts = (res1.data.data.company_contacts.length > 0) ? res1.data.data.company_contacts : [];

          var contactPhone        = (mode == 'edit_contactPrimary') ? companyDetails.phone : ( (mode == 'edit_contactOther') ? ((companyContacts.length > 0) ? ( (companyContacts[0]['contact_mobile'].length > 0) ? companyContacts[0]['contact_mobile'] : companyContacts[0]['contact_work'] ) : '') : '' );
          var contactFax          = (mode == 'edit_contactPrimary') ? companyDetails.fax : ( (mode == 'edit_contactOther') ? ((companyContacts.length > 0) ? companyContacts[0]['contact_fax'] : '') : '' );
          var contactEmail        = (mode == 'edit_contactPrimary') ? companyDetails.email : ( (mode == 'edit_contactOther') ? ((companyContacts.length > 0) ? companyContacts[0]['contact_email'] : '') : '' );
          var contactPost         = (mode == 'edit_contactOther') ? ((companyContacts.length > 0) ? companyContacts[0]['contact_position'] : '') : '';
          var contactPostHidden   = (mode == 'edit_contactOther') ? '' : 'hidden';
          var contactName         = (mode == 'edit_contactOther') ? ((companyContacts.length > 0) ? companyContacts[0]['contact_name'] : '') : '' ;

          // console.log(contactName);

          if(mode == 'add' || mode == 'edit_contactOther')
          {
            tempInput += '<div class="col-12 col-md-6">\
              <label class="form-label" for="'+ mode +'ContactName">Name</label>\
              <input type="text" id="'+ mode +'ContactID" name="'+ mode +'ContactID" value="'+ contactID +'" class="form-control" hidden />\
              <input type="text" id="'+ mode +'ContactName" name="'+ mode +'ContactName" class="form-control" value="'+ contactName +'" placeholder="Ali Bin Abu" />\
              </div>';
          }

          tempInput += '<div class="col-12 col-md-6">\
            <label class="form-label" for="'+ mode +'ContactPhone">Phone</label>\
            <input type="text" id="'+ mode +'ContactPhone" name="'+ mode +'ContactPhone" class="form-control" value="'+ contactPhone +'" placeholder="012-3456789" />\
          </div>\
          <div class="col-12 col-md-6">\
            <label class="form-label" for="' + mode + 'ContactFax">Fax</label>\
            <input type="text" id="' + mode + 'ContactFax" name="' + mode + 'ContactFax" class="form-control" value="'+ contactFax +'" placeholder="03-61881233" />\
          </div>';
          tempInput += (mode == 'edit_contactPrimary') ? '<div class="col-12 col-md-6" hidden>' : '<div class="col-12 col-md-6" hidden>\
            <label class="form-label" for="' + mode + 'ContactPosition">Position</label>';


          tempInput += (mode == 'edit_contactPrimary') ? '<input type="text" id="' + mode + 'ContactPosition" name="' + mode + 'ContactPosition" class="form-control" placeholder="Position..." disabled style="cursor: not-allowed;" />' : '<input type="text" id="' + mode + 'ContactPosition" name="' + mode + 'ContactPosition" class="form-control" value="'+ contactPost +'" placeholder="Position..." />';


          tempInput += '</div>\
          <div class="col-12 col-md-6">\
            <label class="form-label" for="' + mode + 'ContactEmail">Email Address</label>\
            <input type="text" id="' + mode + 'ContactEmail" name="' + mode + 'ContactEmail" class="form-control" value="'+ contactEmail +'" placeholder="email@email.com" />\
          </div>';

          if(mode == 'add')
          {
            tempInput += '<div class="col-12 col-md-6">\
              <label class="switch">\
              <input type="checkbox" class="switch-input" id="' + mode + 'ContactSwitchPrimary">\
                <span id="' + mode + 'ContactSwitchPrimary2" 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 Contact';
          }else{
            tempTitle = 'Edit Company Info';
            tempsubTitle = (mode == 'edit_contactPrimary') ? 'Edit Contact Primary' : 'Edit Contact 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('contact');

          $('#clientID').val(clientID);

          getMyCompanyAttachmentExist();
          tooltip();

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