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

{% block body %}

<style>
    .sf-modal { border-radius: 10px; border: 0; box-shadow: 0 14px 42px rgba(0,0,0,.18); }
    .sf-modal-header { background: linear-gradient(135deg, #2ecc71, #27ae60); color: #fff; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom: 0; }
    .sf-modal-title { margin: 0; font-weight: 600; letter-spacing: .3px; }
    .sf-subtitle { margin: 4px 0 0; opacity: .9; font-size: 13px; }
    .sf-section-title { margin: 5px 0 12px; font-size: 12px; text-transform: uppercase; color: #8a8a8a; letter-spacing: .6px; }
    .modal-body.form { padding-top: 20px; }
    /* Tweak form spacing inside modals */
    .modal-body .form-group { margin-bottom: 12px; }
    .modal-footer { border-top: 0; }
    /* Upload preview well polishing */
    #cg-preview { background:#fafafa; border-radius:6px; }
    #cg-preview-portlet .portlet-title { background:#f9f9f9; border-bottom:1px solid #eee; }
    #cg-preview-portlet .caption { color:#666; }
</style>

{{ storefront | raw }}

{% if '#rdv-modal' in storefront %}
<!-- rdv modal -->
<div id="rdv-modal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content sf-modal">
            <div class="modal-header sf-modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Fermer"><span aria-hidden="true">&times;</span></button>
                <div>
                    <h2 class="modal-title sf-modal-title">Prise de rendez-vous</h2>
                    <p class="sf-subtitle">Remplissez vos informations et les détails du rendez-vous.</p>
                </div>
            </div>
            <form action="" method="post" class="form-horizontal">
                <div class="modal-body form">
                    <div class="form-body">
                        <div class="row">
                            <!-- Left: RDV form fields -->
                            <div class="col-md-7">
                                <h4 class="sf-section-title"><i class="fa fa-user"></i> Vos informations</h4>
                                <div class="form-group">
                                    <label class="col-md-4" for="nom">Nom *</label>
                                    <div class="col-md-8">
                                        <input class="form-control" type="text" name="nom" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-4" for="prenom">Prénom *</label>
                                    <div class="col-md-8">
                                        <input class="form-control" type="text" name="prenom" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-4" for="name">N° Tél *</label>
                                    <div class="col-md-8">
                                        <input class="form-control" type="text" name="tel" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-4" for="name">Email *</label>
                                    <div class="col-md-8">
                                        <input class="form-control" type="email" name="email" required>
                                    </div>
                                </div>

                                <h4 class="sf-section-title"><i class="fa fa-car"></i> Votre véhicule</h4>
                                <div class="form-group">
                                    <label class="col-md-4" for="name">Immatricule *</label>
                                    <div class="col-md-8">
                                        <input class="form-control" type="text" name="matricule" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-4" for="name">N° Chassis</label>
                                    <div class="col-md-8">
                                        <input class="form-control" type="text" name="chassis">
                                    </div>
                                </div>

                                <h4 class="sf-section-title"><i class="fa fa-calendar"></i> Rendez-vous</h4>
                                <div class="form-group">
                                    <label class="col-md-4" for="name">Objet *</label>
                                    <div class="col-md-8">
                                        <input class="form-control" type="text" name="objet" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-4" for="name">Département *</label>
                                    <div class="col-md-8">
                                        <select class="form-control" name="bookingType" required>
                                        {% for type in types %}
                                            <option value="{{type.id}}">{{type.title}}</option>
                                        {% endfor %}
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-4" for="name">Date RDV *</label>
                                    <div class="col-md-8">
                                        <input class="form-control datetime-picker" type="text" name="dateTimeDebut" required>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-4" for="name">Description *</label>
                                    <div class="col-md-8">
                                        <textarea class="form-control" name="description" required></textarea>
                                    </div>
                                </div>
                            </div>

                            <!-- Right: Carte grise upload & preview -->
                            <div class="col-md-5">
                                <h4 class="sf-section-title"><i class="fa fa-id-card-o"></i> Carte grise (optionnel)</h4>
                                <div class="form-group" style="margin-bottom:20px;">
                                    <div class="col-md-12">
                                        <div class="input-group">
                                            <span class="input-group-btn">
                                                <span class="btn blue fileinput-button">
                                                    <i class="fa fa-upload"></i>
                                                    <span>Importer 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="Aucun fichier" 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 une image/PDF pour pré-remplir immatriculation et N° chassis automatiquement.</span>
                                        <div id="cg-upload-alert" class="alert" style="display:none; margin-top:10px;"></div>
                                    </div>
                                </div>

                                <!-- Aperçu du fichier importé -->
                                <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>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="hidden" name="action" value="rdv">
                    <button type="submit" class="btn green">Envoyer</button>
                    <button type="button" data-dismiss="modal" class="btn dark btn-outline">Annuler</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endif %}

{% if '#contact-modal' in storefront %}
<!-- contact modal -->
<div id="contact-modal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content sf-modal">
            <div class="modal-header sf-modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Fermer"><span aria-hidden="true">&times;</span></button>
                <div>
                    <h2 class="modal-title sf-modal-title">Nous contacter</h2>
                    <p class="sf-subtitle">Nous vous répondrons rapidement.</p>
                </div>
            </div>
            <form action="" method="post" class="form-horizontal">
                <div class="modal-body form">
                    <div class="form-body">
                        <div class="form-group">
                            <label class="col-md-4" for="name">Nom complet *</label>
                            <div class="col-md-8">
                                <input class="form-control" type="text" name="name" required placeholder="Votre nom complet">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-4" for="name">N° Tél *</label>
                            <div class="col-md-8">
                                <input class="form-control" type="text" name="tel" required placeholder="Ex: +212 6 12 34 56 78">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-4" for="name">Email *</label>
                            <div class="col-md-8">
                                <input class="form-control" type="email" name="email" required placeholder="vous@exemple.com">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-4" for="name">Message *</label>
                            <div class="col-md-8">
                                <textarea class="form-control" name="message" required placeholder="Votre message..."></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="hidden" name="action" value="contact">
                    <button type="submit" class="btn green">Envoyer</button>
                    <button type="button" data-dismiss="modal" class="btn dark btn-outline">Annuler</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endif %}
  
{% endblock %}

{% block javascripts %}
<script>
$(document).ready(function()
{
    {% if msg %}
    toastr.success("{{msg}}", 'DEMANDE TRAITEE', {
            onclick: function() { }});
    {% endif %}
    
    // Re-use carte grise upload & parsing in RDV modal
    // Allow clicking the visible button to open the file dialog
    $(document).on('click', '.fileinput-button', function(e){
        if(e.target && e.target.id !== 'cg-upload'){
            e.preventDefault();
            $('#cg-upload').trigger('click');
        }
    });

    // Upload & parse
    $('#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('Aucun fichier');
            $('#cg-preview-wrapper').hide();
            $('#cg-preview-portlet').hide();
            return;
        }
        $name.val(file.name);

        // Build local preview
        try{
            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)){
                html = ''+
                    '<div class="embed-responsive" style="height:360px;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){
            $('#cg-preview-wrapper').hide();
            $('#cg-preview-portlet').hide();
        }

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

        // Show loading alert
        $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;
                // Map to RDV form fields
                if(d.immatriculation){
                    $('input[name="matricule"]').val(d.immatriculation).trigger('change');
                }
                if(d.vin){
                    $('input[name="chassis"]').val(d.vin).trigger('change');
                }
                $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><strong>Données extraites et appliquées.</strong></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();
        });
    });

    // --- RDV Date/Time constraints: future working days, 08:00 -> 18:00 ---
    (function(){
        var $dp = $('.datetime-picker');
        if(!$dp.length){ return; }

        // Helper: check weekend
        function isWeekend(d){ var day = d.getDay(); return day === 0 || day === 6; }

        // Helper: move to next working day at 08:00 if outside allowed window
        function nextWorkingSlot(from){
            var d = new Date(from.getTime());
            // If time < 08:00 -> set 08:00 same day; if > 18:00 -> advance to next day 08:00
            var h = d.getHours();
            if(h < 8){ d.setHours(8,0,0,0); }
            else if(h > 18 || (h === 18 && (d.getMinutes()>0 || d.getSeconds()>0))){
                d.setDate(d.getDate()+1); d.setHours(8,0,0,0);
            } else {
                // within window -> round minutes to next 15-min step
                var m = d.getMinutes();
                var step = 15;
                var rounded = Math.ceil(m/step)*step;
                if(rounded>=60){
                    d.setHours(h+1,0,0,0);
                    if(d.getHours()>18){ d.setDate(d.getDate()+1); d.setHours(8,0,0,0); }
                } else {
                    d.setMinutes(rounded,0,0);
                }
            }
            // Skip weekends
            while(isWeekend(d)){
                d.setDate(d.getDate()+1); d.setHours(8,0,0,0);
            }
            return d;
        }

        // Replace default init from layout with stricter one
        try{ $dp.datetimepicker('remove'); }catch(_e){}
        var now = new Date();
        var startAt = nextWorkingSlot(now);
        $dp.datetimepicker({
            format: 'dd-mm-yyyy hh:ii:ss',
            autoclose: true,
            language: 'fr',
            todayBtn: true,
            minuteStep: 15,
            startDate: now,              // strictly future
            daysOfWeekDisabled: [0,6],   // disable weekends
        });
        // Set a sensible default if field is empty
        if(!$dp.val()){
            try{ $dp.datetimepicker('update', startAt); }catch(_e){}
        }

        // Enforce time window on user changes
        $dp.on('changeDate', function(e){
            if(!e || !e.date) return;
            var d = new Date(e.date.getTime());
            // Disallow past
            var now2 = new Date();
            if(d.getTime() <= now2.getTime()){
                d = nextWorkingSlot(now2);
            }
            // Clamp to 08:00-18:00
            var h = d.getHours();
            if(h < 8){ d.setHours(8,0,0,0); }
            if(h > 18 || (h === 18 && (d.getMinutes()>0 || d.getSeconds()>0))){
                // move to next working day 08:00
                d.setDate(d.getDate()+1); d.setHours(8,0,0,0);
                while(isWeekend(d)){
                    d.setDate(d.getDate()+1); d.setHours(8,0,0,0);
                }
            }
            // If weekend (in case of manual input), bump forward
            if(isWeekend(d)){
                d = nextWorkingSlot(d);
            }
            // Update if adjusted
            if(d.getTime() !== e.date.getTime()){
                $(this).datetimepicker('update', d);
            }
        });
    })();

});
</script>
{% endblock %}