@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    @include('components.search')
    <div class="container-fluid py-4">
        {{-- Alert --}}
        @include('components.kanban-alert')

        {{-- Board Header --}}
        <div class="row mb-3">
            <div class="col-12">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                            <div class="d-flex align-items-center flex-wrap gap-2">
                                <div>
                                    <h5 class="mb-0 text-muted">
                                        <i class="fas fa-archive me-2 MAR"></i>{{ $board->title }} (Archived)
                                    </h5>
                                    <small class="text-muted">Diarsipkan {{ $board->updated_at->diffForHumans() }}</small>
                                </div>
                            </div>
                            <div class="d-flex flex-row gap-3">
                                <a href="{{ url('archives') }}" class="btn btn-outline-secondary btn-sm">
                                    <i class="fas fa-arrow-left me-1"></i> Kembali ke Arsip
                                </a>
                                <button type="button" class="btn btn-outline-success btn-sm"
                                    onclick="restoreBoard({{ $board->id }})">
                                    <i class="fas fa-undo me-1"></i> Kembalikan Board
                                </button>
                                <button type="button" class="btn btn-outline-danger btn-sm"
                                    onclick="deleteBoard({{ $board->id }})">
                                    <i class="fas fa-trash me-1"></i> Hapus Permanen
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Read-only Board Content --}}
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body p-4">
                        @if (isset($lists) && $lists->count() > 0)
                            <div class="kanban-columns">
                                @foreach ($lists as $list)
                                    <div class="kanban-column" data-list-id="{{ $list->id }}">
                                        <div class="column-container">
                                            <div class="column-header">
                                                <p class="column-title-display">{{ $list->title }}</p>
                                                <span class="badge bg-secondary">{{ $list->cards->count() }}</span>
                                            </div>
                                            <div class="cards-container">
                                                @if (isset($cards_by_list[$list->id]))
                                                    @foreach ($cards_by_list[$list->id] as $card)
                                                        @php
                                                            $borderColor = 'blue';
                                                            if ($card->due_date) {
                                                                $dueDate = \Carbon\Carbon::parse($card->due_date);
                                                                $now = \Carbon\Carbon::now();
                                                                $daysUntilDue = $now->diffInDays($dueDate, false);

                                                                // Overdue (sudah melewati deadline)
                                                                if ($daysUntilDue < 0) {
                                                                    $borderColor = 'black';
                                                                }
                                                                // Urgent (kurang dari atau sama dengan 7 hari)
                                                                elseif ($daysUntilDue <= 7) {
                                                                    $borderColor = 'red';
                                                                }
                                                            }
                                                            // Samakan dengan board
                                                            $priority =
                                                                $borderColor === 'black'
                                                                    ? 3
                                                                    : ($borderColor === 'red'
                                                                        ? 2
                                                                        : ($borderColor === 'blue'
                                                                            ? 1
                                                                            : 0));
                                                            // Fallback counts
                                                            $attCount =
                                                                $card->attachments_count ??
                                                                (isset($card->attachments)
                                                                    ? $card->attachments->count()
                                                                    : 0);
                                                            $comCount =
                                                                $card->comments_count ??
                                                                (isset($card->comments) ? $card->comments->count() : 0);
                                                        @endphp
                                                        <div class="task-card" data-task-id="{{ $card->id }}"
                                                            onclick="viewCard({{ $card->id }})"
                                                            data-title="{{ Str::lower($card->title) }}"
                                                            data-created-at="{{ \Carbon\Carbon::parse($card->created_at)->timestamp }}"
                                                            data-due-date="{{ $card->due_date ? \Carbon\Carbon::parse($card->due_date)->timestamp : '' }}"
                                                            data-comments-count="{{ $comCount }}"
                                                            data-attachments-count="{{ $attCount }}"
                                                            data-priority="{{ $priority }}">
                                                            <div
                                                                class="task-card-border task-card-border-{{ $borderColor }}">
                                                            </div>
                                                            <div class="task-card-content">
                                                                <div class="task-user">{{ $card->user_create }}</div>
                                                                <div class="task-title">{{ $card->title }}</div>
                                                                <div class="task-bottom">
                                                                    @if ($card->due_date)
                                                                        <div class="task-date">
                                                                            <i class="far fa-clock"></i>
                                                                            <span class="created-date" title="Created at">
                                                                                {{ \Carbon\Carbon::parse($card->created_at)->format('d M y') }}
                                                                            </span>
                                                                            <span class="date-separator">·</span>
                                                                            <span class="due-date" title="Due date">
                                                                                {{ \Carbon\Carbon::parse($card->due_date)->format('d M y') }}
                                                                            </span>
                                                                        </div>
                                                                    @endif
                                                                    <div class="task-stats">
                                                                        @if ($comCount > 0)
                                                                            <div class="task-stat-item">
                                                                                <i class="far fa-comments"></i>
                                                                                <span>{{ $comCount }}</span>
                                                                            </div>
                                                                        @endif
                                                                        @if ($attCount > 0)
                                                                            <div class="task-stat-item">
                                                                                <i class="fas fa-paperclip"></i>
                                                                                <span>{{ $attCount }}</span>
                                                                            </div>
                                                                        @endif
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            {{-- Empty Board State --}}
                            <div class="text-center py-5">
                                <div class="mb-4">
                                    <i class="fas fa-columns fa-4x text-muted opacity-6"></i>
                                </div>
                                <h5 class="text-muted mb-2">Board Kosong</h5>
                                <p class="text-muted mb-4">Board arsip ini tidak memiliki list atau card.</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

    </div>

    @include('pages.archives.modals.view-card')

    {{-- Restore Confirmation Modal --}}
    <div class="modal fade" id="restoreModal" tabindex="-1" aria-labelledby="restoreModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header text-white" style="background: linear-gradient(87deg, #17a2b8 0, #138496 100%);">
                    <h5 class="modal-title fw-bold" id="restoreModalLabel">
                        <i class="fas fa-undo me-2"></i>Kembalikan Board
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-3">Apakah Anda yakin ingin mengembalikan board ini?</p>
                    <div class="info-box d-flex align-items-start p-3 rounded"
                        style="background-color: rgba(23, 162, 184, 0.1); border-left: 4px solid #17a2b8;">
                        <i class="fas fa-info-circle me-2 mt-1" style="color: #17a2b8;"></i>
                        <div style="color: #17a2b8;">
                            <small>Board ini akan dipindahkan kembali ke boards aktif Anda dan akan dapat diakses
                                kembali.</small>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn text-white" id="confirmRestore"
                        style="background: linear-gradient(87deg, #17a2b8 0, #138496 100%);">
                        <i class="fas fa-undo me-1"></i> Kembalikan Board
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Delete Confirmation Modal --}}
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title fw-bold" id="deleteModalLabel">
                        <i class="fas fa-exclamation-triangle me-2"></i>Hapus Permanen Board
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-3">Apakah Anda yakin ingin menghapus board ini secara permanen?</p>
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>Peringatan:</strong> Tindakan ini tidak dapat dibatalkan. Semua lists, cards, dan komentar
                        akan dihapus secara permanen.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-danger" id="confirmDelete">
                        <i class="fas fa-trash me-1"></i> Hapus Permanen
                    </button>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('css')
    <style>
        .kanban-columns {
            display: flex;
            gap: 16px;
            overflow-x: auto;
            overflow-y: visible;
            padding: 16px;
            min-height: calc(100vh - 180px);
            width: 100%;
            border-bottom-left-radius: 12px;
            border-bottom-right-radius: 12px;
            position: relative;
            z-index: 1;
        }

        .kanban-column {
            min-width: 320px;
            flex-shrink: 0;
            width: 320px;
        }

        .column-container {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 12px;
            border: 1px solid #e9ecef;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            height: fit-content;
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 1;
        }

        .column-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
            padding-bottom: 6px;
            flex-shrink: 0;
        }

        .column-title-display {
            font-size: 14px;
            font-weight: 600;
            color: #344767;
            letter-spacing: 0.025em;
            margin: 1px 7px;
        }

        .cards-container {
            display: flex;
            flex-direction: column;
        }

        .task-card {
            background: #ffffff;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 12px;
            cursor: pointer;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            position: relative;
            order: 1;
            transition: box-shadow 0.2s;
        }

        .task-card:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .task-card-border {
            height: 15px;
            width: 100%;
        }

        .task-card-border-red {
            background: #FF4D4F;
        }

        .task-card-border-blue {
            background: #1890FF;
        }

        .task-card-border-black {
            background: #262626;
        }

        .task-card-content {
            padding: 16px;
        }

        .task-user {
            font-size: 11px;
            font-weight: 600;
            color: #8C8C8C;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }

        .task-title {
            font-size: 14px;
            font-weight: 500;
            color: #262626;
            line-height: 1.4;
            margin-bottom: 16px;
        }

        .task-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .task-date {
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #6c757d;
            gap: 6px;
        }

        .task-date .created-date {
            color: #6c757d;
            font-weight: 400;
        }

        .task-date .due-date {
            color: #6c757d;
            font-weight: 600;
        }

        .task-date .date-separator {
            color: #6c757d;
            margin: 0 2px;
            font-size: 13px;
            font-weight: bold;
        }

        .task-title-attachment-icon {
            color: #8C8C8C;
            margin-right: 6px;
            font-size: 12px;
        }

        .task-date i {
            margin-right: 6px;
            font-size: 11px;
        }

        .task-stats {
            display: flex;
            gap: 16px;
        }

        .task-stat-item {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            color: #8C8C8C;
        }

        .task-stat-item i {
            font-size: 11px;
        }

        .info-box .text-info small {
            color: #000000;
        }

        /* Back to Archives */
        .btn-outline-secondary {
            color: #ffffff;
            border-color: #1e8c94;
            background: #1e8c94;
        }

        .btn-outline-secondary:hover {
            background: #1e8c94;
            color: #ffffff;
            border-color: #1e8c94;
        }

        /* Restore Board */
        .btn-outline-success {
            color: #ffffff;
            background-color: #1e8c94;
            border-color: #1e8c94;
        }

        .btn-outline-success:hover {
            background-color: #1e8c94;
            border-color: #1e8c94;
            color: #1e8c94;
        }

        /* Delete Permanently */
        .btn-outline-danger {
            color: #fff;
            background-color: #e53935;
            border-color: #e53935;
        }

        .btn-outline-danger:hover {
            background-color: #b71c1c;
            border-color: #b71c1c;
            color: #fff;
        }

        .header-action-btns {
            display: flex;
            flex-direction: row;
            gap: 0.5rem;
            align-items: center;
            height: 100%;
        }

        @media (max-width: 575px) {
            .header-action-btns {
                flex-direction: column;
                align-items: stretch;
            }
        }
    </style>
@endpush

@push('js')
    <script>
        // Archived view flag
        window.isArchiveView = true;
        let currentBoardId = {{ $board->id }};

        // View card function (read-only)
        function viewCard(cardId) {
            openViewCardModal(cardId);
        }

        // Restore board function
        function restoreBoard(boardId) {
            const modal = new bootstrap.Modal(document.getElementById('restoreModal'));
            modal.show();
        }

        // Delete board function
        function deleteBoard(boardId) {
            const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
            modal.show();
        }

        // Confirm restore
        document.getElementById('confirmRestore').addEventListener('click', function() {
            // Show loading state
            this.disabled = true;
            this.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Mengembalikan..';

            // Submit via AJAX
            fetch('{{ url('archives') }}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'X-Requested-With': 'XMLHttpRequest',
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        action: 'restore',
                        board_id: currentBoardId
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Redirect to boards page
                        window.location.href = '{{ url('boards') }}';
                    } else {
                        showAlert('danger', 'Error saat mengembalikan board: ' + data.message);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showAlert('danger', 'Terjadi kesalahan saat mengembalikan board.');
                })
                .finally(() => {
                    // Reset button state
                    this.disabled = false;
                    this.innerHTML = '<i class="fas fa-undo me-1"></i> Kembalikan Board';
                });
        });

        // Confirm delete
        document.getElementById('confirmDelete').addEventListener('click', function() {
            // Show loading state
            this.disabled = true;
            this.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Menghapus..';

            // Submit via AJAX
            fetch('{{ url('archives') }}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'X-Requested-With': 'XMLHttpRequest',
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        action: 'delete_permanent',
                        board_id: currentBoardId
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Redirect to archives page
                        window.location.href = '{{ url('archives') }}';
                    } else {
                        showAlert('danger', 'Error saat menghapus board: ' + data.message);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    showAlert('danger', 'Terjadi kesalahan saat menghapus board.');
                })
                .finally(() => {
                    // Reset button state
                    this.disabled = false;
                    this.innerHTML = '<i class="fas fa-trash me-1"></i> Hapus Permanen';
                });
        });
    </script>
@endpush