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

@section('content')
<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>
            Edit 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">
                <h5><i class="ti tabler-edit me-2"></i> Edit Category</h5>
            </div>
            <div class="card-body">
                <form id="categoryEditForm" method="POST">
                    @csrf

                    <div class="row">

                    

                        <div class="col-md-12 mb-3">
                            <label class="form-label">Category Name *</label>
                            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                                value="{{ old('name', $category->name) }}">
                            @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                    </div>
                    <hr>
                    <div class="d-flex justify-content-center gap-2">
                        <a href="{{ route('category') }}" class="btn btn-label-secondary">Cancel</a>
                        <button type="submit" class="btn btn-primary" id="submitBtn">
                            <i class="ti tabler-device-floppy me-1"></i>
                            <span id="submitText">Update Category</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
    $('#categoryType').on('change', function() {
        if ($(this).val() === 'subcategory') {
            $('#parentCategoryDiv').show();
        } else {
            $('#parentCategoryDiv').hide();
        }
    });
});
</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>
$(document).ready(function() {
    const Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true
    });

    $('#categoryType').on('change', function() {
        if ($(this).val() === 'subcategory') {
            $('#parentCategoryDiv').show();
        } else {
            $('#parentCategoryDiv').hide();
        }
    });

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

    $('#categoryEditForm').on('submit', function(e) {
        e.preventDefault();

        clearErrors();

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

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

        $.ajax({
            url: '{{ route("update_category", $category->id) }}',
            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('Update 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