{% extends 'base.html.twig' %}

{% form_theme form 'form/fields.html.twig' %}

{% block body %}

    <!-- BEGIN PAGE BAR -->
    <div class="page-bar">
        
        <!-- BEGIN BREADCRUMB -->
        <ul class="page-breadcrumb">
            <li>
                <a href="{{ path('homepage') }}">Accueil</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <a href="{{ path('vehicule_index') }}">Véhicule</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <span>Ajouter</span>
            </li>
        </ul>
        <!-- END BREADCRUMB -->
    </div>

    <br/>

    <div class="row">
        <div class="col-lg-7 col-xs-12 col-sm-12">

            <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="icon-settings"></i>
                        <span class="caption-subject">Ajouter un véhicule</span>
                    </div>
                </div>

                <div class="portlet-body form">
                    
                    {{ form_start(form, {'attr': {'class': 'form-horizontal', 'enctype': 'multipart/form-data'}}) }}
                        <div class="form-body">
                            {% if error_message %}
                                <div class="alert alert-danger">{{ error_message }}</div>
                            {% endif %}
                            <div class="form-group" style="margin-bottom:20px;">
                                <label for="cg-upload" class="control-label col-md-3">Carte grise</label>
                                <div class="col-md-9">
                                    <div class="input-group">
                                        <span class="input-group-btn">
                                            <span class="btn blue fileinput-button">
                                                <i class="fa fa-upload"></i>
                                                <span>Importer une image/PDF</span>
                                                <input id="cg-upload" type="file" accept="image/*,application/pdf" style="position:absolute;left:-9999px;" />
                                            </span>
                                        </span>
                                        <input id="cg-upload-name" type="text" class="form-control" placeholder="Aucune image sélectionnée" readonly>
                                        <span class="input-group-addon" id="cg-parse-spinner" style="display:none;">
                                            <i class="fa fa-spinner fa-spin"></i>
                                        </span>
                                    </div>
                                    <span class="help-block">Ajoutez ou scanner une photo (ou PDF) de la carte grise pour pré-remplir le formulaire automatiquement.</span>
                                    <div id="cg-upload-alert" class="alert" style="display:none; margin-top:10px;"></div>
                                </div>
                            </div>
                            {{ form_widget(form) }}
                        </div>
                        <div class="form-actions">
                            <div class="row">
                                <div class="col-md-9">
                                    <a href="{{ path('vehicule_index') }}" class="btn default"><i class="fa fa-arrow-left"></i> Retour</a>
                                    <button type="submit" class="btn green"><i class="fa fa-save"></i> Enregistrer</button>
                                </div>
                            </div>
                        </div>
                    {{ form_end(form) }}
                </div>
            </div>
        </div>

        <div class="col-lg-5 col-xs-12 col-sm-12">
            <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="icon-settings"></i>
                        <span class="caption-subject">Détails</span>
                    </div>
                </div>

                <div class="portlet-body form">
                    <table class="table">
                        <tr>
                            <td><strong>Client:</strong></td>
                            <td style="text-align:right;">
                                <a href="#change_client" data-target="#change_client" data-toggle="modal" class="client-label">Sélectionner le client</a>
                            </td>
                        </tr>
                        
                    </table>
                    
                </div>
            </div>
        </div>

        <!-- Portlet: Aperçu du fichier importé -->
        <div class="col-lg-5 col-xs-12 col-sm-12">
            <div id="cg-preview-portlet" class="portlet light bordered" style="display:none;">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="icon-doc"></i>
                        <span class="caption-subject">Aperçu du fichier importé</span>
                    </div>
                </div>
                <div class="portlet-body form">
                    <div id="cg-preview-wrapper" style="margin-top:5px;">
                        <div id="cg-preview" class="well" style="padding:10px; border:1px solid #e5e5e5; background:#fafafa;"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- /.modal client -->
    <div id="change_client" class="modal fade" tabindex="-1" data-width="400">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Fermer"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Client</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <input id="nom-client" type="text" class="col-md-12 form-control" placeholder="Rechercher un client déjà existant (Nom, Prénom, Société...)">
                            <br>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mt-element-list">
                                <div class="mt-list-container list-simple ext-1">
                                    <ul id="liste-clients">
                                    
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <a class="btn green" data-toggle="modal" href="{{ path('client_new') }}" target="_blank"> Ajouter un nouveau client </a>
                    <button type="button" data-dismiss="modal" class="btn dark btn-outline">Fermer</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal: JSON details -->
    <div id="cg-json-modal" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Fermer"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Détails de l'analyse</h4>
                </div>
                <div class="modal-body">
                    <div id="cg-json-tree" class="cg-json-tree" style="max-height:60vh; overflow:auto;"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn dark btn-outline">Fermer</button>
                </div>
            </div>
        </div>
    </div>

    <style>
        /* Lightweight JSON tree styles */
        .cg-json-tree { font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; }
        .cg-json-tree ul { list-style: none; margin: 4px 0; padding-left: 12px; border-left: 1px dashed #e0e0e0; }
        .cg-json-tree .cg-node { margin: 2px 0; }
        .cg-json-tree .cg-head { display: flex; align-items: center; gap: 6px; }
        .cg-json-tree .cg-toggle { cursor: pointer; width: 14px; text-align: center; color: #666; }
        .cg-json-tree .cg-key { color: #2a6; }
        .cg-json-tree .cg-type { color: #999; font-style: italic; }
        .cg-json-tree .cg-value-string { color: #c22; }
        .cg-json-tree .cg-value-number { color: #22c; }
        .cg-json-tree .cg-value-boolean { color: #a3a; }
        .cg-json-tree .cg-value-null { color: #999; }
        .cg-json-tree .cg-children { display: none; }
        .cg-json-tree .cg-empty-toggle { display: inline-block; width: 14px; }
    </style>

   
{% endblock %}

{% block javascripts %}

<script>

$(document).ready(function()
{
    
    // Allow clicking the visible button to open the file dialog
    $(document).on('click', '.fileinput-button', function(e){
        // If the click isn't directly on the input itself, trigger it
        if(e.target && e.target.id !== 'cg-upload'){
            e.preventDefault();
            $('#cg-upload').trigger('click');
        }
    });

    // Carte grise upload & parsing
    $('#cg-upload').on('change', function() {
        const file = this.files && this.files[0] ? this.files[0] : null;
        const $name = $('#cg-upload-name');
        const $spinner = $('#cg-parse-spinner');
        const $alert = $('#cg-upload-alert');
        $alert.hide();
        if(!file){
            $name.val('Aucune image sélectionnée');
            // Hide preview if no file
            $('#cg-preview-wrapper').hide();
            $('#cg-preview-portlet').hide();
            return;
        }
        $name.val(file.name);

        // Build local preview
        try{
            // Revoke previous blob URL if any
            if(window.cgPreviewUrl){
                try{ URL.revokeObjectURL(window.cgPreviewUrl); }catch(_e){}
            }
            const previewUrl = URL.createObjectURL(file);
            window.cgPreviewUrl = previewUrl;
            const $wrapper = $('#cg-preview-wrapper');
            const $preview = $('#cg-preview');
            let html = '';
            if(file.type && file.type.indexOf('image/') === 0){
                html = '<img src="'+ previewUrl +'" alt="Aperçu de l\'image" style="max-width:100%;height:auto;display:block;border:1px solid #ddd;" />';
            } else if(file.type === 'application/pdf' || /\.pdf$/i.test(file.name)){
                // Prefer embed, fallback to link
                html = ''+
                    '<div class="embed-responsive" style="height:500px;border:1px solid #ddd;background:#fff;">'+
                        '<embed src="'+ previewUrl +'" type="application/pdf" width="100%" height="100%" />'+
                    '</div>'+
                    '<div style="margin-top:6px;"><a href="'+ previewUrl +'" target="_blank"><i class="fa fa-external-link"></i> Ouvrir dans un nouvel onglet</a></div>';
            } else {
                html = '<div><i class="fa fa-file-o"></i> '+ $('<div/>').text(file.name).html() +' ('+ (file.type || 'type inconnu') +') - <a href="'+ previewUrl +'" target="_blank">ouvrir</a></div>';
            }
            $preview.html(html);
            $wrapper.show();
            $('#cg-preview-portlet').show();
        }catch(previewErr){
            // If preview fails, just hide container silently
            $('#cg-preview-wrapper').hide();
            $('#cg-preview-portlet').hide();
        }

    const formData = new FormData();
    formData.append('carte_grise', file);
        $spinner.show();

        // Show larger loading alert with progress
        $alert
            .removeClass('alert-success alert-warning alert-danger')
            .addClass('alert-info')
            .html(
                '<div style="display:flex;align-items:flex-start;gap:10px;">\
                    <i class="fa fa-spinner fa-spin fa-2x"></i>\
                    <div style="flex:1;min-width:0;">\
                        <div><strong>Envoi du fichier…</strong></div>\
                        <div id="cg-status-detail" class="text-muted">Analyse en cours…</div>\
                        <div class="progress" style="margin-top:8px;margin-bottom:0;width:100%;">\
                            <div id="cg-upload-progress" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:0%">0%</div>\
                        </div>\
                    </div>\
                </div>'
            )
            .show();

        $.ajax({
            url: base_url + 'ajax/parsecartegrise',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            dataType: 'json',
            xhr: function(){
                var xhr = $.ajaxSettings.xhr();
                if(xhr && xhr.upload){
                    xhr.upload.addEventListener('progress', function(e){
                        if(e.lengthComputable){
                            var pct = Math.round((e.loaded / e.total) * 100);
                            $('#cg-upload-progress').css('width', pct + '%').attr('aria-valuenow', pct).text(pct + '%');
                            if(pct >= 100){
                                $('#cg-status-detail').text('Analyse en cours…');
                            }
                        }
                    }, false);
                }
                return xhr;
            }
        }).done(function(resp){
            if(resp && resp.data){
                const d = resp.data;
                if(d.vin){
                    $('#appbundle_vehicule_reference').val(d.vin).trigger('change');
                }
                if(d.immatriculation){
                    $('#appbundle_vehicule_immatriculation').val(d.immatriculation).trigger('change');
                }
                if(d.marque){
                    $('#appbundle_vehicule_marque').val(d.marque).trigger('change');
                }
                if(d.modele){
                    $('#appbundle_vehicule_modele').val(d.modele).trigger('change');
                }
                if(d.date_mise_en_circulation){
                    $('#appbundle_vehicule_dateMiseEnCirculation').val(d.date_mise_en_circulation).trigger('change');
                }
                if(d.energie){
                    // Try to match select option text/value
                    const energie = d.energie;
                    const $select = $('#appbundle_vehicule_energie');
                    // Direct value set if exact match
                    if($select.find('option[value="'+energie+'"]').length){
                        $select.val(energie).trigger('change');
                    }else{
                        // Try case-insensitive contains
                        let matched = null;
                        $select.find('option').each(function(){
                            const txt = $(this).text().toLowerCase();
                            if(energie && txt.indexOf(energie.toLowerCase()) !== -1){ matched = $(this).val(); }
                        });
                        if(matched){ $select.val(matched).trigger('change'); }
                    }
                }
                // Store last response to show in modal
                window.cgLastParse = resp;
                // Success message with info icon to view details
                $alert
                    .removeClass('alert-info alert-warning alert-danger')
                    .addClass('alert-success')
                    .html(
                        '<div style="display:flex;align-items:center;gap:10px;">\
                            <i class="fa fa-check-circle fa-2x"></i>\
                            <div>\
                                <div><strong>Données extraites et appliquées au formulaire.</strong></div>\
                                <a href="#" id="cg-show-json"><i class="fa fa-info-circle"></i> Voir les détails</a>\
                            </div>\
                        </div>'
                    )
                    .show();
            } else {
                $alert.removeClass('alert-success').addClass('alert-warning').text('Analyse terminée mais aucune donnée exploitable n’a été trouvée.').show();
            }
        }).fail(function(xhr){
            let msg = 'Erreur lors de l\'analyse de la carte grise.';
            if(xhr && xhr.responseJSON && xhr.responseJSON.error){ msg += ' ' + xhr.responseJSON.error; }
            $alert.removeClass('alert-success').addClass('alert-danger').text(msg).show();
        }).always(function(){
            $spinner.hide();
        });
    });

    // JSON tree utilities
    function cgEscapeHtml(str){
        return String(str)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
    }

    function cgRenderValueSpan(val){
        var t = typeof val;
        if(val === null){ return $('<span class="cg-value-null">null<\/span>'); }
        if(t === 'string'){ return $('<span class="cg-value-string">"'+ cgEscapeHtml(val) +'"<\/span>'); }
        if(t === 'number'){ return $('<span class="cg-value-number">'+ val +'<\/span>'); }
        if(t === 'boolean'){ return $('<span class="cg-value-boolean">'+ val +'<\/span>'); }
        return $('<span class="cg-type">'+ cgEscapeHtml(Object.prototype.toString.call(val)) +'<\/span>');
    }

    function cgCreateNode(value, key){
        var isArr = Array.isArray(value);
        var isObj = value && typeof value === 'object' && !isArr;
        var hasChildren = false;
        var keys = [];
        if(isArr){ hasChildren = value.length > 0; }
        else if(isObj){ keys = Object.keys(value); hasChildren = keys.length > 0; }

        var $li = $('<li class="cg-node"><\/li>');
        var $head = $('<div class="cg-head"><\/div>');

        if(isArr || isObj){
            var $toggle = $('<span class="cg-toggle fa fa-caret-right" aria-label="Basculer"><\/span>');
            $head.append($toggle);
        }else{
            $head.append('<span class="cg-empty-toggle"><\/span>');
        }

        if(key !== undefined && key !== null && key !== ''){
            $head.append('<span class="cg-key">"'+ cgEscapeHtml(key) +'"<\/span>: ');
        }

        if(isObj){
            $head.append('<span class="cg-type">{…}<\/span>');
        }else if(isArr){
            $head.append('<span class="cg-type">['+ value.length +']<\/span>');
        }else{
            $head.append(cgRenderValueSpan(value));
        }

        $li.append($head);

        if(isArr || isObj){
            var $children = $('<ul class="cg-children"><\/ul>');
            if(isArr){
                for(var i=0;i<value.length;i++){
                    $children.append(cgCreateNode(value[i], i));
                }
            }else{
                for(var j=0;j<keys.length;j++){
                    var k = keys[j];
                    $children.append(cgCreateNode(value[k], k));
                }
            }
            if(hasChildren){ $li.append($children); }
        }
        return $li;
    }

    function cgRenderTree(data){
        var $container = $('#cg-json-tree');
        $container.empty();
        var $root = $('<ul class="cg-list root"><\/ul>');
        if(data && typeof data === 'object'){
            var isArr = Array.isArray(data);
            if(isArr){
                for(var i=0;i<data.length;i++){
                    $root.append(cgCreateNode(data[i], i));
                }
            }else{
                var keys = Object.keys(data);
                for(var j=0;j<keys.length;j++){
                    var k = keys[j];
                    $root.append(cgCreateNode(data[k], k));
                }
            }
        }else{
            $root.append(cgCreateNode(data, 'value'));
        }
        $container.append($root);

        // Expand first level by default
        $container.find('> .cg-list > .cg-node > .cg-head > .cg-toggle').each(function(){
            var $li = $(this).closest('.cg-node');
            $li.children('.cg-children').show();
            $(this).removeClass('fa-caret-right').addClass('fa-caret-down');
        });
    }

    // Toggle expand/collapse
    $(document).on('click', '.cg-json-tree .cg-toggle', function(){
        var $li = $(this).closest('.cg-node');
        var $child = $li.children('.cg-children');
        if(!$child.length) return;
        if($child.is(':visible')){
            $child.hide();
            $(this).removeClass('fa-caret-down').addClass('fa-caret-right');
        }else{
            $child.show();
            $(this).removeClass('fa-caret-right').addClass('fa-caret-down');
        }
    });

    // Show modal with full JSON details (as tree)
    $(document).on('click', '#cg-show-json', function(e){
        e.preventDefault();
        try{
            var data = window.cgLastParse ? window.cgLastParse : null;
            if(!data){
                cgRenderTree({ message: 'Aucune donnée à afficher.' });
            }else{
                cgRenderTree(data);
            }
            $('#cg-json-modal').modal('show');
        }catch(err){
            cgRenderTree({ error: "Erreur lors de l'affichage des détails." });
            $('#cg-json-modal').modal('show');
        }
    });

    //Choix de client
    $('#nom-client').bind('keyup', function(e){
        var motcles = $('#nom-client').val();
        if(motcles.length > 1){
            var postData = {motcles: motcles, page: 0};
            ajaxCall = $.ajax({
                url: base_url + "ajax/filtreclients/",
                type: 'post',
                dataType: "json",
                data: postData,
            })
            .done(function(data) {
                if(data!=null){
                    var items = [];
                    $.each(data, function(i, item) {
                        items.push( "<li class='mt-list-item client-item' data-id='" + item.id + "'>" + item.raison_social + "</li>" );
                    });
                    $("#liste-clients").html(items);
                    $('.client-item').bind('click', function(){
                        var id_client = $(this).data('id');
                        var nom_client = $(this).html();

                        $("#appbundle_vehicule_client").val(id_client);
                        $(".client-label").html(nom_client);
                        $("#change_client").modal('hide');
                    });
                }
                else{
                    $("#liste-clients").html("Aucun client trouvé !");
                }
            });
        }
    });


})

</script>

{% endblock %}