@push('title')
    Update Product
@endpush

<x-app-layout>
    <div class="alertbox">
        @if (session('success'))
            <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true" id="success-alert">
                <div class="toast-header bg-success">
                    <div class="me-auto fw-semibold">{{ env('APP_NAME') }} Alerts</div>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">{{ session('success') }}</div>
            </div>
        @endif

        @if (session('info'))
            <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true"
                id="success-alert">
                <div class="toast-header bg-info">
                    <div class="me-auto fw-semibold">{{ env('APP_NAME') }} Alerts</div>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">{{ session('info') }}</div>
            </div>
        @endif

        @if (session('warning'))
            <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true"
                id="success-alert">
                <div class="toast-header bg-warning">
                    <div class="me-auto fw-semibold">{{ env('APP_NAME') }} Alerts</div>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">{{ session('warning') }}</div>
            </div>
        @endif

        @if (session('danger'))
            <div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true"
                id="success-alert">
                <div class="toast-header bg-danger">
                    <div class="me-auto fw-semibold">{{ env('APP_NAME') }} Alerts</div>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">{{ session('danger') }}</div>
            </div>
        @endif
    </div>

    @can('update_product_management')
        <div class="card">
            <div class="card-body">
                <h5 class="card-title mb-3">Update Product</h5>
                <form action="{{ route('products.update',['id'=> $product->id]) }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <div class="mb-3">
                        <label for="name" class="form-label">Product Name <span class="starRequired">*</span></label>
                        <input type="text" class="form-control" name="name" required value="{{$product->name}}">
                    </div>

                    <div class="mb-3">
                        <label for="description" class="form-label">Description</label>
                        <textarea class="form-control" name="description" rows="6">{{$product->description}}</textarea>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <div class="">
                                <label for="price" class="form-label">Price <span class="starRequired">*</span></label>
                                <input type="number" step="0.01" class="form-control" name="price" required value="{{$product->price}}">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="">
                                <label for="discount_price" class="form-label">Discount Price</label>
                                <input type="number" step="0.01" class="form-control" name="discount_price" value="{{$product->discount_price}}">
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="category_id" class="form-label">Category <span class="starRequired">*</span></label>
                        <select class="form-select" name="category_id" required>
                            <option value="">Select Category</option>
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}" @selected($category->id == $product->category_id)>{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="image" class="form-label">Product Image</label>
                        <input type="file" class="form-control" name="image">

                        @if ($product->image)
                            <img src="{{ asset('storage/products/' . $product->image) }}" alt="Product Image" class="img-thumbnail my-2" style="max-width: 200px;">
                            <a href=" {{ route('products.remove-image',['id'=> $product->id ]) }} " class="btn btn-danger">Remove Image</a>
                        @endif
                    </div>

                    <div class="form-check mb-3">
                        <input type="checkbox" class="form-check-input" name="is_active" id="is_active" @checked($product->is_active) value="1">
                        <label class="form-check-label" for="is_active">Is Active</label>
                    </div>

                    <div class="form-check mb-3">
                        <input type="checkbox" class="form-check-input" name="is_stock_available" value="1"
                            id="is_stock_available"  @checked($product->is_stock_available)>
                        <label class="form-check-label" for="is_stock_available">Stock Available</label>
                    </div>

                    <div class="d-flex justify-content-end">
                        <button type="submit" class="btn btn-success">Update Product</button>
                    </div>
                </form>
            </div>
        </div>
    @endcan

    <script>
        $(".select2").select2();
        $("#success-alert").fadeTo(5000, 500).slideUp(500, function() {
            $("#success-alert").slideUp(500);
        });
    </script>
</x-app-layout>