@extends('layouts.app')
@section('title', $viewData["title"])
@section('subtitle', $viewData["subtitle"])
@section('content')

<div class="card mb-4">
    <div class="card-body">
        @if($errors->any())
        <ul class="alert alert-danger list-unstyled">
            @foreach($errors->all() as $error)
            <li>- {{ $error }}</li>
            @endforeach
        </ul>
        @endif
        <form method="get" action="{{ route('source_collector_management.display_search_status') }}">
            @csrf
            <div class="row">
                <div class="col">
                    <div class="input-group mb-3">
                        <label class="input-group-text">CUSTOMER</label>
                        <select class="form-select form-control" aria-label="search_id" name="search_id">
                            @if ($viewData['data']->count() == 0)
                            <option selected>Please select a customer</option>
                            @foreach ($viewData["all_customers"] as $customer)
                            <option value="{{ $customer->get_id()  }}">{{ $customer->get_customer_name() }}</option>
                            @endforeach
                            @else
                            @foreach ($viewData["all_customers"] as $customer)
                            <option {{ $viewData['customer']->get_id()==$customer->get_id() ? 'selected':''}}
                                value="{{ $customer->get_id()  }}">{{ $customer->get_customer_name() }}</option>
                            @endforeach
                            @endif
                        </select>
                    </div>
                </div>
                <div class="col">
                    <button type="submit" class="btn btn-primary">SEARCH</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="" style="display: none;" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Source collector message</h5>
                <button type="button" class="btn-close" aria-label="Close" id="close_modal"></button>
            </div>
            <div class="modal-body" id="modal_body" style="background-color: #fbd0ce;">
            @foreach ($viewData['data'] as $active_customer)
                @if ($active_customer->count())
                    @foreach ($active_customer['source'] as $active_source)
                    <div id="{{ $viewData['unique_key'] }}_button_manual_source_{{  $active_source['customer_id'] }}_{{ $active_source['source_id'] }}_1"></div>
                    <div id="{{ $viewData['unique_key'] }}_button_manual_source_{{  $active_source['customer_id'] }}_{{ $active_source['source_id'] }}_2"></div>
                    @endforeach
                @endif
            @endforeach
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        Source Collector
    </div>
    <div class="card-body">
        @if ($viewData['data']->count() == 0)
        Please select a customer to collect the sources
        @endif

        @foreach ($viewData['data'] as $active_customer)
        @if ($active_customer->count())
        <div class="row g-3">
            <div class="col-md-12 text-center">
                <h4>{{ $active_customer->get('customer_name') }}</h4>
            </div>
            <hr class="mx-auto" style="width:50%">
            <div class="col-12">
                <table class="table table-borderless">
                    <tr>
                        <td>
                            <B>Validity of Customer credentials : </B>
                            @if ($active_customer->get('token') === 1)
                            <i class="bi-key text-success"
                                title="Customer credentials are valid to get a token from editor API"> OK</i>
                            @else
                            <i class="bi-key text-danger"
                                title="Customer credentials are not valid to get a token from editor API"> NOK -
                                warning</i>
                            @endif
                        </td>
                        <td>
                            <B>Editor API availability : </B>
                            @if ($active_customer->get('download') === 1)
                            <i class="bi-cloud-download text-success" title="Editor API is available"> OK</i>
                            @else
                            <i class="bi-cloud-download text-danger" title="Editor API can't be reached"> NOK -
                                warning</i>
                            @endif
                        </td>
                        <td>
                            <B>FTP availability : </B>
                            @if ($active_customer->get('ftp') === 1)
                            <i class="bi-hdd-network text-success" title="FTP server to store sources is available">
                                OK</i>
                            @else
                            <i class="bi-hdd-network text-danger" title="FTP server to store sources can't be reached">
                                NOK - warning</i>
                            @endif
                        </td>
                    </tr>
                </table>
            </div>
            <hr class="mx-auto" style="width:50%">
            <div class="col-12 text-center">
                <a class="btn btn-primary btn-sm" id="open_link"
                    data-attr="{{ route('source_collector_management.manual_download', ['customer_id'=> $active_customer->get('customer_id')]) }}"
                    title="Collect all the sources for this customer now">
                    <i class="bi-save2"></i> Collect all sources for
                    {{ $active_customer->get('customer_name') }}
                </a>
            </div>

            <hr class="mx-auto" style="width:50%">


            <div class="col-12">
                <table class="table table-hover table-borderless">
                    <tr>
                        <th>Sources</th>
                        <th>Last collector date</th>
                        <th>File name</th>
                        <th>Collect source</th>
                    </tr>
                    @foreach ($active_customer['source'] as $active_source)
                    <tr>
                        <td>{{ $active_source['source_name'] }}</td>
                        <td id="{{ $viewData['unique_key'] }}_button_manual_source_{{  $active_source['customer_id'] }}_{{ $active_source['source_id'] }}_last_collect_date">
                            {{ $active_source['last_collect_date'] }}</td>
                        <td id="{{ $viewData['unique_key'] }}_button_manual_source_{{  $active_source['customer_id'] }}_{{ $active_source['source_id'] }}_last_collect_file">
                            {{ $active_source['last_collect_file'] }}</td>
                        <td>
                            <button
                                id="button_manual_source_{{  $active_source['customer_id'] }}_{{ $active_source['source_id'] }}"
                                type="button" class="btn btn-primary btn-sm" style="font-size: 0.75rem;"
                                title="Collect {{ $active_source['source_name'] }} source"
                                value_customer="{{  $active_source['customer_id'] }}"
                                value_source="{{ $active_source['source_id'] }}" onclick="button_manual_source(this)">
                                <i class="bi-save" style="font-size: 0.75rem;"></i> Collect source</button>
                        </td>
                    </tr>
                    @endforeach
                </table>
            </div>

        </div>
        <form method="POST" action="{{ route('source_collector_management.manual_download_source') }}"
            id="form_manual_download_source">
            @csrf
            <input id="unique_key" name="unique_key" type="hidden" value="">
            <input id="customer_id" name="customer_id" type="hidden" value="">
            <input id="source_id" name="source_id" type="hidden" value="">
        </form>
        <form method="POST" action="{{ route('source_collector_management.check_log_source') }}"
            id="form_check_log_source">
            @csrf
            <input id="log_source_unique_key" name="log_source_unique_key" type="hidden" value="">
        </form>

        <BR><BR>
        @endif
        <hr class="py-1">
        <BR><br>
        @endforeach


    </div>
