@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">Edit 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('updateproducts', $products->id) }}" 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" value="{{ $products->name }}">
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Video URL</label>
                                    <input type="text" name="videourl"class="form-control" id="exampleInputEmail1"
                                        placeholder="Enter product name" value="{{ $products->videourl }}">
                                </div>
                                {{-- <div class="form-group">
                                    <label for="exampleInputEmail1">Description1</label>
                                    <input type="textarea" name="description1"class="form-control" id="exampleInputEmail1"
                                        placeholder="Enter product name" value="{{ $products->description1 }}">
                                </div>
                                <div class="form-group">
                                    <label for="exampleInputEmail1">Description2</label>
                                    <input type="textarea" name="description2"class="form-control" id="exampleInputEmail1"
                                        placeholder="Enter product name" value="{{ $products->description2 }}">
                                </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" value="{{ $products->description4 }}">
                                </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" value="{{ $products->description3 }}">
                                </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 }}"
                                                @if (isset($products->category_id) && $products->category_id == $category->id) selected @endif> {{ $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>
                                        @if (isset($products->sub_category_id))
                                            @foreach ($subCategories as $subCat)
                                                <option value="{{ $subCat->id }}"
                                                    @if (isset($products->sub_category_id) && $products->sub_category_id == $subCat->id) selected @endif> {{ $subCat->name }}
                                                </option>
                                            @endforeach
                                        @endif


                                    </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