@extends('layouts.app')

@section('content')
<style>
/* Style the tabs to look like arrows */
.arrow-tab {
    position: relative;
    padding-right: 30px; /* Space for the arrow */
    transition: all 0.3s ease;
}

.arrow-tab::after {
    content: '\2192'; /* Right arrow symbol */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    transition: transform 0.3s ease;
}

.arrow-tab.active {
    font-weight: bold;
    color: #fff;
    background-color:rgb(143, 190, 240); /* Change background color for active tab */
}

.arrow-tab.active::after {
    transform: translateY(-50%) rotate(90deg); /* Rotate the arrow when active */
}

/* Hover effect */
.arrow-tab:hover {
    color:rgb(159, 199, 241);
    background-color: #f1f1f1; /* Light background on hover */
}

/* Tab content */
.tab-content {
    padding: 20px;
    border: 1px solid #ddd;

}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

</style>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="card shadow-sm">
        <div class="card-header text-primary d-flex justify-content-between align-items-center">
          <h6 class="mb-0 text-primary">Update [ {{ old('name', $user->name) }} ]</h6>
          <a href="{{ route('users.index') }}" class="btn btn-info btn-sm">
            <i class="fas fa-arrow-left"></i> Back to Users
          </a>
        </div>
        <div class="card-body">
        <div class="nav nav-pills mb-4" id="stepTabs" role="tablist">
    <a class="nav-link active arrow-tab" id="step1-tab" data-bs-toggle="pill" href="#step1" role="tab" aria-controls="step1" aria-selected="true">Step 1: Personal Info</a>
    <a class="nav-link arrow-tab" id="step2-tab" data-bs-toggle="pill" href="#step2" role="tab" aria-controls="step2" aria-selected="false">Step 2: Administrative Info</a>
    <a class="nav-link arrow-tab" id="step3-tab" data-bs-toggle="pill" href="#step3" role="tab" aria-controls="step3" aria-selected="false">Step 3: Location Info</a>
</div>


          @if ($errors->any())
          <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <ul>
              @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
              @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
          @endif

          <form id="multistepForm" action="{{ route('users.update', $user->id) }}" method="POST">
            @method('PUT')
            @csrf

            <div class="tab-content mt-3" id="stepTabsContent">
              <div class="tab-pane fade show active" id="step1" role="tabpanel" aria-labelledby="step1-tab">
                <h5 class="text-primary">Step 1: Personal Information</h5>
                <div class="row">
                  <div class="col-md-4 mb-3">
                    <label for="name">Name:</label>
                    <input type="text" class="form-control" id="name" name="name" value="{{ old('name', $user->name) }}" required>
                  </div>
                  <div class="col-md-4 mb-3">
                    <label for="email">Email:</label>
                    <input type="email" class="form-control" id="email" name="email" value="{{ old('email', $user->email) }}" required>
                  </div>
                  <div class="col-md-4 mb-3">
                    <label for="phone_number">Phone Number:</label>
                    <input type="text" class="form-control wizard-required" id="phone_number" name="phone_number" value="{{ old('phone_number', $user->phone_number) }}" required oninput="validatePhoneNumber()">
                    <small id="phoneError" class="text-danger d-none">Phone number must start with 255 and be exactly 12 digits long.</small>
                  </div>
                  <div class="col-md-4 mb-3">
                    <label for="password">Password:</label>
                    <input type="password" class="form-control wizard-required" id="password" name="password">
                  </div>
                  <div class="col-md-4 mb-3">
                    <label for="rank">Rank:</label>
                    <select class="form-control wizard-required" id="rank" name="rank">
                      <option value="" disabled>Select Rank</option>
                      @foreach($ranks as $rank)
                      <option value="{{ $rank->id }}" {{ old('rank', $user->rank_id) == $rank->id ? 'selected' : '' }}>
                        {{ $rank->name }}
                      </option>
                      @endforeach
                    </select>
                  </div>
                </div>
              </div>

              <div class="tab-pane fade" id="step2" role="tabpanel" aria-labelledby="step2-tab">
                <h5 class="text-primary">Step 2: Administrative Information</h5>
                <div class="row">
                  <div class="col-md-4 mb-3">
                    <label for="status">Status:</label>
                    <select class="form-control wizard-required" id="status" name="status">
                      <option value="active" {{ old('status', $user->status) == 'active' ? 'selected' : '' }}>Active</option>
                      <option value="inactive" {{ old('status', $user->status) == 'inactive' ? 'selected' : '' }}>Inactive</option>
                    </select>
                  </div>
                  <div class="col-md-4 mb-3">
                    <label for="role">Role:</label>
                    <select class="form-control wizard-required" id="role" name="role">
                      <option value="" disabled>Select Role</option>
                      @foreach($roles as $role)
                      <option value="{{ $role->name }}" {{ $user->roles->first() && $user->roles->first()->name == $role->name ? 'selected' : '' }}>
                        {{ $role->name }}
                      </option>
                      @endforeach
                    </select>
                  </div>
                  <div class="col-md-4 mb-3">
                                        <label for="designation">Designation:</label>
                                        <input type="text" class="form-control wizard-required" id="designation" name="designation" value="{{ old('designation', $user->designation) }}" required>
                                    </div>
                </div>
              </div>

              <div class="tab-pane fade" id="step3" role="tabpanel" aria-labelledby="step3-tab">
                <h5 class="text-primary">Step 3: Location Information</h5>
                <div class="row">
                  <div class="col-md-4 mb-3">
                    <label for="region_id">Region:</label>
                    <select class="form-control wizard-required" id="region_id" name="region_id" required onchange="updateDistricts()">
                      <option value="" disabled>Select Region</option>
                      @foreach($regions as $region)
                      <option value="{{ $region->id }}" {{ old('region_id', $user->region_id) == $region->id ? 'selected' : '' }}>
                        {{ $region->name }}
                      </option>
                      @endforeach
                    </select>
                  </div>
                  <div class="col-md-4 mb-3">
                    <label for="district_id">District:</label>
                    <select class="form-control wizard-required" id="district_id" name="district_id">
                      <option value="" disabled>Select District</option>
                      @foreach($districts as $district)
                      <option value="{{ $district->id }}" {{ old('district_id', $user->district_id) == $district->id ? 'selected' : '' }}>
                        {{ $district->name }}
                      </option>
                      @endforeach
                    </select>
                  </div>
                  <div class="col-md-4 mb-3">
    <label for="branch_id">Branch:</label>
    <select class="form-control wizard-required" id="branch_id" name="branch_id"  onchange="updateCommands()">
        <option value="">Select Branch</option>
        @foreach($branches as $branch)
            <option value="{{ $branch->id }}" {{ old('branch_id') == $branch->id ? 'selected' : '' }}>
                {{ $branch->name }}
            </option>
        @endforeach
    </select>
