@include('layouts.header')			

@include('layouts.sidebar')

<style>
     .gallery-image-container {
        padding: 5px; /* Adds space around each image container */
    }

    .gallery-image img {
        width: 100%;
        height: auto;
        border: 2px solid #ddd; /* Light grey border */
        border-radius: 5px; /* Rounded corners */
    }

    /* Optional: Add a hover effect */
    .gallery-image img:hover {
        border-color: #007bff; /* Change border color on hover */
    }
    #subcategory-0::-webkit-scrollbar {
        height: 12px; 
    }

    #subcategory-0::-webkit-scrollbar-track {
        background: #f1f1f1; 
    }

    #subcategory-0::-webkit-scrollbar-thumb {
        background-color: #888; 
        border-radius: 10px; 
        border: 3px solid #f1f1f1; 
    }

    #subcategory-0::-webkit-scrollbar-thumb:hover {
        background-color: #555;
    }

    
    #subcategory-0 {
        scrollbar-width: thin;
        scrollbar-color: #888 #f1f1f1;
    }

    .fields-container::-webkit-scrollbar {
    height: 12px; 
}

.fields-container::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

.fields-container::-webkit-scrollbar-thumb {
    background-color: #888; 
    border-radius: 10px; 
    border: 3px solid #f1f1f1; 
}

.fields-container::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

