PK

@extends('backend.layouts.master')
@section('main-content')
<div class="card">
   <h5 class="card-header">Edit Product</h5>
   <div class="card-body">
      <form method="post" action="{{route('product.update',$product->id)}}">
         @csrf 
         @method('PATCH')
         <div class="form-group">
            <label for="inputTitle" class="col-form-label">Title <span class="text-danger">*</span></label>
            <input id="inputTitle" type="text" name="title" placeholder="Enter title"  value="{{$product->title}}" class="form-control">
            @error('title')
            <span class="text-danger">{{$message}}</span>
            @enderror
         </div>
         <div class="form-group">
            <label for="sku" class="col-form-label">SKU <span class="text-danger">*</span></label>
            <input id="sku" type="text" name="sku" placeholder="Enter SKU" value="{{ old('sku', $product->sku) }}" class="form-control">
            @error('sku')
            <span class="text-danger">{{$message}}</span>
            @enderror
         </div>
         <div class="form-group">
            <label for="summary" class="col-form-label">Summary <span class="text-danger">*</span></label>
            <textarea class="form-control" id="summary" name="summary">{{$product->summary}}</textarea>
            @error('summary')
            <span class="text-danger">{{$message}}</span>
            @enderror
         </div>
         <div class="form-group">
            <label for="description" class="col-form-label">Description</label>
            <textarea class="form-control" id="description" name="description">{{$product->description}}</textarea>
            @error('description')
            <span class="text-danger">{{$message}}</span>
            @enderror
         </div>
         <div class="form-group">
            <label for="is_featured">Is Featured</label><br>
            
            <!-- Hidden input ensures a value of 0 is submitted if checkbox is unchecked -->
            <input type="hidden" name="is_featured" value="0">

            <!-- Checkbox submits 1 if checked -->
            <input type="checkbox" name="is_featured" id="is_featured" value="1" {{ $product->is_featured ? 'checked' : '' }}> Yes
        </div>

         {{-- {{$categories}} --}}
         <div class="form-group">
            <label for="cat_id">Category <span class="text-danger">*</span></label>
            <select name="cat_id" id="cat_id" class="form-control">
               <option value="">--Select any category--</option>
               @foreach($categories as $key=>$cat_data)
               <option value='{{$cat_data->id}}' {{(($product->cat_id==$cat_data->id)? 'selected' : '')}}>{{$cat_data->title}}</option>
               @endforeach
            </select>
         </div>
         @php 
         $sub_cat_info=DB::table('categories')->select('title')->where('id',$product->child_cat_id)->get();
         // dd($sub_cat_info);
         @endphp
         {{-- {{$product->child_cat_id}} --}}
         <div class="form-group {{(($product->child_cat_id)? '' : 'd-none')}}" id="child_cat_div">
            <label for="child_cat_id">Sub Category</label>
            <select name="child_cat_id" id="child_cat_id" class="form-control">
               <option value="">--Select any sub category--</option>
            </select>
         </div>
         <div class="form-group">
            <label for="price" class="col-form-label">Price(NRS) <span class="text-danger">*</span></label>
            <input id="price" type="number" name="price" placeholder="Enter price"  value="{{$product->price}}" class="form-control">
            @error('price')
            <span class="text-danger">{{$message}}</span>
            @enderror
         </div>
         <div class="form-group">
            <label for="discount" class="col-form-label">Discount(%)</label>
            <input id="discount" type="number" name="discount" min="0" max="100" placeholder="Enter discount"  value="{{$product->discount}}" class="form-control">
            @error('discount')
            <span class="text-danger">{{$message}}</span>
            @enderror
         </div>
         <div class="form-group" style="display: none;">
            <label for="size">Size</label>
            <select name="size[]" class="form-control selectpicker"  multiple data-live-search="true">
               <option value="">--Select any size--</option>
               @foreach($items as $item)              
               @php 
               $data=explode(',',$item->size);
               // dd($data);
               @endphp
               <option value="S"  @if( in_array( "S",$data ) ) selected @endif>Small</option>
               <option value="M"  @if( in_array( "M",$data ) ) selected @endif>Medium</option>
               <option value="L"  @if( in_array( "L",$data ) ) selected @endif>Large</option>
               <option value="XL"  @if( in_array( "XL",$data ) ) selected @endif>Extra Large</option>
               @endforeach
            </select>
         </div>
         <div class="form-group">
            <label for="brand_id">Brand</label>
            <select name="brand_id" class="form-control">
               <option value="">--Select Brand--</option>
               @foreach($brands as $brand)
               <option value="{{$brand->id}}" {{(($product->brand_id==$brand->id)? 'selected':'')}}>{{$brand->title}}</option>
               @endforeach
            </select>
         </div>
         <div class="form-group">
            <label for="condition">Condition</label>
            <select name="condition" class="form-control">
               <option value="">--Select Condition--</option>
               <option value="default" {{(($product->condition=='default')? 'selected':'')}}>Default</option>
               <option value="new" {{(($product->condition=='new')? 'selected':'')}}>New</option>
               <option value="hot" {{(($product->condition=='hot')? 'selected':'')}}>Hot</option>
            </select>
         </div>
         <div class="form-group">
            <label for="stock">Quantity <span class="text-danger">*</span></label>
            <input id="quantity" type="number" name="stock" min="0" placeholder="Enter quantity"  value="{{$product->stock}}" class="form-control">
            @error('stock')
            <span class="text-danger">{{$message}}</span>
            @enderror
         </div>
         <div class="form-group">
            <label for="inputPhoto" class="col-form-label">Photo <span class="text-danger">*</span></label>
            <div class="input-group">
                <span class="input-group-btn">
                    <a id="lfm" data-input="thumbnail" data-preview="holder" class="btn btn-primary text-white">
                        <i class="fas fa-image"></i> Choose
                    </a>
                </span>
                <input id="thumbnail" class="form-control" type="hidden" name="photo" value="{{ $product->photo }}">
            </div>
            
            <div id="holder" style="margin-top:15px;max-height:100px; display: flex; flex-wrap: wrap; gap: 10px;">
                @if($product->photo)
                    @php
                        $photos = explode(',', $product->photo);
                    @endphp
                    @foreach($photos as $photo)
                        @if(trim($photo))
                        <div class="image-container draggable" draggable="true" style="position: relative;" data-image="{{ trim($photo) }}">
                            <img src="{{ trim($photo) }}" style="height: 5rem; border: 1px solid #ddd; border-radius: 4px;">
                            <button type="button" 
                                    class="btn btn-sm btn-danger delete-image" 
                                    style="position: absolute; top: -10px; right: -10px; border-radius: 50%; padding: 0.15rem 0.35rem;"
                                    data-image="{{ trim($photo) }}">
                                ×
                            </button>
                            <span class="drag-handle" style="position: absolute; bottom: -10px; right: -10px; background: #fff; border-radius: 50%; padding: 0.15rem 0.35rem; cursor: move;">
                                <i class="fas fa-arrows-alt"></i>
                            </span>
                        </div>
                        @endif
                    @endforeach
                @endif
            </div>
            @error('photo')
            <span class="text-danger">{{ $message }}</span>
            @enderror
         </div>
         <div class="form-group">
            <label for="status" class="col-form-label">Status <span class="text-danger">*</span></label>
            <select name="status" class="form-control">
            <option value="active" {{(($product->status=='active')? 'selected' : '')}}>Active</option>
            <option value="inactive" {{(($product->status=='inactive')? 'selected' : '')}}>Inactive</option>
            </select>
            @error('status')
            <span class="text-danger">{{$message}}</span>
            @enderror
         </div>
         <div class="form-group mb-3">
            <button class="btn btn-success" type="submit">Update</button>
         </div>
      </form>
   </div>
