@extends('layouts.admin')

@section('title', 'Companies')

@section('content')
<style>
  body {
    background-color: #f4f6fc;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }

  .stats-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
  }

  .stats-number {
    font-size: 2.5rem; 
    font-weight: 700;
    line-height: 1.2;
  }

  .folder-container {
    display: flex;
    flex-wrap: wrap;
    gap: 35px 40px;
    padding: 20px 10px;
  }

  .folder-card {
    width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease;
    background: white;
    border-radius: 16px;
    padding: 20px 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  }

  .folder-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  }

  .folder-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
  }

  .folder-label {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
  }

  .folder-count {
    font-size: 12px;
    color: #6c757d;
    font-weight: 500;
  }

  .arrow {
    opacity: 0;
    transition: margin-left 0.3s ease, opacity 0.3s ease;
  }

  .folder-card:hover .arrow {
    margin-left: 4px;
    opacity: 1;
  }
</style>

<div class="container-fluid">
  <!-- Stats Header -->
  <div class="row mb-5">
    <div class="col-md-3">
      <div class="stats-card">
        <div class="stats-number">{{ $totalCompanies }}</div>
        <div class="h6 mb-0 opacity-90">Total Companies</div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="stats-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
        <div class="stats-number">{{ $activeCompanies }}</div>
        <div class="h6 mb-0 opacity-90">Active</div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="stats-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
        <div class="stats-number">{{ $totalYears }}</div>
        <div class="h6 mb-0 opacity-90">Total Years</div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="stats-card" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
        <div class="stats-number">{{ $totalFolders }}</div>
        <div class="h6 mb-0 opacity-90">Total Folders</div>
      </div>
    </div>
  </div>

  <!-- Action Buttons -->
  <div class="d-flex gap-3 mb-5">
    <a href="{{ route('companies.create') }}" class="btn btn-primary btn-lg px-4">
      <i class="bi bi-plus-circle me-2"></i>Add Company
    </a>
    {{-- <a href="/companies/export" class="btn btn-outline-secondary btn-lg px-4">
      <i class="bi bi-download me-2"></i>Export CSV
    </a> --}}
  </div>

  <!-- Featured Companies -->
  {{-- <div class="row mb-5">
    <div class="col-12">
      <h3 class="mb-4">Featured Companies</h3>
      <div class="folder-container">
        @forelse($featuredCompanies as $company)
        <div class="folder-card">
          <a href="{{ route('uploader.company.show', $company->id) }}">
            <div class="folder-icon">
              🏢
            </div>
            <div class="folder-label">{{ Str::limit($company->name, 12) }}</div>
            <div class="folder-count">{{ $company->yearFolders->count() }} years</div>
            <span class="arrow">→</span>
          </a>
        </div>
        @empty
        <div class="col-12 text-center py-5">
          <i class="bi bi-building display-1 text-muted mb-3"></i>
          <h5 class="text-muted">No featured companies</h5>
        </div>
        @endforelse
      </div>
    </div>
  </div> --}}

  <!-- All Companies Table -->
  <div class="card shadow-lg border-0">
    
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-hover mb-0">
          <thead class="table-dark">
            <tr>
              <th>ID</th>
              <th>Company Name</th>
              <th>Status</th>
              <th>Years</th>
              <th>Folders</th>
              <th>Last Updated</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody id="companiesTableBody">
            @forelse($companies as $company)
            <tr>
              <td><span class="badge bg-primary">{{ $company->id }}</span></td>
             <td>
                                        <div class="d-flex align-items-center gap-2">

                                            {{-- Company Logo --}}
                                            <img src="{{ $company->logo ? asset($company->logo) : asset('logos/logo.png') }}"
                                                width="40" height="40" class="rounded-circle"
                                                style="object-fit: cover;">

                                            {{-- Company Name + Status --}}
                                            <div>
                                                <strong>{{ $company->name }}</strong>

                                                @if ($company->is_enabled)
                                                    <i class="bi bi-check-circle-fill text-success ms-1"></i>
                                                @else
                                                    <i class="bi bi-x-circle-fill text-danger ms-1"></i>
                                                @endif
                                            </div>

                                        </div>
                                    </td>
              <td>
                <span class="badge {{ $company->is_enabled ? 'bg-success' : 'bg-warning' }}">
                  {{ $company->is_enabled ? 'Active' : 'Inactive' }}
                </span>
              </td>
              <td><span class="badge bg-info">{{ $company->yearFolders->count() }}</span></td>
              <td><span class="badge bg-secondary">{{ $company->yearFolders->flatMap->categoryFolders->flatMap->monthFolders->count() }}</span></td>
              <td>{{ $company->updated_at->diffForHumans() }}</td>
              <td>
                <div class="btn-group btn-group-sm" role="group">
                  <a href="{{ route('uploader.company.show', $company) }}" class="btn btn-outline-primary" title="View Documents">
                    <i class="bi bi-eye"></i>
                  </a>
                  <a href="{{ route('companies.edit', $company) }}" class="btn btn-outline-warning" title="Edit">
                    <i class="bi bi-pencil"></i>
                  </a>
                  <form action="{{ route('companies.destroy', $company) }}" method="POST" class="d-inline" style="margin: 0;">
                    @csrf
                    @method('DELETE')
                    <button class="btn btn-outline-danger" onclick="return confirm('Delete {{ $company->name }}? All data will be lost.')" title="Delete">
                      <i class="bi bi-trash"></i>
                    </button>
                  </form>
                  {{-- <button class="btn btn-outline-secondary" onclick="toggleCompany({{ $company->id }})" title="Toggle Status">
                    <i class="bi bi-power"></i>
                  </button> --}}
                </div>
              </td>
            </tr>
            @empty
            <tr>
              <td colspan="7" class="text-center py-5">
                <i class="bi bi-building display-4 text-muted mb-4"></i>
                <h5 class="text-muted">No companies found</h5>
                <p class="text-muted">Get started by <a href="{{ route('companies.create') }}">creating your first company</a>.</p>
              </td>
            </tr>
            @endforelse
          </tbody>
        </table>
      </div>
      <div class="p-4 bg-light border-top">
        {{ $companies->appends(request()->query())->links() }}
        <div class="mt-2 text-muted small">
          Showing {{ $companies->firstItem() ?? 0 }} to {{ $companies->lastItem() ?? 0 }} of {{ $companies->total() }} companies
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  let companies = @json($companies);

  function filterCompanies(status) {
    window.location.href = `{{ route('companies.index') }}?status=` + status;
  }

  function searchCompanies(query) {
    if (query.length < 2) return;
    const filtered = companies.filter(c => 
      c.name.toLowerCase().includes(query.toLowerCase())
    );
    // Client-side search - update table
    let html = '';
    if (filtered.length === 0) {
      html = '<tr><td colspan="7" class="text-center py-4 text-muted">No matching companies</td></tr>';
    } else {
      filtered.forEach(c => {
        html += `
          <tr>
            <td><span class="badge bg-primary">${c.id}</span></td>
            <td><strong>${c.name}</strong></td>
            <td><span class="badge bg-${c.is_enabled ? 'success' : 'warning'}">${c.is_enabled ? 'Active' : 'Inactive'}</span></td>
            <td><span class="badge bg-info">${c.yearFolders_count || 0}</span></td>
            <td><span class="badge bg-secondary">${c.folders_count || 0}</span></td>
            <td>${c.updated_at}</td>
            <td><!-- Actions --></td>
          </tr>`;
      });
    }
    document.getElementById('companiesTableBody').innerHTML = html;
  }

  function exportCompanies() {
    Swal.fire({
      title: 'Export Companies',
      text: 'CSV download will start automatically.',
      icon: 'info',
      confirmButtonText: 'Download CSV'
    }).then((result) => {
      if (result.isConfirmed) {
        window.location.href = '/companies/export';
      }
    });
  }

  async function toggleCompany(id) {
    const company = companies.find(c => c.id == id);
    if (!company) return;

    try {
      const response = fetch(`/companies/${id}/toggle`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
      });
      const data = await response.json();
      
      if (data.success) {
        company.is_enabled = !company.is_enabled;
        location.reload();
      }
    } catch (error) {
      Swal.fire('Error', 'Failed to toggle status', 'error');
    }
  }
</script>
@endsection