@include('inc.header-inc');
<style>
  /* input{
    background-color: var(--sidebar-color) !important;
    color: var(--text-color) !important;
  }

  select{
    background-color: var(--sidebar-color) !important;
    color: var(--text-color) !important;
  }

  .select2-container--default .select2-selection--single{
    background-color: var(--sidebar-color) !important;
    color: var(--text-color) !important;
  }

  .select2-container--open .select2-dropdown--below{
    background-color: var(--sidebar-color) !important;
    color: var(--text-color) !important;
  }
  .table thead th{
    background-color: var(--sidebar-color)  !important;
    color: var(--text-color) !important;
  }
 
  .form-control, .form-select{
      height: 45px !important;
  } */
  /* NEW STYLE */
  .select2-container--default .select2-selection--single{
      padding:12px 5px !important;
      height: 57px !important;
      width: 100% !important; 
      font-size: 16px !important;  
      position: relative !important;
      border:1px solid rgba(0,0,0,0.2) !important;
      background-color: var(--sidebar-color) !important;
      transition: var(--tran-03) !important;
  }
  body.dark .select2-container--default .select2-selection--single{
    border:1px solid var(--text-color) !important;
    transition: var(--tran-03) !important;
  }
  span.select2-selection__rendered{
      color: var(--text-color) !important;
      transition: var(--tran-03) !important;
  }

  .select2-container--default .select2-selection--single .select2-selection__arrow{
      font-size: 1.3em !important;
      padding: 25px 12px !important;
      height: 27px !important;
      position: absolute !important;
      top: 0px !important;
      right: 0px !important;
      width: 20px !important;
      transition: var(--tran-03) !important;
  }
</style>

<section class="container-fluid p-3 py-2 " style="padding-bottom:300px;">
  <div class="card container-shadow py-3 mb-2"> 
    <div class="container-fluid">
        <div class="flex position-relative">
              <span class="fw-semibold fs-4 align-middle justify-content-start text-secondary" style="font-weight: 500; font-size: 1.5em;">{{ ucwords($title) }}</span>
        </div>
    </div>
  </div>

  <div class="container-shadow bg-white ps-3 py-2 border mb-4 rounded" id="breadcrumb-container">
    <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item active py-1" aria-current="page">Maintenance</li>
            <li class="breadcrumb-item active py-1" aria-current="page">{{ ucwords($title) }}</li>
        </ol>
    </nav>
  </div>

  <div class="container-shadow border px-2 py-3 mb-3 rounded">
    <form action="/updateaccount/{{$user_profile->id}}" method="POST">
      @csrf
      @method('PUT')
      <div class="row g-3">
        <!-- NAME -->
        <div class="col-md-6">
          <div class="form-floating">
            <input type="text" name="name" class="form-control" id="user_name" placeholder="Enter Name" value="{{$user_profile->name}}" required>
            <label for="inputEmail4" class="form-label"><span class="text-danger">*</span>Name</label>
          </div>
        </div>

        <!-- DEPARTMENT -->
        <div class="col-md-6">
          <div class="form-floating">
            <select class="form-select" name="department" id="selectdepartment" aria-label="Default select example" required style="width:100%">
              <option value="{{ $user_profile->department }}" selected>{{ ucwords($user_profile->department) }}</option>
              @foreach ($department as $dept)
              <option value="{{ $dept->department }}">{{ ucwords($dept->department) }}</option>
              @endforeach
            </select>
            <label for="inputPassword4" class="form-label"><span class="text-danger">*</span>Department</label>
          </div>
        </div>

        <!-- EMAIL -->
        <div class="col-md-6">
          <div class="form-floating">
            <input type="email" name="email" class="form-control" id="inputEmail" placeholder="Enter Email" value="{{$user_profile->email}} " required>
            <label for="inputEmail" class="form-label"><span class="text-danger">*</span>Email</label>
          </div>
        </div>

        <!-- POSITION -->
        <div class="col-md-6">
          <div class="form-floating">
            <select class="form-select" name="position" id="selectposition" aria-label="Default select example"  required style="width:100%">
            </select>
            <label for="inputAddress2" class="form-label"><span class="text-danger">*</span>Position</label>
          </div>
        </div>

        <!-- WAREHOUSE -->
        <div class="col-md-12">
          <div class="form-floating">
            @if(auth()->user()->user_level == 7 || auth()->user()->user_level == 2)
            <select class="form-select" name="tbl_sbu_id" id="selectsbu" aria-label="Default select example" required style="width:100%">
              <option value="{{$sbu_id->id}}">
                @php
                  $sbu_name = App\Models\TblSbu::where('id', auth()->user()->tbl_sbu_id)->first();
                  echo ucwords($sbu_name->sbu);
                @endphp
              </option>
            </select>
            @else
            <select class="form-select" name="tbl_sbu_id" id="selectsbu" aria-label="Default select example" required style="width:100%">
              <option value="{{$user_profile->tbl_sbu_id}}" selected>
                  @if($user_profile->tbl_sbu_id != 0)
                      {{ucwords($user_profile->sbu->sbu)}}
                  @else
                      For Executive
                  @endif
              </option>
              <option value="0">For Executives </option>
              
              @foreach ($sbu as $sbulist)
              <option value="{{$sbulist->id}}">{{ucwords($sbulist->sbu)}}</option>
              @endforeach
            </select>
            @endif
            <label for="inputCity" class="form-label"><span class="text-danger">*</span>Warehouse</label>
          </div>
        </div>
      </div>
      <div class="text-center mt-3">
        <button type="submit" class="btn btn-primary btn-sm px-3 py-1 container-shadow" id="update-user">Submit</button>
        <a href="/manageaccount"><button type="button" class="btn btn-secondary btn-sm px-3 py-1 container-shadow">Back</button></a>
      </div>
    </form>
  </div>

