@extends('layouts.master')
@section('title')
@lang('translation.Add Category')
@endsection
@section('css')
<!-- DataTables -->
<link href="{{ URL::asset('/assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ URL::asset('/assets/libs/dropzone/dropzone.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
@component('common-components.breadcrumb')
@slot('pagetitle') Project @endslot
@slot('title') Add Category @endslot
@endcomponent

<div class="row">
    <div class="col-lg-12">
        <div id="addproduct-accordion" class="custom-accordion">
            <div class="card">
                <a href="#addproduct-billinginfo-collapse" class="text-dark" data-bs-toggle="collapse" aria-expanded="true" aria-controls="addproduct-billinginfo-collapse">
                    <div class="p-4">

                        <div class="d-flex align-items-center">
                            <div class="flex-shrink-0 me-3">
                                <div class="avatar-xs">
                                    <!-- <div class="avatar-title rounded-circle bg-primary-subtle text-primary">
                                        01
                                    </div> -->
                                </div>
                            </div>
                            <div class="flex-grow-1 overflow-hidden">
                                <h5 class="font-size-16 mb-1">Category Info</h5>
                                <p class="text-muted text-truncate mb-0">Fill all information below</p>
                            </div>
                            <div class="flex-shrink-0">
                                <i class="mdi mdi-chevron-up accor-down-icon font-size-24"></i>
                            </div>

                        </div>

                    </div>
                </a>

                <div id="addproduct-billinginfo-collapse" class="collapse show" data-bs-parent="#addproduct-accordion">
                    <div class="p-4 border-top">
                        <form id="categoryForm" action="{{ route('category.store') }}" method="POST">
                            @csrf
                            <input type="hidden" name="id" id="id" value="{{ old('id') }}"> <!-- Hidden field for the ID -->

                            <div class="mb-3">
                                <label class="form-label" for="name">Category</label>
                                <input id="name" name="name" type="text" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" placeholder="Enter your Category Name">
                                <div class="invalid-feedback"></div>
                            </div>

                            <div class="mb-0">
                                <label class="form-label" for="description">Category Description</label>
                                <textarea class="form-control" id="description" name="description" rows="4" placeholder="Enter your Category Description">{{ old('description') }}</textarea>
                            </div>

                            <div class="row mb-4">
                                <div class="col text-end">
                                    <a href="#" class="btn btn-danger"><i class="uil uil-times me-1"></i> Cancel</a>
                                    <button type="submit" class="btn btn-success">Save Changes <i class="uil uil-file-alt me-1"></i></button>
                                </div>
                            </div>
                        </form>

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


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



@endsection
@section('script')

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('#categoryForm').on('submit', function(e) {
            e.preventDefault(); // Prevent the default form submission

            $.ajax({
                type: 'POST',
                url: "{{ route('category.store') }}", // Use the route for your form action
                data: $(this).serialize(), // Serialize the form data
                success: function(response) {
                    window.location.href = "/category";
                },
                error: function(xhr) {
                    // Handle errors
                    if (xhr.status === 422) {
                        // Show validation errors
                        var errors = xhr.responseJSON.errors;
                        console.log(errors); // Log errors for debugging purposes

                        // Clear any previous error messages
                        $('.invalid-feedback').hide();
                        $('.form-control').removeClass('is-invalid');

                        // Loop through each error and display it next to the respective field
                        $.each(errors, function(field, messages) {
                            // Ensure field exists and has a corresponding invalid-feedback element
                            if (messages.length > 0) {
                                // Mark the field as invalid
                                $('#' + field).addClass('is-invalid');

                                // Show the first error message
                                $('#' + field).next('.invalid-feedback').html(messages[0]).show();
                            }
                        });
                    } else {
                        alert('An error occurred. Please try again.');
                    }
                }
            });
        });
    });
</script>


<script src="{{ URL::asset('/assets/libs/select2/select2.min.js') }}"></script>
<script src="{{ URL::asset('/assets/libs/dropzone/dropzone.min.js') }}"></script>
<script src="{{ URL::asset('/assets/js/pages/ecommerce-add-product.init.js') }}"></script>
@endsection