@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>
            Edit Category
        </h5>
    </div>
</div>

<div class="card p-5">
    <h5>Edit category</h5>
    <form class="mb-3" action="{{route('admin.category')}}" class="form-label" class="form">

        <div class="row g-5">
            <div class="col-lg-6 mb-3">
                <label class="form-label">Category Name</label>
                <select class="form-select" id="category" name="category" required>
                            <option value="" disabled>Select Category</option>
                            <option value="rings" selected>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>
            <div class="col-lg-6 mb-3">
                <label class="form-label">Upload Image</label>
                <input
                    type="file"
                    class="form-control">

                <a href="#"
                    id="fileName"
                    class="text-warning d-block text-decoration-underline"
                    data-bs-toggle="modal"
                    data-bs-target="#filePreviewModal"
                    data-image="{{ asset('assets/images/banner.png') }}">
                    image.png
                </a>


            </div>
            <div class="col-lg-6 mb-3">
                <label class="form-label">Description</label>
                <textarea class="form-control" rows="4">Diamond Halo Ring weighted 2.345g</textarea>
            </div>

            <div class="col-lg-6">
                <div class="row">
                    <div class="mb-2">
                        <label class="form-label">Display Order</label>
                        <input
                            type="text"
                            class="form-control"
                            value="2">
                    </div>
                    <div class="mb-2">
                        <label class="form-label">Status</label>
                        <select class="form-select">
                            <option>Select</option>
                            <option selected>Active</option>
                            <option>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