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

{% block body %}
<div class="page-bar">
        <ul class="page-breadcrumb">
                <li><a href="{{ path('homepage') }}">Accueil</a><i class="fa fa-circle"></i></li>
                <li><a href="{{ path('devis_index') }}">Devis</a><i class="fa fa-circle"></i></li>
                <li><span>Détails</span></li>
        </ul>
</div>
<br/>

<div class="row">
    <div class="col-lg-12 col-xs-12 col-sm-12">
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-file-text-o fa-lg font-green"></i>
                    <span class="caption-subject bold uppercase">Devis</span>
                    <span class="caption-helper hidden-print">Détails</span>
                </div>
                <div class="actions hidden-print" style="display:flex;gap:6px;flex-wrap:wrap;">
                    <button type="button" class="btn green" onclick="openDevisPrintIframe('devis');" aria-label="Imprimer le devis"><i class="fa fa-print"></i> Imprimer</button>
                    <div class="btn-group">
                        <button type="button" class="btn blue dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fa fa-exchange"></i> Convertir <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="javascript:;" id="convert-show-to-vente"><i class="fa fa-shopping-cart"></i> Convertir en Vente</a></li>
                            <li><a href="javascript:;" id="convert-show-to-commande"><i class="fa fa-file-text"></i> Convertir en Commande</a></li>
                            <li><a href="javascript:;" id="convert-show-to-achat"><i class="fa fa-cubes"></i> Convertir en Achat</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <style>
                .ka-totals-card {background:#f9fafb;border:1px solid #e2e5e8;border-radius:4px;padding:14px 16px;margin-bottom:15px;}
                .ka-totals-card h5 {margin:0 0 12px;font-size:13px;font-weight:600;text-transform:uppercase;color:#555;}
                .ka-totals-grid {display:flex;flex-direction:column;gap:6px;}
                .ka-totals-line {display:flex;justify-content:space-between;align-items:center;}
                .ka-totals-line .label {font-weight:600;color:#607080;font-size:12px;}
                .ka-totals-value {font-weight:600;font-size:18px;letter-spacing:.5px;}
                .ka-totals-value-total {font-size:22px;color:#0b6d3a;}
                @media (min-width:992px){.ka-devis-layout{display:flex;gap:20px;}.ka-devis-details{flex:1 1 60%;}.ka-devis-summary{flex:1 1 40%;}}
                @media print {.hidden-print{display:none !important;} .ka-totals-card{border:none;background:transparent;padding:0;margin:0;} }
                .actions .btn-group {position:relative;}
                .actions .dropdown-menu {right:0;left:auto;white-space:nowrap;min-width:220px;}
                .actions .dropdown-menu::before {left:20px;right:auto;}
                .actions .dropdown-menu li a {display:block;padding:8px 15px;}
            </style>
            <div class="portlet-body ka-devis-layout">
                <div class="ka-devis-details">
                    <dl class="dl-horizontal" style="margin:0;">
                        <dt>N° Devis</dt>
                        <dd>{% if vente.scanDevis %}<a href="#" class="link-facture" data-val="{{ vente.scanDevis }}"><i class="fa fa-file"></i> {{ vente.numDevis }}</a>{% else %}{{ vente.numDevis }}{% endif %}</dd>
                        <dt>Date Devis</dt>
                        <dd>{% if vente.dateDevis %}{{ vente.dateDevis|date('d-m-Y') }}{% endif %}</dd>
                        <dt>Client</dt>
                        <dd><a href="javascript:;" class="js-client-popup" data-id="{{ vente.client.id }}"><i class="fa fa-black-tie"></i> {{ vente.client.raisonSociale }}</a></dd>
                        {% if vente.reparation %}<dt>O.R.</dt><dd><a href="javascript:;" class="js-reparation-popup" data-id="{{ vente.reparation.id }}"><i class="fa fa-wrench"></i> {{ vente.reparation }}</a></dd>{% endif %}
                        {% if vente.vehicule %}<dt>Véhicule</dt><dd><a href="javascript:;" class="js-vehicule-popup" data-id="{{ vente.vehicule.id }}"><i class="fa fa-car"></i> {{ vente.vehicule.marque }} {{ vente.vehicule.modele }} {{ vente.vehicule.immatriculation }}</a></dd>{% endif %}
                        {% if vente.notes %}<dt>Notes</dt><dd>{{ vente.notes }}</dd>{% endif %}
                        {% if vente.dateMiseajour %}<dt>Mise à jour</dt><dd>{{ vente.dateMiseajour|date('d-m-Y') }}</dd>{% endif %}
                    </dl>
                    <div class="form-actions hidden-print" style="margin-top:20px;display:flex;flex-wrap:wrap;gap:8px;">
                        <a href="{{ path('devis_index') }}" class="btn default"><i class="fa fa-arrow-left"></i> Retour</a>
                        <a href="{{ path('devis_edit', { 'id': vente.id }) }}" class="btn green"><i class="fa fa-edit"></i> Modifier</a>
                        {% if app.user.aDroit('devis_suppression') %}<button type="submit" value="Supprimer" class="btn red" onClick="document.form.submit();"><i class="fa fa-close"></i> Supprimer</button>{% endif %}
                    </div>
                    {{ form_start(delete_form) }}{{ form_end(delete_form) }}
                </div>
                <div class="ka-devis-summary">
                    <div class="ka-totals-card">
                        <h5>Récapitulatif</h5>
                        <div class="ka-totals-grid">
                            <div class="ka-totals-line"><span class="label">Total HT</span><span class="ka-totals-value">{{ vente.totalHt|number_format(2, '.', ' ') }}</span></div>
                            <div class="ka-totals-line"><span class="label">Total TVA</span><span class="ka-totals-value">{{ vente.totalTva|number_format(2, '.', ' ') }}</span></div>
                            <div class="ka-totals-line"><span class="label">Total TTC</span><span class="ka-totals-value ka-totals-value-total">{{ vente.totalTtc|number_format(2, '.', ' ') }}</span></div>
                            <div class="ka-totals-line"><span class="label">Produits</span><span class="ka-totals-value">{{ vente.getDproduits()|length }}</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-12 col-xs-12 col-sm-12">
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-cubes fa-lg font-green"></i>
                    <span class="caption-subject bold uppercase">Produits</span>
                    <span class="caption-helper hidden-print">Lignes du devis</span>
                </div>
            </div>
            <div class="portlet-body">
                <div class="table-responsive">
                    <table class="table table-striped table-hover ka-table-tight">
                        <thead>
                            <tr>
                                <th scope="col">Produit</th>
                                <th scope="col">Quantité</th>
                                <th scope="col" class="text-right">Prix U</th>
                                <th scope="col">Remise</th>
                                <th scope="col" class="text-right">Total HT</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for vproduit in vente.getDproduits() %}
                                <tr>
                                    <td>{{ vproduit.titre }}</td>
                                    <td>{{ vproduit.quantite }}</td>
                                    <td class="text-right">{{ vproduit.getPrixHt()|number_format(2, '.', ' ') }}</td>
                                    <td>{{ vproduit.tauxRemise }}%</td>
                                    <td class="text-right">{{ vproduit.getTotalHt|number_format(2, '.', ' ') }}</td>
                                </tr>
                            {% endfor %}
                            {% if vente.getDproduits()|length == 0 %}
                                <tr><td colspan="5" class="text-center text-muted">Aucun produit dans ce devis.</td></tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{# Modals retained (optional) #}
{# Old print modals removed as per streamlined UI #}
{% endblock %}

{% block javascripts %}
<script type="text/javascript">
    $(function(){
        // Left align dd items
        $('.ka-devis-details dl.dl-horizontal dd').css('text-align','left');

                // Client quick popup (AJAX details)
                $(document).on('click', '.js-client-popup', function(e){
                        e.preventDefault();
                        var id = $(this).data('id');
                        if(!id) return;
                        var url = base_url + 'ajax/clientdetails/' + id;
                        var $modal = $('#client-details-modal');
                        if ($modal.length === 0) {
                                $modal = $('<div id="client-details-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">\n  <div class="modal-dialog" style="width:520px;">\n    <div class="modal-content">\n      <div class="modal-header">\n        <button type="button" class="close" data-dismiss="modal" aria-label="Fermer"><span aria-hidden="true">&times;</span></button>\n        <h4 class="modal-title"><i class="fa fa-black-tie"></i> Détails du client</h4>\n      </div>\n      <div class="modal-body"><div class="text-center text-muted"><i class="fa fa-spinner fa-spin"></i> Chargement…</div></div>\n      <div class="modal-footer">\n        <a href="#" target="_blank" class="btn blue js-open-full"><i class="fa fa-file-text-o"></i> Ouvrir la fiche client</a>\n        <button type="button" class="btn default" data-dismiss="modal"><i class="fa fa-times"></i> Fermer</button>\n      </div>\n    </div>\n  </div>\n</div>');
                                $('body').append($modal);
                        }
                        $modal.find('.modal-body').html('<div class="text-center text-muted"><i class="fa fa-spinner fa-spin"></i> Chargement…</div>');
                        $modal.modal('show');
                        $.get(url).done(function(data){
                                if (typeof data === 'string') { try { data = JSON.parse(data); } catch(e){ data = {}; } }
                                if (data && !data.error) {
                                        var html = ''+
                                            '<div class="">'+
                                                '<h4 class="no-margin">'+ (data.raison_sociale || '-') +'</h4>'+
                                                '<div class="mt-10">'+
                                                    '<p class="ka-muted"><i class="fa fa-map-marker"></i> '+ (data.adresse || '-') +'</p>'+ 
                                                    '<p class="ka-muted"><i class="fa fa-phone"></i> '+ (data.telephone || '-') +'</p>'+ 
                                                    (data.email ? '<p class="ka-muted"><i class="fa fa-envelope"></i> '+ data.email +'</p>' : '')+
                                                    (data.ice ? '<p class="ka-muted"><i class="fa fa-id-card"></i> ICE: '+ data.ice +'</p>' : '')+
                                                '</div>'+
                                                '<div class="ka-section-sep mt-10">'+
                                                    '<div class="row">'+
                                                        '<div class="col-xs-4 text-center"><div class="ka-muted">Total</div><div class="ka-money">'+ (Number(data.total_ttc||0).toFixed(2)) +'</div></div>'+ 
                                                        '<div class="col-xs-4 text-center"><div class="ka-muted">Payé</div><div class="ka-money">'+ (Number(data.total_paye||0).toFixed(2)) +'</div></div>'+ 
                                                        '<div class="col-xs-4 text-center"><div class="ka-muted">Reste</div><div class="ka-money">'+ (Number(data.reliquat||0).toFixed(2)) +'</div></div>'+ 
                                                    '</div>'+ 
                                                '</div>'+
                                            '</div>';
                                        $modal.find('.modal-body').html(html);
                                        $modal.find('.js-open-full').attr('href', data.url || (base_url + 'client/' + id));
                                } else {
                                        $modal.find('.modal-body').html('<div class="alert alert-warning">Impossible de charger le client.</div>');
                                        $modal.find('.js-open-full').attr('href', base_url + 'client/' + id);
                                }
                        }).fail(function(){
                                $modal.find('.modal-body').html('<div class="alert alert-danger">Erreur lors du chargement des détails du client.</div>');
                                $modal.find('.js-open-full').attr('href', base_url + 'client/' + id);
                        });
                });

                // Reparation quick popup
                $(document).on('click', '.js-reparation-popup', function(e){
                        e.preventDefault();
                        var id = $(this).data('id');
                        if(!id) return;
                        var url = base_url + 'ajax/reparationdetails/' + id;
                        var $modal = $('#reparation-details-modal');
                        if ($modal.length === 0) {
                                $modal = $('<div id="reparation-details-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">\n  <div class="modal-dialog" style="width:760px;">\n    <div class="modal-content">\n      <div class="modal-header">\n        <button type="button" class="close" data-dismiss="modal" aria-label="Fermer"><span aria-hidden="true">&times;</span></button>\n        <h4 class="modal-title"><i class="fa fa-wrench"></i> Ordre de réparation</h4>\n      </div>\n      <div class="modal-body"><div class="text-center text-muted"><i class="fa fa-spinner fa-spin"></i> Chargement…</div></div>\n      <div class="modal-footer">\n        <a href="#" target="_blank" class="btn blue js-open-full"><i class="fa fa-file-text-o"></i> Ouvrir</a>\n        <button type="button" class="btn default" data-dismiss="modal"><i class="fa fa-times"></i> Fermer</button>\n      </div>\n    </div>\n  </div>\n</div>');
                                $('body').append($modal);
                        }
                        $modal.find('.modal-body').html('<div class="text-center text-muted"><i class="fa fa-spinner fa-spin"></i> Chargement…</div>');
                        $modal.modal('show');
                        $.get(url).done(function(data){
                                if (typeof data === 'string') { try { data = JSON.parse(data); } catch(e){ data = {}; } }
                                if (data && !data.error) {
                                        var html = ''+
                                            '<h4 class="no-margin">'+ (data.numero || ('OR #'+id)) +'</h4>'+
                                            '<div class="ka-muted">'+ (data.date_creation || '') + (data.client ? ' • '+ data.client : '') +'</div>'+
                                            (data.vehicule ? '<p class="mt-10"><i class="fa fa-car"></i> '+ data.vehicule +'</p>' : '')+
                                            (data.objet ? '<p class="mt-10"><strong>Objet:</strong> '+ data.objet +'</p>' : '')+
                                            (data.notes ? '<div class="mt-10"><div class="ka-muted">Notes</div><div>'+ data.notes +'</div></div>' : '')+
                                            '<div class="ka-section-sep mt-10">'+
                                                '<div class="row">'+
                                                    '<div class="col-xs-3 text-center"><div class="ka-muted">Main d\'oeuvre</div><div class="ka-money">'+ (Number(data.total_mo||0).toFixed(2)) +'</div></div>'+ 
                                                    '<div class="col-xs-3 text-center"><div class="ka-muted">Pièces</div><div class="ka-money">'+ (Number(data.total_pieces||0).toFixed(2)) +'</div></div>'+ 
                                                    '<div class="col-xs-3 text-center"><div class="ka-muted">TVA</div><div class="ka-money">'+ (Number(data.total_tva||0).toFixed(2)) +'</div></div>'+ 
                                                    '<div class="col-xs-3 text-center"><div class="ka-muted">TTC</div><div class="ka-money">'+ (Number(data.total_ttc||0).toFixed(2)) +'</div></div>'+ 
                                                '</div>'+ 
                                            '</div>';
                                        $modal.find('.modal-body').html(html);
                                        $modal.find('.js-open-full').attr('href', base_url + 'reparation/' + id);
                                } else {
                                        $modal.find('.modal-body').html('<div class="alert alert-warning">Impossible de charger l\'ordre de réparation.</div>');
                                        $modal.find('.js-open-full').attr('href', base_url + 'reparation/' + id);
                                }
                        }).fail(function(){
                                $modal.find('.modal-body').html('<div class="alert alert-danger">Erreur lors du chargement des détails.</div>');
                                $modal.find('.js-open-full').attr('href', base_url + 'reparation/' + id);
                        });
                });

                // Vehicule quick popup
                $(document).on('click', '.js-vehicule-popup', function(e){
                        e.preventDefault();
                        var id = $(this).data('id');
                        if(!id) return;
                        var url = base_url + 'ajax/vehiculedetails/' + id;
                        var $modal = $('#vehicule-details-modal');
                        if ($modal.length === 0) {
                                $modal = $('<div id="vehicule-details-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">\n  <div class="modal-dialog" style="width:640px;">\n    <div class="modal-content">\n      <div class="modal-header">\n        <button type="button" class="close" data-dismiss="modal" aria-label="Fermer"><span aria-hidden="true">&times;</span></button>\n        <h4 class="modal-title"><i class="fa fa-car"></i> Véhicule</h4>\n      </div>\n      <div class="modal-body"><div class="text-center text-muted"><i class="fa fa-spinner fa-spin"></i> Chargement…</div></div>\n      <div class="modal-footer">\n        <a href="#" target="_blank" class="btn blue js-open-full"><i class="fa fa-file-text-o"></i> Ouvrir fiche</a>\n        <button type="button" class="btn default" data-dismiss="modal"><i class="fa fa-times"></i> Fermer</button>\n      </div>\n    </div>\n  </div>\n</div>');
                                $('body').append($modal);
                        }
                        $modal.find('.modal-body').html('<div class="text-center text-muted"><i class="fa fa-spinner fa-spin"></i> Chargement…</div>');
                        $modal.modal('show');
                        $.get(url).done(function(data){
                                if (typeof data === 'string') { try { data = JSON.parse(data); } catch(e){ data = {}; } }
                                if (data && !data.error) {
                                        var html = ''+
                                            '<h4 class="no-margin">'+ (data.titre || ('Véhicule #'+id)) +'</h4>'+
                                            '<div class="mt-10">'+
                                                (data.marque ? '<p class="ka-muted"><i class="fa fa-industry"></i> '+ data.marque +'</p>' : '')+
                                                (data.modele ? '<p class="ka-muted"><i class="fa fa-tag"></i> '+ data.modele +'</p>' : '')+
                                                (data.immatriculation ? '<p class="ka-muted"><i class="fa fa-id-card"></i> '+ data.immatriculation +'</p>' : '')+
                                            '</div>'+
                                            '<div class="ka-section-sep mt-10">'+
                                                '<div class="row">'+
                                                    '<div class="col-xs-4 text-center"><div class="ka-muted">KM</div><div class="ka-money">'+ (Number(data.kilometrage||0).toFixed(0)) +'</div></div>'+ 
                                                    '<div class="col-xs-4 text-center"><div class="ka-muted">Année</div><div class="ka-money">'+ (data.annee || '-') +'</div></div>'+ 
                                                    '<div class="col-xs-4 text-center"><div class="ka-muted">Puissance</div><div class="ka-money">'+ (data.puissance || '-') +'</div></div>'+ 
                                                '</div>'+ 
                                            '</div>';
                                        $modal.find('.modal-body').html(html);
                                        $modal.find('.js-open-full').attr('href', base_url + 'vehicule/' + id);
                                } else {
                                        $modal.find('.modal-body').html('<div class="alert alert-warning">Impossible de charger le véhicule.</div>');
                                        $modal.find('.js-open-full').attr('href', base_url + 'vehicule/' + id);
                                }
                        }).fail(function(){
                                $modal.find('.modal-body').html('<div class="alert alert-danger">Erreur lors du chargement des détails du véhicule.</div>');
                                $modal.find('.js-open-full').attr('href', base_url + 'vehicule/' + id);
                        });
                });

        // Conversion buttons for show view
        var devisId = {{ vente.id }};
        
        $('#convert-show-to-vente').on('click', function(e){
                e.preventDefault();
                bootbox.confirm({
                        title: "Convertir en vente",
                        message: "Voulez-vous convertir ce devis en vente ?",
                        buttons: {
                                confirm: {
                                        label: '<i class="fa fa-arrow-right"></i> Convertir',
                                        className: 'btn-success'
                                },
                                cancel: {
                                        label: 'Annuler',
                                        className: 'btn-danger'
                                }
                        },
                        callback: function(o) {
                                if(o) {
                                        convertDevisFromShow('vente', devisId);
                                }
                        }
                });
        });

        $('#convert-show-to-achat').on('click', function(e){
                e.preventDefault();
                bootbox.confirm({
                        title: "Convertir en bon de commande",
                        message: "Voulez-vous convertir ce devis en bon de commande (achat) ?",
                        buttons: {
                                confirm: {
                                        label: '<i class="fa fa-arrow-right"></i> Convertir',
                                        className: 'btn-success'
                                },
                                cancel: {
                                        label: 'Annuler',
                                        className: 'btn-danger'
                                }
                        },
                        callback: function(o) {
                                if(o) {
                                        convertDevisFromShow('achat', devisId);
                                }
                        }
                });
        });

        $('#convert-show-to-commande').on('click', function(e){
                e.preventDefault();
                bootbox.confirm({
                        title: "Convertir en commande",
                        message: "Voulez-vous convertir ce devis en commande ?",
                        buttons: {
                                confirm: {
                                        label: '<i class="fa fa-arrow-right"></i> Convertir',
                                        className: 'btn-success'
                                },
                                cancel: {
                                        label: 'Annuler',
                                        className: 'btn-danger'
                                }
                        },
                        callback: function(o) {
                                if(o) {
                                        convertDevisFromShow('commande', devisId);
                                }
                        }
                });
        });

        function convertDevisFromShow(type, devisId) {
                // Redirect to the new form with devis ID to pre-fill products
                if(type === 'vente') {
                        window.location.href = base_url + "vente/new?devis=" + devisId;
                } else if(type === 'achat') {
                        window.location.href = base_url + "achat/new?devis=" + devisId;
                } else if(type === 'commande') {
                        window.location.href = base_url + "commande/new?devis=" + devisId;
                }
        }

        // Hidden iframe print
        window.openDevisPrintIframe = function(type){
            var url = base_url + 'devis/print/{{ vente.id }}';
            try { url = '{{ path('devis_print', {'id': vente.id}) }}'; } catch(e) {}
            url += (url.indexOf('?') === -1 ? '?' : '&') + 't=' + Date.now();
            var $frame = $('<iframe>', { css:{position:'absolute',left:'-9999px',width:0,height:0,border:0}, attr:{src:'about:blank'} }).appendTo('body');
            $frame.on('load', function(){
                try { this.contentWindow && this.contentWindow.print && this.contentWindow.print(); } catch(err) {}
                setTimeout(function(){ $frame.remove(); }, 3500);
            });
            $frame.attr('src', url);
        };
    });
</script>
{% endblock %}