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

<section>
    <div class="categories">
        <h3>Category</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 Category
            </button>
            <!-- Category Card -->
            <div class="category-item">

            <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>SNO</th>
                <th>Name</th>
                <th>Date</th>
               
            </tr>
        </thead>
        <tbody>
            @foreach($categorylist as $categorydata)
        <tr>
            <td>{{ $loop->iteration }}</td>
            <td>{{$categorydata->category_name}}</td>
            <td><img src="{{ asset('storage/' . $categorydata->category_image) }}" width="50"></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="categoryForm" enctype="multipart/form-data">
        @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="categoryModalLabel">Add Category123654</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <!-- Form to Add Category -->
                       
                            <div class="mb-3">
                                <label for="categoryName" class="form-label">Category Name</label>
                                <input type="text" class="form-control"  name  =  'category_name' id="categoryName" required>
                            </div>

                            <div class="mb-3">
                                <label for="categoryImage" class="form-label">Category Image</label>
                                <input type="file" class="form-control" name  = 'category_image' id="categoryImage" required>
                            </div>
                        
                            <button type="submit" class="btn btn-primary">Add Category</button>
                        </form>
                    </div>
                </div>
        </form>
    </div>
</div>


@endsection


@push('custom-scripts')
<script>

$(document).ready(function () {

   

    $("#categoryForm").submit(function (e) {
        e.preventDefault(); // Prevent normal form submission

        var formData = new FormData(this); // Create FormData object\
        $.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

        $.ajax({
            url: "{{ route('category.store') }}", // Replace with your route
            type: "POST",
            data: formData,
            contentType: false,
            processData: false,
           
           
            success: function (response) {
                alert("Category added successfully!");
                $("#categoryForm")[0].reset(); // Reset form
                $("#categoryModal").modal("hide"); // Hide modal (if needed)
                // Optionally, refresh the category list
            },
            error: function (xhr) {
                alert("Something went wrong! Please try again.");
                console.log(xhr.responseText); // Debugging
            }
        });
    });
});

    </script>
@endpush