{% extends 'mobile/mobile_base.html' %}
{% load static %}
{% load i18n %}
{% load stock_custom_filters %}

{% block title %}{% translate "Lot" %} #{{ batch.pk }}{% endblock title %}

{% block upleft %}
<a href="{% url 'mobile:stock_movements_mobile' %}" class="nav-link" style="color: white;">
    <i class="bi bi-arrow-left fs-3"></i>
</a>
{% endblock upleft %}

{% block extra_head %}
<style>
    .info-card {
        border-radius: 0.75rem;
        border: 1px solid #dee2e6;
        background: #fff;
        padding: 0.9rem 1rem;
        margin-bottom: 0.75rem;
        box-shadow: 0 2px 6px rgba(47,62,139,0.06);
    }
    .info-label {
        font-size: 0.78rem;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-bottom: 0.2rem;
    }
    .info-value {
        font-size: 1rem;
        font-weight: 600;
        color: #212529;
    }
    .section-title {
        font-size: 0.85rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: #6c757d;
        margin: 1.1rem 0 0.5rem;
    }
    .mv-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.55rem 0;
        border-bottom: 1px solid #f0f0f0;
        font-size: 0.92rem;
    }
    .mv-row:last-child { border-bottom: none; }
    .signature-canvas-wrap {
        border: 2px dashed #ced4da;
        border-radius: 0.5rem;
        background: #f8f9fa;
        touch-action: none;
        cursor: crosshair;
    }
    #signatureCanvas { display: block; width: 100%; height: 180px; }
</style>
{% endblock extra_head %}

{% block content %}

<!-- En-tête type de lot -->
<div class="info-card d-flex justify-content-between align-items-center">
    <div>
        <div class="info-label">{% translate "Lot" %} #{{ batch.pk }}</div>
        <div class="info-value">
            {% if batch.movement_type == 'in' %}
                <span class="badge bg-success fs-6"><i class="bi bi-box-arrow-in-down me-1"></i>{% translate "Entrée" %}</span>
            {% elif batch.movement_type == 'out' %}
                <span class="badge bg-danger fs-6"><i class="bi bi-box-arrow-up me-1"></i>{% translate "Sortie" %}</span>
            {% else %}
                <span class="badge bg-info fs-6 text-dark"><i class="bi bi-arrow-left-right me-1"></i>{% translate "Transfert" %}</span>
            {% endif %}
        </div>
        <div class="mt-1" style="font-size:0.85rem;color:#6c757d;">
            <i class="bi bi-calendar3 me-1"></i>{{ batch.date|date:"d/m/Y H:i" }}
        </div>
    </div>
    {% if batch.created_by %}
    <div class="text-end" style="font-size:0.8rem;color:#6c757d;">
        <i class="bi bi-person-gear me-1"></i>{{ batch.created_by.get_full_name|default:batch.created_by.username }}
    </div>
    {% endif %}
</div>

<!-- Suivi du prêt de matériel -->
{% if batch.is_loan %}
<div class="info-card border-primary">
    <div class="section-title text-primary mt-0 mb-2"><i class="bi bi-calendar-event"></i> {% translate "Suivi du prêt de matériel" %}</div>
    <div class="info-row">
        <span class="info-label">{% translate "Statut" %}</span>
        <span class="info-value">
            {% if batch.loan_returned %}
                <span class="badge bg-success">{% translate "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" %}</span>
                {% endif %}
            {% endif %}
        </span>
    </div>
    <div class="info-row">
        <span class="info-label">{% translate "Retour attendu" %}</span>
        <span class="info-value fw-bold {% if not batch.loan_returned and batch.is_overdue %}text-danger{% endif %}">
            {{ batch.estimated_return_date|date:"d/m/Y"|default:"-" }}
        </span>
    </div>
    {% if can_add_signature %}
    <div class="d-flex gap-2 mt-2 pt-2 border-top">
        <form method="post" action="{% url 'stock:stock_movement_batch_toggle_loan_return' batch.pk %}" class="flex-grow-1">
            {% csrf_token %}
            {% if batch.loan_returned %}
                <input type="hidden" name="returned" value="false">
                <button type="submit" class="btn btn-sm btn-outline-secondary w-100 py-1" style="font-size:0.8rem;">
                    <i class="bi bi-x-circle me-1"></i>{% translate "Non retourné" %}
                </button>
            {% else %}
                <input type="hidden" name="returned" value="true">
                <button type="submit" class="btn btn-sm btn-success w-100 py-1" style="font-size:0.8rem;">
                    <i class="bi bi-check-circle me-1"></i>{% translate "Retourné" %}
                </button>
            {% endif %}
        </form>
        <button type="button" class="btn btn-sm btn-outline-primary flex-grow-1 py-1" style="font-size:0.8rem;" data-bs-toggle="modal" data-bs-target="#editLoanInfoModal">
            <i class="bi bi-pencil me-1"></i>{% translate "Modifier" %}
        </button>
    </div>
    {% endif %}
