@section('title', 'Manage Vendors')
@extends('admin.layouts.app')

@push('style')

<style>
    .form-float input[type="file"] {
        border: 1px solid #ccc !important;
        outline: none !important;
        width: 100% !important;
        padding: 5px;
    }

    #file-upload-button {
        margin-left: 20px !important;
    }

    select {
        min-width: 77vw;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    .error {
        font-size: 12px;
        display: block;
        margin-top: 5px;
        font-weight: normal;
        color: #F44336;
    }
</style>
@endpush


@section('content')
<section class="content home">

    <!-- Start Content-->
    <div class="block-header">
        <div class="row app-title">
            <div class="col-lg-7 col-md-6 col-sm-12">
                <h2 class="mt-3"></i>
                    @if (empty($productDetails))
                    Add Product
                    @else
                    Edit Product
                    @endif
                    <small class="text-muted"></small>
                </h2>
            </div>
            <div class="col-lg-5 col-md-6 col-sm-12">
                <ul class="breadcrumb float-md-right mt-3">
                    <li class="breadcrumb-item"><a href="{{route('admin-dashboard')}}"><i class="zmdi zmdi-home"></i></a></li>
                    <li class="breadcrumb-item"><a href="{{route('admin-manage_vendor')}}">Manage Vendor Products</a></li>
                    @if (empty($productDetails))
                    <li class="breadcrumb-item active">Add Product</li>
                    @else
                    <li class="breadcrumb-item active">Edit Product</li>
                    @endif
                </ul>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="body">
            <div class="row">
                <div class="col-12">
                    <div class="card">

                        <a class="btn btn-white float-left ml-3 mt-2 mb-1" href="{{ back()->getTargetUrl() }}">
                            <i class="material-icons text-muted">arrow_back</i>
                        </a>

                        <div class="card-body mt-4">

                            @if(empty($productDetails))
                            <form class="form" name="createProductForm" id="createProductForm" method="post" action="{{route('admin-store_vendor_product')}}" enctype="multipart/form-data">
                                @else
                                <form class="form" name="updateProductForm" id="updateProductForm" method="post" action="{{route('admin-update_vendor_product',['id' => Crypt::encrypt($productDetails->id)])}}" enctype="multipart/form-data">
                                    @method('PUT')
                                    @endif

                                    @csrf

                                    <input type="hidden" name="product_id" id="product_id" value="{{  $productDetails->id ?? '' }}">

                                    <div class="form-group form-float">
                                        <div class="form-line">
                                            <input type="text" id="product_name" name="product_name" class="form-control" value="{{ old('product_name', $productDetails->product_name ?? '') }}">
                                            <label class="form-label">Product Name</label>
                                        </div>
                                    </div>

                                    <div class="form-float">
                                        <label class="form-label">Product Image</label>
                                        <input type="file" id="product_image" name="product_image" class="form-control" value="{{ old('product_image',$productDetails->image ?? '')}}" accept=".jpg,.jpeg,.png">
                                    </div>
                                    <span class="error" id="product_image_error"></span>

                                    @if(!empty($productDetails->image))
                                    <div id="edit_image-container">
                                        <p>Excisting Image:</p>
                                        <img src='{{ env("AWS_URL").env("AWS_FOLDER").env("PRODUCT_IMAGE").$productDetails->image }}' alt="" height="200px" width="auto">
                                    </div>
                                    @endif

                                    <div id="image-path" class="mb-1"></div>
                                    <div id="image-container"></div>

                                    <div class="form-group form-float">
                                        <div class="form-line">
                                            <input type="text" id="description" name="description" class="form-control" value="{{ old('description', $productDetails->description ?? '') }}">
                                            <label class="form-label">Description</label>
                                        </div>
                                    </div>

                                    <div class="form-group form-float">
                                        <div class="form-line">
                                            <input type="number" id="price" name="price" class="form-control" value="{{ old('price', $productDetails->price ?? '') }}">
                                            <label class="form-label">Price</label>
                                        </div>
                                    </div>

                                    @if(empty($productDetails))
                                    <label class="form-label">Select Vendor</label>
                                    <select id="vendor_id" name="vendor_id">
                                        <option selected disabled>Select Vendor</option>
                                        @foreach ($vendor as $vendor)
                                        <option value="{{ $vendor->id }}">
                                            {{ $vendor->name }}
                                        </option>
                                        @endforeach
                                    </select>
                                    <span class="error" id="vendor_error"></span>

                                    @else

                                    <label class="form-label">Select Vendor</label>
                                    <select id="vendor_id" name="vendor_id">
                                        <option disabled>Select Vendor</option>
                                        @foreach ($vendor as $vendor)
                                        <option value="{{ $vendor->id }}" {{ $vendor->id == $productDetails->vendor_id ? 'selected' : '' }}>
                                            {{ $vendor->name }}
                                        </option>
                                        @endforeach
                                    </select>
                                    <label class="error"></label>
                                    @endif

                                    <div>
                                        @if(empty($productDetails))
                                        <input type="submit" class="btn btn-success" class="add_product" value="Add">
                                        @else
                                        <input type="submit" class="btn btn-success" class="update_product" value="Update">
                                        @endif
                                    </div>
                                </form>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</section>
@endsection

@push('script')

<script src="{{asset('assets/plugins/jquery-validation/jquery.validate.js')}}"></script> <!-- Jquery Validation Plugin Css -->
<script src="{{asset('assets/plugins/jquery-steps/jquery.steps.js')}}"></script> <!-- JQuery Steps Plugin Js -->
<script src="{{asset('assets/js/pages/forms/form-validation.js')}}"></script>

<script>
    $(document).ready(function() {
        $('.btn-default').hide();

        $('#createProductForm').validate({

            rules: {
                product_name: {
                    required: true
                },
                product_image: {
                    required: true
                },
                description: {
                    required: true
                },
                price: {
                    required: true
                },
                vendor_id: {
                    required: true
                },
            },

            messages: {
                product_name: {
                    required: "Please enter product name."
                },
                product_image: {
                    required: "Please upload product image."
                },
                description: {
                    required: "Please enter description."
                },
                price: {
                    required: "Please enter price."
                },
                vendor_id: {
                    required: "Please select any Vendor."
                },
            },

            highlight: function(input) {
                $(input).parents('.form-line').addClass('error');
            },
            unhighlight: function(input) {
                $(input).parents('.form-line').removeClass('error');
            },
            errorPlacement: function(error, element) {
                if (element.attr("name") === "vendor_id") {
                    error.appendTo("#vendor_error");
                } else if (element.attr("name") === "product_image") {
                    error.appendTo("#product_image_error");
                } else {
                    $(element).parents('.form-group').append(error);
                }
            }
        });
    });

    var existingImage = {!!json_encode(!empty($productDetails->image)) !!}; // Assuming you're using PHP to set the existing image variable

    var validationRules = {
        product_name: {
            required: true
        },
        product_image: {
            required: function() {
                return !existingImage && $('#product_image').get(0).files.length === 0;
            }
        },
        description: {
            required: true
        },
        price: {
            required: true
        },
        vendor_id: {
            required: true
        },

    };

    $('#updateProductForm').validate({

        rules: validationRules,

        messages: {
            product_name: {
                required: "Please enter product name."
            },
            product_image: {
                required: function(element) {
                    return !existingImage && element.files.length === 0;
                }
            },
            description: {
                required: "Please enter description."
            },
            price: {
                required: "Please enter price."
            },
            vendor_id: {
                required: "Please select any Vendor."
            },
        },

        highlight: function(input) {
            $(input).parents('.form-line').addClass('error');
        },
        unhighlight: function(input) {
            $(input).parents('.form-line').removeClass('error');
        },
        errorPlacement: function(error, element) {
            $(element).parents('.form-group').append(error);
        }
    });

    document.getElementById('product_image').addEventListener('change', function(event) {
        var file = event.target.files[0];
        if (file) {
            var reader = new FileReader();
            reader.onload = function(e) {
                var image = document.createElement('img');
                image.src = e.target.result;
                image.style.maxHeight = '200px'; // Set maximum height 
                image.style.width = 'auto'; // Maintain aspect ratio

                var imagePathText = document.createElement('p');
                imagePathText.textContent = 'Selected Image: ';

                // Hide the existing image if it exists
                var existingImageContainer = document.getElementById('edit_image-container');
                if (existingImageContainer) {
                    existingImageContainer.style.display = 'none';
                }

                document.getElementById('image-container').innerHTML = ''; // Clear previous image, if any
                document.getElementById('image-container').appendChild(image);
                document.getElementById('image-path').innerHTML = ''; // Clear previous text, if any
                document.getElementById('image-path').appendChild(imagePathText);
            };
            reader.readAsDataURL(file);
        } else {
            // Handle the case where no file is selected and there is no existing image URL
            document.getElementById('image-container').innerHTML = '';
            document.getElementById('image-path').innerHTML = 'No image selected';

            // Show the existing image if it exists
            var existingImageContainer = document.getElementById('edit_image-container');
            if (existingImageContainer) {
                existingImageContainer.style.display = 'block';
            }
        }
    });

    //WHEN EDIT FORM WILL OPEN
    document.addEventListener('DOMContentLoaded', function() {
        const formInputs = document.querySelectorAll('.form-control');

        formInputs.forEach(function(input) {

            if (input.value !== '') {
                input.parentElement.classList.add('focused');
            }

            input.addEventListener('focus', function() {
                this.parentElement.classList.add('focused');
            });

            input.addEventListener('blur', function() {
                if (this.value === '') {
                    this.parentElement.classList.remove('focused');
                }
            });
        });
    });
</script>
@endpush