@extends('layouts.admin')

@section('title', 'Preuve de Livraison - ' . $order->order_number)

@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
    /* ===== ULTRA MODERN DELIVERY PROOF DETAIL ===== */
    .proof-page { padding: 0 !important; }
    
    .proof-hero {
        background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 40%, #8b5cf6 100%);
        border-radius: 0 0 40px 40px;
        padding: 40px;
        color: white;
        position: relative;
        overflow: hidden;
        margin-bottom: -60px;
    }
    .proof-hero::before {
        content: '';
        position: absolute;
        top: -100px; right: -100px;
        width: 400px; height: 400px;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
        animation: float 8s ease-in-out infinite;
    }
    .proof-hero::after {
        content: '';
        position: absolute;
        bottom: -50px; left: 20%;
        width: 200px; height: 200px;
        background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%);
    }
    @keyframes float {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-20px) rotate(5deg); }
    }
    .proof-hero h1 { font-size: 1.8rem; font-weight: 800; position: relative; z-index: 1; }
    .proof-hero .breadcrumb { position: relative; z-index: 1; }
    .proof-hero .breadcrumb-item, .proof-hero .breadcrumb-item a { color: rgba(255,255,255,0.8); }
    .proof-hero .breadcrumb-item.active { color: white; }
    
    .btn-back-hero {
        background: rgba(255,255,255,0.2);
        backdrop-filter: blur(10px);
        border: 2px solid rgba(255,255,255,0.3);
        border-radius: 14px;
        padding: 12px 24px;
        color: white;
        font-weight: 600;
        transition: all 0.3s ease;
        position: relative; z-index: 1;
        text-decoration: none;
    }
    .btn-back-hero:hover { background: rgba(255,255,255,0.3); color: white; transform: translateY(-2px); }
    
    .proof-content { position: relative; z-index: 10; padding: 0 30px 40px; }
    
    .proof-main-card {
        background: white;
        border-radius: 28px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.1);
        overflow: hidden;
        margin-bottom: 30px;
    }
    
    .proof-image-section {
        background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
        padding: 40px;
        text-align: center;
        position: relative;
    }
    .proof-image-wrapper {
        position: relative;
        display: inline-block;
    }
    .proof-image {
        max-width: 100%;
        max-height: 450px;
        border-radius: 20px;
        box-shadow: 0 15px 50px rgba(0,0,0,0.15);
        cursor: zoom-in;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        border: 4px solid white;
    }
    .proof-image:hover { transform: scale(1.02); box-shadow: 0 25px 70px rgba(0,0,0,0.2); }
    .zoom-hint {
        position: absolute;
        bottom: -30px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0,0,0,0.6);
        color: white;
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 0.8rem;
        opacity: 0;
        transition: opacity 0.3s;
    }
    .proof-image-wrapper:hover .zoom-hint { opacity: 1; }
    .no-proof-placeholder {
        padding: 80px 40px;
        background: #f8fafc;
        border-radius: 20px;
        border: 2px dashed #e2e8f0;
    }
    .no-proof-placeholder i { font-size: 4rem; color: #cbd5e1; }
    .no-proof-placeholder p { color: #94a3b8; margin-top: 15px; }
    
    /* Status Badge Large */
    .status-mega-badge {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 16px 32px;
        border-radius: 50px;
        font-size: 1.1rem;
        font-weight: 700;
        margin: 30px 0;
    }
    .status-mega-badge.submitted { 
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        color: #92400e;
        box-shadow: 0 8px 25px rgba(245, 158, 11, 0.25);
    }
    .status-mega-badge.approved { 
        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
        color: #065f46;
        box-shadow: 0 8px 25px rgba(16, 185, 129, 0.25);
    }
    .status-mega-badge.rejected { 
        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
        color: #991b1b;
        box-shadow: 0 8px 25px rgba(239, 68, 68, 0.25);
    }
    .status-mega-badge i { font-size: 1.4rem; }
    
    /* Action Buttons */
    .proof-actions {
        display: flex;
        gap: 16px;
        justify-content: center;
        flex-wrap: wrap;
        padding: 30px;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.03) 100%);
        border-top: 1px solid rgba(59, 130, 246, 0.1);
    }
    .btn-action {
        padding: 16px 32px;
        border-radius: 16px;
        font-weight: 700;
        font-size: 1rem;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border: none;
        cursor: pointer;
    }
    .btn-action.approve { 
        background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
        color: white;
        box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
    }
    .btn-action.approve:hover { transform: translateY(-3px); box-shadow: 0 12px 35px rgba(16, 185, 129, 0.4); color: white; }
    .btn-action.reject { 
        background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
        color: white;
        box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3);
    }
    .btn-action.reject:hover { transform: translateY(-3px); box-shadow: 0 12px 35px rgba(239, 68, 68, 0.4); color: white; }
    .btn-action.transmit { 
        background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
        color: white;
        box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
    }
    .btn-action.transmit:hover { transform: translateY(-3px); box-shadow: 0 12px 35px rgba(139, 92, 246, 0.4); color: white; }
    
    /* Info Cards */
    .info-card-modern {
        background: white;
        border-radius: 24px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.06);
        overflow: hidden;
        margin-bottom: 24px;
        border: 1px solid rgba(59, 130, 246, 0.08);
    }
    .info-card-header {
        padding: 20px 24px;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(139, 92, 246, 0.05) 100%);
        border-bottom: 1px solid rgba(59, 130, 246, 0.1);
        display: flex;
        align-items: center;
        gap: 14px;
    }
    .info-card-header .icon-box {
        width: 44px; height: 44px;
        border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.2rem;
        background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        color: white;
    }
    .info-card-header h6 { margin: 0; font-weight: 700; font-size: 1rem; color: #1e293b; }
    .info-card-body { padding: 24px; }
    .info-row-modern {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 0;
        border-bottom: 1px solid #f1f5f9;
    }
    .info-row-modern:last-child { border-bottom: none; }
    .info-label { color: #64748b; font-size: 0.9rem; }
    .info-value { font-weight: 600; color: #1e293b; }
    
    /* Seller Card */
    .seller-card-modern {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 20px;
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        border-radius: 16px;
    }
    .seller-avatar {
        width: 60px; height: 60px;
        border-radius: 16px;
        object-fit: cover;
        border: 3px solid white;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    .seller-avatar-placeholder {
        width: 60px; height: 60px;
        border-radius: 16px;
        background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        display: flex; align-items: center; justify-content: center;
        color: white; font-size: 1.5rem;
    }
    .seller-info .shop-name { font-weight: 700; font-size: 1.1rem; color: #1e293b; }
    .seller-info .shop-email { color: #64748b; font-size: 0.85rem; }
    .verified-badge {
        display: inline-flex; align-items: center; gap: 4px;
        background: #d1fae5; color: #065f46;
        padding: 4px 10px; border-radius: 20px;
        font-size: 0.75rem; font-weight: 600;
    }
    
    /* Timeline Modern */
    .timeline-modern { position: relative; padding-left: 35px; }
    .timeline-modern::before {
        content: '';
        position: absolute;
        left: 12px; top: 8px; bottom: 8px;
        width: 3px;
        background: linear-gradient(to bottom, #3b82f6, #8b5cf6);
        border-radius: 3px;
    }
    .timeline-item-modern {
        position: relative;
        margin-bottom: 24px;
        padding-left: 20px;
    }
    .timeline-item-modern:last-child { margin-bottom: 0; }
    .timeline-item-modern::before {
        content: '';
        position: absolute;
        left: -27px; top: 6px;
        width: 14px; height: 14px;
        border-radius: 50%;
        background: #3b82f6;
        border: 3px solid white;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    }
    .timeline-item-modern.success::before { background: #10b981; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3); }
    .timeline-item-modern.warning::before { background: #f59e0b; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3); }
    .timeline-item-modern.danger::before { background: #ef4444; box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3); }
    .timeline-date { font-size: 0.8rem; color: #94a3b8; margin-bottom: 4px; }
    .timeline-text { font-weight: 600; color: #374151; }
    .timeline-text span { font-weight: 400; color: #64748b; }
    
    /* Zoom Modal */
    .zoom-modal {
        display: none;
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.95);
        z-index: 9999;
        justify-content: center;
        align-items: center;
        cursor: zoom-out;
        backdrop-filter: blur(10px);
    }
    .zoom-modal.active { display: flex; }
    .zoom-modal img { max-width: 95%; max-height: 95%; border-radius: 16px; box-shadow: 0 30px 100px rgba(0,0,0,0.5); }
    .zoom-modal .close-btn {
        position: absolute;
        top: 30px; right: 40px;
        width: 56px; height: 56px;
        background: rgba(255,255,255,0.15);
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        color: white; font-size: 24px;
        cursor: pointer; transition: all 0.3s ease;
        backdrop-filter: blur(10px);
        border: 2px solid rgba(255,255,255,0.2);
    }
    .zoom-modal .close-btn:hover { background: rgba(255,255,255,0.25); transform: rotate(90deg); }
    
    /* Modal Modern */
    .modal-modern .modal-content {
        border: none;
        border-radius: 24px;
        box-shadow: 0 25px 80px rgba(0,0,0,0.25);
        overflow: hidden;
    }
    .modal-modern .modal-header {
        padding: 28px;
        color: white;
        border: none;
        position: relative;
    }
    .modal-modern .modal-header.reject-header { background: linear-gradient(135deg, #ef4444, #f87171); }
    .modal-modern .modal-header.transmit-header { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
    .modal-modern .modal-header h5 { font-size: 1.3rem; font-weight: 700; margin: 0; }
    .modal-modern .modal-header .btn-close { filter: brightness(0) invert(1); }
    .modal-modern .modal-body { padding: 28px; }
    .modal-modern .modal-footer { padding: 20px 28px 28px; border: none; }
    
    /* Rejection reason display */
    .rejection-alert {
        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
        border: none;
        border-radius: 16px;
        padding: 20px;
    }
    .rejection-alert strong { color: #991b1b; }
    .rejection-alert p { color: #b91c1c; margin: 0; }
</style>
@endpush

@section('content')
<div class="proof-page">
    <!-- Hero Header -->
    <div class="proof-hero">
        <div class="d-flex justify-content-between align-items-start flex-wrap gap-3">
            <div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-2">
                        <li class="breadcrumb-item"><a href="{{ route('admin.orders.index') }}"><i class="fas fa-shopping-cart me-1"></i>Commandes</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.orders.show', $order) }}">{{ $order->order_number }}</a></li>
                        <li class="breadcrumb-item active">Preuve de livraison</li>
                    </ol>
                </nav>
                <h1><i class="fas fa-camera-retro me-3"></i>Preuve de Livraison</h1>
                <p class="mb-0 opacity-75">Commande #{{ $order->order_number }}</p>
            </div>
            <a href="{{ route('admin.orders.show', $order) }}" class="btn-back-hero">
                <i class="fas fa-arrow-left me-2"></i> Retour à la commande
            </a>
        </div>
    </div>

    <!-- Main Content -->
    <div class="proof-content">
        <div class="row">
            <!-- Left Column: Proof Image & Actions -->
            <div class="col-lg-7">
                <div class="proof-main-card">
                    <div class="proof-image-section">
                        @if($order->delivery_proof)
                            <div class="proof-image-wrapper">
                                <img src="{{ asset('storage/'.$order->delivery_proof) }}" 
                                     alt="Preuve de livraison" 
                                     class="proof-image"
                                     onclick="document.getElementById('zoomModal').classList.add('active')">
                                <span class="zoom-hint"><i class="fas fa-search-plus me-1"></i> Cliquez pour agrandir</span>
                            </div>
                        @else
                            <div class="no-proof-placeholder">
                                <i class="fas fa-image"></i>
                                <p class="h5 mb-0">Aucune preuve de livraison soumise</p>
                            </div>
                        @endif
                        
                        <!-- Status Badge -->
                        <div>
                            <span class="status-mega-badge {{ $order->delivery_proof_status ?? 'none' }}">
                                @switch($order->delivery_proof_status)
                                    @case('submitted')
                                        <i class="fas fa-clock"></i> En attente de validation
                                        @break
                                    @case('approved')
                                        <i class="fas fa-check-circle"></i> Preuve approuvée
                                        @break
                                    @case('rejected')
                                        <i class="fas fa-times-circle"></i> Preuve rejetée
                                        @break
                                    @default
                                        <i class="fas fa-minus-circle"></i> Non soumise
                                @endswitch
                            </span>
                        </div>
                        
                        @if($order->delivery_proof_notes)
                        <div class="mt-3 p-3 bg-white rounded-3 text-start" style="max-width: 500px; margin: 0 auto;">
                            <strong class="small text-muted"><i class="fas fa-sticky-note me-1"></i> Notes du vendeur:</strong>
                            <p class="mb-0 mt-1">{{ $order->delivery_proof_notes }}</p>
                        </div>
                        @endif
                        
                        @if($order->delivery_proof_rejection_reason)
                        <div class="rejection-alert mt-4" style="max-width: 500px; margin: 0 auto;">
                            <strong><i class="fas fa-exclamation-triangle me-2"></i>Motif de rejet:</strong>
                            <p class="mt-2">{{ $order->delivery_proof_rejection_reason }}</p>
                        </div>
                        @endif
                    </div>
                    
                    <!-- Actions -->
                    <div class="proof-actions">
                        @if($order->delivery_proof_status == 'submitted')
                            <form action="{{ route('admin.orders.delivery-proof.approve', $order) }}" method="POST" class="d-inline">
                                @csrf
                                <button type="submit" class="btn-action approve" onclick="return confirm('Approuver cette preuve de livraison ?')">
                                    <i class="fas fa-check"></i> Approuver
                                </button>
                            </form>
                            <button type="button" class="btn-action reject" data-bs-toggle="modal" data-bs-target="#rejectModal">
                                <i class="fas fa-times"></i> Rejeter
                            </button>
                        @endif
                        @if($order->delivery_proof)
                            <button type="button" class="btn-action transmit" data-bs-toggle="modal" data-bs-target="#transmitModal">
                                <i class="fas fa-paper-plane"></i> Transmettre au client
                            </button>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Right Column: Info Cards -->
            <div class="col-lg-5">
                <!-- Seller -->
                <div class="info-card-modern">
                    <div class="info-card-header">
                        <div class="icon-box"><i class="fas fa-store"></i></div>
                        <h6>Vendeur</h6>
                    </div>
                    <div class="info-card-body">
                        @if($order->seller)
                            <div class="seller-card-modern">
                                @if($order->seller->logo)
                                    <img src="{{ asset('storage/'.$order->seller->logo) }}" alt="" class="seller-avatar">
                                @else
                                    <div class="seller-avatar-placeholder"><i class="fas fa-store"></i></div>
                                @endif
                                <div class="seller-info">
                                    <div class="shop-name">{{ $order->seller->shop_name }}</div>
                                    @if($order->seller->user)
                                        <div class="shop-email">{{ $order->seller->user->email }}</div>
                                    @endif
                                    @if($order->seller->is_verified)
                                        <span class="verified-badge mt-1"><i class="fas fa-check"></i> Vérifié</span>
                                    @endif
                                </div>
                            </div>
                        @else
                            <p class="text-muted mb-0">Vendeur non trouvé</p>
                        @endif
                    </div>
                </div>

                <!-- Order Details -->
                <div class="info-card-modern">
                    <div class="info-card-header">
                        <div class="icon-box"><i class="fas fa-shopping-cart"></i></div>
                        <h6>Détails Commande</h6>
                    </div>
                    <div class="info-card-body">
                        <div class="info-row-modern">
                            <span class="info-label">N° Commande</span>
                            <a href="{{ route('admin.orders.show', $order) }}" class="info-value text-primary">{{ $order->order_number }}</a>
                        </div>
                        <div class="info-row-modern">
                            <span class="info-label">Montant</span>
                            <span class="info-value">{{ number_format($order->total, 0, ',', ' ') }} FCFA</span>
                        </div>
                        <div class="info-row-modern">
                            <span class="info-label">Statut commande</span>
                            <span class="badge bg-{{ $order->status == 'delivered' ? 'success' : ($order->status == 'shipped' ? 'info' : 'secondary') }}">
                                {{ ucfirst($order->status) }}
                            </span>
                        </div>
                        <div class="info-row-modern">
                            <span class="info-label">Date commande</span>
                            <span class="info-value">{{ $order->created_at->format('d/m/Y H:i') }}</span>
                        </div>
                    </div>
                </div>

                <!-- Client -->
                <div class="info-card-modern">
                    <div class="info-card-header">
                        <div class="icon-box"><i class="fas fa-user"></i></div>
                        <h6>Client</h6>
                    </div>
                    <div class="info-card-body">
                        <div class="info-row-modern">
                            <span class="info-label">Nom</span>
                            <span class="info-value">{{ $order->customer_name ?? $order->user->name ?? 'N/A' }}</span>
                        </div>
                        <div class="info-row-modern">
                            <span class="info-label">Email</span>
                            <span class="info-value small">{{ $order->customer_email ?? $order->user->email ?? 'N/A' }}</span>
                        </div>
                        <div class="info-row-modern">
                            <span class="info-label">Téléphone</span>
                            <span class="info-value">{{ $order->customer_phone ?? 'N/A' }}</span>
                        </div>
                        @if($order->shipping_address)
                        <div class="info-row-modern">
                            <span class="info-label">Adresse</span>
                            <span class="info-value small">{{ $order->shipping_address }}</span>
                        </div>
                        @endif
                    </div>
                </div>

                <!-- Timeline -->
                <div class="info-card-modern">
                    <div class="info-card-header">
                        <div class="icon-box"><i class="fas fa-history"></i></div>
                        <h6>Historique</h6>
                    </div>
                    <div class="info-card-body">
                        <div class="timeline-modern">
                            <div class="timeline-item-modern">
                                <div class="timeline-date">{{ $order->created_at->format('d/m/Y H:i') }}</div>
                                <div class="timeline-text">Commande créée</div>
                            </div>
                            @if($order->delivery_proof_submitted_at)
                            <div class="timeline-item-modern warning">
                                <div class="timeline-date">{{ \Carbon\Carbon::parse($order->delivery_proof_submitted_at)->format('d/m/Y H:i') }}</div>
                                <div class="timeline-text">Preuve de livraison soumise</div>
                            </div>
                            @endif
                            @if($order->delivery_proof_status == 'approved' && $order->delivery_confirmed_at)
                            <div class="timeline-item-modern success">
                                <div class="timeline-date">{{ \Carbon\Carbon::parse($order->delivery_confirmed_at)->format('d/m/Y H:i') }}</div>
                                <div class="timeline-text">Preuve approuvée 
                                    @if($order->deliveryConfirmedBy)
                                        <span>par {{ $order->deliveryConfirmedBy->name }}</span>
                                    @endif
                                </div>
                            </div>
                            @elseif($order->delivery_proof_status == 'rejected')
                            <div class="timeline-item-modern danger">
                                <div class="timeline-date">-</div>
                                <div class="timeline-text">Preuve rejetée</div>
                            </div>
                            @endif
                            @if($order->delivery_proof_transmitted_at)
                            <div class="timeline-item-modern success">
                                <div class="timeline-date">{{ \Carbon\Carbon::parse($order->delivery_proof_transmitted_at)->format('d/m/Y H:i') }}</div>
                                <div class="timeline-text">Preuve transmise au client</div>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Zoom Modal -->
<div class="zoom-modal" id="zoomModal" onclick="this.classList.remove('active')">
    <span class="close-btn"><i class="fas fa-times"></i></span>
    @if($order->delivery_proof)
        <img src="{{ asset('storage/'.$order->delivery_proof) }}" alt="Preuve de livraison">
    @endif
</div>

<!-- Reject Modal -->
<div class="modal fade modal-modern" id="rejectModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header reject-header">
                <h5><i class="fas fa-times-circle me-2"></i>Rejeter la preuve</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('admin.orders.delivery-proof.reject', $order) }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="alert alert-warning rounded-3">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        Le vendeur sera informé du rejet et pourra soumettre une nouvelle preuve.
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Motif du rejet <span class="text-danger">*</span></label>
                        <textarea name="rejection_reason" class="form-control" rows="4" required
                                  placeholder="Ex: Image floue, produit non visible..." style="border-radius: 12px;"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    <button type="submit" class="btn btn-danger"><i class="fas fa-times me-1"></i> Confirmer le rejet</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Transmit Modal -->
<div class="modal fade modal-modern" id="transmitModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header transmit-header">
                <h5><i class="fas fa-paper-plane me-2"></i>Transmettre au client</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('admin.orders.delivery-proof.transmit', $order) }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    @if($order->delivery_proof)
                    <div class="text-center mb-4">
                        <img src="{{ asset('storage/'.$order->delivery_proof) }}" alt="Preuve" class="rounded-3" style="max-width: 200px; max-height: 150px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
                    </div>
                    @endif
                    <div class="mb-3">
                        <label class="form-label fw-bold">Uploader une autre preuve (optionnel)</label>
                        <input type="file" name="proof_for_customer" class="form-control" accept="image/*" style="border-radius: 12px;">
                        <small class="text-muted">Remplacera la preuve existante si uploadée</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Message pour le client</label>
                        <textarea name="message_to_customer" class="form-control" rows="3" 
                                  placeholder="Bonjour, voici la preuve de livraison de votre commande..." style="border-radius: 12px;"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    <button type="submit" class="btn btn-primary"><i class="fas fa-paper-plane me-1"></i> Envoyer</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        document.getElementById('zoomModal').classList.remove('active');
    }
});
</script>
@endpush