</div>
{% elif can_add_signature and batch.movement_type == 'out' %}
<!-- Option pour définir un prêt -->
<div class="info-card bg-light border-dashed">
    <div class="d-flex justify-content-between align-items-center">
        <span class="text-muted small"><i class="bi bi-info-circle me-1"></i>{% translate "Pas un prêt actuellement." %}</span>
        <button type="button" class="btn btn-sm btn-outline-primary py-0 px-2" style="font-size:0.8rem;" data-bs-toggle="modal" data-bs-target="#editLoanInfoModal">
            <i class="bi bi-plus-circle me-1"></i>{% translate "Définir prêt" %}
        </button>
    </div>
</div>
{% endif %}

<!-- Raison -->
{% if batch.reason %}
<div class="info-card">
    <div class="info-label"><i class="bi bi-chat-text me-1"></i>{% translate "Raison" %}</div>
    <div style="font-size:0.93rem;color:#444;">{{ batch.reason }}</div>
</div>
{% endif %}

<!-- Personne / Entreprise / Contrat -->
{% if batch.movement_type != 'transfer' %}{% if batch.person or batch.company or batch.requester %}
<div class="info-card">
    {% if batch.person %}
    <div class="mb-1">
        <span class="info-label"><i class="bi bi-person-fill me-1"></i>{% translate "Personne" %}</span>
        <div class="info-value">{{ batch.person.name }}</div>
        {% if batch.person.teams.exists %}<div style="font-size:0.8rem;color:#6c757d;">{{ batch.person.teams_display }}</div>{% endif %}
    </div>
    {% endif %}
    {% if batch.company %}
    <div class="mb-1">
        <span class="info-label"><i class="bi bi-building me-1"></i>{% translate "Entreprise / Organisation" %}</span>
        <div class="info-value">{{ batch.company.name }}</div>
    </div>
    {% endif %}
    {% if batch.requester %}
    <div class="mb-1">
        <span class="info-label"><i class="bi bi-person-lines-fill me-1"></i>{% translate "Demandeur" %}</span>
        <div class="info-value">{{ batch.requester }}</div>
    </div>
    {% endif %}
    {% comment %}{% if batch.contract %}
    <div>
        <span class="info-label"><i class="bi bi-file-earmark-text me-1"></i>{% translate "Contrat" %}</span>
        <div class="info-value">{{ batch.contract.contract_number }}</div>
        {% if batch.contract.company %}<div style="font-size:0.8rem;color:#6c757d;">{{ batch.contract.company.name }}</div>{% endif %}
    </div>
    {% endif %}{% endcomment %}
</div>
{% endif %}
{% endif %}

<!-- Bon de préparation / Commande d'achat liés -->
{% if batch.preparation_order or batch.purchase_order %}
<div class="info-card">
    {% if batch.preparation_order %}
    <div class="mb-1">
        <span class="info-label"><i class="bi bi-clipboard-check me-1"></i>{% translate "Bon de préparation" %}</span>
        <div class="info-value">
            <a href="{% url 'stock:preparation_order_detail' batch.preparation_order.pk %}">#{{ batch.preparation_order.order_number }}</a>
            <span class="badge bg-secondary ms-1" style="font-size:0.75rem;">{{ batch.preparation_order.get_status_display }}</span>
        </div>
    </div>
    {% endif %}
    {% if batch.purchase_order %}
    <div>
        <span class="info-label"><i class="bi bi-cart-check me-1"></i>{% translate "Commande d'achat" %}</span>
        <div class="info-value">
            <a href="{% url 'stock:purchase_order_detail' batch.purchase_order.pk %}">{{ batch.purchase_order.code }}</a>
            {% if batch.purchase_order.supplier %}
            <div style="font-size:0.8rem;color:#6c757d;">{{ batch.purchase_order.supplier.name }}</div>
            {% endif %}
        </div>
    </div>
    {% endif %}
</div>
{% endif %}

