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

{% block content %}
<div class="container-fluid mt-3">
    <div class="row justify-content-center">
        <div class="col-xl-10">

            <!-- En-tête -->
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h3 class="h3 d-flex align-items-center gap-2 mb-0">
                    {% if batch.movement_type == 'in' %}
                        <i class="bi bi-box-arrow-in-down text-success"></i>
                        <span class="badge bg-success fs-6">{% translate "Entrée" %}</span>
                    {% elif batch.movement_type == 'out' %}
                        <i class="bi bi-box-arrow-up text-danger"></i>
                        <span class="badge bg-danger fs-6">{% translate "Sortie" %}</span>
                    {% else %}
                        <i class="bi bi-arrow-left-right text-info"></i>
                        <span class="badge bg-info fs-6">{% translate "Transfert" %}</span>
                    {% endif %}
                    {% if batch.movement_subtype %}
                        <span class="badge bg-light text-dark border fs-6">{{ batch.get_movement_subtype_display }}</span>
                    {% endif %}
                    {% translate "Lot" %} #{{ batch.pk }}
                </h3>
                <a href="{% url 'stock:stock_movements' %}?tab=movements" class="btn btn-light btn-sm">
                    <i class="bi bi-arrow-left"></i> {% translate "Retour" %}
                </a>
            </div>

            <hr>

            <!-- Carte infos générales -->
            <div class="row g-3 mb-4">

                <!-- Date -->
                <div class="col-md-3">
                    <div class="card h-100">
                        <div class="card-body text-center">
                            <h6 class="card-subtitle mb-2 text-muted"><i class="bi bi-calendar me-1"></i>{% translate "Date" %}</h6>
                            <p class="card-text fs-5 mb-0">{{ batch.date|date:"d/m/Y" }}</p>
                            <small class="text-muted">{{ batch.date|date:"H:i" }}</small>
                        </div>
                    </div>
                </div>

                <!-- Créé par -->
                <div class="col-md-3">
                    <div class="card h-100">
                        <div class="card-body">
                            <h6 class="card-subtitle mb-2 text-muted"><i class="bi bi-person-gear me-1"></i>{% translate "Créé par" %}</h6>
                            <p class="card-text mb-0">{{ batch.created_by.get_full_name|default:batch.created_by.username|default:"—" }}</p>
                        </div>
                    </div>
                </div>

                <!-- Demandeur -->
                {% if batch.requester %}
                <div class="col-md-3">
                    <div class="card h-100">
                        <div class="card-body">
                            <h6 class="card-subtitle mb-2 text-muted"><i class="bi bi-person-lines-fill me-1"></i>{% translate "Demandeur" %}</h6>
                            <p class="card-text mb-0">{{ batch.requester }}</p>
                        </div>
                    </div>
                </div>
                {% endif %}

                <!-- Raison -->
                <div class="col-md-6">
                    <div class="card h-100">
                        <div class="card-body">
                            <h6 class="card-subtitle mb-2 text-muted"><i class="bi bi-chat-text me-1"></i>{% translate "Raison" %}</h6>
                            {% if batch.reason %}
                                <p class="card-text mb-0">{{ batch.reason }}</p>
                            {% else %}
                                <p class="card-text text-muted fst-italic mb-0">{% translate "Aucune raison indiquée" %}</p>
                            {% endif %}
                        </div>
                    </div>
                </div>

            </div>

            <!-- Suivi du prêt de matériel -->
            {% if batch.is_loan %}
            <div class="card mb-4 shadow-sm border-primary">
                <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center py-2">
                    <div class="fw-semibold">
                        <i class="bi bi-calendar-event me-1"></i> {% translate "Suivi du prêt de matériel" %}
                    </div>
                    <div>
                        {% if batch.loan_returned %}
                            <span class="badge bg-success">{% translate "Matériel retourné" %}</span>
                        {% else %}
                            {% if batch.is_overdue %}
                                <span class="badge bg-danger">{% translate "En retard" %}</span>
                            {% else %}
                                <span class="badge bg-warning text-dark">{% translate "En cours de prêt" %}</span>
                            {% endif %}
                        {% endif %}
                    </div>
                </div>
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <p class="mb-1"><strong>{% translate "Date de retour attendue" %} :</strong> 
                                <span class="{% if not batch.loan_returned and batch.is_overdue %}text-danger fw-bold{% endif %}">
                                    {{ batch.estimated_return_date|date:"d/m/Y"|default:"-" }}
                                </span>
                            </p>
                            <p class="mb-0 text-muted small">
                                {% if batch.loan_returned %}
                                    <i class="bi bi-check-circle-fill text-success"></i> {% translate "Le matériel a été retourné." %}
                                {% else %}
                                    {% if batch.is_overdue %}
                                        <i class="bi bi-exclamation-triangle-fill text-danger"></i> {% translate "Le retour de ce matériel est en retard !" %}
                                    {% else %}
                                        <i class="bi bi-clock-history text-warning"></i> {% translate "Le matériel est actuellement prêté." %}
                                    {% endif %}
                                {% endif %}
                            </p>
                        </div>
                        <div class="col-md-6 text-md-end mt-3 mt-md-0 d-flex justify-content-md-end gap-2">
                            {% if can_add_signature %}
                            <form method="post" action="{% url 'stock:stock_movement_batch_toggle_loan_return' batch.pk %}" class="d-inline">
                                {% csrf_token %}
                                {% if batch.loan_returned %}
                                    <input type="hidden" name="returned" value="false">
                                    <button type="submit" class="btn btn-outline-secondary btn-sm">
                                        <i class="bi bi-x-circle me-1"></i>{% translate "Marquer comme non retourné" %}
                                    </button>
                                {% else %}
                                    <input type="hidden" name="returned" value="true">
                                    <button type="submit" class="btn btn-success btn-sm">
                                        <i class="bi bi-check-circle me-1"></i>{% translate "Marquer comme retourné" %}
                                    </button>
                                {% endif %}
                            </form>
                            <button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#editLoanInfoModal">
                                <i class="bi bi-pencil me-1"></i>{% translate "Modifier le prêt" %}
                            </button>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            {% elif can_add_signature and batch.movement_type == 'out' %}
            <!-- Option pour définir un prêt -->
            <div class="card mb-4 shadow-sm border-dashed">
                <div class="card-body py-2 d-flex justify-content-between align-items-center bg-light">
                    <span class="text-muted small"><i class="bi bi-info-circle me-1"></i>{% translate "Ce mouvement ne concerne pas un prêt actuellement." %}</span>
                    <button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#editLoanInfoModal">
                        <i class="bi bi-plus-circle me-1"></i>{% translate "Définir comme prêt" %}
                    </button>
                </div>
            </div>
            {% endif %}

            <!-- Personne / Équipe / Contrat -->
            {% if batch.movement_type != 'transfer' and batch.person or batch.movement_type != 'transfer' and batch.company %}{# or batch.contract #}
            <div class="row g-3 mb-4">
                {% if batch.person %}
                <div class="col-md-4">
                    <div class="card border-primary h-100">
                        <div class="card-header bg-primary text-white py-2">
                            <i class="bi bi-person-fill me-1"></i><strong>{% translate "Personne" %}</strong>
                        </div>
                        <div class="card-body">
                            <p class="fs-5 mb-1">{{ batch.person.name }}</p>
                            <small class="text-muted">{{ batch.person.teams_display }}</small>
                        </div>
                    </div>
                </div>
                {% endif %}
                {% if batch.company %}
                <div class="col-md-4">
                    <div class="card border-secondary h-100">
                        <div class="card-header bg-secondary text-white py-2">
                            <i class="bi bi-building me-1"></i><strong>{% translate "Entreprise / Organisation" %}</strong>
                        </div>
                        <div class="card-body">
                            <p class="fs-5 mb-1">{{ batch.company.name }}</p>
                        </div>
                    </div>
                </div>
                {% endif %}
                {% comment %}{% if batch.contract %}
                <div class="col-md-4">
                    <div class="card border-warning h-100">
                        <div class="card-header bg-warning text-dark py-2">
                            <i class="bi bi-file-earmark-text-fill me-1"></i><strong>{% translate "Contrat" %}</strong>
                        </div>
                        <div class="card-body">
                            <p class="fs-5 mb-1">{{ batch.contract.contract_number }}</p>
                            {% if batch.contract.company %}
                            <small class="text-muted">{{ batch.contract.company.name }}</small>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% endif %}{% endcomment %}
            </div>
            {% endif %}

            <!-- Bon de préparation ou commande d'achat liés -->
            {% if batch.preparation_order or batch.purchase_order %}
            <div class="row g-3 mb-4">
                {% if batch.preparation_order %}
                <div class="col-md-6">
                    <div class="card border-warning h-100">
                        <div class="card-header bg-warning text-dark py-2">
                            <i class="bi bi-clipboard-check me-1"></i><strong>{% translate "Bon de préparation" %}</strong>
                        </div>
                        <div class="card-body">
                            <p class="fs-5 mb-1">
                                <a href="{% url 'stock:preparation_order_detail' batch.preparation_order.pk %}">
                                    #{{ batch.preparation_order.order_number }}
                                </a>
                            </p>
                            <span class="badge bg-secondary">{{ batch.preparation_order.get_status_display }}</span>
                        </div>
                    </div>
                </div>
                {% endif %}
                {% if batch.purchase_order %}
                <div class="col-md-6">
                    <div class="card border-success h-100">
                        <div class="card-header bg-success text-white py-2">
                            <i class="bi bi-cart-check me-1"></i><strong>{% translate "Commande d'achat" %}</strong>
                        </div>
                        <div class="card-body">
                            <p class="fs-5 mb-1">
                                <a href="{% url 'stock:purchase_order_detail' batch.purchase_order.pk %}">
                                    {{ batch.purchase_order.code }}
                                </a>
                            </p>
                            {% if batch.purchase_order.supplier %}
                            <small class="text-muted">{{ batch.purchase_order.supplier.name }}</small>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>
            {% endif %}
            <div class="card mb-4">
                <div class="card-header fw-semibold d-flex align-items-center gap-2">
                    <i class="bi bi-list-ul"></i>
                    {% translate "Lignes du mouvement" %}
                    <span class="badge bg-secondary ms-auto">{{ batch.movements.count }}</span>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>{% translate "Produit" %}</th>
                                <th>{% translate "Catégorie" %}</th>
                                <th class="text-end">{% translate "Quantité" %}</th>
                                <th>{% translate "Source" %}</th>
                                <th>{% translate "Destination" %}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for mv in batch.movements.all %}
                            <tr>
                                <td>
                                    <a href="{% url 'stock:product_detail' mv.product.pk %}">{{ mv.product.name }}</a>
                                    {% if mv.product.code %}
                                    <br><small class="text-muted">{{ mv.product.code }}</small>
                                    {% endif %}
                                </td>
                                <td>{{ mv.product.category.name_fr|default:"—" }}</td>
                                <td class="text-end fw-bold
                                    {% if mv.source_location and mv.destination_location %}text-info
                                    {% elif mv.destination_location %}text-success
                                    {% else %}text-danger{% endif %}">
                                    {% if mv.destination_location and not mv.source_location %}+{% endif %}
                                    {% if mv.source_location and not mv.destination_location %}-{% endif %}
                                    {{ mv.quantity }}
                                </td>
                                <td>
                                    {% if mv.source_location %}
                                        {{ mv.source_location.name }}<br>
                                        <small class="text-muted">{{ mv.source_location.warehouse.name }}</small>
                                    {% else %}—{% endif %}
                                </td>
                                <td>
                                    {% if mv.destination_location %}
                                        {{ mv.destination_location.name }}<br>
                                        <small class="text-muted">{{ mv.destination_location.warehouse.name }}</small>
                                    {% else %}—{% endif %}
                                </td>
                                <td>
                                    <a href="{% url 'stock:stock_movement_detail' mv.pk %}" class="btn btn-sm btn-light">
                                        <i class="bi bi-info-circle"></i>
                                    </a>
                                </td>
                            </tr>
                            {% empty %}
                            <tr><td colspan="6" class="text-center text-muted py-3">{% translate "Aucune ligne." %}</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Signatures -->
            <div class="card mb-4">
                <div class="card-header fw-semibold"><i class="bi bi-pen me-1"></i>{% translate "Signatures" %}</div>
                <div class="card-body">
                    {% if batch.signature or batch.signatures.all %}
                        <div class="row g-3 justify-content-center">
                            {% if batch.signature %}
                            <div class="col-md-6 col-lg-4 text-center">
                                <div class="p-3 border rounded bg-light h-100 d-flex flex-column align-items-center justify-content-center">
                                    <h6 class="text-muted small mb-2">{% translate "Signature principale" %}</h6>
                                    <img src="{{ batch.signature.url }}" alt="{% translate 'Signature' %}" class="img-fluid border rounded bg-white p-2" style="max-height:140px;">
                                    {% if batch.signature_name %}
                                    <div class="mt-2 text-muted small">
                                        <i class="bi bi-person me-1"></i><strong>{{ batch.signature_name }}</strong>
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                            {% endif %}

                            {% for sig in batch.signatures.all %}
                            <div class="col-md-6 col-lg-4 text-center">
                                <div class="p-3 border rounded bg-light h-100 d-flex flex-column align-items-center justify-content-center">
                                    <h6 class="text-muted small mb-2">{% translate "Signature" %} #{{ forloop.counter }}</h6>
                                    <img src="{{ sig.image.url }}" alt="{% translate 'Signature' %}" class="img-fluid border rounded bg-white p-2" style="max-height:140px;">
                                    <div class="mt-2 text-muted small">
                                        <span class="d-block mb-1">
                                            <i class="bi bi-person-fill me-1"></i><strong>{{ sig.signature_name|default:sig.signed_by.get_full_name|default:sig.signed_by.username|default:"—" }}</strong>
                                        </span>
                                        <span class="d-block text-muted" style="font-size: 0.75rem;">
                                            <i class="bi bi-calendar3 me-1"></i>{{ sig.signed_at|date:"d/m/Y H:i" }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <p class="text-muted fst-italic mb-0">{% translate "Aucune signature enregistrée." %}</p>
                    {% endif %}

                    {% if can_add_signature %}
                        <div class="mt-4 pt-4 border-top">
                            <h5 class="h6 mb-3 fw-semibold"><i class="bi bi-pen-fill me-1"></i>{% translate "Ajouter une signature" %}</h5>
                            <div class="row">
                                <div class="col-md-6 col-lg-5">
                                    <div class="mb-3">
                                        <label for="signatureName" class="form-label small fw-semibold text-muted">{% translate "Nom du signataire" %}</label>
                                        <input type="text" id="signatureName" name="signature_name" class="form-control" placeholder="{% translate 'Entrez votre nom' %}" required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label small fw-semibold text-muted">{% translate "Dessinez votre signature" %}</label>
                                        <div class="border rounded bg-white shadow-sm position-relative overflow-hidden" id="signatureWrap" style="border: 2px dashed #ced4da !important; height: 180px;">
                                            <canvas id="signatureCanvas" style="display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none;"></canvas>
                                        </div>
                                    </div>
                                    <div class="d-flex gap-2">
                                        <button id="clearSignature" type="button" class="btn btn-outline-secondary btn-sm flex-fill">
                                            <i class="bi bi-eraser me-1"></i>{% translate "Effacer" %}
                                        </button>
                                        <button id="saveSignature" type="button" class="btn btn-primary btn-sm flex-fill">
                                            <i class="bi bi-check-lg me-1"></i>{% translate "Enregistrer" %}
                                        </button>
                                    </div>
                                    <form id="signatureForm" method="post" enctype="multipart/form-data" action="{% url 'stock:stock_movement_batch_detail' batch.pk %}" class="d-none">
                                        {% csrf_token %}
                                        <input type="hidden" name="signature_data" id="signatureData">
                                        <input type="hidden" name="signature_name" id="signatureFormName">
                                    </form>
                                </div>
                            </div>
                        </div>

                        <script>
                        (function () {
                            const canvas = document.getElementById('signatureCanvas');
                            if (!canvas) return;
                            const wrap = document.getElementById('signatureWrap');
                            const ctx = canvas.getContext('2d');
                            let drawing = false;
                            let hasContent = false;

                            function resize() {
                                const ratio = window.devicePixelRatio || 1;
                                const rect = wrap.getBoundingClientRect();
                                canvas.width = rect.width * ratio;
                                canvas.height = 180 * ratio;
                                canvas.style.width = rect.width + 'px';
                                canvas.style.height = '180px';
                                ctx.scale(ratio, ratio);
                                ctx.strokeStyle = '#1a1a2e';
                                ctx.lineWidth = 2.2;
                                ctx.lineCap = 'round';
                                ctx.lineJoin = 'round';
                            }
                            
                            resize();
                            setTimeout(resize, 200);
                            window.addEventListener('resize', resize);

                            function pos(e) {
                                const r = canvas.getBoundingClientRect();
                                const src = e.touches ? e.touches[0] : e;
                                return { x: src.clientX - r.left, y: src.clientY - r.top };
                            }

                            canvas.addEventListener('mousedown', (e) => { drawing = true; const p = pos(e); ctx.beginPath(); ctx.moveTo(p.x, p.y); });
                            canvas.addEventListener('mousemove', (e) => { if (!drawing) return; const p = pos(e); ctx.lineTo(p.x, p.y); ctx.stroke(); hasContent = true; });
                            canvas.addEventListener('mouseup', () => { drawing = false; });

                            canvas.addEventListener('touchstart', (e) => { e.preventDefault(); drawing = true; const p = pos(e); ctx.beginPath(); ctx.moveTo(p.x, p.y); }, { passive: false });
                            canvas.addEventListener('touchmove', (e) => { e.preventDefault(); if (!drawing) return; const p = pos(e); ctx.lineTo(p.x, p.y); ctx.stroke(); hasContent = true; }, { passive: false });
                            canvas.addEventListener('touchend', () => { drawing = false; });

                            document.getElementById('clearSignature').addEventListener('click', () => {
                                ctx.clearRect(0, 0, canvas.width, canvas.height);
                                hasContent = false;
                            });

                            document.getElementById('saveSignature').addEventListener('click', () => {
                                const nameVal = document.getElementById('signatureName').value.trim();
                                if (!nameVal) {
                                    alert("{% translate 'Veuillez entrer le nom du signataire.' %}");
                                    return;
                                }
                                if (!hasContent) {
                                    alert("{% translate "Veuillez dessiner une signature avant d'enregistrer." %}");
                                    return;
                                }
                                document.getElementById('signatureData').value = canvas.toDataURL('image/png');
                                document.getElementById('signatureFormName').value = nameVal;
                                document.getElementById('signatureForm').submit();
                            });
                        })();
                        </script>
                    {% endif %}
                </div>
            </div>

            <!-- Documents -->
            {% if batch.documents.all %}
            <div class="card mb-4">
                <div class="card-header fw-semibold"><i class="bi bi-paperclip me-1"></i>{% translate "Documents joints" %}</div>
                <div class="card-body">
                    <div class="row g-3">
                        {% for doc in batch.documents.all %}
                        {% private_file_url doc 'file' as doc_url %}
                        <div class="col-sm-6 col-md-4 col-lg-3">
                            <div class="card h-100">
                                {% if doc.is_image %}
                                <a href="{{ doc_url }}" target="_blank">
                                    <img src="{{ doc_url }}" class="card-img-top" alt="{{ doc.name }}"
                                         style="height:140px; object-fit:cover;">
                                </a>
                                {% else %}
                                <div class="card-body text-center py-4">
                                    <i class="bi bi-file-earmark-text display-4 text-secondary"></i>
                                </div>
                                {% endif %}
                                <div class="card-footer py-2 d-flex align-items-center gap-2">
                                    <span class="small text-truncate flex-grow-1" title="{{ doc.name }}">{{ doc.filename }}</span>
                                    <a href="{{ doc_url }}" target="_blank" class="btn btn-sm btn-light py-0">
                                        <i class="bi bi-download"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endif %}

        </div>
    </div>
</div>

<!-- Modale de modification des informations de prêt -->
<div class="modal fade" id="editLoanInfoModal" tabindex="-1" aria-labelledby="editLoanInfoModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="editLoanInfoModalLabel">
                    <i class="bi bi-calendar-event me-2"></i>{% translate "Modifier les informations de prêt" %}
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="post" action="{% url 'stock:stock_movement_batch_update_loan_info' batch.pk %}">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input type="checkbox" name="is_loan" id="modal_is_loan" class="form-check-input" {% if batch.is_loan %}checked{% endif %}>
                            <label class="form-check-label fw-bold text-primary" for="modal_is_loan">
                                {% translate "Prêt de matériel" %}
                            </label>
                        </div>
                    </div>
                    <div class="mb-3" id="modal_estimated_return_date_wrapper" style="display: none;">
                        <label class="form-label fw-semibold" for="modal_estimated_return_date">
                            {% translate "Date de retour attendue" %}
                        </label>
                        <input type="date" name="estimated_return_date" id="modal_estimated_return_date" class="form-control" value="{{ batch.estimated_return_date|date:'Y-m-d' }}">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                    <button type="submit" class="btn btn-primary">{% translate "Enregistrer" %}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const modalIsLoan = document.getElementById('modal_is_loan');
    const modalReturnDateWrapper = document.getElementById('modal_estimated_return_date_wrapper');
    const modalReturnDateInput = document.getElementById('modal_estimated_return_date');

    if (modalIsLoan) {
        function toggleModalReturnDate() {
            if (modalIsLoan.checked) {
                modalReturnDateWrapper.style.display = 'block';
                if (modalReturnDateInput) modalReturnDateInput.required = true;
            } else {
                modalReturnDateWrapper.style.display = 'none';
                if (modalReturnDateInput) {
                    modalReturnDateInput.required = false;
                    modalReturnDateInput.value = '';
                }
            }
        }
        modalIsLoan.addEventListener('change', toggleModalReturnDate);
        toggleModalReturnDate();
    }
});
</script>
{% endblock content %}