@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>

@if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
@endif
@if(session('error'))
    <div class="alert alert-danger">{{ session('error') }}</div>
@endif

<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 Type *</label>
                            {{-- ✅ name="type" added --}}
                            <select class="form-select @error('type') is-invalid @enderror" 
                                    name="type" id="categoryType">
                                <option value="category" {{ old('type') == 'category' ? 'selected' : '' }}>Category</option>
                                <option value="subcategory" {{ old('type') == 'subcategory' ? 'selected' : '' }}>Sub Category</option>
                            </select>
                            @error('type')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-md-12 mb-3" id="parentCategoryDiv" style="display:none;">
                            <label class="form-label">Parent Category *</label>
<select class="form-select @error('category') is-invalid @enderror" 
        name="category">
                                <option value="">Select Category</option>
                                @foreach($parentCategories as $parent)
                                    <option value="{{ $parent->id }}" 
                                        {{ old('category_id') == $parent->id ? 'selected' : '' }}>
                                        {{ $parent->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('category_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div> -->

                        <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) {
                    $('#alertBox')
                        .html(`<div class="alert alert-success">${response.message}</div>`)
                        .show();
                         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