@php
  $configData = appClasses();
@endphp

@extends('layouts/contentNavbarLayout')

@section('vendor-style')
  @vite(['resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss', 'resources/assets/vendor/libs/select2/select2.scss'])
@endsection

@section('title', 'Create New Staff')

@section('content')
  <div class="container-fluid px-0">
    <div class="d-flex align-items-center mb-4">
      <a href="{{ route('staffs.index') }}" class="btn btn-icon btn-outline-secondary me-2" style="border-radius: 12px;">
        <i class="icon-base ti tabler-arrow-left"></i>
      </a>
      <h2 class="fw-bold mb-0">Create New Staff</h2>
    </div>

    <div class="card shadow-sm" style="border-radius: 16px;">
      <div class="card-body">
        <h5 class="fw-semibold mb-4">Staff Information</h5>
        <form id="create-staff-form" method="POST">
          @csrf
          <input type="hidden" name="id" id="id" value="{{ $staff->id ?? '' }}">
          <div class="row mb-3 align-items-center">
            <label class="col-md-2 col-form-label">Staff Name</label>
            <div class="col-md-10">
              <input type="text" name="full_name" class="form-control" value="{{ $staff->full_name ?? '' }}"
                placeholder="Enter Staff Name">
              <label class="text-danger error_full_name"></label>
            </div>
          </div>
          <div class="row mb-3 align-items-center">
            <label class="col-md-2 col-form-label">Mobile</label>
            <div class="col-md-10">
              <input type="number" step="any" name="phone" value="{{ $staff->phone ?? '' }}" class="form-control"
                placeholder="Enter Mobile Number">
              <label class="text-danger error_phone"></label>
            </div>
          </div>
          <div class="row mb-3 align-items-center">
            <label class="col-md-2 col-form-label">Email</label>
            <div class="col-md-10">
              <input type="email" name="email" class="form-control" value="{{ $staff->email ?? '' }}"
                placeholder="Enter Email">
              <label class="text-danger error_email"></label>
            </div>
          </div>
          <div class="row mb-3 align-items-center">
            <label class="col-md-2 col-form-label">Password</label>
            <div class="col-md-10">
              <input type="password" name="password" class="form-control" placeholder="Enter Password">
              <label class="text-danger error_password"></label>
            </div>
          </div>
          <div class="row mb-4 align-items-center">
            <label class="col-md-2 col-form-label">Staff's Role</label>
            <div class="col-md-10">
              <select name="role" class="form-select select2">
                <option value="">Choose Role</option>
                <!-- Loop through roles -->
                @foreach ($roles as $role)
                  <option value="{{ $role->name }}"
                    {{ isset($staff) && $staff->role == $role->name ? 'selected' : '' }}>
                    {{ $role->title }}</option>
                @endforeach
              </select>
              <label class="text-danger error_role"></label>
            </div>
          </div>
          <div class="d-flex justify-content-end">
            <a href="{{ route('staffs.index') }}" class="btn btn-outline-secondary me-2">Cancel</a>
            <button type="submit" class="btn" style="background: #ff6a00; color: #fff;">Save Staff</button>
          </div>
        </form>
      </div>
    </div>
  </div>
@endsection

@section('vendor-script')
  @vite(['resources/assets/vendor/libs/select2/select2.js'])
@endsection

@section('page-script')
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      if (window.$ && $.fn.select2) {
        $('.select2').select2({
          width: '100%'
        });
      }
      // AJAX form submission
      $('#create-staff-form').on('submit', function(e) {
        e.preventDefault();
        console.log("create form");
        var form = $(this);
        var url = "{{ route('staffs.store') }}";
        var formData = form.serialize();
        // Disable submit button
        // form.find('button[type="submit"]').prop('disabled', true);
        // Clear previous errors
        form.find('.text-danger').val('');
        $.ajax({
          url: url,
          method: 'POST',
          data: formData,
          headers: {
            'X-CSRF-TOKEN': $('input[name="_token"]').val()
          },
          success: function(response) {
            // Redirect or show success message
            window.location.href = "{{ route('staffs.index') }}";
          },
          error: function(response) {
            $.each(response.responseJSON.message, function(field_name, error) {
              $(document).find('.error_' + field_name).text(error[0])
            })
          }
        });
      });
    });
  </script>
@endsection