@extends(session('staff_logged_in') ? 'Staff.layout' : 'Admin.layout')

@section('content')
<div id="alertBox" style="display:none;"></div>
<div class="row align-items-center justify-content-between mb-3 mt-3">
    <div class="col-auto">
        <h5>
            <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{ route('category') }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="icon icon-tabler">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M15 6l-6 6l6 6" />
                    </svg>
                </a>
            </button>
            Add Category
        </h5>
    </div>
</div>



<div class="row d-flex justify-content-center">
    <div class="col-lg-6">
        <div class="card border-0 shadow-sm">

            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h5><i class="ti tabler-category me-2"></i> Add Category</h5>
                </div>
            </div>

            <div class="card-body">
                <form id="categoryForm">
                    @csrf
                    <div class="section-title mb-4">
                        <h5>Category Information</h5>
                    </div>

                    <div class="row">


                        <div class="col-md-12 mb-3">
                            <label class="form-label">Category Name <span class="text-danger fw-bold">*</span></label>
                            {{-- ✅ name="name", old() value added --}}
                            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                                placeholder="Medicine, Equipment, Consumables" value="{{ old('name') }}">
                            @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                    </div>
                    <hr>

                    <div class="d-flex justify-content-center gap-2">
                        <button type="reset" class="btn btn-label-secondary">Reset</button>
                        <button type="submit" class="btn btn-primary" id="submitBtn">
                            <i class="ti tabler-device-floppy me-1"></i>
                            <span id="submitText">Save Category</span>
                        </button>
                        </button>
                    </div>

                </form>
            </div>

        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script>
$(document).ready(function() {
    function toggleCategoryDropdown() {
        if ($('#categoryType').val() === 'subcategory') {
            $('#parentCategoryDiv').show();
        } else {
            $('#parentCategoryDiv').hide();
        }
    }

    toggleCategoryDropdown();

    $('#categoryType').on('change', function() {
        toggleCategoryDropdown();
    });
});
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
const Toast = Swal.mixin({
    toast: true,
    position: 'top-end',
    showConfirmButton: false,
    timer: 3000,
    timerProgressBar: true
});
</script>

<script>
$(document).ready(function() {

    // Toggle parent category dropdown
    function toggleCategoryDropdown() {
        if ($('#categoryType').val() === 'subcategory') {
            $('#parentCategoryDiv').show();
        } else {
            $('#parentCategoryDiv').hide();
        }
    }

    toggleCategoryDropdown();

    $('#categoryType').on('change', function() {
        toggleCategoryDropdown();
    });

    // Clear errors
    function clearErrors() {
        $('.form-control, .form-select').removeClass('is-invalid');
        $('.invalid-feedback').text('');
    }

    // AJAX submit
    $('#categoryForm').on('submit', function(e) {
        e.preventDefault();

        clearErrors();

        const submitBtn = $('#submitBtn');
        const submitText = $('#submitText');

        submitBtn.prop('disabled', true);
        submitText.text('Saving...');

        $.ajax({
            url: '{{ route("store_category") }}',
            method: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                if (response.success) {

                    Toast.fire({
                        icon: 'success',
                        title: response.message
                    });

                    setTimeout(function() {
                        window.location.href = '{{ route("category") }}';
                    }, 1000);
                }
            },
            error: function(xhr) {
                submitBtn.prop('disabled', false);
                submitText.text('Save Category');

                if (xhr.status === 422) {
                    const errors = xhr.responseJSON.errors;
                    $.each(errors, function(field, messages) {
                        $(`[name="${field}"]`).addClass('is-invalid');
                        $(`[name="${field}"]`).siblings('.invalid-feedback').text(
                            messages[0]);
                    });
                } else {
                    $('#alertBox')
                        .html(
                            `<div class="alert alert-danger">Something went wrong. Please try again.</div>`
                        )
                        .show();
                    Toast.fire({
                        icon: 'error',
                        title: response.message
                    });
                }
            }
        });
    });

});
</script>
@endsection