@extends('layout.admindashboard')
@section('content')
    <section class="content">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">Add Products</h1>
                    </div>

                </div>
            </div>
        </div>
        <div class="container-fluid">
            <!-- Display Validation Errors -->
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <div class="row justify-content-center">
                <div class="col-md-6">
                    <div class="card card-primary">
                        <div class="card-header">
                            <h3 class="card-title">Products</h3>
                        </div>
                        <form action="{{ route('products-save') }}" method="post" enctype="multipart/form-data">
                            @csrf
                            <div class="card-body">
                                <div class="form-group">
                                    <label for="exampleInputFile">Product Image1</label>
                                    <div class="input-group">
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" name="image1"
                                                id="exampleInputFile">
                                            <label class="custom-file-label" for="exampleInputFile">Choose file</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputFile">Product Image2</label>
                                    <div class="input-group">
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" name="image2"
                                                id="exampleInputFile">
                                            <label class="custom-file-label" for="exampleInputFile">Choose file</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputFile">Product Image3</label>
                                    <div class="input-group">
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" name="image3"
                                                id="exampleInputFile">
                                            <label class="custom-file-label" for="exampleInputFile">Choose file</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Product name </label>
                                    <input type="text" name="name"class="form-control" id="exampleInputEmail1"
                                        placeholder="Enter product name">
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Video URL</label>
                                    <input type="text" name="videourl"class="form-control" id="exampleInputEmail1"
                                        placeholder="Enter video URL">
                                </div>
                                
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Product Details</label>
                                    <input type="textarea" name="description4"class="form-control" id="exampleInputEmail1"
                                        placeholder="Enter Product Details">
                                </div>

                                <div class="form-group">
                                    <label for="exampleInputEmail1">Additional Information</label>
                                    <input type="textarea" name="description3"class="form-control" id="exampleInputEmail1"
                                        placeholder="Enter Additional Information">
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Category</label>
                                    <select name="category" id="categoryId" class="form-control"
                                        placeholder="Select Category">
                                        <option value="">Select one...</option>
                                        @foreach ($categories as $category)
                                            <option value="{{ $category->id }}"> {{ $category->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Sub Category</label>
                                    <select name="sub_category"class="form-control" id="sub_category"
                                        placeholder="Select Sub Category">
                                        <option value="">Select one...</option>
                                    </select>
                                </div>

                            </div>
                            <div class="card-footer">
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </section>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#categoryId').change(function() {
                var categoryId = $(this).val();
                if (categoryId) {
                    $.ajax({
                        url: '{{ route('get.sub.categories') }}',
                        type: 'GET',
                        data: {
                            category_id: categoryId
                        },
                        success: function(data) {
                            console.log(data);
                            $('#sub_category').empty();
                            $('#sub_category').append(
                                '<option value="">Select one...</option>');
                            $.each(data, function(key, subCategory) {
                                $('#sub_category').append('<option value="' +
                                    subCategory.id + '">' +
                                    subCategory.name + '</option>');
                            });
                        }
                    });
                } else {
                    $('#sub_category').empty();
                    $('#sub_category').append('<option value="">Select one...</option>');
                }
            });
        });
    </script>
@endsection