</div>
@endsection
@push('styles')
<link rel="stylesheet" href="{{asset('backend/summernote/summernote.min.css')}}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<style>
    .draggable {
        cursor: move;
        transition: transform 0.1s ease;
    }
    .draggable.dragging {
        opacity: 0.5;
        transform: scale(1.05);
    }
    .drag-handle {
        cursor: move;
    }
</style>
@endpush

@push('scripts')
<script src="/vendor/laravel-filemanager/js/stand-alone-button.js"></script>
<script src="{{asset('backend/summernote/summernote.min.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></script>

<script>
$(document).ready(function() {
    // Initialize file manager
    $('#lfm').filemanager('image', {prefix: '/laravel-filemanager'});
    
    // Initialize Sortable for drag and drop
    const holder = document.getElementById('holder');
    new Sortable(holder, {
        animation: 150,
        handle: '.drag-handle',
        onEnd: function() {
            updateImageOrder();
        }
    });
    
    // Function to update image order in hidden input
    function updateImageOrder() {
        const images = [];
        $('#holder .image-container').each(function() {
            images.push($(this).data('image'));
        });
        $('#thumbnail').val(images.join(','));
    }
    
    // Handle image deletion
    $(document).on('click', '.delete-image', function() {
        const imagePath = $(this).data('image');
        const currentValue = $('#thumbnail').val();
        let imagesArray = currentValue ? currentValue.split(',') : [];
        
        // Remove the image from array
        imagesArray = imagesArray.filter(img => img.trim() !== imagePath);
        
        // Update hidden input
        $('#thumbnail').val(imagesArray.join(','));
        
        // Remove image container from DOM
        $(this).closest('.image-container').remove();
        
        // Send AJAX request to delete from server
        $.ajax({
            url: '{{ route("product.deleteImage") }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                image_path: imagePath,
                product_id: '{{ $product->id }}'
            },
            success: function(response) {
                console.log('Image deleted successfully');
            },
            error: function(xhr) {
                console.error('Error deleting image');
            }
        });
    });
    
    // Handle new image selection
    $('#lfm').on('filemanager:selected', function(event, items) {
        const currentValue = $('#thumbnail').val();
        const newImages = items.map(item => item.url);
        const allImages = currentValue ? currentValue.split(',').concat(newImages) : newImages;
        
        // Update hidden input
        $('#thumbnail').val(allImages.join(','));
        
        // Add new images to preview
        items.forEach(item => {
            $('#holder').append(`
                <div class="image-container draggable" draggable="true" style="position: relative;" data-image="${item.url}">
                    <img src="${item.url}" style="height: 5rem; border: 1px solid #ddd; border-radius: 4px;">
                    <button type="button" 
                            class="btn btn-sm btn-danger delete-image" 
                            style="position: absolute; top: -10px; right: -10px; border-radius: 50%; padding: 0.15rem 0.35rem;"
                            data-image="${item.url}">
                        ×
                    </button>
                    <span class="drag-handle" style="position: absolute; bottom: -10px; right: -10px; background: #fff; border-radius: 50%; padding: 0.15rem 0.35rem; cursor: move;">
                        <i class="fas fa-arrows-alt"></i>
                    </span>
                </div>
            `);
        });
    });
    
    // Summernote initialization
    $('#summary').summernote({
        placeholder: "Write short description.....",
        tabsize: 2,
        height: 150
    });
    
    $('#description').summernote({
        placeholder: "Write detail Description.....",
        tabsize: 2,
        height: 150
    });
    
    // Category/subcategory AJAX
    var child_cat_id = '{{$product->child_cat_id}}';
    $('#cat_id').change(function(){
        var cat_id = $(this).val();
        if(cat_id != null){
            $.ajax({
                url: "/admin/category/"+cat_id+"/child",
                type: "POST",
                data: {
                    _token: "{{csrf_token()}}"
                },
                success: function(response){
                    if(typeof(response) != 'object'){
                        response = $.parseJSON(response);
                    }
                    var html_option = "<option value=''>--Select any one--</option>";
                    if(response.status){
                        var data = response.data;
                        if(response.data){
                            $('#child_cat_div').removeClass('d-none');
                            $.each(data, function(id, title){
                                html_option += "<option value='"+id+"' "+(child_cat_id == id ? 'selected ' : '')+">"+title+"</option>";
                            });
                        }
                        else{
                            console.log('no response data');
                        }
                    }
                    else{
                        $('#child_cat_div').addClass('d-none');
                    }
                    $('#child_cat_id').html(html_option);
                }
            });
        }
    });
    if(child_cat_id != null){
        $('#cat_id').change();
    }
});
</script>
@endpush

PK 99