@extends('backend.layouts.admin.app')

@section('content')

    <!-- Content Header (Page header) -->
    <section class="content-header">
      <ol class="breadcrumb">
        <li>
          <a href="#">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g clip-path="url(#clip0_664_24080)">
              <path d="M7.5 13.5L10.5 13.5" stroke="#007AFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M1.76354 9.91009C1.49878 8.18718 1.3664 7.32573 1.69212 6.56203C2.01785 5.79834 2.74052 5.27582 4.18585 4.2308L5.26574 3.45C7.06372 2.15 7.96271 1.5 9 1.5C10.0373 1.5 10.9363 2.15 12.7343 3.45L13.8141 4.2308C15.2595 5.27582 15.9821 5.79834 16.3079 6.56203C16.6336 7.32573 16.5012 8.18718 16.2365 9.91009L16.0107 11.3793C15.6353 13.8217 15.4477 15.0429 14.5717 15.7714C13.6958 16.5 12.4152 16.5 9.85411 16.5H8.14589C5.58475 16.5 4.30418 16.5 3.42825 15.7714C2.55232 15.0429 2.36465 13.8217 1.98932 11.3793L1.76354 9.91009Z" stroke="#007AFF" stroke-width="1.5" stroke-linejoin="round"/>
              </g>
              <defs>
              <clipPath id="clip0_664_24080">
              <rect width="18" height="18" fill="white"/>
              </clipPath>
              </defs>
            </svg>
          </a>
        </li>
        <li>
          <a href="{{ route('admin.staff.index') }}">Staff</a>
        </li>
        <li class="active">{{$title}}</li>
      </ol>
      <div class="d-flex justify-content-between align-items-center flex-wrap">
        <h1>{{$title}}</h1>
        
        
      </div>
  
    </section>
    <!-- Main content -->
    <section class="content pb-0">
    @include('backend.layouts.alert')
      <!-- Default box -->
      <div class="row">
      <div class="col-md-12">

        <div class="border-top">
            
            <div class="" id="customer-step-1" > 
              <form id="staffForm" action="{{ $save }}" method="POST" class="form-horizontal form-validate" enctype="multipart/form-data">
                  @csrf
                  @if($pageData)
                    @method('PUT')
                  @endif
                  <input type="hidden" name="id" value="{{ old('id', $pageData['id'] ?? '') }}" id="staff_id">
                  
                      <div class="box-body px-0 form-box-scroll">
                      
                        <div class="row">
                          <div class="col-md-4">
                            <div class="form-group">
                                <label for="name" class="control-label">Staff Name</label>
                                <div class="col-field-wrapper">
                                    <input type="text" name="name" class="form-control" id="name" placeholder="Enter staff name" value="{{ old('name', $pageData['name'] ?? '') }}">
                                    @if ($errors->has('name'))
                                    <span class="help-block">{{ $errors->first('name') }}</span>
                                    @endif
                                </div>
                            </div>
                          </div>
                          
                          <div class="col-md-4">
                            <div class="form-group">
                                <label for="email" class="control-label">Email</label>
                                <div class="col-field-wrapper">
                                    <input type="email" name="email" class="form-control" id="email" placeholder="Enter email" {{ $pageData ? 'readonly' : '' }} value="{{ old('email', $pageData['email'] ?? '') }}">
                                    @if ($errors->has('email'))
                                    <span class="help-block">{{ $errors->first('email') }}</span>
                                    @endif
                                </div>
                            </div>
                          </div>
                          <div class="col-md-4">
                            <div class="form-group">
                                <label for="phone" class="control-label">Phone</label>
                                <div class="col-field-wrapper">
                                    <input type="text" name="phone" class="form-control" id="phone" placeholder="Enter phone number" value="{{ old('phone', $pageData['phone_accounts'] ?? '') }}">
                                    @if ($errors->has('phone'))
                                    <span class="help-block">{{ $errors->first('phone') }}</span>
                                    @endif
                                </div>
                            </div>
                          </div>
                          <div class="col-md-4">
                            <div class="form-group">
                                <label for="role_id" class="control-label">Role</label>
                                <div class="col-field-wrapper">
                                    <select name="role_id" id="role_id" class="form-control">
                                    <option value="">Select Role</option>
                                      @foreach ($roles as $role)
                                        <option value="{{ $role->id }}" {{ old('role_id', $pageData['role_id'] ?? '') == $role->id ? 'selected' : '' }}>{{ $role->name }}</option>
                                      @endforeach
                                  </select>
                                  @if ($errors->has('role_id'))
                                  <span class="help-block">{{ $errors->first('role_id') }}</span>
                                  @endif
                                </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- /.box-body -->
                      <div class="box-footer px-0">    
                          <div class="col-sm-12 text-end">
                              <a href="{{ $backBtnLink }}" class="btn btn-outline-secondary me-3">Cancel</a>
                              <button type="submit" class="btn btn-primary" id="submitBtn">
                                <span class="btn-text">{{ $saveBtn }}</span>
                                <span class="btn-loading d-none">
                                  <i class="fa fa-spinner fa-spin"></i> Processing...
                                </span>
                              </button>
                          </div>
                      </div>
                    
                  <!-- /.box-footer -->
              </form>
            </div>

            
        </div>
      </div>
      <!-- /.box -->

    </section>
    <!-- /.content -->