.fields-container {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

</style>

<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="add-item d-flex">
                <div class="page-title">
                    <h4>Product Details</h4>
                
                </div>
            </div>
            <ul class="table-top-head">
                <li>
                    <div class="page-btn">
                        <a href="{{ route('product_list')}}" class="btn btn-secondary"><i data-feather="arrow-left" class="me-2"></i>Back to Product</a>
                    </div>
                </li>
                <li>
                    <a data-bs-toggle="tooltip" data-bs-placement="top" title="Collapse" id="collapse-header"><i data-feather="chevron-up" class="feather-chevron-up"></i></a>
                </li>
            </ul>
            
        </div>
        <!-- /add -->
        @if(session()->has('success'))
            <div class="alert alert-success">
                {{ session()->get('success') }}
            </div>
            @endif
            @if(session()->has('error'))
            <div class="alert alert-danger">
                {{ session()->get('error') }}
            </div>
            @endif

            <div class="row">
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="card-title">
                                {{ $product->product_name}}
                            </div>
                        </div>
                        <div class="card-body">
                            <nav class="nav nav-pills flex-column flex-sm-row" role="tablist">
                                <a class="flex-sm-fill text-sm-center nav-link active" data-bs-toggle="tab" role="tab" aria-current="page"
                                href="#pill-flex-home" aria-selected="true">Product Details</a>
                                <a class="flex-sm-fill text-sm-center nav-link" data-bs-toggle="tab" role="tab" aria-current="page"
                                href="#pill-flex-big" aria-selected="false">Product Varients</a>
                                {{-- <a class="flex-sm-fill text-sm-center nav-link" data-bs-toggle="tab" role="tab" aria-current="page"
                                href="#pill-flex-about" aria-selected="false">Order</a>
                                <a class="flex-sm-fill text-sm-center nav-link disabled">Services</a> --}}
                            </nav>
                            <div class="tab-content mt-3">
                                <div class="tab-pane show active text-muted" id="pill-flex-home" role="tabpanel"> <div class="row">
                                    <div class="col-lg-12 col-sm-12">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="container mt-4">
                                                    <div class="row">
                                                        <!-- Main product image -->
                                                        <div class="col-lg-4 col-md-6">
                                                            <label for="mainImage" class="form-label">Main Image</label>
                                                            <img id="mainImage" src="{{ url('uploads/products/'.$product->product_image) }}" 
                                                                 onerror="this.onerror=null;this.src='{{ url('uploads/images.jpeg') }}';" 
                                                                 class="img-fluid mb-3" alt="product image" 
                                                                 style="width: 100%; height: auto;">
                                                        </div>
                                                
                                                        <!-- Thumbnail images 
                                                        <div class="col-lg-8 col-md-6">
                                                            <label class="form-label">Additional Images</label>
                                                            <div class="row">
                                                               
                                                                    <div class="col-lg-3 col-md-4 col-6">
                                                                        <img src="{{ url('uploads/products/') }}" 
                                                                             onerror="this.onerror=null;this.src='{{ url('uploads/images.jpeg') }}';" 
                                                                             class="img-thumbnail mb-2" 
                                                                             alt="additional product image" 
                                                                             style="width: 100%; height: auto;" 
                                                                             onclick="document.getElementById('mainImage').src = this.src;">
                                                                    </div>
                                                                    
                                                            </div>
                                                        </div>-->
                                                    </div>
                                                </div>
                                                <div class="productdetails">
                                                    <ul class="product-bar">
                                                        <li>
                                                            <h4>Product</h4>
                                                            <h6>{{ ucfirst($product->product_name)}}</h6>
                                                        </li>
                                                        <li>
                                                            <h4>Category</h4>
                                                            <h6>{{ ucfirst($product->category_name)}}</h6>
                                                        </li>
                                                        <li>
                                                            <h4>Sub Category</h4>
                                                            <h6>{{ ucfirst($product->sub_category_name)}}</h6>
                                                        </li>
                                                        <li>
                                                            <h4>Brand</h4>
                                                            <h6>{{ ucfirst($product->brand_name)}}</h6>
                                                        </li>
                                                        <li>
                                                            <h4>Unit</h4>
                                                            <h6>{{ ucfirst($product->unit_name)}}</h6>
                                                        </li>
                                                        <li>
                                                            <h4>SKU</h4>
                                                            <h6>{{ ucfirst($product->product_code)}}</h6>
                                                        </li>
                                                        <li>
                                                            <h4>Supplier</h4>
                                                            <h6>{{ ucfirst($product->supplier_name)}}</h6>
                                                        </li>
                                                        <li>
                                                            <h4>Basic Cost</h4>
                                                            <h6>₹ {{ $pricing->basic_cost}}</h6>
                                                        </li>
                                                        <li>
                                                            <h4>Purchase Cost</h4>
                                                            <h6>₹ {{ $pricing->purchase_cost}}</h6>
                                                        </li>
                                                        <li>
                                                            <h4>Retail Price</h4>
                                                            <h6>₹ {{ $pricing->retail_price}}</h6>
                                                        </li>
                                                         <!-- <li>
                                                            <h4>Converted Price</h4>
                                                            <h6>₹ {{ $pricing->converted_price}}</h6>
                                                        </li> -->
                                                        
                                                        <li>
                                                            <h4>Status</h4>
                                                            <h6>{{ $product->status == 1 ? 'Active' : 'Inactive' }}</h6>
                                                        </li>
                                                        <li>
                                                            <h4>Description</h4>
                                                            <h6>{!! html_entity_decode($product->description) !!}</h6>
                                                        </li>
                                                        <li>
                                                            <h4>Technical Description</h4>
                                                            <h6>{!! html_entity_decode($product->technical_details) !!}</h6>
                                                        </li>
                                                         <li>
                                                            <h4>HSN Code</h4>
                                                            <h6>{{ $product->hsn_code }}</h6>
                                                        </li>
                                                         <li>
                                                            <h4>Quntity Per Roll</h4>
                                                            <h6>{{ $product->quantityroll }}</h6>
                                                        </li>
                                                    </ul>
                                                </div>
                                               
                                                
                                                
                                            </div>
                                        </div>
                                        
                                    </div>
                                
                                </div></div>
                                <div class="tab-pane text-muted" id="pill-flex-big" role="tabpanel"> 
                                   <!-- <div class="card">
                                    <div class="card-body add-product pb-0">
                                        <div class="accordion-card-one accordion" id="warehouse">
                                            <div class="accordion-item">
                                                <div class="accordion-header" id="headingOne">
                                                    <div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseThree"  aria-controls="collapseTwo">
                                                        <div class="addproduct-icon">
                                                            <h5><i data-feather="info" class="add-info"></i><span>Add Product varient</span></h5>
                                                            <a href="javascript:void(0);"><i data-feather="chevron-down" class="chevron-down-add"></i></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            <div id="collapseThree" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#warehouse">
                                                <div class="accordion-body">
                                                    
                                                    <div class="row">
                                                        <div class="card">
                                                            <div class="card-body">
                                                                <form action="{{ route('store_product_varient')}}" method="POST" enctype="multipart/form-data">
                                                                    @csrf
                                                                    <input type="hidden" class="form-control" value="{{ $product->id }}" name="product_id" required />
                                                            
                                                                   
                                                                    <div class="productdetails" style="overflow-x: auto; white-space: nowrap; scroll-behavior: smooth; scrollbar-width: thin; display: flex; flex-direction: column; gap: 10px;">
                                                                        <div class="input-group mb-3 gap-2" id="subcategory-0" style="display: flex;">
                                                                            <div class="add-icon" style="margin-top: 18px; flex: 0 0 auto;">
                                                                                <a href="#" title="Add" class="choose-add" id="add-subcategory" style="color:white; background:green;">
                                                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle plus">
                                                                                        <circle cx="12" cy="12" r="10"></circle>
                                                                                        <line x1="12" y1="8" x2="12" y2="16"></line>
                                                                                        <line x1="8" y1="12" x2="16" y2="12"></line>
                                                                                    </svg>
                                                                                </a>
                                                                            </div>
                                                            
                                                                            
                                                                            <div class="fields-container gap-2" style="display: flex; flex: 1;">
                                                                               
                                                                                <div class="form-group mb-3" style="flex: 0 0 200px;">
                                                                                    <label for="varient_code">Code</label>
                                                                                    <input type="text" class="form-control" name="varient_code[]" placeholder="Code" required />
                                                                                </div>
                                                                                <div class="form-group mb-3" style="flex: 0 0 200px;">
                                                                                    <label for="varient_name">Name</label>
                                                                                    <input type="text" class="form-control" placeholder="Name" name="varient_name[]" required />
                                                                                </div>
                                                                                <div class="form-group mb-3" style="flex: 0 0 200px;">
                                                                                    <label for="varient_image">Image</label>
                                                                                    <input type="file" class="form-control" name="varient_image[]" accept=".jpg,.png,.jpeg" required />
                                                                                </div>
                                                                           
                                                                                <div class="form-group mb-3" style="flex: 0 0 200px;">
                                                                                    <label for="more_image">Additional Images</label>
                                                                                    <input type="file" class="form-control" name="more_image_0[]" accept=".jpg,.png,.jpeg" multiple required />
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                       
                                                                        <div id="additional-subcategories"></div>
                                                                    </div>
                                                            
                                                                    <button type="submit" class="btn btn-primary mt-3">Submit</button>
                                                                </form>
                                                            </div>
                                                            
                                                        </div>
                                                    </div>
                                                    
                                                        
                                                    
                                                   
                                                </div>
                                            </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>	--> 
                                <div class="card">
                                    <div class="card-body add-product pb-0">
                                        <div class="accordion-card-one accordion" id="varient">
                                            <div class="accordion-item">
                                                <div class="accordion-header" id="headingOne">
                                                    <div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapsefive"  aria-controls="collapseTwo">
                                                        <div class="addproduct-icon">
                                                            <h5><i data-feather="info" class="add-info"></i><span>Product varients</span></h5>
                                                            <a href="javascript:void(0);"><i data-feather="chevron-down" class="chevron-down-add"></i></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            <div id="collapseFive" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#varient">
                                                <div class="accordion-body">
                                                    
                                                    <div class="row">
                                                        <div class="card">
                                                            <div class="card-body">
                                                                
                                                                <div class="table-responsive product-list">
                                                                    <table class="table datanew">
                                                                        <thead>
                                                                            <tr>
                                                                                
                                                                                <th>Varient Code</th>
                                                                                <th>Varient Name</th>
                                                                                
                                                                                <th>Image</th>
                                                                                
                                                                              
                                                                                <th class="no-sort">Action</th>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody>
                                                                           @foreach($varients as $row) 
                                                                            
                                                                            <tr>
                                                                                
                                                                                <td>{{ $row->varient_code}}</td>
                                                                                <td>{{ $row->varient_name}}</td>
                                                                                
                                                                                <td><img src="{{ url('uploads/products/'.$row->varient_image)}}" style="height:50px" onerror="this.onerror=null;this.src='{{ url('uploads/images.jpeg') }}';"  alt="product image" >
                                                                                </td>
                                                                                
                                                                                
                                                                                <td class="action-table-data">
                                                                                    <div class="edit-delete-action">
                                                                                        <a class="me-2 edit-icon  p-2" href="#" data-bs-toggle="modal"  data-id="{{ $row->id }}" data-bs-target="#view-images" title="View Addtional Images">
                                                                                            <i data-feather="eye" class="feather-eye"></i>
                                                                                        </a>
                                                                                        <!--<a class="me-2 p-2" href="#" data-bs-toggle="modal" title="Edit" data-bs-target="#edit-brand" onclick="editVarient({{ $row->id }}, '{{ $row->varient_name }}', '{{ $row->varient_code }}','{{ $row->varient_image }}')" >
                                                                                            <i data-feather="edit" class="feather-edit"></i>
                                                                                        </a>
                                                                                        <a class="confirm-text p-2 delete-action" title="Delete" data-id="{{ $row->id}}" href="javascript:void(0);">
                                                                                            <i data-feather="trash-2" class="feather-trash-2"></i>
                                                                                        </a>-->
                                                                                    </div>
                                                                                </td>
                                                                            </tr>
                                                                        @endforeach
                                                                        </tbody>
                                                                    </table>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    
                                                        
                                                    
                                                    <!-- /Editor -->
                                                </div>
                                            </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>	
                            </div>
                                <div class="tab-pane text-muted" id="pill-flex-about" role="tabpanel"> Unbelievable healthy snack success stories. 12 facts about safe food handling tips that will impress your friends. Restaurant weeks by the numbers. Will mexican food ever rule the world? The 10 best thai restaurant youtube videos. How restaurant weeks can make you sick. The complete beginner's guide to cooking healthy food. Unbelievable food stamp success stories. How whole foods markets are making the world a better place. 16 things that won't happen in dish reviews.</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
	</div>
	</div>
{{-- modal --}}

<div class="modal fade" id="edit-brand">
    <div class="modal-dialog modal-dialog-centered custom-modal-two">
        <div class="modal-content">
            <div class="page-wrapper-new p-0">
                <div class="content">
                    <div class="modal-header border-0 custom-modal-header">
                        <div class="page-title">
                            <h4>Edit Varient</h4>
                        </div>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body custom-modal-body new-employee-field">
                        <form action="{{ route('update_product_varient')}}" method="post" enctype="multipart/form-data">
                            @csrf
                            
                            <input type="hidden"  name="product_id" value="{{ $product->id}}">

                            <input type="hidden" id="edit-id" name="id">
                            <div class="mb-3">
                                <label class="form-label">Name</label>
                                <input type="text" name="varient_name" id="edit-name" class="form-control">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Code</label>
                                <input type="text" name="varient_code" id="edit-color" class="form-control">

                        </div>
                            <div class="mb-3">
                                <label class="form-label">Image</label>
                                <input type="file" name="varient_image" id="edit-image" class="form-control">
                            </div>
                           
                            
                            <div class="modal-footer-btn">
                                <button type="button" class="btn btn-cancel me-2" data-bs-dismiss="modal">Cancel</button>
                                <button type="submit" class="btn btn-submit">Save Changes</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- image modal --}}