</div>

<script>
//-----------------------------------------------------------------------------------
class Timer {

    constructor() {
        this.is_running = false;
        this.start_time = 0;
        this.overall_time = 0;
        this.duration = 0;
        this.interval_ref = null;
    }

    timer_manager_start(updateFunction, parent,time) 
    {
        var local = null;
        local = setInterval(function() 
        {
            parent.check_end(parent);
            updateFunction(parent);                
        }, time);
        return local;
    }
    
    timer_manager_stop(parent)
    {
        clearInterval(parent.interval_ref);
    }

    check_end(parent) 
    {
       parent.overall_time = (Date.now() - parent.start_time); 
       if (parent.overall_time >=  parent.duration) 
       {
            parent.stop();
       }
    }

    onUpdateTimer(parent) 
    {
        //A chaque interruption, cette fonction est appellée
        //une requete est envoyée au serveur pour savoir ou en sont les downloads

        //on modifie le form pour envoyer une requete correspond aux download identifiés dans le tableau
        $("#log_source_unique_key").val(unique_key);
        let donnee_form = $("#form_check_log_source").serialize();
        let href = $("#form_check_log_source").attr('action');  

        //envoi de la requete
        $.ajax({
        type: "POST",        
        url: href,
        data: donnee_form,                
        beforeSend: function() {
            $('#loader').show();
        },
        // return the result
        success: function(result) {
            //le retour est un objet json qui est analysé
            var result_length = result.length;
            for (var i = 0; i < result_length; i++) 
            {
                //console.log(result[i]["key"] + " - " + result[i]["message"]);
                var json_key = result[i]["key"];
                //si la clé retournée dans le json est présente dans le tableau des downloads, alors nous avons un retour à traiter
                if (array_sources.hasOwnProperty(json_key))
                {
                    //console.log("key trouvee");
                    //afiche le message de retour
                    var div_cible = "#" + json_key +"_2";
                    $(div_cible).html(" >> " + result[i]["message"]).show();   

                    //Met à jour le nom du fichier et la date
                    div_cible = "#" + json_key +"_last_collect_date";
                    $(div_cible).html(result[i]["file_date"]).show();    
                    div_cible = "#" + json_key +"_last_collect_file";
                    $(div_cible).html(result[i]["file_name"]).show();    

                    //on reactive le bouton
                    $("#" + array_sources[json_key]).prop('disabled', false)

                    //supprime l'enregistrement du tableau
                    delete array_sources[json_key];

                    //calcul la taille du tableau array_sources
                    var size = 0;
                    for (var entree in array_sources) 
                    {
                        if (array_sources.hasOwnProperty(entree)) size++;
                    }
                    //console.log("taille tableau : " + size);
                    //si la taille est nulle on arrete le timer
                    if (size == 0)
                    {
                        //console.log("arrete le timer ");
                        timer.stop();
                    }
                }
            }
        },
        complete: function() {
            $('#loader').hide();
        },
        error: function(jqXHR, testStatus, error) {
            console.log(error);
            alert("Page " + href + " cannot open. Error:" + error);
            $('#loader').hide();
        },
        timeout: 8000
        })
    }

