@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')

    {{-- Archived Boards Section --}}
    <div class="row mb-4">
      <div class="col-12">
        <div class="card">
          <div class="card-header pb-0">
            <div class="d-flex justify-content-between align-items-center">
              <h6>Boards yang di arsipkan</h6>
              <span
                    class="badge badge-sm bg-gradient-secondary">{{ isset($archived_boards) ? $archived_boards->count() : 0 }}
                boards</span>
            </div>
          </div>
          <div class="card-body">
            @if (isset($archived_boards) && $archived_boards->count() > 0)
              <div class="row" id="archived-boards">
                @foreach ($archived_boards as $board)
                  @php
                    $isCustomImage = $board->image_path && (str_contains($board->image_path, '/') || str_contains($board->image_path, '\\'));
                    $isHexColor = $board->image_path && str_starts_with($board->image_path, '#');

                    if ($isCustomImage) {
                        $backgroundStyle = 'background-image: url(' . asset('storage/' . $board->image_path) . '); background-size: cover; background-position: center;';
                    } elseif ($isHexColor) {
                        $backgroundStyle = 'background-color: ' . $board->image_path . ';';
                    } else {
                        $backgroundStyle = 'background-color: #1e8c94;'; // fallback
                    }
                  @endphp
                  <div class=" col-md-6 mb-4" id="board-{{ $board->id }}">
                    <div class="card archived-board-card flex-row h-100"
                         data-board-id="{{ $board->id }}">
                      <div class="card-header board-header position-relative d-flex align-items-center justify-content-center"
                           style="{{ $backgroundStyle }}">
                        <div class="board-pattern"></div>
                      </div>
                      <div class="card-body d-flex flex-column justify-content-between ">
                        <div>
                          <h6 class="mb-2 text-muted">{{ $board->title }}</h6>
                          <small class="text-muted mb-3 d-block">
                            Diarsipkan {{ $board->updated_at->diffForHumans() }}
                          </small>
                          <button type="button" class="btn btn-outline-info btn-sm w-100 mb-2"
                                  onclick="viewBoard({{ $board->id }})">
                            <i class="fas fa-eye me-1"></i> Lihat
                          </button>
                        </div>
                        <div class="d-flex gap-2">
                          <button type="button" class="btn btn-outline-success btn-sm flex-fill"
                                  onclick="restoreBoard({{ $board->id }})">
                            <i class="fas fa-undo me-1"></i> Kembalikan
                          </button>
                          <button type="button" class="btn btn-outline-danger btn-sm flex-fill"
                                  onclick="deleteBoard({{ $board->id }})"
                                  title="Hapus Permanen">
                            <i class="fas fa-trash"></i>
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                @endforeach
              </div>
            @else
              {{-- Empty State --}}
              <div class="text-center py-5">
                <div class="mb-4">
                  <i class="fas fa-archive fa-4x text-muted opacity-6"></i>
                </div>
                <h5 class="text-muted mb-2">Tidak ada boards yang diarsipkan</h5>
                <p class="text-muted mb-4">Boards yang Anda arsipkan akan muncul di sini.</p>
                <a href="{{ url('boards') }}" class="btn btn-primary">
                  <i class="fas fa-columns me-1"></i> Pergi ke Boards
                </a>
              </div>
            @endif
          </div>
        </div>
      </div>
    </div>

  </div>

  {{-- Confirmation Modal for Restore --}}
  <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 text-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>
            <small style="color: #17a2b8;">Board ini akan dipindahkan kembali ke boards aktif Anda dan akan dapat diakses kembali.</small>
          </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>

  {{-- Confirmation Modal for Delete --}}
  <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">
          <h5 class="modal-title fw-bold text-white" id="deleteModalLabel">
            <i class="fas fa-exclamation-triangle me-2"></i>Hapus Permanen Board
          </h5>
          <button type="button" class="btn-close text-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="info-box d-flex align-items-start p-3 rounded"
               style="background-color: #fdecef; border-left: 4px solid #f5365c;">
            <i class="fas fa-exclamation-triangle me-2 mt-1 text-danger"></i>
            <small><strong>Peringatan:</strong> Tindakan ini tidak dapat dibatalkan. Semua lists, cards, dan komentar akan dihapus secara permanen.</small>
          </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>
    .archived-board-card {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      min-height: 80px;
      border-radius: 0.75rem;
      border: 1.5px solid #e0e0e0;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      background: #fff;
      padding: 0;
      margin: 0;
      transition: box-shadow 0.2s;
    }

    .archived-board-card:hover {
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
      opacity: 1;
    }

    .archived-board-card .board-header {
      min-height: 120px;
      position: relative;
      border-radius: 0.5rem 0.5rem 0 0;
      filter: saturate(0.7);
    }

    .archived-board-card .card-body {
      padding: 20px;
      max-height: 190px;

    }

    .archived-board-card .card-body h6 {
      font-weight: 600;
      margin-bottom: 0.5rem;
      line-height: 1.4;
    }

    .archived-board-card .btn-sm {
      font-size: 0.75rem;
      padding: 0.5rem 0.75rem;
    }

    .card-header.board-header {
      min-width: 275px;
      /* max-width:275px;  */
      border-radius: 0.5rem 0 0 0.5rem;
      padding: 0;
    }

    /* Empty state styling */
    .empty-state {
      padding: 3rem 1rem;
    }

    /* Archive indicator styling */
    .archived-board-card .board-header .fa-archive {
      font-size: 1.2rem;
      background: rgba(0, 0, 0, 0.2);
      padding: 0.5rem;
      border-radius: 0.25rem;
    }

    /* Board pattern overlay for archived boards */
    .archived-board-card .board-pattern {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: repeating-linear-gradient(45deg,
          rgba(255, 255, 255, 0.1),
          rgba(255, 255, 255, 0.1) 10px,
          transparent 10px,
          transparent 20px);
      opacity: 0.3;
    }

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

    /* Button group styling */
    .btn-group-archived {
      gap: 0.25rem;
    }

    .btn-group-archived .btn {
      border-radius: 0.375rem;
    }

    /* Ubah warna tombol View, Restore, Delete */
    .archived-board-card .btn-outline-info {
      color: #ffffff;
      background-color: #1e8c94;
      border-color: #ffffff;
    }

    .archived-board-card .btn-outline-info:hover {
      background-color: #1e8c94;
      border-color: #ffffff;
      color: #ffffff;
    }

    .archived-board-card .btn-outline-success {
      color: #ffffff;
      background-color: #1e8c94;
      border-color: #ffffff;
    }

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

    .archived-board-card .btn-outline-danger {
      color: #ffffff;
      background-color: #dc3545;
      border-color: #ffffff;
    }

    .archived-board-card .btn-outline-danger:hover {
      background-color: #bd2130;
      border-color: #ffffff;
      color: #ffffff;
    }
  </style>
