{% extends 'bundles/SonataAdminBundle/standard_layout.html.twig' %}

{% block title %}
    Listes des ventes - {{ prescripteur.nomEntite }}
{% endblock %}

{% block navbar_title %}
    Listes des ventes - {{ prescripteur.nomEntite }}
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .ventes-header-section {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .date-range-wrapper {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .date-range-wrapper .control-label {
            margin-bottom: 0;
            font-weight: 600;
            color: #555;
        }
        
        .input-daterange .input-group-addon {
            background-color: #f4f4f4;
            border-color: #ddd;
            padding: 6px 12px;
            font-weight: 500;
            color: #555;
        }
        
        .input-daterange .form-control {
            border-radius: 0;
        }
        
        .input-daterange .form-control:first-child {
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }
        
        .input-daterange .form-control:last-child {
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
        }
        
        .ventes-metrics {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 25px;
            padding: 0;
        }
        
        .metric-card {
            background: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            padding: 15px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            transition: box-shadow 0.2s ease;
        }
        
        .metric-card:hover {
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .metric-label {
            color: #666;
            font-size: 13px;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .metric-value {
            display: flex;
            align-items: baseline;
            gap: 5px;
            font-size: 24px;
            font-weight: 700;
        }
        
        .metric-value .label {
            font-size: 20px;
            padding: 6px 12px;
            border-radius: 4px;
        }
        
        .metric-currency {
            font-size: 14px;
            color: #888;
            font-weight: 500;
        }
        
        .table {
            margin-bottom: 0;
        }
        
        .table thead {
            background-color: #f8f9fa;
        }
        
        .table thead th {
            border-bottom: 2px solid #dee2e6;
            font-weight: 600;
            color: #495057;
            text-transform: uppercase;
            font-size: 12px;
            letter-spacing: 0.5px;
            padding: 12px 15px;
            white-space: nowrap;
        }
        
        .table tbody td {
            padding: 12px 15px;
            vertical-align: middle;
        }
        
        .table-striped > tbody > tr:nth-of-type(odd) {
            background-color: #f9f9f9;
        }
        
        .table-hover tbody tr:hover {
            background-color: #f5f5f5;
        }
        
        #export-ventes {
            padding: 6px 12px;
            font-weight: 500;
        }
        
        .box-header .box-title {
            font-weight: 600;
        }
        
        .loading-state {
            padding: 40px;
            text-align: center;
            color: #999;
        }
        
        @media (max-width: 768px) {
            .ventes-header-section {
                flex-direction: column;
                align-items: stretch;
            }
            
            .date-range-wrapper {
                width: 100%;
                flex-direction: column;
                align-items: stretch;
            }
            
            .date-range-wrapper .control-label {
                margin-bottom: 8px;
            }
            
            .date-range-wrapper .input-group {
                max-width: 100%;
            }
            
            .input-group.input-daterange {
                flex-direction: column;
            }
            
            .input-group.input-daterange .form-control {
                border-radius: 4px !important;
                margin-bottom: 5px;
            }
            
            .input-group.input-daterange .input-group-addon {
                border-radius: 4px;
                margin: 5px 0;
                width: 100%;
                text-align: center;
            }
            
            .ventes-metrics {
                grid-template-columns: 1fr;
            }
            
            .metric-value {
                font-size: 20px;
            }
            
            .box-header .box-tools {
                float: none;
                margin-top: 10px;
            }
            
            .box-header .box-tools .btn {
                width: 100%;
            }
            
            .table-responsive {
                overflow-x: auto;
            }
        }
    </style>
{% endblock %}

{% block list_table %}
    <div class="col-xs-12 col-md-12">
        <div id="ventes-wrap" class="box box-primary" data-prescripteur-id="{{ prescripteur ? prescripteur.id : 0 }}">
            {# Box Header with Download Button #}
            <div class="box-header with-border">
                <h3 class="box-title">Filtres et Actions</h3>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-success btn-sm" id="export-ventes" data-prescripteur-id="{{ prescripteur ? prescripteur.id : 0 }}">
                        <i class="fa fa-download"></i> Télécharger les ventes
                    </button>
                </div>
            </div>
            
            {# Filters Section #}
            <div class="box-body" style="padding-bottom: 10px;">
                <div class="ventes-header-section">
                    <form method="POST" id="date_rangefilter" class="date_range">
                        <div class="date-range-wrapper">
                            <label for="startDate" class="control-label" style="margin-right: 8px;">Période:</label>
                            <div class="input-group input-daterange" style="max-width: 400px;">
                                <input type="text" id="startDate" name="startdate" class="form-control" placeholder="Date début">
                                <div class="input-group-addon">Vers</div>
                                <input type="text" id="endDate" name="enddate" class="form-control" placeholder="Date fin">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            
            {# Metrics Summary #}
            <div class="box-body" style="padding-top: 15px; padding-bottom: 15px;">
                <div class="ventes-metrics">
                    <div class="metric-card">
                        <span class="metric-label">Total ventes</span>
                        <div class="metric-value">
                            <span id="total-ventes" class="label label-primary">0</span>
                        </div>
                    </div>
                    <div class="metric-card">
                        <span class="metric-label">Vente réalisée</span>
                        <div class="metric-value">
                            <span id="total-realisee" class="label label-success">0</span>
                        </div>
                    </div>
                    <div class="metric-card">
                        <span class="metric-label">Vente annulée</span>
                        <div class="metric-value">
                            <span id="total-annulee" class="label label-danger">0</span>
                        </div>
                    </div>
                    <div class="metric-card">
                        <span class="metric-label">Montant total</span>
                        <div class="metric-value">
                            <span id="total-montant" class="label label-success">0.00</span>
                            <span class="metric-currency">MAD</span>
                        </div>
                    </div>
                    <div class="metric-card">
                        <span class="metric-label">Commission</span>
                        <div class="metric-value">
                            <span id="total-commission" class="label label-info">0.00</span>
                            <span class="metric-currency">MAD</span>
                        </div>
                    </div>
                </div>
            </div>
            
            {# Sales Table #}
            <div class="box-body no-padding">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Référence</th>
                                <th>Date soin</th>
                                <th>Type</th>
                                <th>Client</th>
                                <th>Téléphone</th>
                                <th>Montant</th>
                                <th>Commission</th>
                                <th>Statut</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody class="ventes-tbody">
                            <tr>
                                <td colspan="9" class="loading-state">
                                    <i class="fa fa-spinner fa-spin"></i> Chargement...
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{# JS moved to public/admin/js/custom.js (prescripteurs block) #}