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

{% block stylesheets %}
    <style>
        .carrosserie-layout {
            display: flex;
            gap: 20px;
        }
        .carrosserie-hotspots {
            width: 32%;
            border-right: 1px solid #eee;
            padding-right: 12px;
        }
        .carrosserie-products {
            width: 68%;
        }
        .hotspot-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .hotspot-item {
            display: flex;
            gap: 10px;
            align-items: center;
            padding: 8px 10px;
            border-radius: 4px;
            cursor: pointer;
        }
        .hotspot-item:hover {
            background: #f6f6f6;
        }
        .hotspot-item.active {
            background: #e8f4ff;
        }
        .hotspot-thumb {
            width: 40px;
            height: 32px;
            border-radius: 4px;
            background: #f0f0f0;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 11px;
        }
        .hotspot-thumb img {
            max-width: 100%;
            max-height: 100%;
        }
        .carrosserie-toolbar {
            display: flex;
            gap: 10px;
            align-items: center;
            margin-bottom: 12px;
            flex-wrap: wrap;
        }
        .carrosserie-toolbar .form-control {
            width: auto;
            min-width: 180px;
        }
        .carrosserie-table td {
            vertical-align: middle;
        }
        .carro-related {
            background: #f9fff5;
        }
        .carro-qty,
        .carro-order {
            max-width: 90px;
        }
    </style>
{% endblock %}

{% 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>
                <span>Catalogue Carrosserie</span>
            </li>
        </ul>
    </div>

    <br/>

    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-car font-green"></i>CATALOGUE CARROSSERIE</div>
        </div>
        <div class="portlet-body">
            <div class="carrosserie-layout" id="carrosserie-app">
                <div class="carrosserie-hotspots">
                    <h4>Zones du vehicule</h4>
                    <ul class="hotspot-list" id="hotspot-list"></ul>
                </div>
                <div class="carrosserie-products">
                    <div class="carrosserie-toolbar">
                        <input type="text" id="carro-keyword" class="form-control" placeholder="Rechercher un produit...">
                        <select id="carro-category" class="form-control">
                            <option value="0">Toutes categories</option>
                            {% for categorie in categories %}
                                <option value="{{ categorie.id }}">{{ categorie.titre }}</option>
                            {% endfor %}
                        </select>
                        <label class="checkbox-inline">
                            <input type="checkbox" id="carro-show-related"> Afficher uniquement liés
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" id="carro-related-first" checked> Liés en premier
                        </label>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover carrosserie-table">
                            <thead>
                                <tr>
                                    <th style="width:60px;">Lier</th>
                                    <th>Produit</th>
                                    <th style="width:120px;">Quantité</th>
                                    <th style="width:120px;">Ordre</th>
                                </tr>
                            </thead>
                            <tbody id="carro-products">
                                <tr>
                                    <td colspan="4" class="text-muted">Sélectionnez une zone.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    <script src="{{ asset('assets/global/scripts/carrosserie.js') ~ '?' ~ random() }}"></script>
{% endblock %}