</div>
<div class="col-md-4 mb-3">
    <label for="command_id">Command:</label>
    <select class="form-control wizard-required" id="command_id" name="command_id">
        <option value="">Select Command</option>
        {{--
        @foreach($commands as $command)
            <option value="{{ $command->id }}" {{ old('command_id') == $command->id ? 'selected' : '' }}>
                {{ $command->name }}
            </option>
        @endforeach
        --}}
    </select>
</div>
                  <div class="col-md-4 mb-3">
                    <label for="department_id">Department:</label>
                    <select class="form-control wizard-required" id="department_id" name="department_id">
                      <option value="" disabled>Select Department</option>
                      @foreach($departments as $department)
                      <option value="{{ $department->id }}" {{ old('department_id', $user->department_id) == $department->id ? 'selected' : '' }}>
                        {{ $department->name }}
                      </option>
                      @endforeach
                    </select>
                  </div>
                </div>
              </div>

              <div class="mt-4 d-flex justify-content-between">
                <button type="button" class="btn btn-secondary" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
                <button type="button" class="btn btn-primary" id="nextBtn" onclick="nextPrev(1)">Next</button>
                <button type="submit" class="btn btn-success d-none" id="submitBtn">Submit</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  let currentStep = 0;
  showStep(currentStep);

  function showStep(n) {
    const steps = document.querySelectorAll('.tab-pane');
    steps.forEach((step, index) => {
      step.classList.remove('show', 'active');
      if (index === n) step.classList.add('show', 'active');
    });

    document.getElementById('prevBtn').style.display = n === 0 ? 'none' : 'inline';
    document.getElementById('nextBtn').style.display = n === steps.length - 1 ? 'none' : 'inline';
    document.getElementById('submitBtn').classList.toggle('d-none', n !== steps.length - 1);

    updateTabs(n);
  }

  function nextPrev(n) {
    const steps = document.querySelectorAll('.tab-pane');
    if (n === 1 && !validateForm()) return false;
    currentStep += n;
    if (currentStep >= steps.length) return false;
    showStep(currentStep);
  }

  function updateTabs(n) {
    const tabs = document.querySelectorAll('#stepTabs a');
    tabs.forEach((tab, index) => {
      tab.classList.toggle('active', index === n);
    });
  }

  function validateForm() {
    const currentTab = document.querySelectorAll('.tab-pane')[currentStep];
    const inputs = currentTab.querySelectorAll('input, select');
    let valid = true;
    inputs.forEach(input => {
      if (input.required && !input.value) {
        input.classList.add('is-invalid');
        valid = false;
      } else {
        input.classList.remove('is-invalid');
      }
    });
    return valid;
  }

  function validatePhoneNumber() {
    const phoneInput = document.getElementById('phone_number');
    const phoneError = document.getElementById('phoneError');
    const phoneValue = phoneInput.value;
    if (!/^255\d{9}$/.test(phoneValue)) {
      phoneError.classList.remove('d-none');
    } else {
      phoneError.classList.add('d-none');
    }
  }

</script>

<script>
    function updateDistricts() {
        var regionId = $('#region_id').val();
        if (regionId) {
            // Make an AJAX request to fetch districts based on the selected region
            $.ajax({
                url: '/districts/' + regionId, // Define the route for fetching districts
                type: 'GET',
                success: function(data) {
                    // Clear previous districts
                    $('#district_id').empty();
                    $('#district_id').append('<option value="" disabled>Select District</option>');
                    
                    // Append new districts based on the response
                    $.each(data, function(key, district) {
                        $('#district_id').append('<option value="' + district.id + '">' + district.name + '</option>');
                    });
                },
                error: function() {
                    alert('Error loading districts.');
                }
            });
        } else {
            // If no region is selected, clear the district dropdown
            $('#district_id').empty();
            $('#district_id').append('<option value="" disabled>Select District</option>');
        }
    }
</script>
<script>
    function updateCommands() {
        const branchId = document.getElementById('branch_id').value;
        const commandSelect = document.getElementById('command_id');
        commandSelect.innerHTML = '<option value="">Select Command</option>'; // Clear existing options

        if (!branchId) return; // If no branch is selected, stop here

        // Perform AJAX request to get commands based on the selected branch
        fetch(`/get-commands-by-branch/${branchId}`)
            .then(response => response.json())
            .then(commands => {
                commands.forEach(command => {
                    let option = new Option(command.name, command.id);
                    commandSelect.add(option);
                });
            })
            .catch(error => {
                console.error('Error fetching commands:', error);
            });
    }
</script>
@endsection