@extends('admin.layouts.app')
@section('title', 'Edit & Update Product')

@push('styles')

<link rel="stylesheet" href="{{ asset('backend') }}/assets/plugins/bootstrap-select/css/bootstrap-select.css" />


<style>
.preview {
    display: inline-block;
    margin: 10px;
}
.preview img {
    width: 100px;
    height: 100px;
    margin-right: 10px;
}


.form-line.case-input {
	border: 1px solid #8a8a8a;
}

.input-group .input-group-addon {
	padding-left: 10px;
}

.input-group .input-group-addon + .form-line {
	padding-left: 35px;
}



.cus-file {
	padding-left: 6px !important;
}



.bootstrap-select.btn-group.show-tick > .btn {
	border: 1px solid #444 !important;
	padding-left: 10px;
	color: #393939;
	font-size: 17px;
	padding-bottom: 0;
	font-weight: 300;
}

.dropdown-toggle::after {
	display: inline-block;
	margin-left: .255em;
	vertical-align: .480em;
	content: "";
	border-top: .3em solid;
	border-right: .3em solid transparent;
	border-bottom: 0;
	border-left: .3em solid transparent;
}



.bootstrap-select > .dropdown-toggle.bs-placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover, .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder:active {
	color: #444;
}

.form-group .form-line.access_info {
	border: 1px solid #424242 !important;
	padding-left: 10px;
}
.btn.btn-primary.btn-lg.custom_btn {
	padding: 10px 15px;
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
	color: #fff;
	background-color: #0062cc !important;
	border-color: #005cbf;
}


</style>


@endpush


@section('admin_content')

