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

                        <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) {
                    $('#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('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