<a class="me-2 edit-icon p-2" href="#" data-bs-toggle="modal" data-id="" data-bs-target="#view-images" title="View Additional Images">
    <i data-feather="eye" class="feather-eye"></i>
</a>

<div class="modal fade modal-lg" id="view-images">
    <div class="modal-dialog modal-dialog-centered custom-modal-two">
        <div class="modal-content">
            <div class="page-wrapper-new p-0">
                <div class="content">
                    <div class="modal-header border-0 custom-modal-header" style="background: #9E00D7;">
                        <div class="page-title">
                            <h4 style="color:white">Additional Images</h4>
                        </div>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true" class="text-white">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body custom-modal-body new-employee-field">
                        <div class="row" id="image-gallery">
                            <!-- Images will be loaded here dynamically -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>

				$(document).on('click', '.delete-action', function (e) {
					
					e.preventDefault();
					var userId = $(this).data('id');
					
					var deleteUrl = "{{ url('delete-product-varient') }}/" + userId;

					Swal.fire({
						title: 'Are you sure?',
						text: "You won't be able to revert this!",
						icon: 'warning',
						showCancelButton: true,
						confirmButtonColor: '#3085d6',
						cancelButtonColor: '#d33',
						confirmButtonText: 'Yes, delete it!'
					}).then((result) => {
						if (result.isConfirmed) {
							$.ajax({
								url: deleteUrl,
								method: 'DELETE',
                                headers: {
                                 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
                             },
								success: function (response) {
									Swal.fire(
										'Deleted!',
										'Product Varient has been deleted.',
										'success'
									).then(() => {
										location.reload(); 
									});
								},
								error: function (xhr, status, error) {
									Swal.fire(
										'Error!',
										'There was a problem deleting the user.',
										'error'
									);
								}
							});
						}
					});
				});

                let subcategoryCount = 0;

