@extends('layouts.app')

@section('page-title', 'Commandes Confirmées')
@section('page-subtitle', 'Gestion des commandes confirmées prêtes pour l\'expédition')

@section('content')
<style>
    :root {
        --primary: #3b82f6;
        --primary-dark: #2563eb;
        --primary-light: #60a5fa;
        --secondary: #0d9488;
        --accent: #f59e0b;
        --danger: #ef4444;
        --success: #10b981;
        --dark: #1f2937;
        --gray: #6b7280;
        --gray-light: #f3f4f6;
        --border: #e5e7eb;
    }

    * {
        box-sizing: border-box;
    }

    body {
        font-family: 'Segoe UI', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .confirmed-container {
        max-width: 100%;
        margin: 0 auto;
        padding: 1rem;
        background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
        min-height: 100vh;
    }

    .draggable-table-wrapper {
        position: relative;
        user-select: none;
        display: inline-block;
        width: 100%;
    }

    .draggable-handle {
        position: absolute;
        top: 0;
        left: 0;
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
        border-radius: 0 0 10px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: grab;
        z-index: 50;
        color: white;
        font-size: 1.5rem;
        box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border: 2px solid rgba(255, 255, 255, 0.35);
    }

    .draggable-handle:hover {
        background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
        box-shadow: 0 12px 36px rgba(37, 99, 235, 0.45);
        transform: scale(1.1);
    }

    .draggable-table-wrapper.dragging .draggable-handle {
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
        box-shadow: 0 14px 42px rgba(37, 99, 235, 0.5);
    }

    .table-container {
        background: white;
        border-radius: 1.25rem;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
        overflow: auto;
        position: relative;
        transition: all 0.3s ease;
        max-height: 85vh;
        border: 1.5px solid #e8ebf0;
    }

    .table-container.is-dragging {
        box-shadow: 0 35px 70px rgba(37, 99, 235, 0.35);
    }

    .header-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
        gap: 1rem;
        background: linear-gradient(135deg, white 0%, #f8fafc 100%);
        padding: 2rem;
        border-radius: 1.25rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        border: 1.5px solid #e8ebf0;
    }

    .page-header-info h1 {
        font-size: 2rem;
        font-weight: 900;
        color: #1e40af;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.9rem;
        letter-spacing: -1px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .page-header-info h1 i {
        color: #3b82f6;
        font-size: 2.2rem;
    }

    .header-buttons {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .btn {
        padding: 0.85rem 1.5rem;
        border: none;
        border-radius: 0.75rem;
        cursor: pointer;
        font-weight: 800;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: inline-flex;
        align-items: center;
        gap: 0.7rem;
        text-decoration: none;
        font-size: 0.95rem;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
        border: none;
        letter-spacing: 0.3px;
    }

    .btn-primary { background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; }
    .btn-warning { background: linear-gradient(135deg, #f59e0b, #d97706); color: white; }
    .btn-orange { background: linear-gradient(135deg, #FF6B35, #E55A1B); color: white; }
    .btn-success { background: linear-gradient(135deg, #10b981, #059669); color: white; }
    .btn-purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: white; }
    .btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626); color: white; }

    .btn:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
    }

    .btn:active {
        transform: translateY(-1px);
    }

    .filter-section {
        padding: 1.25rem;
        border-bottom: 3px solid #eff6ff;
        display: flex;
        gap: 0.75rem;
        flex-wrap: wrap;
        align-items: center;
        background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
    }

    .filter-input {
        flex: 1;
        min-width: 140px;
        padding: 0.8rem 1.1rem;
        border: 2px solid #bfdbfe;
        border-radius: 0.6rem;
        font-size: 0.85rem;
        transition: all 0.2s ease;
        background: white;
        color: var(--dark);
        font-weight: 600;
        letter-spacing: 0.2px;
    }

    .filter-input:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.12);
        background: #f7fbff;
    }

    .filter-input::placeholder {
        color: #a1aeb8;
        font-weight: 600;
    }

    .orders-table {
        width: 100%;
        border-collapse: collapse;
        min-width: 1400px;
    }

    .orders-table thead {
        background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
        border-bottom: 5px solid #1e40af;
        position: sticky;
        top: 0;
        z-index: 10;
        box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25);
    }

    .orders-table thead th {
        padding: 1.2rem 1.1rem;
        text-align: left;
        font-weight: 900;
        font-size: 0.75rem;
        color: #e0f2fe;
        text-transform: uppercase;
        letter-spacing: 1.3px;
        white-space: nowrap;
        border-right: 1px solid rgba(255, 255, 255, 0.18);
    }

    .orders-table thead th:last-child {
        border-right: none;
    }

    .orders-table thead th i {
        margin-right: 0.6rem;
        color: #93c5fd;
        font-size: 0.88rem;
    }

    .orders-table tbody tr {
        border-bottom: 2px solid #f0f4f8;
        transition: all 0.25s ease;
        background: white;
    }

    .orders-table tbody tr:hover {
        background: linear-gradient(90deg, #f0f9ff 0%, #ffffff 100%);
        box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.2);
    }

    .orders-table tbody tr.expanded {
        background: linear-gradient(90deg, #f0f9ff 0%, #e0f2fe 100%);
        box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.25);
    }

    .orders-table tbody td {
        padding: 1rem 1.1rem;
        font-size: 0.85rem;
        vertical-align: middle;
        border-right: 1px solid #f3f4f6;
        color: var(--dark);
        line-height: 1.6;
        font-weight: 600;
    }

    .orders-table tbody td:last-child {
        border-right: none;
    }

    .expandable-cell {
        cursor: pointer;
        position: relative;
        padding-right: 2rem;
        transition: all 0.2s ease;
        max-height: 32px;
        overflow: hidden;
        white-space: normal;
        word-break: break-word;
        color: var(--dark);
        font-weight: 600;
    }

    .expandable-cell:hover {
        color: #3b82f6;
    }

    .expandable-cell::after {
        content: '⋮⋮⋮';
        position: absolute;
        right: 0.4rem;
        top: 50%;
        transform: translateY(-50%);
        color: #3b82f6;
        font-weight: 900;
        font-size: 0.95rem;
        letter-spacing: 0.3rem;
    }

    .expandable-cell.expanded {
        max-height: none;
        overflow: visible;
        white-space: normal;
    }

    .expandable-cell.expanded::after {
        content: '';
    }

    .cell-divider {
        height: 2.5px;
        background: linear-gradient(90deg, transparent, #bfdbfe, transparent);
        margin: 0.5rem 0;
        display: none;
        border-radius: 1px;
    }

    .expandable-cell.expanded .cell-divider {
        display: block;
    }

    .expanded-text {
        display: none;
        font-size: 0.85rem;
        color: #1f2937;
        margin-top: 0.6rem;
        line-height: 1.8;
        font-weight: 700;
        background: rgba(59, 130, 246, 0.08);
        padding: 0.85rem;
        border-left: 5px solid #3b82f6;
        border-radius: 0.5rem;
    }

    .expandable-cell.expanded .expanded-text {
        display: block;
    }

    .parcel-id {
        font-weight: 900;
        color: white;
        font-size: 0.98rem;
        background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
        padding: 0.4rem 0.9rem;
        border-radius: 0.5rem;
        display: inline-block;
        box-shadow: 0 3px 12px rgba(37, 99, 235, 0.3);
        letter-spacing: 0.4px;
    }

    .client-name {
        font-weight: 800;
        color: var(--dark);
        font-size: 0.85rem;
    }

    .phone-link {
        color: #3b82f6;
        text-decoration: none;
        font-weight: 700;
        transition: all 0.2s ease;
        font-size: 0.8rem;
    }

    .phone-link:hover {
        color: #2563eb;
        text-decoration: underline;
    }

    .badge {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.45rem 0.9rem;
        border-radius: 0.6rem;
        font-size: 0.7rem;
        font-weight: 900;
        white-space: nowrap;
        border: 2px solid;
        letter-spacing: 0.6px;
    }

    .badge-confirme {
        background: linear-gradient(135deg, #dbeafe, #bfdbfe);
        color: #1e40af;
        border-color: #93c5fd;
    }

    .badge-livre {
        background: linear-gradient(135deg, #d1fae5, #a7f3d0);
        color: #065f46;
        border-color: #6ee7b7;
    }

    .delivery-badge {
        display: inline-block;
        padding: 0.45rem 0.9rem;
        border-radius: 0.6rem;
        font-size: 0.7rem;
        font-weight: 900;
        color: white;
        letter-spacing: 0.7px;
        border: none;
    }

    .delivery-badge.sendit {
        background: linear-gradient(135deg, #f97316, #ea580c);
        box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
    }

    .delivery-badge.atlas {
        background: linear-gradient(135deg, #a855f7, #9333ea);
        box-shadow: 0 4px 14px rgba(168, 85, 247, 0.35);
    }

    .delivery-badge.ozone {
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
    }

    .tracking-number-cell {
        font-family: 'JetBrains Mono', 'Monaco', 'Courier New', monospace;
        font-weight: 900;
        color: white;
        font-size: 0.7rem;
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        padding: 0.4rem 0.75rem;
        border-radius: 0.4rem;
        display: inline-block;
        letter-spacing: 0.7px;
        box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
    }

    .action-buttons-table {
        display: flex;
        gap: 0.5rem;
        flex-wrap: nowrap;
        justify-content: center;
    }

    .action-btn-small {
        padding: 0.55rem 0.75rem;
        border: none;
        border-radius: 0.5rem;
        cursor: pointer;
        font-weight: 800;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        font-size: 0.75rem;
        white-space: nowrap;
        min-width: 40px;
        height: 40px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.13);
    }

    .action-btn-small:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    }

    .action-btn-info { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1e40af; }
    .action-btn-success { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; }
    .action-btn-pdf { background: linear-gradient(135deg, #f3e8ff, #e9d5ff); color: #6b21a8; }
    .action-btn-warning { background: linear-gradient(135deg, #fef3c7, #fcd34d); color: #92400e; }
    .action-btn-danger { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #991b1b; }
    .action-btn-ship { background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); color: white; }

    .empty-state {
        text-align: center;
        padding: 6rem 2rem;
        color: var(--gray);
    }

    .empty-state i {
        font-size: 4.5rem;
        margin-bottom: 1.5rem;
        opacity: 0.12;
        color: #3b82f6;
    }

    .pagination-wrapper {
        background: linear-gradient(135deg, #f0f9ff, #eff6ff);
        padding: 1.5rem 1.75rem;
        border-top: 3px solid #bfdbfe;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 0 0 1.25rem 1.25rem;
        margin-top: 0;
        font-size: 0.85rem;
        color: var(--gray);
        font-weight: 800;
    }

    .drag-info-panel {
        position: fixed;
        top: 20px;
        right: 20px;
        background: white;
        padding: 1.5rem;
        border-radius: 0.85rem;
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.2);
        z-index: 2001;
        display: none;
        min-width: 320px;
        border-left: 6px solid #3b82f6;
        font-size: 0.88rem;
        font-weight: 800;
        animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .drag-info-panel.active {
        display: block;
    }

    @keyframes slideIn {
        from { transform: translateX(450px); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }

    .reset-position-btn {
        position: fixed;
        bottom: 20px;
        right: 20px;
        padding: 1rem 1.85rem;
        background: linear-gradient(135deg, #ef4444, #dc2626);
        color: white;
        border: none;
        border-radius: 0.75rem;
        cursor: pointer;
        font-weight: 900;
        display: none;
        z-index: 2001;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 10px 28px rgba(239, 68, 68, 0.35);
        font-size: 0.9rem;
        letter-spacing: 0.3px;
    }

    .reset-position-btn.show {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .reset-position-btn:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 36px rgba(239, 68, 68, 0.45);
    }

    .modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.65);
        z-index: 1100;
        align-items: center;
        justify-content: center;
        padding: 1.25rem;
    }

    .modal-overlay.active {
        display: flex;
    }

    .modal-content {
        background: white;
        border-radius: 1.25rem;
        box-shadow: 0 35px 75px rgba(0, 0, 0, 0.25);
        overflow: hidden;
        max-height: 90vh;
        overflow-y: auto;
        max-width: 750px;
        width: 100%;
        border: 1.5px solid #e8ebf0;
    }

    .modal-header {
        background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
        color: white;
        padding: 1.75rem 2.25rem;
        box-shadow: 0 6px 18px rgba(37, 99, 235, 0.25);
    }

    .modal-header h2 {
        margin: 0;
        font-size: 1.55rem;
        font-weight: 900;
        letter-spacing: -0.7px;
    }

    .modal-body {
        padding: 2.25rem;
    }

    .modal-footer {
        display: flex;
        gap: 1.25rem;
        justify-content: flex-end;
        padding: 1.75rem 2.25rem;
        border-top: 2px solid #f0f4f8;
        background: #f8fafc;
    }

    .service-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: 1.75rem;
    }

    .service-card {
        background: white;
        border: 3px solid #e8ebf0;
        border-radius: 1rem;
        padding: 2rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .service-card:hover {
        border-color: #3b82f6;
        box-shadow: 0 18px 36px rgba(59, 130, 246, 0.35);
        transform: translateY(-6px);
    }

    .service-card i {
        font-size: 3rem;
        margin-bottom: 1.5rem;
    }

    .bulk-actions {
        display: none;
        gap: 0.75rem;
        padding: 0.95rem;
        background: linear-gradient(135deg, #fef3c7, #fce7ae);
        border-radius: 0.75rem;
        align-items: center;
        font-size: 0.85rem;
        border: 2px solid #fcd34d;
    }

    .bulk-actions.active {
        display: flex;
    }

    @media (max-width: 1024px) {
        .orders-table {
            font-size: 0.82rem;
        }

        .orders-table thead th {
            padding: 0.95rem 0.85rem;
            font-size: 0.68rem;
        }

        .orders-table tbody td {
            padding: 0.85rem 0.9rem;
        }
    }

    @media (max-width: 768px) {
        .confirmed-container {
            padding: 0.5rem;
            background: white;
        }

        .header-actions {
            padding: 1rem;
            margin-bottom: 1rem;
            flex-direction: column;
            align-items: stretch;
            gap: 0.75rem;
        }

        .page-header-info {
            width: 100%;
        }

        .page-header-info h1 {
            font-size: 1.3rem;
            gap: 0.5rem;
        }

        .page-header-info h1 i {
            font-size: 1.5rem;
        }

        .header-buttons {
            width: 100%;
            gap: 0.5rem;
        }

        .btn {
            flex: 1;
            padding: 0.65rem 0.85rem;
            font-size: 0.78rem;
            min-height: 42px;
            justify-content: center;
        }

        .table-container {
            border-radius: 0.85rem;
            max-height: 80vh;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .filter-section {
            padding: 0.85rem;
            gap: 0.5rem;
            flex-direction: column;
        }

        .filter-input {
            min-width: 100%;
            padding: 0.7rem 0.9rem;
            font-size: 0.8rem;
            width: 100%;
        }

        .orders-table {
            font-size: 0.75rem;
            min-width: auto;
        }

        .orders-table thead {
            box-shadow: 0 3px 8px rgba(37, 99, 235, 0.15);
        }

        .orders-table thead th {
            padding: 0.7rem 0.6rem;
            font-size: 0.6rem;
            white-space: wrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .orders-table thead th i {
            display: none;
        }

        .orders-table tbody td {
            padding: 0.6rem 0.65rem;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .parcel-id {
            font-size: 0.85rem;
            padding: 0.3rem 0.6rem;
        }

        .client-name {
            font-size: 0.78rem;
        }

        .phone-link {
            font-size: 0.7rem;
        }

        .expandable-cell {
            font-size: 0.75rem;
            padding-right: 1.5rem;
            max-height: 24px;
        }

        .expanded-text {
            font-size: 0.78rem;
            padding: 0.6rem;
            margin-top: 0.4rem;
        }

        .badge {
            padding: 0.35rem 0.65rem;
            font-size: 0.6rem;
            white-space: wrap;
        }

        .delivery-badge {
            padding: 0.35rem 0.65rem;
            font-size: 0.6rem;
        }

        .tracking-number-cell {
            font-size: 0.65rem;
            padding: 0.3rem 0.55rem;
        }

        .action-buttons-table {
            gap: 0.3rem;
            flex-wrap: wrap;
        }

        .action-btn-small {
            min-width: 32px;
            height: 32px;
            padding: 0.35rem;
            font-size: 0.65rem;
            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
        }

        .action-btn-small:hover {
            transform: translateY(-1px);
        }

        .pagination-wrapper {
            padding: 1rem;
            font-size: 0.78rem;
            flex-direction: column;
            gap: 0.75rem;
            align-items: flex-start;
        }

        .drag-info-panel {
            top: auto;
            bottom: 80px;
            right: 10px;
            min-width: 280px;
            padding: 1rem;
            font-size: 0.8rem;
        }

        .draggable-handle {
            width: 40px;
            height: 40px;
            font-size: 1.2rem;
        }

        .reset-position-btn {
            bottom: 10px;
            right: 10px;
            padding: 0.75rem 1.25rem;
            font-size: 0.8rem;
        }

        .modal-overlay {
            padding: 0.75rem;
        }

        .modal-content {
            max-width: 95vw;
            border-radius: 1rem;
        }

        .modal-header {
            padding: 1.25rem 1.5rem;
        }

        .modal-header h2 {
            font-size: 1.2rem;
        }

        .modal-body {
            padding: 1.5rem;
        }

        .modal-footer {
            padding: 1.25rem;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .service-grid {
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 1rem;
        }

        .service-card {
            padding: 1.5rem;
            border-radius: 0.85rem;
        }

        .service-card i {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        .bulk-actions {
            width: 100%;
            padding: 0.7rem;
            gap: 0.5rem;
            font-size: 0.75rem;
        }

        .empty-state {
            padding: 4rem 1rem;
        }

        .empty-state i {
            font-size: 3.5rem;
            margin-bottom: 1rem;
        }

        .draggable-table-wrapper {
            width: 100%;
        }

        .header-buttons {
            flex-direction: column;
        }

        .btn {
            width: 100%;
        }
    }

    @media (max-width: 480px) {
        .confirmed-container {
            padding: 0.25rem;
        }

        .header-actions {
            padding: 0.75rem;
            margin-bottom: 0.75rem;
        }

        .page-header-info h1 {
            font-size: 1.1rem;
            letter-spacing: 0;
        }

        .page-header-info h1 i {
            font-size: 1.3rem;
            margin-right: 0.4rem;
        }

        .btn {
            padding: 0.55rem 0.7rem;
            font-size: 0.7rem;
            min-height: 38px;
        }

        .orders-table {
            font-size: 0.7rem;
            min-width: auto;
        }

        .orders-table thead th {
            padding: 0.5rem 0.4rem;
            font-size: 0.55rem;
            letter-spacing: 0.5px;
        }

        .orders-table tbody td {
            padding: 0.5rem 0.45rem;
            font-size: 0.7rem;
        }

        .parcel-id {
            font-size: 0.8rem;
            padding: 0.25rem 0.5rem;
        }

        .filter-section {
            padding: 0.65rem;
            gap: 0.4rem;
        }

        .filter-input {
            padding: 0.6rem 0.75rem;
            font-size: 0.75rem;
        }

        .action-btn-small {
            min-width: 28px;
            height: 28px;
            padding: 0.3rem;
            font-size: 0.6rem;
        }

        .badge {
            padding: 0.3rem 0.55rem;
            font-size: 0.55rem;
        }

        .expandable-cell {
            max-height: 20px;
        }

        .expanded-text {
            font-size: 0.73rem;
            padding: 0.5rem;
        }

        .modal-header h2 {
            font-size: 1.1rem;
        }

        .modal-body {
            padding: 1.25rem;
        }

        .drag-info-panel {
            min-width: 260px;
            padding: 0.85rem;
            font-size: 0.75rem;
        }

        .reset-position-btn {
            padding: 0.65rem 1rem;
            font-size: 0.75rem;
        }

        .pagination-wrapper {
            padding: 0.75rem;
            font-size: 0.7rem;
        }

        .service-card {
            padding: 1.25rem;
        }

        .service-card i {
            font-size: 2.2rem;
        }

        .empty-state {
            padding: 3rem 0.75rem;
        }

        .empty-state i {
            font-size: 3rem;
        }

        .draggable-handle {
            width: 36px;
            height: 36px;
            font-size: 1rem;
        }
    }

    @media (max-width: 360px) {
        .page-header-info h1 {
            font-size: 1rem;
        }

        .btn {
            padding: 0.5rem 0.6rem;
            font-size: 0.65rem;
        }

        .orders-table {
            font-size: 0.65rem;
        }

        .orders-table thead th {
            padding: 0.4rem 0.3rem;
            font-size: 0.52rem;
        }

        .orders-table tbody td {
            padding: 0.45rem 0.35rem;
            font-size: 0.65rem;
        }

        .action-btn-small {
            min-width: 24px;
            height: 24px;
            padding: 0.2rem;
            font-size: 0.55rem;
        }

        .filter-input {
            padding: 0.5rem 0.65rem;
            font-size: 0.7rem;
        }
    }
</style>

<div class="confirmed-container">
    
    <!-- Header Actions -->
    <div class="header-actions">
        <div class="page-header-info">
            <h1>
                <i class="fas fa-check-circle"></i>
                COMMANDES CONFIRMÉES
            </h1>
        </div>
        <div class="header-buttons">
            <button onclick="openAddParcelModalWithData(null)" class="btn btn-orange">
                <i class="fas fa-plus"></i> Nouveau Colis
            </button>
            <button onclick="openBLModal()" class="btn btn-purple">
                <i class="fas fa-file-invoice"></i> Créer Bordereau
            </button>
            <a href="{{ route('pending-orders.index') }}" class="btn btn-warning">
                <i class="fas fa-arrow-left"></i> Retour
            </a>
        </div>
    </div>

    <!-- DRAGGABLE TABLE CONTAINER -->
    @if($confirmedOrders->count() > 0)
        <div class="draggable-table-wrapper" id="draggableTableWrapper">
            <div class="draggable-handle" id="dragHandle" title="Déplacer le tableau">
                <i class="fas fa-arrows-alt"></i>
            </div>

            <div class="table-container" id="tableContainer">
                <div class="filter-section">
                    <input type="text" class="filter-input" placeholder="Rechercher client..." id="filterDestinataire">
                    <input type="text" class="filter-input" placeholder="Téléphone..." id="filterTelephone">
                    <input type="text" class="filter-input" placeholder="Ville..." id="filterVille">
                    <input type="text" class="filter-input" placeholder="Produit..." id="filterProduit">

                    <div class="bulk-actions" id="bulkActions">
                        <span style="font-weight: 900;">
                            <span id="selectedCount">0</span> sélectionné
                        </span>
                        <button onclick="bulkCreateBL()" class="btn btn-purple" style="padding: 0.55rem 1rem; font-size: 0.8rem;">
                            <i class="fas fa-file-invoice"></i> BL
                        </button>
                        <button onclick="bulkDelete()" class="btn btn-danger" style="padding: 0.55rem 1rem; font-size: 0.8rem;">
                            <i class="fas fa-trash"></i> Supprimer
                        </button>
                    </div>
                </div>

                <table class="orders-table">
                    <thead>
                        <tr>
                            <th style="width: 3%;"><input type="checkbox" id="selectAll" onchange="toggleSelectAll()"></th>
                            <th style="width: 4%;"><i class="fas fa-hashtag"></i> N°</th>
                            <th style="width: 11%;"><i class="fas fa-user"></i> Client</th>
                            <th style="width: 8%;"><i class="fas fa-phone"></i> Téléphone</th>
                            <th style="width: 9%;"><i class="fas fa-map-marker-alt"></i> Ville</th>
                            <th style="width: 10%;"><i class="fas fa-box"></i> Produit</th>
                            <th style="width: 9%;"><i class="fas fa-tasks"></i> État</th>
                            <th style="width: 9%;"><i class="fas fa-comment"></i> Notes</th>
                            <th style="width: 7%;"><i class="fas fa-calendar"></i> Date</th>
                            <th style="width: 10%;"><i class="fas fa-truck"></i> Livraison</th>
                            <th style="width: 6%;"><i class="fas fa-info-circle"></i> Statut</th>
                            <th style="width: 11%;"><i class="fas fa-sliders-h"></i> Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($confirmedOrders as $order)
                            <tr>
                                <td>
                                    <input 
                                        type="checkbox" 
                                        class="order-checkbox" 
                                        value="{{ $order->id }}"
                                        data-tracking="{{ $order->tracking_number ?? '' }}"
                                        onchange="updateSelection()"
                                        {{ $order->tracking_number ? '' : 'disabled' }}
                                    >
                                </td>
                                <td><span class="parcel-id">#{{ $order->id }}</span></td>
                                <td><div class="client-name">{{ Str::limit($order->client_name, 18) }}</div></td>
                                <td>
                                    <a href="tel:{{ $order->client_phone }}" class="phone-link">
                                        {{ Str::limit($order->client_phone, 13) }}
                                    </a>
                                </td>
                                <td>
                                    <span class="expandable-cell" onclick="toggleExpand(event)">
                                        {{ Str::limit($order->city ?? $order->client_city, 12) }}
                                        <div class="cell-divider"></div>
                                        <span class="expanded-text">{{ $order->city ?? $order->client_city }}</span>
                                    </span>
                                </td>
                                <td>
                                    <span class="expandable-cell" onclick="toggleExpand(event)">
                                        {{ Str::limit($order->products, 15) }}
                                        <div class="cell-divider"></div>
                                        <span class="expanded-text">{{ $order->products}}</span>
                                    </span>
                                </td>
                                <td>
                                    @if($order->tracking_number)
                                        <span class="badge badge-livre">
                                            <i class="fas fa-check"></i> Expédié
                                        </span>
                                    @else
                                        <span class="badge badge-confirme">
                                            <i class="fas fa-check"></i> Confirmé
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    <span class="expandable-cell" onclick="toggleExpand(event)">
                                        {{ $order->notes ? Str::limit($order->notes, 12) : '—' }}
                                        <div class="cell-divider"></div>
                                        <span class="expanded-text">{{ $order->notes ?? 'Aucune note' }}</span>
                                    </span>
                                </td>
                                <td>
                                    <strong style="color: #3b82f6;">{{ $order->confirmed_at ? $order->confirmed_at->format('d/m/y') : $order->created_at->format('d/m/y') }}</strong>
                                </td>
                                <td>
                                    @if($order->tracking_number)
                                        <span class="delivery-badge 
                                            @if($order->delivery_service === 'sendit') sendit 
                                            @elseif($order->delivery_service === 'atlas') atlas 
                                            @else ozone @endif">
                                            @if($order->delivery_service === 'sendit') SENDIT
                                            @elseif($order->delivery_service === 'atlas') ATLAS
                                            @else OZONE @endif
                                        </span>
                                        <code class="tracking-number-cell" style="display: block; margin-top: 4px;">{{ substr($order->tracking_number, 0, 9) }}</code>
                                    @else
                                        <span style="color: var(--gray); font-weight: 800;">—</span>
                                    @endif
                                </td>
                                <td>
                                    @if($order->tracking_number)
                                        <span class="badge badge-livre">
                                            <i class="fas fa-check-circle"></i> Expédié
                                        </span>
                                    @else
                                        <span class="badge badge-confirme">
                                            <i class="fas fa-clock"></i> Attente
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    <div class="action-buttons-table">
                                        @if($order->tracking_number)
                                            <button 
                                                onclick="showParcelInfo({{ $order->id }})"
                                                class="action-btn-small action-btn-info"
                                                title="Informations">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            <button 
                                                onclick="trackParcel({{ $order->id }})"
                                                class="action-btn-small action-btn-success"
                                                title="Suivi">
                                                <i class="fas fa-route"></i>
                                            </button>
                                            @if($order->delivery_service !== 'sendit' && $order->delivery_service !== 'atlas')
                                                <button 
                                                    onclick="downloadBL('{{ $order->tracking_number }}')"
                                                    class="action-btn-small action-btn-pdf"
                                                    title="Télécharger PDF">
                                                    <i class="fas fa-file-pdf"></i>
                                                </button>
                                            @endif
                                        @else
                                            <button 
                                                onclick="openServiceModal({{ $order->id }})"
                                                class="action-btn-small action-btn-ship"
                                                title="Expédier">
                                                <i class="fas fa-shipping-fast"></i>
                                            </button>
                                        @endif
                                        <button 
                                            onclick="editOrder({{ $order->id }})"
                                            class="action-btn-small action-btn-warning"
                                            title="Modifier">
                                            <i class="fas fa-pencil-alt"></i>
                                        </button>
                                        <button 
                                            onclick="deleteOrder({{ $order->id }})"
                                            class="action-btn-small action-btn-danger"
                                            title="Supprimer">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        @if($confirmedOrders->hasPages())
            <div class="pagination-wrapper">
                <div>
                    Affichage {{ $confirmedOrders->firstItem() }} à {{ $confirmedOrders->lastItem() }} de {{ $confirmedOrders->total() }}
                </div>
                <div>
                    {{ $confirmedOrders->links() }}
                </div>
            </div>
        @endif
    @else
        <div class="empty-state">
            <i class="fas fa-inbox"></i>
            <h3 style="color: var(--dark); font-size: 1.3rem; font-weight: 900;">Aucune Commande Confirmée</h3>
            <p style="font-weight: 700; font-size: 0.95rem;">Les commandes confirmées apparaîtront ici</p>
        </div>
    @endif

</div>

<!-- DRAG INFO PANEL -->
<div class="drag-info-panel" id="dragInfoPanel">
    <button class="drag-info-close" onclick="closeDragInfo()" style="position: absolute; top: 1rem; right: 1rem; background: none; border: none; cursor: pointer; color: var(--gray); font-size: 1.4rem; padding: 0;">
        <i class="fas fa-times"></i>
    </button>
    <div style="margin: 0.7rem 0; display: flex; justify-content: space-between; align-items: center;">
        <span style="font-weight: 900; color: #3b82f6;">Position X :</span>
        <span style="color: white; font-weight: 900; background: linear-gradient(135deg, #2563eb, #3b82f6); padding: 0.35rem 0.75rem; border-radius: 0.35rem; font-size: 0.82rem;" id="posX">0px</span>
    </div>
    <div style="margin: 0.7rem 0; display: flex; justify-content: space-between; align-items: center;">
        <span style="font-weight: 900; color: #3b82f6;">Position Y :</span>
        <span style="color: white; font-weight: 900; background: linear-gradient(135deg, #2563eb, #3b82f6); padding: 0.35rem 0.75rem; border-radius: 0.35rem; font-size: 0.82rem;" id="posY">0px</span>
    </div>
</div>

<!-- RESET BUTTON -->
<button class="reset-position-btn" id="resetBtn" onclick="resetTablePosition()">
    <i class="fas fa-redo-alt"></i> Réinitialiser
</button>

<!-- SERVICE MODAL -->
<div id="serviceModal" class="modal-overlay">
    <div class="modal-content">
        <div class="modal-header">
            <h2><i class="fas fa-truck"></i> Sélectionnez un Service</h2>
        </div>
        <div class="modal-body">
            <div class="service-grid">
                <div class="service-card" onclick="selectService('ozone')">
                    <i class="fas fa-rocket" style="color: #3b82f6;"></i>
                    <div style="font-weight: 900; margin-bottom: 0.6rem; color: var(--dark); font-size: 1rem;">OzoneExpress</div>
                    <div style="font-size: 0.8rem; color: var(--gray); font-weight: 700;">Livraison rapide</div>
                </div>
                
                <div class="service-card" onclick="selectService('sendit')">
                    <i class="fas fa-box" style="color: #f59e0b;"></i>
                    <div style="font-weight: 900; margin-bottom: 0.6rem; color: var(--dark); font-size: 1rem;">Sendit</div>
                    <div style="font-size: 0.8rem; color: var(--gray); font-weight: 700;">Suivi moderne</div>
                </div>

                <div class="service-card" onclick="selectService('atlas')">
                    <i class="fas fa-globe" style="color: #8b5cf6;"></i>
                    <div style="font-weight: 900; margin-bottom: 0.6rem; color: var(--dark); font-size: 1rem;">Atlas</div>
                    <div style="font-size: 0.8rem; color: var(--gray); font-weight: 700;">National express</div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button onclick="closeServiceModal()" class="btn btn-warning">Annuler</button>
        </div>
    </div>
</div>

<!-- CITY MODAL -->
<div id="cityModal" class="modal-overlay">
    <div class="modal-content" style="max-width: 500px;">
        <div class="modal-header">
            <h2><i class="fas fa-city"></i> Sélectionnez une Ville</h2>
        </div>
        <div class="modal-body">
            <input type="text" id="citySearch" placeholder="Rechercher une ville..." class="filter-input" style="margin-bottom: 1.5rem; width: 100%;" onkeyup="filterCities()">
            <select id="citySelect" size="10" style="width: 100%; padding: 0.95rem; border: 2px solid #bfdbfe; border-radius: 0.6rem; font-size: 0.95rem; font-weight: 700;">
                <option value="">Chargement...</option>
            </select>
        </div>
        <div class="modal-footer">
            <button onclick="closeCityModal()" class="btn btn-warning">Annuler</button>
            <button onclick="submitShipment()" class="btn btn-success">Confirmer</button>
        </div>
    </div>
</div>

<!-- DISTRICT MODAL -->
<div id="districtModal" class="modal-overlay">
    <div class="modal-content" style="max-width: 500px;">
        <div class="modal-header" style="background: linear-gradient(135deg, #f97316, #ea580c);">
            <h2><i class="fas fa-map-marker-alt"></i> Circonscription (Sendit)</h2>
        </div>
        <div class="modal-body">
            <input type="text" id="districtSearch" placeholder="Rechercher..." class="filter-input" style="margin-bottom: 1.5rem; width: 100%;" onkeyup="filterDistricts()">
            <div id="districtsList" style="max-height: 380px; overflow-y: auto;">
                <div style="text-align: center; padding: 2.5rem; color: var(--gray);">
                    <i class="fas fa-spinner fa-spin"></i>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button onclick="closeDistrictModal()" class="btn btn-warning">Annuler</button>
        </div>
    </div>
</div>

<!-- BL MODAL -->
<div id="blModal" class="modal-overlay">
    <div class="modal-content" style="max-width: 600px;">
        <div class="modal-header" style="background: linear-gradient(135deg, #a855f7, #9333ea);">
            <h2><i class="fas fa-file-invoice"></i> Créer un Bordereau</h2>
        </div>
        <div class="modal-body">
            <div id="blParcelsList" style="max-height: 340px; overflow-y: auto; border: 2px solid var(--border); border-radius: 0.75rem; padding: 0.95rem;"></div>
            <div style="background: linear-gradient(135deg, #eff6ff, #f0f9ff); padding: 1rem; border-radius: 0.75rem; border-left: 5px solid #3b82f6; margin-top: 1.5rem; font-size: 0.85rem; font-weight: 900;">
                Colis sélectionnés : <span id="blSelectedCount" style="color: #3b82f6; font-size: 1rem;">0</span>
            </div>
        </div>
        <div class="modal-footer">
            <button onclick="closeBLModal()" class="btn btn-warning">Annuler</button>
            <button onclick="createBL()" class="btn btn-purple"><i class="fas fa-file-invoice"></i> Créer</button>
        </div>
    </div>
</div>

<!-- PARCEL INFO MODAL -->
<div id="parcelInfoModal" class="modal-overlay">
    <div class="modal-content" style="max-width: 650px;">
        <div class="modal-header">
            <h2><i class="fas fa-box-open"></i> Détails du Colis</h2>
        </div>
        <div class="modal-body" id="parcelInfoContent">
            <div style="text-align: center; padding: 3rem;">
                <i class="fas fa-spinner fa-spin" style="font-size: 2.8rem; color: #3b82f6;"></i>
            </div>
        </div>
        <div class="modal-footer">
            <button onclick="closeParcelInfoModal()" class="btn btn-warning">Fermer</button>
        </div>
    </div>
</div>

<!-- ADD PARCEL MODAL -->
<div id="addParcelModal" class="modal-overlay">
    <div class="modal-content" style="max-width: 600px;">
        <div class="modal-header" style="background: linear-gradient(135deg, #FF6B35, #E55A1B);">
            <h2><i class="fas fa-plus-circle"></i> Nouveau Colis</h2>
        </div>
        <div class="modal-body">
            <form id="addParcelForm">
                <div style="display: grid; gap: 1rem;">
                    <div>
                        <label style="display: block; font-weight: 900; margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--dark);">Destinataire *</label>
                        <input type="text" name="parcel_receiver" required class="filter-input" style="width: 100%;">
                    </div>
                    <div>
                        <label style="display: block; font-weight: 900; margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--dark);">Téléphone *</label>
                        <input type="text" name="parcel_phone" required class="filter-input" style="width: 100%;">
                    </div>
                    <div>
                        <label style="display: block; font-weight: 900; margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--dark);">Ville *</label>
                        <select name="parcel_city" required class="filter-input" style="width: 100%;"><option value="">Chargement...</option></select>
                    </div>
                    <div>
                        <label style="display: block; font-weight: 900; margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--dark);">Adresse *</label>
                        <textarea name="parcel_address" required rows="2" class="filter-input" style="width: 100%;"></textarea>
                    </div>
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem;">
                        <div>
                            <label style="display: block; font-weight: 900; margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--dark);">Montant *</label>
                            <input type="number" name="parcel_price" required min="1" step="0.01" class="filter-input" style="width: 100%;">
                        </div>
                        <div>
                            <label style="display: block; font-weight: 900; margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--dark);">Type *</label>
                            <select name="parcel_stock" required class="filter-input" style="width: 100%;"><option value="1">Stock</option><option value="0">Ramassage</option></select>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button onclick="closeAddParcelModal()" class="btn btn-warning">Annuler</button>
            <button onclick="submitManualParcel()" class="btn btn-success">Créer</button>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.all.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.min.css">

<script>
    // ===== EXPAND CELL FUNCTIONALITY =====
    function toggleExpand(event) {
        event.stopPropagation();
        const cell = event.currentTarget;
        cell.classList.toggle('expanded');
        
        const row = cell.closest('tr');
        if (cell.classList.contains('expanded')) {
            row.classList.add('expanded');
        } else {
            row.classList.remove('expanded');
        }
    }

    // ===== TOAST NOTIFICATIONS =====
    function showSuccessToast(message) {
        Swal.fire({
            icon: 'success',
            title: message,
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000,
            timerProgressBar: true,
            backdrop: false,
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
            }
        })
    }

    function showErrorToast(message) {
        Swal.fire({
            icon: 'error',
            title: message,
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000,
            timerProgressBar: true,
            backdrop: false,
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
            }
        })
    }

    function showWarningToast(message) {
        Swal.fire({
            icon: 'warning',
            title: message,
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000,
            timerProgressBar: true,
            backdrop: false,
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
            }
        })
    }

    async function showConfirmAlert(title, message) {
        const result = await Swal.fire({
            title: title,
            text: message,
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#3b82f6',
            cancelButtonColor: '#6B7280',
            confirmButtonText: 'Oui',
            cancelButtonText: 'Annuler'
        });
        return result.isConfirmed;
    }

    // ===== DRAGGABLE TABLE =====
    let isDragging = false;
    let startX = 0, startY = 0, currentX = 0, currentY = 0, initialX = 0, initialY = 0;

    const wrapper = document.getElementById('draggableTableWrapper');
    const container = document.getElementById('tableContainer');
    const handle = document.getElementById('dragHandle');
    const infoPanel = document.getElementById('dragInfoPanel');
    const resetBtn = document.getElementById('resetBtn');

    if (handle) {
        handle.addEventListener('mousedown', startDrag);
        handle.addEventListener('touchstart', startDrag);
    }

    function startDrag(e) {
        isDragging = true;
        startX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;
        startY = e.type.includes('mouse') ? e.clientY : e.touches[0].clientY;
        wrapper.classList.add('dragging');
        container.classList.add('is-dragging');
        document.addEventListener('mousemove', drag);
        document.addEventListener('touchmove', drag);
        document.addEventListener('mouseup', stopDrag);
        document.addEventListener('touchend', stopDrag);
        showDragInfo();
    }

    function drag(e) {
        if (!isDragging) return;
        const clientX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;
        const clientY = e.type.includes('mouse') ? e.clientY : e.touches[0].clientY;
        currentX = initialX + (clientX - startX);
        currentY = initialY + (clientY - startY);
        wrapper.style.transform = `translate(${currentX}px, ${currentY}px)`;
        document.getElementById('posX').textContent = Math.round(currentX) + 'px';
        document.getElementById('posY').textContent = Math.round(currentY) + 'px';
    }

    function stopDrag() {
        if (!isDragging) return;
        isDragging = false;
        initialX = currentX;
        initialY = currentY;
        wrapper.classList.remove('dragging');
        container.classList.remove('is-dragging');
        document.removeEventListener('mousemove', drag);
        document.removeEventListener('touchmove', drag);
        document.removeEventListener('mouseup', stopDrag);
        document.removeEventListener('touchend', stopDrag);
        updateResetButton();
        saveDragPosition();
    }

    function showDragInfo() { infoPanel.classList.add('active'); }
    function closeDragInfo() { infoPanel.classList.remove('active'); }

    function resetTablePosition() {
        wrapper.style.transform = 'translate(0px, 0px)';
        currentX = currentY = initialX = initialY = 0;
        document.getElementById('posX').textContent = '0px';
        document.getElementById('posY').textContent = '0px';
        updateResetButton();
        clearDragPosition();
    }

    function updateResetButton() {
        resetBtn.classList.toggle('show', currentX !== 0 || currentY !== 0);
    }

    function saveDragPosition() {
        localStorage.setItem('tablePosition', JSON.stringify({ x: currentX, y: currentY }));
    }

    function loadDragPosition() {
        const saved = localStorage.getItem('tablePosition');
        if (saved) {
            const pos = JSON.parse(saved);
            currentX = pos.x; currentY = pos.y; initialX = pos.x; initialY = pos.y;
            if (wrapper) wrapper.style.transform = `translate(${currentX}px, ${currentY}px)`;
            updateResetButton();
        }
    }

    window.addEventListener('load', loadDragPosition);

    // ===== SELECTION =====
    let currentOrderId = null, currentService = null, allCitiesOptions = [], allDistrictsData = [], selectedDistrictId = null;

    function toggleSelectAll() {
        const selectAll = document.getElementById('selectAll');
        document.querySelectorAll('.order-checkbox:not(:disabled)').forEach(cb => cb.checked = selectAll.checked);
        updateSelection();
    }

    function updateSelection() {
        const checked = document.querySelectorAll('.order-checkbox:checked').length;
        document.getElementById('selectedCount').textContent = checked;
        document.getElementById('bulkActions').classList.toggle('active', checked > 0);
    }

    function bulkCreateBL() {
        const selected = Array.from(document.querySelectorAll('.order-checkbox:checked'))
            .filter(cb => cb.dataset.tracking).map(cb => cb.dataset.tracking);
        if (!selected.length) { showWarningToast('Aucun colis trouvé'); return; }
        createBLWithTracking(selected);
    }

    function bulkDelete() {
        const ids = Array.from(document.querySelectorAll('.order-checkbox:checked')).map(cb => cb.value);
        if (!ids.length) { showWarningToast('Sélectionnez des colis'); return; }
        showConfirmAlert('Supprimer ?', 'Cette action est irréversible').then(async confirmed => {
            if (!confirmed) return;
            const loading = showLoading('Suppression en cours...');
            try {
                const response = await fetch('/pending-orders/bulk-delete', {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Content-Type': 'application/json' },
                    body: JSON.stringify({ ids })
                });
                const data = await response.json();
                loading.remove();
                if (data.success) { showSuccessToast(`✅ ${data.count} supprimée(s)`); setTimeout(() => location.reload(), 1500); }
            } catch (error) { loading.remove(); showErrorToast('Erreur'); }
        });
    }

    function openBLModal() {
        const shippedOrders = @json($confirmedOrders->whereNotNull('tracking_number')->values());
        const list = document.getElementById('blParcelsList');
        list.innerHTML = !shippedOrders.length ? '<div style="text-align: center; color: var(--gray); padding: 1.5rem; font-weight: 700;">Aucun colis</div>' :
            shippedOrders.map(o => `<div style="display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem; background: #f9fafb; border-radius: 0.5rem; margin-bottom: 0.6rem; border-left: 5px solid #3b82f6;">
                <input type="checkbox" class="bl-parcel-checkbox" value="${o.tracking_number}" onchange="updateBLCount()" style="cursor: pointer; width: 20px; height: 20px;">
                <div style="flex: 1; font-size: 0.8rem;"><div style="font-weight: 900;">#${o.id} - ${o.client_name}</div><div style="color: var(--gray); font-weight: 700; font-size: 0.75rem;">${o.tracking_number}</div></div></div>`).join('');
        document.getElementById('blModal').classList.add('active');
    }

    function closeBLModal() { document.getElementById('blModal').classList.remove('active'); }
    function updateBLCount() { document.getElementById('blSelectedCount').textContent = document.querySelectorAll('.bl-parcel-checkbox:checked').length; }
    function createBL() {
        const selected = Array.from(document.querySelectorAll('.bl-parcel-checkbox:checked')).map(cb => cb.value);
        if (!selected.length) { showWarningToast('Sélectionnez des colis'); return; }
        createBLWithTracking(selected);
    }

    function createBLWithTracking(trackingNumbers) {
        const loading = showLoading('Création en cours...');
        fetch('/pending-orders/create-bon-livraison', {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Content-Type': 'application/json' },
            body: JSON.stringify({ tracking_numbers: trackingNumbers })
        }).then(r => r.json()).then(data => {
            loading.remove();
            if (data.success) {
                closeBLModal();
                showSuccessToast('✅ Bordereau créé !');
                if (data.pdf_url) setTimeout(() => window.open(data.pdf_url, '_blank'), 1500);
                setTimeout(() => location.reload(), 2000);
            } else showErrorToast('❌ Erreur');
        }).catch(() => { loading.remove(); showErrorToast('❌ Erreur'); });
    }

    function openServiceModal(orderId) { currentOrderId = parseInt(orderId); document.getElementById('serviceModal').classList.add('active'); }
    function closeServiceModal() { document.getElementById('serviceModal').classList.remove('active'); }
    function selectService(service) {
        currentService = service;
        closeServiceModal();
        if (service === 'ozone') { document.getElementById('cityModal').classList.add('active'); loadCities(); }
        else if (service === 'sendit') { document.getElementById('districtModal').classList.add('active'); loadDistricts(); }
        else if (service === 'atlas') showConfirmAlert('Expédier avec Atlas ?', 'La ville sera celle de la commande').then(confirmed => { if (confirmed) submitShipmentAtlas(); });
    }

    function loadCities() {
        const select = document.getElementById('citySelect');
        select.innerHTML = '<option value="">Chargement...</option>';
        fetch('https://api.ozonexpress.ma/cities').then(r => r.json()).then(data => {
            select.innerHTML = '<option value="">-- Sélectionnez --</option>';
            const cities = data.CITIES || data.cities || {};
            const arr = Object.entries(cities).map(([id, city]) => ({
                id, name: city.name || city.NAME || `Ville #${id}`, price: city.price || city.PRICE || '0'
            })).sort((a, b) => a.name.localeCompare(b.name));
            arr.forEach(city => {
                const opt = document.createElement('option');
                opt.value = city.id;
                opt.textContent = `${city.name} (${city.price} DH)`;
                select.appendChild(opt);
            });
            allCitiesOptions = Array.from(select.options).slice(1);
        }).catch(() => { select.innerHTML = '<option value="">❌ Erreur</option>'; showErrorToast('❌ Erreur'); });
    }

    function filterCities() {
        const term = document.getElementById('citySearch').value.toLowerCase();
        const select = document.getElementById('citySelect');
        select.innerHTML = '<option value="">-- Sélectionnez --</option>';
        allCitiesOptions.filter(opt => opt.textContent.toLowerCase().includes(term)).forEach(opt => select.add(opt.cloneNode(true)));
    }

    function closeCityModal() { document.getElementById('cityModal').classList.remove('active'); }
    function loadDistricts() {
        const container = document.getElementById('districtsList');
        container.innerHTML = '<div style="text-align: center; padding: 2rem;"><i class="fas fa-spinner fa-spin" style="font-size: 1.5rem; color: #3b82f6;"></i></div>';
        fetch('/api/sendit/cities').then(r => r.json()).then(data => {
            if (data.success && data.data) { allDistrictsData = data.data; renderDistricts(allDistrictsData); }
            else container.innerHTML = '<div style="color: var(--danger); text-align: center; padding: 1.5rem; font-weight: 700;">❌ Erreur</div>';
        }).catch(() => { container.innerHTML = '<div style="color: var(--danger); text-align: center; padding: 1.5rem; font-weight: 700;">❌ Erreur</div>'; });
    }

    function renderDistricts(districts) {
        const container = document.getElementById('districtsList');
        if (!districts.length) { container.innerHTML = '<div style="text-align: center; color: var(--gray); padding: 1.5rem; font-weight: 700;">Aucune circonscription</div>'; return; }
        container.innerHTML = districts.map(d => `
            <div style="padding: 0.9rem; border-bottom: 1.5px solid #f0f4f8; cursor: pointer; border-left: 4px solid transparent; transition: all 0.2s; border-radius: 0.3rem;" 
                 onclick="selectDistrict(${d.id}, '${d.name}', '${d.price}')" 
                 onmouseover="this.style.borderLeftColor='#3b82f6'; this.style.backgroundColor='#f9fafb';" 
                 onmouseout="this.style.borderLeftColor='transparent'; this.style.backgroundColor='white';">
                <div style="font-weight: 900; color: #1f2937;">${d.name}</div><div style="font-size: 0.75rem; color: var(--gray); font-weight: 700; margin-top: 0.2rem;">${d.ville}</div>
                <div style="font-weight: 900; color: #3b82f6; font-size: 0.75rem; margin-top: 0.3rem;">${d.price} DH</div>
            </div>`).join('');
    }

    function filterDistricts() {
        const term = document.getElementById('districtSearch').value.toLowerCase();
        renderDistricts(!term ? allDistrictsData : allDistrictsData.filter(d => (d.name || '').toLowerCase().includes(term)));
    }

    function selectDistrict(id, name, price) {
        selectedDistrictId = id;
        showConfirmAlert(`Expédier vers ${name} ?`, `Montant : ${price} DH`).then(confirmed => { if (confirmed) submitShipmentSendit(); });
    }

    function closeDistrictModal() { document.getElementById('districtModal').classList.remove('active'); }
    function submitShipment() {
        const cityId = document.getElementById('citySelect').value;
        if (!cityId) { showWarningToast('Sélectionnez une ville'); return; }
        const loading = showLoading('Expédition en cours...');
        fetch(`/pending-orders/${currentOrderId}/ship-order`, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Content-Type': 'application/json' },
            body: JSON.stringify({ city_id: cityId, service: 'ozone' })
        }).then(r => r.json()).then(data => {
            loading.remove();
            if (data.success) { closeCityModal(); closeServiceModal(); showSuccessToast('✅ Expédié !'); setTimeout(() => location.reload(), 1500); }
            else showErrorToast('❌ Erreur');
        }).catch(() => { loading.remove(); showErrorToast('❌ Erreur'); });
    }

    function submitShipmentSendit() {
        if (!selectedDistrictId) { showWarningToast('Sélectionnez une circonscription'); return; }
        const loading = showLoading('Expédition en cours...');
        fetch(`/pending-orders/${currentOrderId}/ship-order`, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Content-Type': 'application/json' },
            body: JSON.stringify({ district_id: selectedDistrictId, service: 'sendit' })
        }).then(r => r.json()).then(data => {
            loading.remove();
            if (data.success) { closeDistrictModal(); closeServiceModal(); showSuccessToast('✅ Expédié !'); setTimeout(() => location.reload(), 1500); }
            else showErrorToast('❌ Erreur');
        }).catch(() => { loading.remove(); showErrorToast('❌ Erreur'); });
    }

    function submitShipmentAtlas() {
        const loading = showLoading('Expédition en cours...');
        fetch(`/pending-orders/${currentOrderId}/ship-order-atlas`, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Content-Type': 'application/json' }
        }).then(r => r.json()).then(data => {
            loading.remove();
            if (data.success) { closeServiceModal(); showSuccessToast('✅ Expédié !'); setTimeout(() => location.reload(), 1500); }
            else showErrorToast('❌ Erreur');
        }).catch(() => { loading.remove(); showErrorToast('❌ Erreur'); });
    }

    function openAddParcelModalWithData() { document.getElementById('addParcelModal').classList.add('active'); loadParcelCities(); }
    function closeAddParcelModal() { document.getElementById('addParcelModal').classList.remove('active'); document.getElementById('addParcelForm').reset(); }
    function loadParcelCities() {
        const select = document.querySelector('#addParcelModal select[name="parcel_city"]');
        select.innerHTML = '<option value="">Chargement...</option>';
        fetch('https://api.ozonexpress.ma/cities').then(r => r.json()).then(data => {
            select.innerHTML = '<option value="">-- Sélectionnez --</option>';
            const cities = data.CITIES || data.cities || {};
            Object.entries(cities).sort((a, b) => (a[1].name || '').localeCompare(b[1].name || '')).forEach(([id, city]) => {
                const opt = document.createElement('option');
                opt.value = id;
                opt.textContent = city.name || city.NAME || `Ville #${id}`;
                select.appendChild(opt);
            });
        });
    }

    function submitManualParcel() {
        const form = document.getElementById('addParcelForm');
        if (!form.checkValidity()) { form.reportValidity(); return; }
        const data = Object.fromEntries(new FormData(form).entries());
        const loading = showLoading('Création en cours...');
        fetch('/pending-orders/add-manual-parcel', {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        }).then(r => r.json()).then(data => {
            loading.remove();
            if (data.success) { closeAddParcelModal(); showSuccessToast('✅ Colis créé !'); setTimeout(() => location.reload(), 1500); }
            else showErrorToast('❌ Erreur');
        }).catch(() => { loading.remove(); showErrorToast('❌ Erreur'); });
    }

    function editOrder(id) { window.location.href = `/pending-orders/${id}/edit`; }
    function deleteOrder(id) {
        showConfirmAlert('Supprimer cette commande ?', 'Cette action est irréversible').then(async c => {
            if (!c) return;
            const loading = showLoading('Suppression en cours...');
            try {
                const r = await fetch(`/pending-orders/${id}`, { method: 'DELETE', headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' } });
                const data = await r.json();
                loading.remove();
                if (data.success) { showSuccessToast('✅ Supprimée'); setTimeout(() => location.reload(), 1500); }
            } catch (e) { loading.remove(); showErrorToast('❌ Erreur'); }
        });
    }

    function downloadBL(tn) { window.open(`https://client.ozoneexpress.ma/pdf-delivery-note?dn-ref=${tn}`, '_blank'); }
    function showParcelInfo(id) {
        document.getElementById('parcelInfoModal').classList.add('active');
        fetch(`/pending-orders/${id}/parcel-info`).then(r => r.json()).then(data => {
            if (data.success) {
                const o = data.order;
                document.getElementById('parcelInfoContent').innerHTML = `
                    <div style="display: grid; gap: 0.9rem; font-size: 0.9rem;">
                        <div style="background: #eff6ff; padding: 0.9rem; border-left: 5px solid #3b82f6; border-radius: 0.5rem;"><strong style="color: #2563eb;">N° Colis :</strong> #${o.id}</div>
                        <div style="display: grid; gap: 0.6rem;">
                            <div><strong>Client :</strong> ${o.client_name}</div>
                            <div><strong>Téléphone :</strong> ${o.client_phone}</div>
                            <div><strong>Ville :</strong> ${o.city || o.client_city}</div>
                            <div><strong>Adresse :</strong> ${o.client_address || '—'}</div>
                            <div><strong>Produit :</strong> ${o.products}</div>
                            <div><strong>Montant Total :</strong> <strong style="color: #3b82f6; font-size: 1.1rem;">${parseFloat(o.total).toFixed(2)} DH</strong></div>
                            ${o.tracking_number ? `<div><strong>Numéro de suivi :</strong> <code style="background: #f0f4f8; padding: 0.35rem 0.6rem; border-radius: 0.3rem; font-weight: 700;">${o.tracking_number}</code></div>` : ''}
                        </div>
                    </div>`;
            }
        }).catch(() => { document.getElementById('parcelInfoContent').innerHTML = '<div style="color: var(--danger); text-align: center; padding: 2rem; font-weight: 700;">❌ Erreur</div>'; });
    }

    function closeParcelInfoModal() { document.getElementById('parcelInfoModal').classList.remove('active'); }
    function trackParcel(id) {
        const loading = showLoading('Chargement du suivi...');
        fetch(`/pending-orders/${id}/track-order`).then(r => r.json()).then(data => {
            loading.remove();
            if (data.success) Swal.fire({ title: 'Suivi du Colis', html: `<strong>Numéro :</strong> ${data.tracking_number}<br><strong>État :</strong> ${data.status || 'En cours'}`, icon: 'info' });
            else showErrorToast('❌ Erreur');
        }).catch(() => { loading.remove(); showErrorToast('❌ Erreur'); });
    }

    function showLoading(msg) {
        const loading = document.createElement('div');
        loading.style.cssText = 'position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; z-index: 2000;';
        loading.innerHTML = `<div style="background: white; padding: 2.5rem; border-radius: 0.85rem; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.3);">
            <i class="fas fa-spinner fa-spin" style="font-size: 2.2rem; color: #3b82f6;"></i>
            <p style="margin-top: 1.25rem; font-weight: 900; color: var(--dark); font-size: 1rem; letter-spacing: 0.3px;">${msg}</p></div>`;
        document.body.appendChild(loading);
        return loading;
    }

    document.addEventListener('keydown', e => { if (e.key === 'Escape') document.querySelectorAll('.modal-overlay.active').forEach(m => m.classList.remove('active')); });
    document.querySelectorAll('.modal-overlay').forEach(modal => {
        modal.addEventListener('click', e => { if (e.target === modal) modal.classList.remove('active'); });
    });
</script>
@endpush