<form class="row g-3 auto-width category" action="{{ route('product-categories.store') }}" method="post" enctype='multipart/form-data'
    id="source_form">
    @csrf
    <div class="col-md-12">
        <label for="name" class="form-label">Name <span class="text-danger"><b>*</b></span></label>
        <input type="text" class="form-control" id="name" name="name" aria-describedby="inputGroupPrepend"
            required>
        <span class="text-danger error_name" style="display:none;">This field is required.</span>
    </div>
    <div class="col-md-12">
        <label for="code" class="form-label">Code <span class="text-danger"><b>*</b></span></label>
        <input type="text" class="form-control" id="code" name="code" aria-describedby="inputGroupPrepend" required>
        <span class="text-danger error_code" style="display:none;">This field is required.</span>
    </div>

    <div class="col-md-6">
        <label for="priority" class="form-label">Priority </label>
        <input type="number" class="form-control" id="priority" name="priority" aria-describedby="inputGroupPrepend"
            required value="{!! $priority + 1 !!}">
        <span class="text-danger error_priority" style="display:none;">This field is required.</span>
    </div>

    <div class="col-md-6">
        <label for="description" class="form-label">Description</label>
        <textarea class="form-control" max=100 id="description" name="description"></textarea>
    </div>

    <div class="col-12 justify-content-center mb-3">
        <div class="accordion-item">
            <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo1" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
                  Additional Information:
                </button>
            </h2>
        <div id="panelsStayOpen-collapseTwo1" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
            <div class="card-body g-3" id="images">
                <div class="row">
                    <div class="col-6">
                       <label for="thumbnail_image" class="form-label">Thumbnail Image</label>
                        <input type="file" class="form-control" id="thumbnail_image" name="thumbnail_image">                        
                    </div>

                    <div class="col-6">
                       <label for="banner_image" class="form-label">Banner Image</label>
                        <input type="file" class="form-control" id="banner_image" name="banner_image">
                    </div>
                </div>
            </div>
        </div>
    </div> 
</form>