@endpush

@push('js')
  <script>
    let currentBoardId = null;

    // View archived board (read-only)
    function viewBoard(boardId) {
      window.location.href = `{{ url('archives/show') }}/${boardId}`;
    }

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

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

    // Confirm restore
    document.getElementById('confirmRestore').addEventListener('click', function() {
      if (!currentBoardId) return;

      // Show loading state
      this.disabled = true;
      this.innerHTML =
        '<span class="text-white"><i class="fas fa-spinner fa-spin me-1"></i> Mengembalikan..</span>';

      // 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) {
            // Close modal
            const modal = bootstrap.Modal.getInstance(document.getElementById('restoreModal'));
            modal.hide();

            // Remove board from archived list
            const boardElement = document.getElementById(`board-${currentBoardId}`);
            if (boardElement) {
              boardElement.remove();
            }

            // Show success message
            showAlert('success', 'Berhasil mengembalikan board!');

            // Update counter
            updateBoardCounter();

            // Redirect ke halaman boards setelah restore
            setTimeout(function() {
              window.location.href = "{{ url('boards') }}";
            }, 1200); // 1.2 detik agar user lihat notifikasi dulu
          } 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';
          currentBoardId = null;
        });
    });

    // Confirm delete
    document.getElementById('confirmDelete').addEventListener('click', function() {
      if (!currentBoardId) return;

      // Show loading state
      this.disabled = true;
      this.innerHTML =
        '<span class="text-white"><i class="fas fa-spinner fa-spin me-1"></i> Menghapus..</span>';
      // 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) {
            // Close modal
            const modal = bootstrap.Modal.getInstance(document.getElementById('deleteModal'));
            modal.hide();

            // Remove board from archived list
            const boardElement = document.getElementById(`board-${currentBoardId}`);
            if (boardElement) {
              boardElement.remove();
            }

            // Show success message
            showAlert('success', 'Board berhasil dihapus permanen!');

            // Update counter
            updateBoardCounter();

            // Check if no more boards
            checkEmptyState();
          } 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';
          currentBoardId = null;
        });
    });

    // Update board counter
    function updateBoardCounter() {
      // Count only board columns by id prefix
      const boardCount = document.querySelectorAll('#archived-boards > div[id^="board-"]').length;
      const badge = document.querySelector('.badge.bg-gradient-secondary');
      if (badge) {
        badge.textContent = boardCount + ' boards';
      }
    }

    // Check if we need to show empty state
    function checkEmptyState() {
      const boardsContainer = document.getElementById('archived-boards');
      const boardCount = document.querySelectorAll('#archived-boards > div[id^="board-"]').length;

      if (boardCount === 0 && boardsContainer) {
        boardsContainer.innerHTML = `
          <div class="col-12">
            <div class="text-center py-5">
              <div class="mb-4">
                <i class="fas fa-archive fa-4x text-muted opacity-6"></i>
              </div>
              <h5 class="text-muted mb-2">Tidak Ada Board Arsip</h5>
              <p class="text-muted mb-4">Board yang Anda arsipkan akan muncul di sini.</p>
              <a href="{{ url('boards') }}" class="btn btn-primary">
                <i class="fas fa-columns me-1"></i> Pergi ke Boards
              </a>
            </div>
          </div>
        `;
      }
    }

    // Search functionality (if search component is used)
    const searchInput = document.getElementById('searchInput');
    if (searchInput) {
      searchInput.addEventListener('input', function(e) {
        const searchTerm = e.target.value.toLowerCase();
        const allCards = document.querySelectorAll('.archived-board-card');

        allCards.forEach(card => {
          const title = card.querySelector('h6');
          if (title) {
            const titleText = title.textContent.toLowerCase();
            // Fix selector: use the wrapper with id="board-..."
            const parentCol = card.closest('[id^="board-"]');
            if (parentCol) {
              parentCol.style.display = titleText.includes(searchTerm) || searchTerm === '' ?
                '' : 'none';
            }
          }
        });
      });
    }
  </script>
@endpush