@extends('layouts.admin-layout')
@push('title')
    Add SubCategory
@endpush
@section('content')
    <style>
        .active {
            background-color: #007BFF !important;
            color: white !important;
        }

        .rating {
            width: 400px;
            height: 50px;
            margin: 0 auto;
            padding: 1px 99px;
            border: 1px solid #ccc;
            border-radius: 10px;
            background: #f9f9f9;
        }

        .rating label {
            float: right;
            position: relative;
            width: 40px;
            height: 40px;
            cursor: pointer;
        }

        .rating label:not(:first-of-type) {
            padding-right: 2px;
        }

        .rating label:before {
            content: "\2605";
            font-size: 42px;
            color: #ccc;
            line-height: 1;
        }

        .rating input {
            display: none;
        }

        .rating input:checked~label:before,
        .rating:not(:checked)>label:hover:before,
        .rating:not(:checked)>label:hover~label:before {
            color: #f9df4a;
        }
    </style>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">

                        <div class="card card-box-shadow mt-5">

                            <div class="card-header">

                                <h3 class="card-title">Add SubCategory</h3>
                                <a href="{{ route('admin.subcategory.list') }}" class="btn btn-primary btn-sm float-right">
                                    Back

                                </a>
                            </div>

                            <!-- /.card-header -->
                            <div class="card-body">
                                <form action="{{ route('admin.subcategory.store') }}" method="POST"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <div class="row">

                                        <div class="col-md-8">
                                            <div class="form-group col-md-12">
                                                <label for="category_id">Category Select</label>
                                                <select name="category_id" id="category_id" class="form-control">
                                                    <option value="0">No Parent</option>
                                                    @foreach ($categories as $category)
                                                            <option style="font-weight: bold;"
                                                                    value="{{ $category->id }}">{{ $category->name }}</option>
                                                           
                                                    @endforeach
                                                </select>

                                                @error('category_id')
                                                <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>

                                           <div class="form-group col-md-12">
                                                <label for="name">SubCategory Name</label>
                                                <input type="text" name="name" id="name" class="form-control"
                                                       value="{{ old('name') }}">

                                                @error('name')
                                                <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>
                                            <div class="form-group">
                                                <label for="parent_id">SubCategory Description</label>
                                                <textarea class="form-control" id="description" name="description"></textarea>
                                                @error('description')
                                                <span class="text-danger">{{ $message }}</span>
                                                @enderror
                                            </div>

                                        </div>


                                        <div class="form-group mb-0">
                                            <div>
                                                <button type="submit" class="btn btn-primary waves-effect waves-light">
                                                    Create
                                                </button>
                                            </div>
                                        </div>

                                    </div>

                                </form>

                            </div>
                            <!-- /.card-body -->
                        </div>

                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

<script>
    function showImagePreview(input, previewId) {
                        const preview = document.getElementById(previewId);

                if (input.files && input.files[0]) {
                    const reader = new FileReader();

                    reader.onload = function (e) {
                        preview.src = e.target.result;
                        preview.style.display = 'block';
                    };

                    reader.readAsDataURL(input.files[0]);
                }
            }

            const mainProductImageInput = document.getElementById('mainProductImageInput');
            mainProductImageInput.addEventListener('change', function () {
                showImagePreview(this, 'mainProductImagePreview');
            });
</script>
@endsection

@push('script')
<script>


      


    //FOR PRODUCT FEATURE IMAGE PREVIEW
    const uploadButton = document.getElementById("crop-image");
    const fileInput = document.getElementById("file-input");
    const featurePhoto = document.getElementById("feature_photo");
    const imagePreview = document.getElementById("image-preview");
    const uploadBtn = document.getElementById("upload-btn");

    uploadButton.addEventListener("click", function () {
        fileInput.click();
    });

    fileInput.addEventListener("change", function () {
        if (fileInput.files.length > 0) {
            const selectedImage = fileInput.files[0];
            featurePhoto.value = selectedImage.name;  // Set the filename in the hidden input
            imagePreview.style.display = "block"; // Show the image preview
            imagePreview.src = URL.createObjectURL(selectedImage); // Set the preview image source
            uploadBtn.style.display = "none";

        } else {
            imagePreview.style.display = "none"; // Hide the image preview if no image is selected
            uploadBtn.style.display = "block";

        }
    });

</script>
@endpush