    start() {
        if (this.is_running) {
        } else {
            if (this.interval_ref == null) {
                this.is_running = true;
                this.start_time = Date.now();
                //Duree de 4 minutes
                //Rafraichissement toutes les 2 secondes
                this.duration = 240000;
                this.interval_ref = this.timer_manager_start(this.onUpdateTimer,this,2000);
            }
        }
    }

    stop() {
        if (!this.is_running) {
        } else {
            this.is_running = false;
            this.timer_manager_stop(this);
            this.interval_ref = null;
        }
    }
}

//--------------------------------------------------------------------------------

//stockage des sources en cours de telechargement
var array_sources = new Array();

//generation d'une clé unique pour identifier les telechargements de la page
//var unique_key = Date.now() + Math.floor(Math.random() * 100000000);
var unique_key = "{{ $viewData['unique_key'] }}";

//creation d'un timer
const timer = new Timer();

//appui sur un bouton download source 
function button_manual_source(ref_button) 
{
    var str_id_button = $(ref_button).attr('id');
    var button_unique_key = unique_key + '_' + str_id_button;
    //cree une nouvelle entree dans le tableau array_sources pour suivre les telechargements 
    array_sources[button_unique_key] = $(ref_button).attr('id');

    //rend inactif le bouton concerné
    //$(ref_button).disabled = true;
    $(ref_button).blur();    
    $(ref_button).prop('disabled', true)

    //on lance le timer
    timer.start();

    //envoi de la requete
    $("#unique_key").val(button_unique_key);
    $("#customer_id").val($(ref_button).attr('value_customer'));
    $("#source_id").val($(ref_button).attr('value_source'));
    let donnee_form = $("#form_manual_download_source").serialize();
    let href = $("#form_manual_download_source").attr('action');
    $.ajax({
        type: "POST",
        url: href,
        data: donnee_form,
        beforeSend: function() {
            $('#loader').show();
        },
        // return the result
        success: function(result) {
            $('#myModal').css("display", "block");
            $('#' + button_unique_key + "_1").html(result).show();
            $('#' + button_unique_key + "_2").html(" > Running...").show();
        },
        complete: function() {
            $('#loader').hide();
        },
        error: function(jqXHR, testStatus, error) {
            console.log(error);
            alert("Page " + href + " cannot open. Error:" + error);
            $('#loader').hide();
        },
        timeout: 8000
    })
};

$(document).on('click', '#close_modal', function(event) {
    //on force le rechargement de la page lorsque l'on ferme le div
    location.reload();
});

$(document).on('click', '#open_link', function(event) {
    //on lance tous les downloads, comme si on appuyait sur les boutons, ils sont décalés de 500 ms
    event.preventDefault();

    delai_lancement = 0;
    $("button").each(function() 
    {
        if ($(this).prop('id').substring(0, 20) == "button_manual_source") 
        {
            console.log((" Creation - " + Date.now() - parent.start_time) +  " " + delai_lancement);
            setTimeout(() => {
                button_manual_source(this);
            }, delai_lancement);
        }
        delai_lancement = delai_lancement + 500;
    });
});

</script>
@endsection