function addSubcategoryRow() {
    
    const lastSubcategoryName = $('input[name="varient_name[]"]').last().val();
    const lastSubcategoryImage = $('input[name="varient_image[]"]').last().val();
    const lastSubcategoryColor = $('input[name="varient_code[]"]').last().val();

    if (!lastSubcategoryName || !lastSubcategoryImage || !lastSubcategoryColor) {
        Swal.fire({
            title: 'Validation Error',
            text: 'Please fill in all fields before adding another.',
            icon: 'warning',
            confirmButtonText: 'Okay'
        });
        return;
    }

    subcategoryCount++;

    var mrp = {{ $pricing->retail_price }};
    
    $('#additional-subcategories').append(`
        <div class="input-group mb-3" id="subcategory-${subcategoryCount}" style="display: flex;">
            <div class="add-icon" style="margin-top: 0px; margin-right: 10px; flex: 0 0 auto;">
                <a href="#" title="Add" class="choose-add" style="color:white;background:green;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle plus">
                        <circle cx="12" cy="12" r="10"></circle>
                        <line x1="12" y1="8" x2="12" y2="16"></line>
                        <line x1="8" y1="12" x2="16" y2="12"></line>
                    </svg>
                </a>
            </div>
            <div class="fields-container gap-2" style="display: flex; flex: 1;">
                <div class="form-group mb-3" style="flex: 0 0 200px;">
                    <input type="text" class="form-control" name="varient_code[]" placeholder="Code" required />
                </div>
                <div class="form-group mb-3" style="flex: 0 0 200px;">
                    <input type="text" class="form-control" placeholder="Name" name="varient_name[]" required />
                </div>
                <div class="form-group mb-3" style="flex: 0 0 200px;">
                    <input type="file" class="form-control" name="varient_image[]" accept=".jpg,.png,.jpeg" required />
                </div>
            
                <div class="form-group mb-3" style="flex: 0 0 200px;">
                    <input type="file" class="form-control" name="more_image_${subcategoryCount}[]" accept=".jpg,.png,.jpeg" multiple required />
                </div>
            </div>
        </div>
    `);
    attachDiscountCalculation();
    $('.add-icon a').not(':last').replaceWith(`
        <a href="#" class="remove-subcategory" title="Remove" style="color:white;background:red;">
            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus-circle minus">
                <circle cx="12" cy="12" r="10"></circle>
                <line x1="8" y1="12" x2="16" y2="12"></line>
            </svg>
        </a>
    `);
}

