@extends('buyer.adminlayout')
@section('title')
    <title>Product</title>
@endsection
@section('frontend-content')
<!-- Main Content -->

<section>
    <div class="categories">
        <h3>Product</h3>
        <br>
        <div class="col-12">

        <button type="button" class="btn btn-primary mb-3 float-end" data-bs-toggle="modal" data-bs-target="#categoryModal">
                Add Product
            </button>
            <!-- Category Card -->
            <div class="category-item">

            <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>SNO</th>
                <th>Name</th>
                <th>Category</th>
                <th>Sub Category</th>
                <th>description</th>
                <th>Thumbnail Image</th>
                <th>Date</th>
                <th>Action</th>
               
            </tr>
        </thead>
        <tbody>
        @php $i = 1; @endphp
            @foreach($products as $productdata)
        <tr>
            <td>{{ $loop->iteration }}</td>
            <td>{{ $productdata->product_name }}</td>
            <td>{{ optional($productdata->category)->category_name ?? 'N/A' }}</td>
            <td>{{ optional($productdata->subcategory)->sub_category_name ?? 'N/A' }}</td>
            <td>{{ $productdata->short_description }}</td>
            <td><img src="{{ asset('storage/' . $productdata->thumbnail_image) }}" width="50" alt="Product Image"></td>
            
            <td>{{ $productdata->created_at->format('d-m-y') }}</td>
            <td>
            <!-- Edit Button -->
            <a href="{{ route('admin.products.edit', $productdata->id) }}" class="btn btn-primary btn-sm">Edit</a>

            <!-- Delete Button -->
            <form action="{{ route('admin.products.destroy', $productdata->id) }}" method="POST" style="display:inline-block;" 
                  onsubmit="return confirm('Are you sure you want to delete this product?');">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-danger btn-sm">Delete</button>
            </form>
        </td>
        </tr>
        @endforeach
        

        </tbody>
    </table>
                
            </div>

            <!-- Product Card -->
           
        </div>
    </div>
</section>


<!-- Modal for Adding Category -->
<div class="modal fade" id="categoryModal" tabindex="-1" aria-labelledby="categoryModalLabel" aria-hidden="true">
    <div class="modal-dialog">
    <form id="productForm" enctype="multipart/form-data">
    @csrf
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="categoryModalLabel">Add Product</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Form to Add Category -->
                        
            <!-- Category Name -->
            <div class="mb-3">
                <label for="productName" class="form-label">Product Name</label>
                <input type="text" class="form-control" name="product_name" id="productName" required>
            </div>

            <div class="mb-3">
                <label for="category_name" class="form-label">Category</label>
                <select class = 'form-control' name = 'category_id' id = 'category_id'>
                    <option value = '' >Select Category</option>
                    @foreach($categories as $categorydata)
                    <option value = '{{$categorydata->category_id}}' >{{$categorydata->category_name}}</option>

                    @endforeach
                </select>
            </div>


            <div class="mb-3">
                <label for="category_name" class="form-label">Sub Category</label>
                <select id="subcategory_id" class="form-control" name="subcategory_id">
                    <option value="">Select Sub Category</option>
                </select>
            </div>
           

            <!-- Category Image -->
            <div class="mb-3">
                <label for="productImage" class="form-label">Thumbnail Image</label>
                <input type="file" class="form-control" name="thumbnail_image" id="productImage" required>
            </div>

            <div class="mb-3">
                <label for="productImage" class="form-label">Product Image</label>
                <input type="file" class="form-control" name="product_images[]" id="productImage" multiple required>
            </div>

            <div class="mb-3">
                <label for="shortDescription" class="form-label">Short Description</label>
                <textarea name="short_description" id="shortDescription" class="form-control"></textarea>
            </div>

            <!-- Product Description with CKEditor -->
            <div class="mb-3">
                <label for="productDescription" class="form-label">Product Description</label>
                <textarea name="product_description" id="productDescription" class="form-control"></textarea>
            </div>

            <!-- Submit Button -->
            <button type="submit" class="btn btn-primary">Add Product</button>
</form>
            </div>
        </div>
    </div>
</div>


@endsection
@push('custom-scripts')
<script>
        $(document).ready(function() {
        // When the form is submitted
        $("#productForm").submit(function(e) {
            e.preventDefault(); // Prevent the default form submission
            
            // Create a new FormData object to handle the file upload
            var formData = new FormData(this);
            
            // Send AJAX request
            $.ajax({
                url: "{{ route('admin.products.store') }}", // Your route for product store
                type: "POST",
                data: formData,
                processData: false, // Don't process the data
                contentType: false, // Don't set content type
                success: function(response) {
                    // Handle the success response
                    if(response.success) {
                        toastr.success("Product added successfully!");
                        $("#productForm")[0].reset(); // Reset form
                        $("#categoryModal").modal("hide");
                        location.reload(); 
                    } else {
                        alert('Error: ' + response.message);
                    }
                },
                error: function(xhr, status, error) {
                    // Handle the error response
                    alert('An error occurred: ' + error);
                }
            });
        });
    });
     </script>


<script>
$(document).ready(function () {
    $('#category_id').change(function () {
        var categoryId = $(this).val();
        $('#subcategory_id').html('<option value="">Loading...</option>'); // Show loading text

        if (categoryId) {
            $.ajax({
                url: "{{ route('get.subcategories') }}",
                type: "GET",
                data: { category_id: categoryId },
                success: function (response) {
                    $('#subcategory_id').html('<option value="">Select Sub Category</option>');
                    $.each(response, function (key, subcategory) {
                        $('#subcategory_id').append('<option value="' + subcategory.id + '">' + subcategory.sub_category_name + '</option>');
                    });
                }
            });
        } else {
            $('#subcategory_id').html('<option value="">Select Sub Category</option>');
        }
    });
});
</script>



<script>
$(document).ready(function () {
    $('.delete-btn').click(function (e) {
        e.preventDefault();
        var form = $(this).closest('form');

        if (confirm("Are you sure you want to delete this Product?")) {
            form.submit();
        }
    });

    @if(session('success'))
        toastr.success("{{ session('success') }}");
    @endif

    @if(session('error'))
        toastr.error("{{ session('error') }}");
    @endif
});
</script>
@endpush