@extends('companyuser::layouts.master')
@section('title',__('companyuser::sidebar.User Information'))
@section('extra-styles')
<link rel="stylesheet" type="text/css" href="{{asset('/assets/css/table/table-custome-styles.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('/assets/css/custom/radio-buttons-custom.css')}}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
 
 .hr-text {
  line-height: 1em;
  position: relative;
  outline: 0;
  border: 0;
  color: #404E67;
  text-align: start;
  height: 1.5em;
  padding-left: 0 !important;
  margin-left: 0;
  margin-right:1rem;
  &:before {
    content: '';
    position: absolute;
    @if ($currentLang == 'ar')
      left: -40px !important;
      background: linear-gradient(to left, transparent,#00000026);

    @else 
        right: 0;
        background: linear-gradient(to right, transparent,#00000026);
    @endif
    top: 50%;
    width: 90%;
    height: 2px;
  }
  &:after {
    content:attr(data-content);
    position: relative;
    display: inline-block;
    color: #404E67;
    @if ($currentLang == 'ar')
    padding: 0 ;
    @else 
    padding: 0 0.5em;
    @endif
    line-height: 1.5em;
    font-size: 20px;
    font-weight: lighter;
  }

}
.vompay-header{
        background-image: url(/landing_page/images/vom-pay/vom-pay-header.png);
        height: 123px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        z-index: 1;
        width: 99%;
        margin-left: 12px;

}
.container-fluid .logo img{
        width: 302px;
        top: 41px;
        position: absolute;
        z-index: 2;

    }
.header-text
    {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 40px;
        font-weight: bold;
        color:white
    }

    * {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

/*Background color*/
#grad1 {
    background-color: : #9C27B0;
    background-image: linear-gradient(120deg, #FF4081, #81D4FA);
}

.requirments span{
    height: 30px;
    width: 30px;
    /* background-color: #fff; */
    border-radius: 50%;
    display: inline-block;
    /* box-shadow: 5px 2px 4px -3px; */
    font-size: 25px;
    padding: 0 !important;
    text-align: center;
}

/*form styles*/
#msform {
    text-align: center;
    position: relative;
    /* margin-top: 20px; */
}


#msform fieldset {
    /* background: white; */
    border: 0 none;
    border-radius: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding-bottom: 20px;

    /*stacking fieldsets above each other*/
    position: relative;
}

/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
    display: none;
}

#msform fieldset .form-card {
    text-align: left;
    color: #9E9E9E;
}

#msform input, #msform textarea {
    padding: 0px 8px 4px 8px;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom: 25px;
    margin-top: 2px;
    width: 100%;
    box-sizing: border-box;
    font-family: montserrat;
    color: #2C3E50;
    font-size: 15px;
    letter-spacing: 1px;
    height: 38px;
    background: #F5F7FA;
}

#msform input:focus, #msform textarea:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    /* border: none; */
    font-weight: bold;
    border: 2px solid skyblue;
    outline-width: 0;
}

/*Blue Buttons*/
#msform .action-button {
    border-color: #ff7300 !important;
    background-color: #ff7300 !important;
    box-shadow: -2px 4px 4px -3px black;
    width: 31%;
    border-radius:8px;
    font-weight: bold;
    color: white;
    font-size: 22px;
    /* border: 0 none; */
    cursor: pointer;
}

#msform .action-button:hover, #msform .action-button:focus {
    box-shadow: 0 0 0 2px #ff7300, 0 0 0 3px #ff7300;
}

/*Previous Buttons*/
#msform .action-button-previous {
    width: 100px;
    background: #616161;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
}

#msform .action-button-previous:hover, #msform .action-button-previous:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #616161;
}

/*Dropdown List Exp Date*/
select.list-dt {
    border: none;
    outline: 0;
    border-bottom: 1px solid #ccc;
    padding: 2px 5px 3px 5px;
    margin: 2px;
}

select.list-dt:focus {
    border-bottom: 2px solid skyblue;
}

/*The background card*/
.card {
    z-index: 0;
    border: none;
    border-radius: 0.5rem;
    position: relative;
}

/*FieldSet headings*/
.fs-title {
    font-size: 25px;
    color: #2C3E50;
    margin-bottom: 10px;
    font-weight: bold;
    text-align: left;
}

/*progressbar*/
#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    color: lightgrey;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#progressbar .active {
    color: #11B99F;
}