<script type="text/javascript">
$(document).ready(function () {


    // Form validation
    $('#staffForm').validate({
        debug: false,
        ignore: [],
        errorClass: 'help-block',
        errorElement: "span",
        rules: {
            name: {
                required: true,
                minlength: 3,
                maxlength: 50,
            },
            email: {
                required: true,
                email: true,
                maxlength: 320,
            },
            phone: {
                required: true,
                minlength: 9,
                maxlength: 15,
                number: true
            },
            role_id: {
                required: true
            }
        },
        messages: {
            name: {
                required: "Please enter staff name.",
                minlength: "Staff name must be at least 3 characters.",
                maxlength: "Staff name must not exceed 50 characters."
            },
            email: {
                required: "Please enter email address.",
                email: "Please enter a valid email address.",
                maxlength: "Email must not exceed 320 characters."
            },
            phone: {
                required: "Please enter phone number.",
                minlength: "Phone number must be at least 9 digits.",
                maxlength: "Phone number must not exceed 15 digits."
            },
            role_id: {
                required: "Please select a role."
            }
        },
        highlight: function(element, errorClass, validClass) {
            $(element).parents('.col-field-wrapper').addClass('has-error');
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).parents('.col-field-wrapper').removeClass('has-error');
        },
        invalidHandler: function(form, validator) {
            if (!validator.numberOfInvalids())
                return;

            $('html, body').animate({
                scrollTop: ($(validator.errorList[0].element).offset().top - 100)
            }, 500);
        },
        submitHandler: function(form) {
            submitForm();
            return false;
        }
    });

    // AJAX form submission
    function submitForm() {
        const form = $('#staffForm');
        const submitBtn = $('#submitBtn');
        const btnText = $('.btn-text');
        const btnLoading = $('.btn-loading');
        const formData = new FormData(form[0]);

        // Show loading state
        submitBtn.prop('disabled', true);
        btnText.addClass('d-none');
        btnLoading.removeClass('d-none');

        $.ajax({
            url: form.attr('action'),
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    toastr.success(response.message || 'Staff saved successfully!', 'Success', {
                        timeOut: 3000,
                        progressBar: true,
                        closeButton: true
                    });
                    setTimeout(function() {
                        window.location.href = '{{ route("admin.staff.index") }}';
                    }, 1500);
                } else {
                    toastr.error(response.message || 'Something went wrong!', 'Error', {
                        timeOut: 5000,
                        progressBar: true,
                        closeButton: true
                    });
                }
            },
            error: function(xhr) {
                let errorMessage = 'An error occurred while saving the staff.';
                
                if (xhr.status === 422) {
                    // Validation errors
                    const errors = xhr.responseJSON.errors;
                    // Remove previous error messages and error classes
                    form.find('.help-block').remove();
                    form.find('.col-field-wrapper').removeClass('has-error');
                    Object.keys(errors).forEach(function(key) {
                        const field = form.find('[name="' + key + '"]');
                        if (field.length) {
                            // Add error class to wrapper
                            field.closest('.col-field-wrapper').addClass('has-error');
                            // Remove any previous error message for this field
                            field.siblings('.help-block').remove();
                            // Add new error messages
                            errors[key].forEach(function(error) {
                                field.after('<span class="help-block">' + error + '</span>');
                            });
                        }
                    });
                } else if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                    toastr.error(errorMessage, 'Error', {
                        timeOut: 5000,
                        progressBar: true,
                        closeButton: true
                    });
                } else {
                    toastr.error(errorMessage, 'Error', {
                        timeOut: 5000,
                        progressBar: true,
                        closeButton: true
                    });
                }
            },
            complete: function() {
                // Reset button state
                submitBtn.prop('disabled', false);
                btnText.removeClass('d-none');
                btnLoading.addClass('d-none');
            }
        });
    }
});
</script>
@endsection