@extends('layouts.admin')

@section('title', 'Month Folders - Interactive')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0">
                    <i class="bi bi-calendar3-week me-2 text-primary"></i>Month Folders
                </h1>
                <a href="{{ route('month-folders.create') }}" class="btn btn-primary">
                    <i class="bi bi-plus-circle me-1"></i>Add Month
                </a>
            </div>
        </div>
    </div>
    
    <!-- Interactive Breadcrumb like Python -->
    <div class="mb-4">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb-tabs d-flex flex-wrap gap-1 p-3 bg-light rounded-3 shadow-sm">
                <li class="breadcrumb-item">
                    <a href="{{ route('companies.index') }}" class="text-decoration-none text-primary fw-semibold">
                        🏢 Companies 
                    </a>
                </li>
                <li class="breadcrumb-item">
                    <a href="{{ route('year-folders.index') }}" class="text-decoration-none text-primary fw-semibold">
                        📁 Years 
                    </a>
                </li>
                <li class="breadcrumb-item">
                    <a href="{{ route('category-folders.index') }}" class="text-decoration-none text-primary fw-semibold">
                        📂 Category Folders 
                    </a>
                </li>
                <li class="breadcrumb-item active fw-bold text-dark" aria-current="page">
                    📅 Month Folders
                </li>
            </ol>
        </nav>
    </div>

    <!-- Stats Cards -->
    <div class="row g-4 mb-4">
        <div class="col-xl-3 col-md-6">
            <div class="card bg-gradient-primary text-white shadow-lg hover-lift">
                <div class="card-body p-4 text-center">
                    <i class="bi bi-calendar-month fs-1 opacity-75 mb-3"></i>
                    <h2 class="display-5 fw-bold">{{ $monthFolders->total() }}</h2>
                    <p class="mb-0">Total Months</p>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-gradient-success text-white shadow-lg hover-lift">
                <div class="card-body p-4 text-center">
                    <i class="bi bi-folder-fill fs-1 opacity-75 mb-3"></i>
                    <h2 class="display-5 fw-bold">{{ $monthFolders->where('category')->count() }}</h2>
                    <p class="mb-0">Assigned Categories</p>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-gradient-info text-white shadow-lg hover-lift">
                <div class="card-body p-4 text-center">
                    <i class="bi bi-people-fill fs-1 opacity-75 mb-3"></i>
                    <h2 class="display-5 fw-bold">12</h2>
                    <p class="mb-0">Active Users</p>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-gradient-warning text-white shadow-lg hover-lift">
                <div class="card-body p-4 text-center">
                    <i class="bi bi-clock-history fs-1 opacity-75 mb-3"></i>
{{ $monthFolders->count() }}
                    <p class="mb-0">Avg Age</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Table -->
    <div class="card shadow-xl">
        <div class="card-header bg-gradient-dark text-white">
            <h5 class="mb-0">
                <i class="bi bi-table me-2"></i>Month Folders List
            </h5>
        </div>
        <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>Month Name</th>
                            <th>Category</th>
                            <th>Companies</th>
                            <th>Created</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($monthFolders as $month)
                        <tr>
                            <td>{{ $month->id }}</td>
                            <td>
                                <i class="bi bi-calendar-month text-primary me-2"></i>
                                <strong>{{ $month->name }}</strong>
                            </td>
                            <td>
                                <span class="badge bg-info">
                                    {{ $month->category?->name ?? 'Unassigned' }}
                                </span>
                            </td>
                            <td>
                                <span class="badge bg-success">
                                    {{ $month->companies_count ?? 0 }}
                                </span>
                            </td>
                            <td>
                                <span class="text-muted">{{ $month->created_at->diffForHumans() }}</span>
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm">
                                    <a href="{{ route('month-folders.show', $month) }}" class="btn btn-info">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                    <a href="{{ route('month-folders.edit', $month) }}" class="btn btn-warning">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <form method="POST" action="{{ route('month-folders.destroy', $month) }}" class="d-inline">
                                        @csrf @method('DELETE')
                                        <button class="btn btn-danger" onclick="return confirm('Delete?')">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="text-center py-5">
                                <i class="bi bi-calendar-x fs-1 text-muted mb-3"></i>
                                <h4 class="text-muted">No Month Folders</h4>
                                <p class="text-muted">Create months in category folders</p>
                                <a href="{{ route('category-folders.index') }}" class="btn btn-primary">
                                    Manage Categories
                                </a>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="p-4 bg-light border-top">
                {{ $monthFolders->links() }}
            </div>
        </div>
    </div>
</div>

<style>
.hover-lift {
    transition: all 0.3s ease;
}
.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
}
.breadcrumb-tabs li + li:before {
    content: '/';
    margin: 0 8px;
    color: #6c757d;
}
</style>
@endsection