#progressbar li {
    list-style-type: none;
    font-size: 12px;
    width: 24%;
    color: lightgray !important;
    float: left;
    position: relative;
    border: 3px solid lightgray;
    border-radius: 3rem;
    height: 90px;
    border-style: dashed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 12px;
    /* line-height: 45px; */
}


/*Icons in the ProgressBar*/

#progressbar #personal:before {
    font-family: FontAwesome;
    content: "\f007";
}

#progressbar #attachments:before {
    font-family: FontAwesome;
    content: "\f15b";
}

/*ProgressBar before any progress*/
/* #progressbar li:before {
    border: 3px solid lightgray;
    width: 300px;
    height: 91px;
    line-height: 45px;
    font-size: 18px;
    color: lightgray;
    background: #F5F7FA;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    padding: 2px;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    border-style: dashed;

} */


/*ProgressBar connectors*/
/* #progressbar li:after {
    content: '';
    width: 100%;
    height: 3px;
    background: lightgray;
    position: absolute;
    top: 40px;
    z-index: -1;
} */
/* #progressbar #attachments:after {
    width: 0%;
    background:none;
} */
/*Color number of the step and the connector before it*/
/* #progressbar li.active:before, #progressbar li.active:after {
    color: #11B99F;
    background: #F5F7FA;
    border: 3px solid #11B99F;
    border-style: dashed;

} */
#progressbar li.active{
    color: #11B99F !important;
    background: #F5F7FA;
    border: 3px solid #11B99F;
    border-style: dashed;

}

/*Fit image in bootstrap div*/
.fit-image{
    width: 100%;
    object-fit: cover;
}
fieldset{
    display: flex;
    flex-direction: column;
    align-content: stretch;
    justify-content: space-evenly;
    align-items: center;
    text-align: left;
}
fieldset label{
    font-size: medium;
    

}
fieldset .required-strick{
    font-size: 24px;
    margin-right: 8px;
    color:#ff7300 ;

}
#personal-info,#bank-info{
    display: contents;
}
.attachment-card{
    border: 2px solid lightgray;
    border-radius: 11px;
    border-style: dashed;
    background: #F5F7FA;
    padding: 30px 30px 10px 30px;
    text-align: center;
}

.upload-area{
    margin: 10px 10px 30px 10px;
}

.remove-sign {
    display: none;
    position: absolute;
    /* top: -10px;
    right: -10px; */
    border-radius: 10em;
    padding: 2px 6px 3px;
    text-decoration: none;
    font: 700 21px/20px sans-serif;
    background: #555;
    border: 3px solid #fff;
    color: #FFF;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 2px 4px rgba(0,0,0,0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    -webkit-transition: background 0.5s;
    transition: background 0.5s;
}
.remove-clone {
    top: -10px;
    right: -10px;
}
.remove-clone:hover {
    background: #E54E4E;
    padding: 3px 7px 5px;
    top: -11px;
    right: -11px;
}
.remove-sign:hover {
    background: #E54E4E;
    padding: 3px 7px 5px;
}
.remove-sign:active {
    background: #E54E4E;
 
}
.remove-image {
    top: 18px;
    margin: 1rem;
    font-size: 28px;
}
#image-preview{
    box-shadow: 6px 6px 8px 0px #c6c6c4d9;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

.doucment-height {
    height: 205px;
}

#personal-info div{
    text-align: start;
}

/* #personal-info input{
    background: white;
}

#bank-info input{
    background: white;
} */
#bank-info div{
    text-align: start;
}

#certificate-info div{
    text-align: start;
}

/* #certificate-info input{
    background: white;
} */

select ,.select2-container--default .select2-selection--single {
    background: #F5F7FA !important;
    /* border: 1px solid #aaa; */
    /* border-radius: 4px; */
}
option{
    background: white;
}

.card-container {
    display: flex;
    align-items: center;
    justify-content: center;
    /* width: 200px; Adjust as needed */
    height: 100px; 
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e5e5;
    padding: 10px;
}

.card-container .icon img {
    width: 40px; /* Adjust as needed */
    height: auto;
    margin-right: 10px;
    margin: 3px
}
.card-container .icon {
    margin: 7px
}

.card-container .text {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 7px
}

</style>
@endsection

@section('breadcrumb')
<div class="row breadcrumbs-top">
    <div class="breadcrumb-wrapper col-xs-12">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">@lang('companyuser::sidebar.VomPay')</li>
            <li class="breadcrumb-item active"><a href="#">@lang('companyuser::sidebar.User Information')</a></li>
        </ol>
    </div>
