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

@push('style')

<style>
    select {
        min-width: 77vw;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    #fileInput {
        margin-bottom: 10px;
        border: 1px solid #ccc;
        padding: 5px
    }

    #previewContainer {
        padding: 10px;
        margin-top: 10px;
        max-width: 100%;
    }

    #previewContainer img {
        max-width: 100%;
    }

    #cancelButton {
        margin-top: 10px;
        color: red !important;
        cursor: pointer;
    }

    .error {
        font-size: 12px;
        display: block;
        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($vendorDetails))
                    Add Vendor
                    @else
                    Edit Vendor
                    @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 Vendors</a></li>
                    @if (empty($vendorDetails))
                    <li class="breadcrumb-item active">Add Vendor</li>
                    @else
                    <li class="breadcrumb-item active">Edit Vendor</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($vendorDetails))
                            <form class="form" name="createVendor" id="createVendor" class="dropzone" method="post" action="{{route('admin-store_vendor')}}" enctype="multipart/form-data">
                                @else
                                <form class="form" name="updateVendor" id="updateVendor" method="post" action="{{route('admin-update_vendor',['id' => Crypt::encrypt($vendorDetails->id)])}}" enctype="multipart/form-data">
                                    @method('PUT')
                                    @endif

                                    @csrf

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

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

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

                                    <label class="form-label">Country code</label>
                                    <select id="country_code" name="country_code">
                                        <option selected disabled>Select Country Code</option>
                                        @foreach ($countylist as $country)
                                        <option value="{{ $country->country_code }}" {{ isset($selectedCountryCode) && $selectedCountryCode == $country->country_code ? 'selected' : '' }}>
                                            <img src="{{ url(json_decode($country->flags)->svg) }}" alt="{{ $country->name }}" width="20" height="15">
                                            {{ $country->name }} ({{ $country->country_code }})
                                        </option>
                                        @endforeach
                                    </select>
                                    <span class="error" id="country_code_error"></span>


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


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

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

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

                                    <div class="form-float">
                                        <label class="form-label">Document</label>
                                        <input type="file" id="fileInput" class="form-control" name="fileInput" accept=".pdf" />
                                    </div>
                                    <span class="error" id="file_input_error"></span>


                                    @if (!empty($vendorDetails->document))
                                    <div id="excisting_document">
                                        @php
                                        $documentUrl = env("AWS_URL") . env("AWS_FOLDER") . env("VENDOR_DOCUMENT") . $vendorDetails->document;
                                        $isPdf = pathinfo($documentUrl, PATHINFO_EXTENSION) === 'pdf';
                                        @endphp

                                        <p>Excisting Document: {{$vendorDetails->document}}</p>

                                        @if ($isPdf)
                                        <a href="{{ $documentUrl }}" target="_blank" download>
                                            <img src="{{ asset('assets/images/pdf.png') }}" alt="PDF" height="80" width="80">
                                        </a>
                                        <!-- <p id="cancelButton" style="display: none; margin-top:2px;">Remove File</p> -->
                                        @endif
                                    </div>
                                    @endif
                                    <div id="image-path" class="mb-1"></div>
                                    <div id="image-container"></div>

                                    <div>
                                        @if(empty($vendorDetails))
                                        <input type="submit" class="btn btn-success mt-3" class="add_vendory" value="Add">
                                        @else
                                        <input type="submit" class="btn btn-success mt-3" class="update_vendory" value="Update">
                                        @endif
                                    </div>
                                </form>
                            </form>
                        </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();
    });

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

    $.validator.addMethod('validateEmail', function(value, element) {
        var pattern = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;
        return this.optional(element) || pattern.test(value);
    }, 'Please enter a valid email address.');

    $('#createVendor').validate({

        rules: {
            name: {
                required: true
            },
            email: {
                required: true,
                validateEmail: true,
                'remote': {
                    url: "{{ route('admin-check_email_availability') }}",
                    type: 'post',
                    data: {
                        email: function() {
                            return $('#email').val();
                        },
                        _token: "{{ csrf_token() }}",
                        user_id: "{{ $vendorDetails->id ?? '0' }}"
                    },
                    dataFilter: function(response) {
                        var json = JSON.parse(response);
                        if (json.available === true) {
                            // Clear the error message when a valid email is entered
                            $('#email-error').text('');
                            return 'true';
                        } else {
                            // Email is already in use or deleted by the admin
                            return '"' + json.message + '"';
                        }
                    }
                }
            },
            country_code: {
                required: true
            },
            phone: {
                required: true,
                digits: true,
                minlength: 10,
                maxlength: 12,
                'remote': {
                    url: "{{ route('admin-check_phone_availability') }}",
                    type: 'post',
                    data: {
                        phone: function() {
                            return $('#phone').val();
                        },
                        country_code: function() {
                            return $('#country_code').val();
                        },
                        _token: "{{ csrf_token() }}",
                        user_id: "{{ $vendorDetails->id ?? '0' }}"
                    },
                    dataFilter: function(response) {
                        console.log(response); // Check the response in the console

                        var json = JSON.parse(response);
                        if (json.available === true) {
                            // Clear the error message when a valid email is entered
                            $('#phone-error').text('');
                            return 'true';
                        } else {
                            // Email is already in use or deleted by the admin
                            return '"' + json.message + '"';
                        }
                    }
                }
            },
            contact_details: {
                required: true
            },
            address: {
                required: true
            },
            description: {
                required: true
            },
            fileInput: {
                required: true
            },
        },

        messages: {
            name: {
                required: "Please enter vendor name."
            },
            email: {
                required: "Please enter email address.",
                validateEmail: "Please enter a valid email address."
            },
            country_code: {
                required: "Please select country code."
            },
            phone: {
                required: "Please enter phone number.",
                digits: "Please enter a valid phone number.",
                minlength: 'Please enter 10 to 12 digits number only.',
                maxlength: 'Please enter 10 to 12 digits number only.'
            },
            contact_details: {
                required: "Please enter contact details.",
                digits: "Please enter a valid contact details.",
                minlength: 'Please enter 10 to 12 digits number only.',
                maxlength: 'Please enter 10 to 12 digits number only.'
            },
            address: {
                required: "Please enter address."
            },
            description: {
                required: "Please enter description."
            },
            fileInput: {
                required: "Please upload a document."
            },
        },

        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") === "country_code") {
                error.appendTo("#country_code_error");
            } else if (element.attr("name") === "fileInput") {
                error.appendTo("#file_input_error");
            } else {
                $(element).parents('.form-group').append(error);
            }
        }
    });

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


    $('#updateVendor').validate({

        rules: {
            name: {
                required: true
            },
            email: {
                required: true,
                validateEmail: true,
                'remote': {
                    url: "{{ route('admin-check_email_availability') }}",
                    type: 'post',
                    data: {
                        email: function() {
                            return $('#email').val();
                        },
                        _token: "{{ csrf_token() }}",
                        user_id: "{{ $vendorDetails->id ?? '0' }}"
                    },
                    dataFilter: function(response) {
                        var json = JSON.parse(response);
                        if (json.available === true) {
                            // Clear the error message when a valid email is entered
                            $('#email-error').text('');
                            return 'true';
                        } else {
                            // Email is already in use or deleted by the admin
                            return '"' + json.message + '"';
                        }
                    }
                }
            },
            country_code: {
                required: true
            },
            phone: {
                required: true,
                digits: true,
                minlength: 10,
                maxlength: 12,
            },
            contact_details: {
                required: true
            },
            address: {
                required: true
            },
            description: {
                required: true
            },
            fileInput: {
                required: function() {
                    return !existingImage && $('#fileInput').get(0).files.length === 0;
                }
            },
        },

        messages: {
            name: {
                required: "Please enter vendor name."
            },
            email: {
                required: "Please enter email address.",
                validateEmail: "Please enter a valid email address."
            },
            country_code: {
                required: "Please select country code."
            },
            phone: {
                required: "Please enter phone number.",
                digits: "Please enter a valid phone number.",
                minlength: 'Please enter 10 to 12 digits number only.',
                maxlength: 'Please enter 10 to 12 digits number only.'
            },
            contact_details: {
                required: "Please enter contact details.",
                digits: "Please enter a valid contact details.",
                minlength: 'Please enter 10 to 12 digits number only.',
                maxlength: 'Please enter 10 to 12 digits number only.'
            },
            address: {
                required: "Please enter address."
            },
            description: {
                required: "Please enter description."
            },
            fileInput: {
                required: "Please upload a document."
            },
        },

        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") === "country_code") {
                error.appendTo("#country_code_error");
            } else if (element.attr("name") === "file_input") {
                error.appendTo("#file_input_error");
            } else {
                $(element).parents('.form-group').append(error);
            }
        }
    });


    document.getElementById('fileInput').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 = "{{asset('assets/images/pdf.png')}}";
                image.style.maxHeight = '80px'; // Set maximum height 
                image.style.width = '80px'; // Maintain aspect ratio

                var fileName = file.name; // Extract the file name from the path

                var imagePathText = document.createElement('p');
                imagePathText.textContent = 'Selected Document: ' + fileName;

                // Hide the existing image if it exists
                var existingImageContainer = document.getElementById('excisting_document');
                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 {
            // Show the existing image if it exists
            var existingImageContainer = document.getElementById('excisting_document');
            if (existingImageContainer) {
                existingImageContainer.style.display = 'block';
            }
        }
    });
</script>
@endpush