<!-- Lignes du mouvement -->
<div class="section-title"><i class="bi bi-list-ul me-1"></i>{% translate "Lignes" %} <span class="badge bg-secondary" style="font-size:0.75rem;">{{ batch.movements.count }}</span></div>
<div class="info-card">
    {% for mv in batch.movements.all %}
    <div class="mv-row">
        <div>
            <div style="font-weight:600;font-size:0.93rem;">{{ mv.product.name }}</div>
            {% if mv.product.code %}
            <div style="font-size:0.78rem;color:#6c757d;">{{ mv.product.code }}</div>
            {% endif %}
            <div style="font-size:0.8rem;color:#6c757d;">
                {% if mv.source_location %}
                    <span>{{ mv.source_location.name }} ({{ mv.source_location.warehouse.name }})</span>
                {% endif %}
                {% if mv.source_location and mv.destination_location %} → {% endif %}
                {% if mv.destination_location %}
                    <span>{{ mv.destination_location.name }} ({{ mv.destination_location.warehouse.name }})</span>
                {% endif %}
            </div>
        </div>
        <span class="badge ms-2
            {% if mv.source_location and mv.destination_location %}bg-info text-dark
            {% elif mv.destination_location %}bg-success
            {% else %}bg-danger{% endif %}" style="font-size:0.9rem;min-width:3rem;text-align:right;">
            {% if mv.destination_location and not mv.source_location %}+{% endif %}{% if mv.source_location and not mv.destination_location %}-{% endif %}{{ mv.quantity }} {{ mv.product.unit }}
        </span>
    </div>
    {% empty %}
    <div class="text-center text-muted py-3" style="font-size:0.9rem;">{% translate "Aucune ligne." %}</div>
    {% endfor %}
</div>

<!-- Signature -->
<div class="section-title"><i class="bi bi-pen me-1"></i>{% translate "Signatures" %}</div>
<div class="info-card">
    {% for sig in batch.signatures.all %}
    <div class="mb-3 pb-3 {% if not forloop.last %}border-bottom{% endif %}">
        <div class="text-center mb-2">
            <img src="{{ sig.image.url }}" alt="{% translate 'Signature' %}" class="img-fluid border rounded" style="max-height:160px;">
        </div>
        <div style="font-size:0.8rem;color:#6c757d;text-align:center;">
            <i class="bi bi-person me-1"></i>{{ sig.signature_name|default:sig.signed_by.get_full_name|default:sig.signed_by.username|default:"—" }}
            &nbsp;·&nbsp;
            <i class="bi bi-calendar3 me-1"></i>{{ sig.signed_at|date:"d/m/Y H:i" }}
            &nbsp;<span class="badge bg-success" style="font-size:0.7rem;"><i class="bi bi-lock-fill me-1"></i>{% translate "Verrouillée" %}</span>
        </div>
    </div>
    {% empty %}
    <p class="text-muted fst-italic mb-0" style="font-size:0.9rem;">{% translate "Aucune signature enregistrée." %}</p>
    {% endfor %}
</div>

{% if can_add_signature %}
<!-- Ajouter une nouvelle signature -->
<div class="section-title"><i class="bi bi-pen-fill me-1"></i>{% translate "Ajouter une signature" %}</div>
<div class="info-card">
    <form id="signatureForm" method="post" enctype="multipart/form-data" action="{% url 'mobile:stock_movement_batch_detail_mobile' batch.pk %}">
        {% csrf_token %}
        <div class="mb-2">
            <label for="signatureName" class="form-label small fw-semibold text-muted" style="font-size: 0.78rem;">{% translate "Nom du signataire" %}</label>
            <input type="text" id="signatureName" name="signature_name" class="form-control form-control-sm" placeholder="{% translate 'Entrez votre nom' %}" required>
        </div>
        <div class="signature-canvas-wrap mb-2" id="signatureWrap">
            <canvas id="signatureCanvas"></canvas>
        </div>
        <div class="d-flex gap-2 mb-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>
        <input type="hidden" name="signature_data" id="signatureData">
    </form>
</div>
{% endif %}

<!-- Documents joints -->
{% if batch.documents.all %}
<div class="section-title"><i class="bi bi-paperclip me-1"></i>{% translate "Documents joints" %}</div>
<div class="info-card">
    {% for doc in batch.documents.all %}
    {% private_file_url doc 'file' as doc_url %}
    <div class="mv-row">
        <div style="font-size:0.9rem;">
            {% if doc.is_image %}<i class="bi bi-image text-info me-1"></i>
            {% else %}<i class="bi bi-file-earmark text-secondary me-1"></i>{% endif %}
            {{ doc.filename }}
        </div>
        <a href="{{ doc_url }}" target="_blank" class="btn btn-sm btn-light ms-2">
            <i class="bi bi-download"></i>
        </a>
    </div>
    {% endfor %}
</div>
{% endif %}

<!-- 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 modal-dialog-centered">
        <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 le 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 small" 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 form-control-sm" value="{{ batch.estimated_return_date|date:'Y-m-d' }}">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                    <button type="submit" class="btn btn-primary btn-sm">{% 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 %}

{% block extra_scripts %}
{% if can_add_signature %}
<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();
    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('signatureForm').submit();
    });
})();
</script>
{% endif %}
{% endblock extra_scripts %}