@section('title', 'Manage Product')
@extends('vendor.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;
    }

    .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))
                    {{ trans('manage_product.add_product') }}
                    @else
                    {{ trans('manage_product.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('vendor-manage_product')}}"><i class="zmdi zmdi-home"></i></a></li>
                    <li class="breadcrumb-item"><a href="{{route('vendor-manage_product')}}">{{ trans('manage_product.manage_product') }}</a></li>
                    @if (empty($productDetails))
                    <li class="breadcrumb-item active">{{ trans('manage_product.add_product') }}</li>
                    @else
                    <li class="breadcrumb-item active">{{ trans('manage_product.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="{{ route('vendor-manage_product') }}">
                            <i class="material-icons text-muted">arrow_back</i>
                        </a>

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

                            @if(empty($productDetails))
                            <form class="form" name="createProduct" id="createProduct" method="post" action="{{route('vendor-store_product')}}" enctype="multipart/form-data">
                                @else
                                <form class="form" name="updateProduct" id="updateProduct" method="post" action="{{route('vendor-update_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">
                                        <!-- <div class="form-line"> -->
                                        <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> -->
                                    </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="">
                                    </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="text" id="terms_of_offer" name="terms_of_offer" class="form-control" value="{{ old('terms_of_offer', $productDetails->terms_of_offer ?? '') }}">
                                            <label class="form-label">Terms of Offer</label>
                                        </div>
                                    </div>

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

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


                                    <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('vendor_assets/assets/bundles/libscripts.bundle.js')}}"></script> <!-- Lib Scripts Plugin Js -->
<script src="{{asset('vendor_assets/assets/bundles/vendorscripts.bundle.js')}}"></script> <!-- Lib Scripts Plugin Js -->
<script src="{{asset('vendor_assets/assets/plugins/jquery-validation/jquery.validate.js')}}"></script> <!-- Jquery Validation Plugin Css -->
<script src="{{asset('vendor_assets/assets/plugins/jquery-steps/jquery.steps.js')}}"></script> <!-- JQuery Steps Plugin Js -->
<script src="{{asset('vendor_assets/assets/bundles/mainscripts.bundle.js')}}"></script><!-- Custom Js -->
<script src="{{asset('vendor_assets/assets/js/pages/forms/form-validation.js')}}"></script>

<script>
    document.getElementById('product_image').addEventListener('change', function(event) {
        var file = event.target.files[0];
        if (file) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('.edit_image-container').hide();
                var image = document.createElement('img');
                image.src = e.target.result;
                image.style.maxHeight = '200px'; // Set maximum height (adjust to your preference)
                image.style.width = 'auto'; // Maintain aspect ratio

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

                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';
        }
    });


    var validationRules = {
        product_name: {
            required: true
        },
        product_image: {
            required: true
        },
        description: {
            required: true
        },
        terms_of_offer: {
            required: true
        },
        cashback: {
            required: true
        },
        offer: {
            required: true
        },
    };


    $('#createProduct,#updateProduct').validate({


        rules: validationRules,

        messages: {
            product_name: {
                required: "Please enter product name."
            },
            product_image: {
                required: "Please upload product image."
            },
            description: {
                required: "Please enter description."
            },
            terms_of_offer: {
                required: "Please enter terms of offer."
            },
            cashback: {
                required: "Please enter cashback amount."
            },
            offer: {
                required: "Please enter offer amount."
            },
        },

        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") === "product_image") {
                error.appendTo("#product_image_error");
            } else {
                $(element).parents('.form-group').append(error);
            }
        }
    });

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

        formInputs.forEach(function(input) {
            // Check if the input has a predefined value
            if (input.value !== '') {
                input.parentElement.classList.add('focused');
            }

            // Add event listener for input focus
            input.addEventListener('focus', function() {
                this.parentElement.classList.add('focused');
            });

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