</div>
@endsection
@section('content')
<section id="configuration">
    <div class="container-fluid">
        <div class="row">            
            <input id="supplier-code" value="{{$supplierCode}}" hidden>
            @if($type == 'individual')
                @include('vompay::Forms.show.individualForm.index')
            @elseif($type == 'cooperative')
                @include('vompay::Forms.show.cooperativesForm.index')
            @else
                @include('vompay::Forms.show.companyForm.index')
            @endif
        </div>
    </div>
</section>

         {{-- Modal --}}
         <div class="modal fade" id="stepOneConfirmationMessage" tabindex="-1" role="dialog" aria-labelledby="invoiceLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="invoiceLabel">@lang('Warning')</h4>
                    </div>
                    <div class="modal-body">
                        <p>
                            @lang('vompay::vompay.stepOneConfirmationMessage')
                        </p>
                    </div>
                    <div class="modal-footer text-center">
                            <button type="button" class="btn btn-primary mx-1" data-dismiss="modal">{{__('Cancel')}}</button>           
                            <button type="button" id="continue" class="btn btn-primary mx-1" data-dismiss="modal">{{__('OK')}}</button>
                    </div>
                </div>
            </div>
        </div>
@endsection
@section('extra_scripts')

<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js"></script>
<script src="https://secure.gosell.io/js/sdk/tap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
        window.addEventListener('DOMContentLoaded', function() {
            $('.bank-selection').change()
            $('#country_code').attr('disabled',true);
            $(document).ready(function(){

                let current_fs, next_fs, previous_fs; //fieldsets
                let opacity;

                if($('#supplier-code').val().length !== 0)
                {
                    current_fs = $("#next").parent();
                    next_fs = $("#next").parent().next();
                    // let form = current_fs.data('form');
                    moveToNextStep();
                }

                $("#next").click(function(e){                    
                    // current_fs = $(this).parent();
                    // next_fs = $(this).parent().next();
                    $('#stepOneConfirmationMessage').modal()

                });

                $('#continue').click(function () {
                    current_fs = $("#next").parent();
                    next_fs = $("#next").parent().next();
                    $('input').css('border-color', '#ccc');
                    let myfatoorah_errors = $('.myfatoorah-errors');
                    let allErrorMessages = document.querySelectorAll('.invalid-feedback');

                    $.ajax({
                        url: "{{route('company.vompay-suppliers.store', request('subdomain'))}}",
                        type: 'POST',
                        headers:{
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                            'Accept-Language': '{{app()->getLocale()}}',
                        },
                        data: $('.supplier-info').serialize(),
                        dataType: "json",
                        success: function(response) 
                        {
                            $(allErrorMessages).empty()
                            if(response.data.status == true)
                            {
                                myfatoorah_errors[0].style.display ="none";
                                moveToNextStep()
                            }else{
                                myfatoorah_errors[0].style.display ="block";
                                let errorsCard = myfatoorah_errors.find('ul');
                                errorsCard.empty()
                                $.each(response.data.errors,function (index,value){
                                    errorsCard.append(`<li>${value.Name} : ${value.Error}</li>`);                                    
                                })

                            }
                        },
                        error: function(xhr, status, error) {
                            let errors = xhr.responseJSON.errors;
                            $('.invalid-feedback').html(' ');
                            for (const errIndex in errors) {    
                                let errInput = $('[name='+errIndex+']');
                                let divParent = errInput.closest('div');
                                let errMsg = divParent.find('.invalid-feedback');
                                errInput[0].style.borderColor = 'red';
                                errMsg.html(errors[errIndex][0].replace('The VomPay::suppliers.',''));
                            }
        
                        },
                        complete: function(data) {
                            // $('#add-journalEntry-btn').attr('disabled', false);
                        }
                    })
                });


                function moveToNextStep() {
                    //Add Class Active
                    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
                    //show the next fieldset
                    next_fs.show(); 
                    //hide the current fieldset with style
                    current_fs.animate({opacity: 0}, {
                    step: function(now) {
                        // for making fielset appear animation
                        opacity = 1 - now;
                            
                        current_fs.css({
                            'display': 'none',
                            'position': 'relative'
                        });
                        next_fs.css({'opacity': opacity});
                        }, 
                        duration: 600
                    });
                    // }
                    
                }
                
                const validateImages = () => {
                    const imageInputs = $('.image-input');
                    let isValid = true;

                    imageInputs.each((index, input) => {
                        const attachmentCard = $(input).closest('.attachment-card');
                        const errorMsg = attachmentCard.find('.invalid-feedback');

                        if (input.files.length === 0) {
                            attachmentCard.css('borderColor', 'red');
                            errorMsg.text('This file is required');
                            isValid = false;
                        } else {
                            attachmentCard.css('borderColor', '');
                            errorMsg.text('');
                        }
                    });

                    return isValid;
                };


                const setupNationalIDListeners = () => {
                    const imageNationalIDInputs = document.querySelectorAll('body .national-id-file')
                    imageNationalIDInputs.forEach(image => {
                            imageInputChangeListener(null, 'upload',image);
                    });
                             
                };


                const activateAccount = () => {
                    return new Promise((resolve, reject) => {
                        $.ajax({
                            url: "{{route('company.vompay-suppliers.active', request('subdomain'))}}",
                            type: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                                'Accept-Language': '{{app()->getLocale()}}',
                            },
                            dataType: 'json',
                            contentType: false,
                            processData: false,
                            success: (response) => {
                                if (response.errors === null && response.success === true) {
                                    resolve(response);
                                } else {
                                    reject(new Error('Activation failed'));
                                }
                            },
                            error: (xhr, status, error) => {
                                reject(error);
                            }
                        });
                    });
                };
                const showModal = (showId,hideId,showFooter = true) => {
                    $('#submitMessage .modal-body #'+hideId).hide();
                    $('#submitMessage .modal-body #'+showId).show();
                    $('#submitMessage .modal-footer').toggle(showFooter);
                    $('#submitMessage').modal();
                };
                $(".submit").click(() => {
                    if (validateImages()) {
                        setupNationalIDListeners();
                        
                        activateAccount()
                            .then(() => {
                                showModal('success','error');
                            })
                            .catch((error) => {
                                // console.error('Activation error:', error);
                                showModal('error','success', false);
                            });
                    }
                });
                
                
            });
            
            /*-----------------Upload Attachments-----------------*/
            const imageInputs = document.querySelectorAll('body .image-input');


            imageInputs.forEach(imageInput => {
                imageInput.addEventListener('change',function (event) {
                    imageInputChangeListener(event,'image-validation',null)
                });
                if (!$(imageInput).hasClass('national-id-file')) {
                    imageInput.addEventListener('change',function (event) {
                        imageInputChangeListener(event,'upload',null)
                    });
                }
            });


        });

        function imageInputChangeListener(event,routeName,image) {
                
            const inputElement = (image != null) ? image:event.target;

            const file = inputElement.files[0];
            const attachmentCard = $(inputElement).closest('.attachment-card');

            const uploadArea = attachmentCard.find('.upload-area');
            const uploadButton = uploadArea.find('.upload-button');
            const previewContainer = attachmentCard.find('#preview-container');
            const imagePreview = previewContainer.find('#image-preview');
            const documentType = $(inputElement).data('type');
            const errorMsg = attachmentCard.find('.invalid-feedback');

                    if (file) {
                        const reader = new FileReader();
                        const fileName = file.name;
                        let fileTypeDetected = false;
                        let fileIcon = null;


                        const extensions = {
                            'pdf': ['pdf'],
                            'xls': ['xls'],
                            'xlsx': ['xlsx'],
                            'doc': ['doc'],
                            'docx': ['docx'],
                            'bmp': ['bmp'],
                            'gif': ['gif']
                        };

                        const fileExtension = fileName.split('.').pop().toLowerCase();

                        for (const [key, exts] of Object.entries(extensions)) {
                            if (exts.includes(fileExtension)) {
                                fileTypeDetected = true;
                                fileIcon =` {{ asset("img/file-icons/`+fileExtension+`.png") }}`;
                                break;
                            }
                        }

                        reader.onload = function (e) {
                            if (fileTypeDetected)
                            {
                                imagePreview[0].src = fileIcon;
                            }else
                            {
                                // imagePreview[0].style.boxShadow  ='6px 6px 8px 0px #c6c6c4d9;'
                                imagePreview[0].src = e.target.result;
                            }
                            previewContainer[0].style.display = 'block';
                            uploadButton[0].style.display = 'none'
                            attachmentCard[0].style.backgroundColor = 'white'
                            attachmentCard[0].style.borderColor = '#11B99F'
                            attachmentCard[0].style.borderStyle = 'double'
                        };
                        
                        var formData = new FormData();
                        formData.append("type", JSON.stringify(documentType));
                        formData.append('document',file);

                        const baseUrl = "{{ url('vompay/suppliers') }}";
                        const route = `${baseUrl}/${routeName}`;

                        $.ajax({
                            url: route,
                            type: 'POST',
                            headers:{
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                                'Accept-Language': '{{app()->getLocale()}}',
                            },
                            data:formData,

                            dataType: 'json',
                            contentType: false,
                            processData: false,
                            success: function(response) 
                            {
                                // if( (routeName == 'upload' && response.data.errors == null && response.data.status == true) ||
                                if (routeName == 'image-validation' && response.status == 200 && response.success == true){
                                    errorMsg.html(' ');
                                    reader.readAsDataURL(file);
                                }
                            
                            },
                            error: function(xhr, status, error) {
                                attachmentCard[0].style.borderColor = 'red'
                                errorMsg.html(xhr.responseJSON.errors['document'][0]);
                            }
                        })
                    } else {
                        previewContainer[0].style.display = 'none';
                    }
        }
        /*---------------------Bank Name----------------------*/
        $('.bank-selection').change(function(){
                let bank_name = $('.bank-selection option:selected').text();
                $('[name="bank_name"]').val(bank_name.trim());
        })
  

        /*--------------------Delete Image--------------------*/
        $('.remove-image').click(removeImageEventlistener);

        function removeImageEventlistener(){
            const attachmentCard = $(this).closest('.attachment-card');
            const uploadArea = attachmentCard.find('.upload-area');
            const uploadButton = uploadArea.find('.upload-button');
            const img = attachmentCard.find('#image-preview');
            const previewContainer = attachmentCard.find('#preview-container');

            previewContainer[0].style.display = 'none';
            uploadButton[0].style.display = 'block';
            attachmentCard[0].style.backgroundColor = '#F5F7FA';
            attachmentCard[0].style.borderColor = 'lightgray';
            attachmentCard[0].style.borderStyle = 'dashed';
        }

        function togglePersonalInfoDiv() {
            
            let div = document.getElementById("personal-info");
            if (div.style.display === "none") {
                div.style.display = "contents";
            } else {
                div.style.display = "none";
            }
        }

        function toggleBankInfoDiv() {
            
            let div = document.getElementById("bank-info");
            if (div.style.display === "none") {
                div.style.display = "contents";
            } else {
                div.style.display = "none";
            }
        }

        function toggleDiv(divId) {
            
            let div = document.getElementById(divId);
            if (div.style.display === "none") {
                div.style.display = "contents";
            } else {
                div.style.display = "none";
            }
        }

        /*---------------------Clone Board Member ---------------------*/
        let count = 1 ;
        $('.board-member-clone-btn').click(function (evt){
            count++;

            $('.board-member-number').html(count);
            let attachmentsParentDiv = $('.attachments');
            let attachmentCard = $('#card-1');
            let attachmentCardClone = attachmentCard.clone();
            const uploadArea = attachmentCardClone.find('.upload-area');
            const uploadButton = uploadArea.find('.upload-button');
            const previewContainer = attachmentCardClone.find('#preview-container');
            const errorMsg = attachmentCardClone.find('.invalid-feedback');

            previewContainer[0].style.display = 'none';
            uploadButton[0].style.display = 'block';
            attachmentCardClone[0].style.backgroundColor = '#F5F7FA';
            attachmentCardClone[0].style.borderColor = 'lightgray';
            attachmentCardClone[0].style.borderStyle = 'dashed';
            errorMsg.html(' ');

            attachmentCardClone.attr('id','card-'+count)
            attachmentsParentDiv.append(attachmentCardClone);
            attachEventListenerToClone(attachmentCardClone);
            attachmentCardClone.find('.remove-image').click(removeImageEventlistener);
            let removeClone = attachmentCardClone.find('.remove-clone');
            removeClone[0].style.display = 'inline';
            $(removeClone).click(removeCloneDiv);
            sessionStorage.setItem("cloneNumber", count);


        })
  
        // Function to attach the event listener to the cloned div
        function attachEventListenerToClone(attachmentCardClone){
            attachmentCardClone.find('.image-input').each(function () {
                $(this).off('change'); // Remove any existing event listeners to avoid duplicates
                $(this).on('change',function (event) {
                    imageInputChangeListener(event,'image-validation',null)
                });
            });
        }

        /*------------------------remove clone------------------------------*/

        function removeCloneDiv() {
              let parent = $(this).parent();
              parent.remove();
              count--;
              $('.board-member-number').html(count);
        }


</script>
@endsection