{% extends "base.html" %}
{% load static %}
{% load i18n %}

{% block head %}
    
<style>
    .status-badge.pending { background-color: #ffc107; color: black; }
    .status-badge.sent { background-color: #0dcaf0; color: white; }
    .status-badge.completed { background-color: #198754; color: white; }
    .status-badge.invoiced { background-color: #6f42c1; color: white; }
    .status-badge.paid { background-color: #28a745; color: white; }
    .status-badge.cancelled { background-color: #dc3545; color: white; }
    
    /* Styles pour les badges de filtre - Pattern inspiré des interventions */
    .filter-section {
        margin-bottom: 1rem;
    }

    .filter-option {
        display: inline-block;
        margin-right: 0.5rem;
    }

    .filter-option input[type="checkbox"] {
        display: none;
    }

    .filter-option label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.4rem 0.75rem;
        font-weight: 500;
        cursor: pointer;
        border: 1px solid currentColor;
        border-radius: 0.375rem;
        background-color: transparent;
        transition: all 0.2s ease;
        user-select: none;
        font-size: 0.875rem;
    }

    /* Couleurs des badges par statut - Inactive state (outline) */
    .filter-option label.context-badge.pending {
        border-color: #ffc107;
        color: #ffc107;
    }
    .filter-option label.context-badge.sent {
        border-color: #0dcaf0;
        color: #0dcaf0;
    }
    .filter-option label.context-badge.completed {
        border-color: #198754;
        color: #198754;
    }
    .filter-option label.context-badge.invoiced {
        border-color: #6f42c1;
        color: #6f42c1;
    }
    .filter-option label.context-badge.paid {
        border-color: #28a745;
        color: #28a745;
    }
    .filter-option label.context-badge.cancelled {
        border-color: #dc3545;
        color: #dc3545;
    }

    /* Checked state - Filled */
    .filter-option input[type="checkbox"]:checked + label.context-badge {
        color: white;
    }
    .filter-option input[type="checkbox"]:checked + label.context-badge.pending {
        background-color: #ffc107;
        border-color: #ffc107;
    }
    .filter-option input[type="checkbox"]:checked + label.context-badge.sent {
        background-color: #0dcaf0;
        border-color: #0dcaf0;
    }
    .filter-option input[type="checkbox"]:checked + label.context-badge.completed {
        background-color: #198754;
        border-color: #198754;
    }
    .filter-option input[type="checkbox"]:checked + label.context-badge.invoiced {
        background-color: #6f42c1;
        border-color: #6f42c1;
    }
    .filter-option input[type="checkbox"]:checked + label.context-badge.paid {
        background-color: #28a745;
        border-color: #28a745;
    }
    .filter-option input[type="checkbox"]:checked + label.context-badge.cancelled {
        background-color: #dc3545;
        border-color: #dc3545;
    }

    /* Hover state */
    .filter-option input[type="checkbox"]:hover + label.context-badge {
        opacity: 0.8;
    }
</style>

{% endblock head %}


{% block content %}

<div class="container mt-5 position-relative">
    <div class="position-absolute" style="top: 0px; right: 5px;">
        {% if is_add_order_allowed == True %}
            <a href="{% url 'contracts:contracts_orders_add' %}" class="btn btn-light">
                <i class="bi bi-plus-circle"></i> {% translate "Nouvelle commande" %}
            </a>
        {% endif %}
    </div>
    <ul class="nav nav-tabs" id="tablesTab" role="tablist">
        <li class="nav-item" role="presentation">
          <button class="nav-link active" id="orders-tab" data-bs-toggle="tab" data-bs-target="#orders-content" type="button" role="tab" aria-controls="orders" aria-selected="true" style="color: black;">{% translate "Commandes" %}</button>
        </li>
        <li class="nav-item" role="presentation">
          <button class="nav-link" id="contracts-tab" data-bs-toggle="tab" data-bs-target="#contracts-content" type="button" role="tab" aria-controls="contracts-table" aria-selected="false" style="color: black;">{% translate "Marchés/Contrats" %}</button>
        </li>
    </ul>
    <div class="tab-content my-2" id="tablesTabContent">
        <div class="tab-pane fade show active" id="orders-content" role="tabpanel" aria-labelledby="orders-tab">
            <!-- Filtres pour les commandes -->
            <div class="card mb-3">
                <div class="card-body">
                    <form method="get" id="filters-form" class="row g-3">
                        <!-- Statuts - Full width -->
                        <div class="col-12 filter-section">
                            <label class="form-label">{% translate "Statuts" %}</label>
                            <div class="d-flex flex-wrap gap-2">
                                <!-- Pending -->
                                <div class="filter-option">
                                    <input type="checkbox" class="form-check-input" name="status" id="status_pending" value="pending" {% if 'pending' in selected_statuses %}checked{% endif %}>
                                    <label for="status_pending" class="context-badge pending">{% translate "En préparation" %}</label>
                                </div>
                                <!-- Sent -->
                                <div class="filter-option">
                                    <input type="checkbox" class="form-check-input" name="status" id="status_sent" value="sent" {% if 'sent' in selected_statuses %}checked{% endif %}>
                                    <label for="status_sent" class="context-badge sent">{% translate "Envoyé" %}</label>
                                </div>
                                <!-- Completed -->
                                <div class="filter-option">
                                    <input type="checkbox" class="form-check-input" name="status" id="status_completed" value="completed" {% if 'completed' in selected_statuses %}checked{% endif %}>
                                    <label for="status_completed" class="context-badge completed">{% translate "Terminé" %}</label>
                                </div>
                                <!-- Invoiced -->
                                <div class="filter-option">
                                    <input type="checkbox" class="form-check-input" name="status" id="status_invoiced" value="invoiced" {% if 'invoiced' in selected_statuses %}checked{% endif %}>
                                    <label for="status_invoiced" class="context-badge invoiced">{% translate "Comptabilisé" %}</label>
                                </div>
                                <!-- Paid -->
                                <div class="filter-option">
                                    <input type="checkbox" class="form-check-input" name="status" id="status_paid" value="paid" {% if 'paid' in selected_statuses %}checked{% endif %}>
                                    <label for="status_paid" class="context-badge paid">{% translate "Payé" %}</label>
                                </div>
                                <!-- Cancelled -->
                                <div class="filter-option">
                                    <input type="checkbox" class="form-check-input" name="status" id="status_cancelled" value="cancelled" {% if 'cancelled' in selected_statuses %}checked{% endif %}>
                                    <label for="status_cancelled" class="context-badge cancelled">{% translate "Annulé" %}</label>
                                </div>
                            </div>
                        </div>

                        <!-- Dates - Next row -->
                        <div class="col-md-6">
                            <label for="date-from" class="form-label">{% translate "Commandes à partir du" %}</label>
                            <input type="date" class="form-control" id="date-from" name="date_from" value="{{ request.GET.date_from }}">
                        </div>
                        <div class="col-md-6">
                            <label for="date-to" class="form-label">{% translate "jusqu'au" %}</label>
                            <input type="date" class="form-control" id="date-to" name="date_to" value="{{ request.GET.date_to }}">
                        </div>

                        <!-- Submit buttons -->
                        <div class="col-12 d-flex align-items-end gap-2">
                            <button type="submit" class="btn btn-primary">{% translate "Filtrer" %}</button>
                            <a href="{% url 'contracts:contracts_index' %}" class="btn btn-secondary">{% translate "Réinitialiser" %}</a>
                        </div>
                    </form>
                </div>
            </div>
            <div id="orders-container\">
                <table id="orders-table" class="table"
                    data-height="800"
                    data-pagination="true"
                    data-page-size="50"
                    data-click-to-select="true"
                    data-search="true" >
                    <thead>
                        <tr>
                            <th data-field="actions" data-width="100"></th>
                            <th data-sortable="true">{% translate "Numéro de commande" %}</th>
                            <th>{% translate "Description" %}</th>
                            <th>{% translate "Date" %}</th>
                            <th>{% translate "Statut" %}</th>
                            <th>{% translate "Fichier" %}</th>
                            <th data-sortable="true">{% translate "Marché" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for order in orders %}
                        <tr>
                            <td>
                                <a href="/contracts/orders/{{ order.id }}" type="button" class="btn btn-sm btn-light detail-btn" data-id="${row.id}" data-bs-toggle="tooltip" title="Detail">
                                    <i class="bi bi-info-circle"></i>
                                </a>
                            </td>
                            <td>{{ order.order_code }}</td>
                            <td title="{{ order.description }}">{{ order.description|truncatechars:100 }}</td>
                            <td>{{ order.order_date }}</td>
                            <td>
                                <span class="badge rounded-pill status-badge {{ order.order_status }}">
                                    {{ order.get_order_status_display }}
                                </span>
                            </td>
                            <td>{% if order.order_file %}<a href="{{ order.order_file.url }}"><i class="bi bi-file-pdf"></i></a>{% endif %}</td>
                            <td>{{ order.contract }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        <div class="tab-pane fade show" id="contracts-content" role="tabpanel" aria-labelledby="contracts-tab">
            <div id="contracts-container">
                <table id="contracts-table" class="table"
                    data-height="500"
                    data-pagination="true"
                    data-page-size="25"
                    data-click-to-select="true"
                    data-search="true">
                    <thead>
                        <tr>
                            <th data-field="actions" data-width="100"></th>
                            <th>{% translate "Numéro" %}</th>
                            <th>{% translate "Description" %}</th>
                            <th>{% translate "Prestataire" %}</th>
                            <th>{% translate "Début" %}</th>
                            <th>{% translate "Fin" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for contract in contracts %}
                        <tr>
                            <td>
                                <a href="/contracts/{{ contract.id }}" type="button" class="btn btn-sm btn-light detail-btn" data-id="${row.id}" data-bs-toggle="tooltip" title="Detail">
                                    <i class="bi bi-info-circle"></i>
                                </a>
                            </td>
                            <td>{{ contract.contract_number }}</td>
                            <td title="{{ contract.description }}">{{ contract.description|truncatechars:100 }}</td>
                            <td>{{ contract.company.name }}</td>
                            <td>{{ contract.start_date }}</td>
                            <td>{{ contract.end_date }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{% endblock content%}


{% block script %}

    <script>
        $(document).ready(function() {
            // Gestion des badges de statut
            $('#status-badges label').on('click', function(e) {
                // Éviter de double-trigger si on clique sur le checkbox
                if (e.target.tagName === 'INPUT') {
                    return;
                }
                $(this).find('input[type="checkbox"]').prop('checked', function(i, val) {
                    return !val;
                });
            });
            
            $('#orders-table').bootstrapTable({
                formatNoMatches: function() {
                    return '{% translate "Aucune commande trouvée" %}';
                }
            });
            $('#contracts-table').bootstrapTable({
                formatNoMatches: function() {
                    return '{% translate "Aucun marché trouvé" %}';
                }
            });
        });
    </script>

{% endblock script %}