<div class="container-fluid">
    <div class="row clearfix">
        <div class="col-lg-12 col-md-12 col-sm-12 mt-4">
            <div class="card">
                <div class="card-header">
                    <h4 style="display: inline-block"> Product Product</h4>
                        <a href="{{ route('product.create') }}" class="btn btn-warning text-white text-uppercase text-bold right">
                             Create Product
                        </a>
                </div>
                <div class="body">

                    <form action="{{ route('product.update',$product->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <div class="row">
                            <div class="col-lg-6 col-md-6 col-sm-12">

                                <div class="form-group mb-4">
                                    <label><b>Product Title</b></label>
                                    <div class="input-group"> <span class="input-group-addon"> <i class="material-icons">title</i> </span>
                                        <div class="form-line case-input">
                                            <input type="text" class="form-control @error('product_name') is-invalid @enderror" name="product_name" value="{{ $product->product_name }}">
                                        </div>
                                        @error('product_name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                </div>


                                <div class="form-group mb-4">
                                    <label><b>Purchase Price</b></label>
                                    <div class="input-group">

                                        <span class="input-group-addon"> <i class="material-icons">payments</i> </span>
                                        <div class="form-line case-input">
                                            <input type="text" class="form-control @error('purches_price') is-invalid @enderror" name="purches_price" value="{{ $product->purches_price }}">
                                        </div>
                                        @error('purches_price')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="form-group mb-4">
                                    <label><b>Sales Price</b></label>
                                    <div class="input-group">

                                        <span class="input-group-addon"> <i class="material-icons">payments</i> </span>
                                        <div class="form-line case-input">
                                            <input type="text" class="form-control @error('selling_price') is-invalid @enderror" name="selling_price" value="{{ $product->selling_price }}">
                                        </div>
                                        @error('selling_price')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                </div>

                            </div>

                            <div class="col-lg-6 col-md-6 col-sm-12">

                                <div class="form-group mb-4">
                                    <label><b>Stock Quantity</b></label>
                                    <div class="input-group">

                                        <span class="input-group-addon"> <i class="material-icons">payments</i> </span>
                                        <div class="form-line case-input">
                                            <input type="text" class="form-control @error('stock_quantity') is-invalid @enderror" name="stock_quantity" value="{{ $product->stock_quantity }}">
                                        </div>
                                        @error('stock_quantity')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="form-group mb-4">
                                    <label><b>Video</b></label>
                                    <div class="input-group"> <span class="input-group-addon"> <i class="material-icons">movie</i> </span>
                                        <div class="form-line case-input">
                                            <input type="text" class="form-control @error('video') is-invalid @enderror" name="video" value="{{ $product->video }}">
                                        </div>
                                        @error('video')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label><b>Product Thumbnail</b></label>
                                    <div class="form-line case-input mb-2">
                                        <input type="file" class="form-control cus-file @error('product_thumbnail') is-invalid @enderror" name="product_thumbnail"/>
                                    </div>
                                    <img src="{{ asset('uploads/product_gallery/'.$product->product_thumbnail) }}" alt="" width="70">
                                    @error('product_thumbnail')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>




                            </div>


                        </div>

                        <div class="form-group">
                            <label for=""><b>Product Description</b></label>
                            <textarea id="ckeditor" name="product_description">{{ $product->product_description }}</textarea>
                        </div>

                        


                        <div class="row">
                            <div class="col-lg-9 col-md-9 col-sm-12">
                                <div class="form-group">
                                    <label><b>Product Gallery Images</b></label>
                                    <div class="form-line case-input">
                                        <input type="file" class="form-control" id="file-input" multiple name="product_images[]" placeholder="Product Gallery Image" style="padding-left: 5px;">
                                    </div>
                                    

								
                                    </td>
                                </div>
                            </div>

                            <div class="col-md-3 col-lg-3">
                                <div class="form-group">
                                    <label><b>Status</b></label>
                                        <select class="form-control show-tick" name="is_active">
                                            <option value="">Select Status</option>
                                            <option value="1" @if($product->is_active == 1)
                                            selected
                                            @endif>Active</option>
                                            <option value="0" @if($product->is_active == 0)
                                            selected
                                            @endif>Deactive</option>
                                        </select>
                                </div>
                            </div>
                        </div>


                        <div class="form-group">
                            <button type="submit" class="btn btn-raised btn-warning text-white m-t-15 waves-effect right mb-3" style="font-weight: 500">UPDATE</button>
                        </div>
                    </form>
					
					@php
						$images = json_decode($product->product_images, true) ?? [];
					@endphp

					@foreach ($images as $image)
						<div class="image-container" data-image="{{ $image['name'] }}" style="display: inline-block; margin: 5px; position: relative;">
							<img style="border: 1px solid #ccc; display: block;"
								 src="{{ asset('uploads/product_gallery/'.$image['name']) }}"
								 width="100" alt="image">

							<!-- Delete Button -->
							<button class="delete-image"
									data-image="{{ $image['name'] }}"
									data-product="{{ $product->id }}"
									style="position: absolute; top: 5px; right: 5px; background: red; color: white; border: none; padding: 2px 5px; cursor: pointer;">
								X
							</button>
						</div>
					@endforeach

					

                </div>
            </div>
        </div>
    </div>
</div>


@endsection

@push('scripts')
<!--Jquery Spinner Plugin Js -->
<script src="{{ asset('backend') }}/assets/plugins/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>
<script src="{{ asset('backend') }}/assets/plugins/ckeditor/ckeditor.js"></script> <!-- Ckeditor -->

<script src="{{ asset('backend') }}/assets/js/pages/forms/editors.js"></script>


<script>
$(document).ready(function(){
    $("#file-input").on("change", function(){
        var files = $(this)[0].files;
        $("#preview-container").empty();
        if(files.length > 0){
            for(var i = 0; i < files.length; i++){
                var reader = new FileReader();
                reader.onload = function(e){
                    $("<div class='preview'><img src='" + e.target.result + "'><button class='delete'>Delete</button></div>").appendTo("#preview-container");
                };
                reader.readAsDataURL(files[i]);
            }
        }
    });
$("#preview-container").on("click", ".delete", function(){
        $(this).parent(".preview").remove();
        $("#file-input").val(""); // Clear input value if needed
    });
});


</script>


<script>

$(document).ready(function() {
    $(".delete-image").click(function() {
        let imageName = $(this).data("image");
        let productId = $(this).data("product");
        let container = $(this).closest(".image-container");

        if (confirm("Are you sure you want to delete this image?")) {
            $.ajax({
                url: "{{ route('delete.image') }}", // Your Laravel route
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    image: imageName,
                    product_id: productId
                },
                success: function(response) {
                    if (response.success) {
                        container.remove(); // Remove image from UI
                    } else {
                        alert("Failed to delete image.");
                    }
                },
                error: function() {
                    alert("Something went wrong.");
                }
            });
        }
    });
});



</script>



@endpush