@extends('layouts.master')
@section('title') @lang('translation.Departments') @endsection
@section('content')
@component('components.breadcrumb')
@slot('li_1') Admin @endslot
@slot('title') {{ isset($department) ? 'Edit Department' : 'New Department' }} @endslot
@endcomponent

<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-header">
                <div class="card-header py-3 d-flex justify-content-between align-items-center bg-primary text-white">
                    <h6 class="m-0 font-weight-bold">
                        <i class="fas fa-building mr-2"></i>{{ isset($department) ? 'Edit Department' : 'Create New Department' }}
                    </h6>
                    <a href="{{ route('admin.departments.index') }}" class="btn btn-light btn-sm">
                        <i class="fas fa-arrow-left mr-1"></i> Back to List
                    </a>
                </div>
            </div>
            <div class="card-body">
                <form class="needs-validation" novalidate 
                      action="{{ isset($department) ? route('admin.departments.update', $department) : route('admin.departments.store') }}" 
                      method="POST" 
                      id="departmentsForm">
                      
                    @csrf
                    @if(isset($department))
                        @method('PUT')
                    @endif
                    
                    <div id="formErrors" class="alert alert-danger d-none"></div>
                    
                    <div class="row">
                        <div class="mb-3 col-md-6">
                            <div class="form-group">
                                <label for="branch_id" class="font-weight-bold">Branch <span class="text-danger">*</span></label>
                                <select class="form-select" id="branch_id" name="branch_id" required>
                                    <option value="">Select Branch</option>
                                    @foreach($branches as $branch)
                                        <option value="{{ $branch->id }}" 
                                            {{ old('branch_id', $department->branch_id ?? '') == $branch->id ? 'selected' : '' }}>
                                            {{ $branch->name }}
                                        </option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">Please select a branch.</div>
                            </div>
                        </div>
                        <div class="mb-3 col-md-6">
                            <div class="form-group">
                                <label for="name" class="font-weight-bold">Department Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" 
                                       id="name" name="name" 
                                       value="{{ old('name', $department->name ?? '') }}" required>
                                <div class="invalid-feedback">Please provide a valid department name.</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3 form-group">
                        <label for="description" class="font-weight-bold">Description</label>
                        <textarea class="form-control" 
                                  id="description" name="description" rows="3">{{ old('description', $department->description ?? '') }}</textarea>
                        <div class="invalid-feedback"></div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-group">
                            <label class="font-weight-bold d-block">Status</label>
                            <div class="custom-control custom-switch">
                                <input type="checkbox" class="custom-control-input" id="active" name="active" 
                                       value="1" {{ (old('active', $department->active ?? true)) ? 'checked' : '' }}>
                                <label class="custom-control-label" for="active">Active Department</label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group mt-4">
                        <button type="submit" class="btn btn-primary px-4">
                            <i class="fas fa-save mr-1"></i> {{ isset($department) ? 'Update' : 'Save' }} Department
                        </button>
                        <a href="{{ route('admin.departments.index') }}" class="btn btn-secondary ml-2">
                            <i class="fas fa-times mr-1"></i> Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
<script src="{{ URL::asset('assets/libs/pristinejs/pristinejs.min.js') }}"></script>
<script src="{{ URL::asset('assets/js/pages/form-validation.init.js') }}"></script>
<script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endsection

@section('script-bottom')
<script>
$(document).ready(function () {
    const form = $('#departmentsForm');
    const submitButton = form.find("button[type=submit]");

    // Client-side validation
    form.on('submit', function (e) {
        if (!this.checkValidity()) {
            e.preventDefault();
            e.stopPropagation();
        }
        this.classList.add('was-validated');
    });

    // AJAX form submission
    form.on('submit', function (e) {
        e.preventDefault();

        // Clear previous errors
        $('#formErrors').addClass('d-none').html('');
        form.find('.is-invalid').removeClass('is-invalid');
        form.find('.invalid-feedback').html('');

        // Set loading state
        submitButton.prop('disabled', true).html(`
            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
            ${submitButton.text()}
        `);

        $.ajax({
            url: form.attr('action'),
            type: form.attr('method'),
            data: form.serialize(),
            dataType: 'json',
            success: function (response) {
                submitButton.prop('disabled', false).html(
                    `<i class="fas fa-save mr-1"></i> ${submitButton.text().replace('ing...', '')}`
                );

                if (response.success) {
                    Swal.fire({
                        title: 'Success!',
                        text: response.message || (form.attr('method') === 'PUT' 
                            ? 'Department updated successfully!' 
                            : 'Department created successfully!'),
                        icon: 'success',
                        confirmButtonText: 'OK',
                        timer: 1800,
                        willClose: () => {
                            window.location.href = response.redirect || "{{ route('admin.departments.index') }}";
                        }
                    });
                }
            },
            error: function (jqXHR) {
                submitButton.prop('disabled', false).html(
                    `<i class="fas fa-save mr-1"></i> ${submitButton.text().replace('ing...', '')}`
                );

                if (jqXHR.status === 422) {
                    const errors = jqXHR.responseJSON.errors;
                    let errorHtml = '<ul>';

                    $.each(errors, function (field, messages) {
                        const input = $(`#${field}`);
                        input.addClass('is-invalid');
                        input.siblings('.invalid-feedback').html(messages.join('<br>'));
                        messages.forEach(msg => {
                            errorHtml += `<li>${msg}</li>`;
                        });
                    });

                    errorHtml += '</ul>';
                    $('#formErrors').removeClass('d-none').html(errorHtml);
                } else {
                    $('#formErrors').removeClass('d-none')
                        .html(jqXHR.responseJSON?.message || 'Something went wrong. Please try again.');
                }

                // Scroll to error box
                $('html, body').animate({
                    scrollTop: $('#formErrors').offset().top - 100
                }, 500);
            }
        });
    });
});
</script>
@endsection