@extends('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('admin.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>
<div class="card p-5">

    <h5 class="mb-4">Add Category</h5>

    <form action="{{ route('admin.category') }}">

     

        <div class="row g-5">

            {{-- CATEGORY NAME --}}
            <div class="col-lg-6">

                <label for="category_name" class="form-label">
                    Category Name <span class="text-danger">*</span>
                </label>

                <select class="form-select" id="category" name="category" required>
                            <option value="" selected disabled>Select Category</option>
                            <option value="rings">Rings</option>
                            <option value="necklaces">Necklaces</option>
                            <option value="earrings">Earrings</option>
                            <option value="bracelets">Bracelets</option>
                            <option value="bangles">Bangles</option>
                            <option value="mens-jewelry">Men's Jewelry</option>
                        </select>

            </div>


            {{-- CATEGORY IMAGE --}}
            <div class="col-lg-6">

                <label for="category_image" class="form-label">
                    Upload Image <span class="text-danger">*</span>
                </label>

                <input
                    type="file"
                    id="category_image"
                    class="form-control"
                    name="category_image"
                    accept="image/jpeg,image/png,image/jpg, image/webp">

                <small class="text-muted">
                    JPG, JPEG, PNG or WEBP
                </small>

            </div>


            {{-- DESCRIPTION --}}
            <div class="col-lg-6">

                <label for="description" class="form-label">
                    Description
                </label>

                <textarea
                    id="description"
                    class="form-control"
                    name="description"
                    rows="4"
                    placeholder="Enter category description"></textarea>

            </div>

            <div class="col-lg-6">
                <div class="row">
                    {{-- DISPLAY ORDER --}}
                    <div class="mb-3">

                        <label for="display_order" class="form-label">
                            Display Order <span class="text-danger">*</span>
                        </label>

                        <input
                            type="number"
                            id="display_order"
                            class="form-control"
                            name="display_order"
                            value="{{ old('display_order') }}"
                            placeholder="Enter display order(Eg: 1,2,3)"
                            min="1">

                    </div>


                    {{-- STATUS --}}
                    <div class="mb-3">

                        <label for="status" class="form-label">
                            Status <span class="text-danger">*</span>
                        </label>

                        <select
                            id="status"
                            name="status"
                            class="form-select">

                            <option value="" selected disabled>
                                Select Status
                            </option>

                            <option value="active">
                                Active
                            </option>

                            <option value="inactive">
                                Inactive
                            </option>

                        </select>

                    </div>

                </div>
            </div>

        </div>

        <div class="d-flex flex-column flex-lg-row justify-content-center gap-3 my-5">

            <button
                type="reset"
                class="btn bg-light">

                Discard

            </button>

            <button
                type="submit"
                class="btn btn-primary"
                id="finalSubmit">

                Save

            </button>

        </div>

    </form>

</div>

<!-- <script>
    document.getElementById('finalSubmit').addEventListener('click', function () {
            let btn = this;
            btn.disabled = true;
            btn.innerText = 'Processing...';
            document.getElementById('form').submit();
        });
</script> -->
@endsection