$(document).on('click', '#add-subcategory, .choose-add', function(e) {
    e.preventDefault();
    addSubcategoryRow();
});

$(document).on('click', '.remove-subcategory', function(e) {
    e.preventDefault();
    $(this).closest('.input-group').remove();
});


        function attachDiscountCalculation() {
        $('.discount-input').on('input', function() {
            let discount = parseFloat($(this).val());
            let mrp = {{ $pricing->retail_price }}; 

            if (!isNaN(discount) && discount >= 0 && discount <= 100) {
                let retailPrice = mrp - (mrp * discount / 100);
                $(this).closest('.fields-container').find('.retail-price-input').val(retailPrice.toFixed(2)); 
            } else {
                $(this).closest('.fields-container').find('.retail-price-input').val(''); 
            }
        });
    }


attachDiscountCalculation();


        function editVarient(id, name, color,image) {
               
                    $('#edit-id').val(id); 
                    $('#edit-name').val(name); 
                    $('#edit-color').val(color);
                
                    let imageUrl = '{{ url("uploads/products/") }}/' + image;
                    $('#edit-image').attr('src', imageUrl);
        
               
            }


            $(document).on('click', '.edit-icon', function() {
            var id = $(this).data('id');  
            $.ajax({
                url: '/get-images/' + id, 
                type: 'GET',
                success: function(response) {
                    var imagesContainer = $('#image-gallery');
                    imagesContainer.empty(); 
                    
                  
                    $.each(response.images, function(index, image) {
                        var imgElement = '<div class="col-md-3 gallery-image-container">' +
                                            '<div class="gallery-image">' +
                                                '<img src="/uploads/products/' + image.image + '" class="img-fluid" alt="Product Image">' +
                                            '</div>' +
                                        '</div>';
                        imagesContainer.append(imgElement);
                    });
                },
                error: function() {
                    console.error('Could not fetch images.');
                }
            });
        });


            

    </script>
    
@include('layouts.footer')