</section>
@include('inc.modal.modalloader')
@include('inc.footer-inc')
<script>
$(document).ready(function(){
  $('#selectdepartment').select2({
    placeholder: 'Select Department'
  });

  $('#selectposition').select2({
    placeholder: 'Select Position'
  });

  $('#selectsbu').select2({
    placeholder: 'Select Warehouse'
  });
});

$("body").on('click', 'button[id=update-user]', function(){
  if($('#user_name').val().trim() == ''){
      toasts_error('Name is required.');
      location.reload();
      return false;
  }

  if($('#selectdepartment').val().trim() == ''){
    toasts_error('Department is required.');
    location.reload();
    return false;
  }

  if($('#inputEmail').val().trim() == ''){ 
    toasts_error('Email is required.');
    location.reload();
    return false;
  }

  if($('#selectposition').val().trim() == ''){  
    toasts_error('Position is required.');
    location.reload();
    return false;
  }
  // if($('#inputPassword').val().trim() == ''){ 
  //     alert('Password Field is Required.');
  //     location.reload();
  //     return false;
  // }
  if($('#selectsbu').val().trim() == ''){ 
      alert('Warehouse Field is Required.');
      location.reload();
      return false;
  }
});
</script>

<script>
    var getPos = "{{ $user_profile->position }}"; // Assuming $user_profile->position is a string
  
    $(document).ready(function() {
      $('select[name="department"]').on('change', function() {
        var deptname = $(this).val();
  
        $.ajax({
          url: '/get-position/' + deptname,
          type: 'GET',
          dataType: 'json',
          success: function(data) {
            var positionSelect = $('select[name="position"]');
            positionSelect.empty();
            positionSelect.append($('<option>', { 
              value: '',
              text : 'Choose Position' 
            }));
  
            $.each(data, function(key, value) {
              var pascalCasePos = value.position.replace(/\w+/g, function(match) {
                return match.charAt(0).toUpperCase() + match.slice(1).toLowerCase();
              });
    
              var optionText = pascalCasePos;
              positionSelect.append($('<option>', { 
                value: value.position,
                text : optionText
              }));
            });
  
            // Set the default selected option based on getPos
            positionSelect.val(getPos).trigger('change');
          }
        });
      });
  
      // Trigger the change event initially to populate the positionSelect options
      $('select[name="department"]').trigger('change');
    });


  </script>