@extends('layouts/contentNavbarLayout')
@section('title', 'Department Challenges Management')

@section('content')
<nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
        <li class="breadcrumb-item active">Department Challenges</li>
    </ol>
</nav>
<div class="container-fluid">
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="mb-1 fw-bold text-primary">
                        <i class="mdi mdi-run-fast me-2"></i>Department Challenges
                    </h1>
                    <p class="text-muted mb-0">Manage department vs department challenges</p>
                </div>
                <div class="d-flex gap-2">
                    <div class="badge bg-info fs-6 px-3 py-2">
                        Total Challenges: {{ $challenges->total() }}
                    </div>
                    <a href="{{ route('departmentChallenges.create') }}" class="btn btn-primary">
                        <i class="mdi mdi-plus me-1"></i>New Challenge
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters and Search Section -->
    <div class="card mb-4 shadow-sm">
        <div class="card-body">
            <form method="GET" action="{{ route('departmentChallenges.index') }}" class="row g-3">
                <div class="col-md-3">
                    <label for="search" class="form-label fw-semibold">
                        <i class="mdi mdi-magnify me-1"></i>Search
                    </label>
                    <input type="text" class="form-control" id="search" name="search" 
                           value="{{ request('search') }}" placeholder="Search by title, description, company, or departments...">
                </div>
                <div class="col-md-2">
                    <label for="company" class="form-label fw-semibold">
                        <i class="mdi mdi-domain me-1"></i>Company
                    </label>
                    <select class="form-select" id="company" name="company">
                        <option value="">All Companies</option>
                        @foreach($companies as $company)
                            <option value="{{ $company->id }}" {{ request('company') == $company->id ? 'selected' : '' }}>
                                {{ $company->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="status" class="form-label fw-semibold">
                        <i class="mdi mdi-clock me-1"></i>Status
                    </label>
                    <select class="form-select" id="status" name="status">
                        <option value="">All Status</option>
                        <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                        <option value="finished" {{ request('status') == 'finished' ? 'selected' : '' }}>Finished</option>
                        <option value="canceled" {{ request('status') == 'canceled' ? 'selected' : '' }}>Canceled</option>
                        <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="sort" class="form-label fw-semibold">
                        <i class="mdi mdi-sort me-1"></i>Sort By
                    </label>
                    <select class="form-select" id="sort" name="sort">
                        <option value="created_at" {{ request('sort') == 'created_at' ? 'selected' : '' }}>Date Created</option>
                        <option value="title" {{ request('sort') == 'title' ? 'selected' : '' }}>Title</option>
                        <option value="start_date" {{ request('sort') == 'start_date' ? 'selected' : '' }}>Start Date</option>
                        <option value="end_date" {{ request('sort') == 'end_date' ? 'selected' : '' }}>End Date</option>
                        <option value="participants" {{ request('sort') == 'participants' ? 'selected' : '' }}>Participants</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="sort_order" class="form-label fw-semibold">Order</label>
                    <select class="form-select" id="sort_order" name="sort_order">
                        <option value="desc" {{ request('sort_order') == 'desc' ? 'selected' : '' }}>Descending</option>
                        <option value="asc" {{ request('sort_order') == 'asc' ? 'selected' : '' }}>Ascending</option>
                    </select>
                </div>
                <div class="col-md-1 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="mdi mdi-filter"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Challenges Grid -->
    <div class="row">
        @forelse($challenges as $challenge)
            <div class="col-lg-6 col-xl-4 mb-4">
                <div class="card h-100 shadow-sm hover-shadow-lg transition-all">
                    <!-- Status Badge -->
                    <div class="position-absolute top-0 start-0 m-3 z-index-1">
                        @if($challenge->status === 'active')
                            <span class="badge bg-success">
                                <i class="mdi mdi-play me-1"></i>Active
                            </span>
                        @elseif($challenge->status === 'finished')
                            <span class="badge bg-primary">
                                <i class="mdi mdi-check-circle me-1"></i>Finished
                            </span>
                        @elseif($challenge->status === 'canceled')
                            <span class="badge bg-danger">
                                <i class="mdi mdi-close-circle me-1"></i>Canceled
                            </span>
                        @elseif($challenge->status === 'inactive')
                            <span class="badge bg-secondary">
                                <i class="mdi mdi-pause-circle me-1"></i>Inactive
                            </span>
                        @endif
                    </div>

                    <!-- Winner Badge -->
                    @if($challenge->winner_department_id)
                        <div class="position-absolute top-0 end-0 m-3 z-index-1">
                            <span class="badge bg-primary">
                                <i class="mdi mdi-trophy me-1"></i>{{ $challenge->winnerDepartment->name }} Won
                            </span>
                        </div>
                    @endif

                    <!-- Card Image -->
                    <div class="position-relative">
                        @if($challenge->image)
                            <img src="{{ $challenge->image }}" class="card-img-top" 
                                 style="height: 200px; object-fit: cover;" alt="{{ $challenge->title }}">
                        @else
                            <div class="card-img-top d-flex align-items-center justify-content-center bg-light" 
                                 style="height: 200px;">
                                <i class="mdi mdi-run-fast text-muted" style="font-size: 4rem;"></i>
                            </div>
                        @endif
                    </div>

                    <!-- Card Body -->
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title fw-bold text-truncate mb-2" title="{{ $challenge->title }}">
                            {{ $challenge->title }}
                        </h5>
                        <p class="card-text text-muted small flex-grow-1" style="line-height: 1.4;">
                            {{ Str::limit($challenge->description, 80) }}
                        </p>

                        <!-- Company Info -->
                        <div class="text-center mb-2">
                            <span class="badge bg-success small">
                                <i class="mdi mdi-domain me-1"></i>{{ $challenge->company->name }}
                            </span>
                        </div>

                        <!-- Departments vs -->
                        <div class="text-center mb-3">
                            <div class="row align-items-center">
                                <div class="col-5 text-end">
                                    <span class="badge bg-primary fs-6 px-2 py-1">
                                        {{ $challenge->firstDepartment->name }}
                                    </span>
                                </div>
                                <div class="col-2">
                                    <span class="fw-bold text-muted">VS</span>
                                </div>
                                <div class="col-5 text-start">
                                    <span class="badge bg-info fs-6 px-2 py-1">
                                        {{ $challenge->secondDepartment->name }}
                                    </span>
                                </div>
                            </div>
                        </div>

                        <!-- Challenge Details -->
                        <div class="row text-center mb-3 small">
                            <div class="col-4">
                                <div class="border-end">
                                    <i class="mdi mdi-calendar text-primary"></i>
                                    <div class="fw-semibold">{{ \Carbon\Carbon::parse($challenge->start_date)->format('M j') }}</div>
                                    <small class="text-muted">Start</small>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="border-end">
                                    <i class="mdi mdi-account-multiple text-success"></i>
                                    <div class="fw-semibold">{{ $challenge->users_count }}</div>
                                    <small class="text-muted">Participants</small>
                                </div>
                            </div>
                            <div class="col-4">
                                <i class="mdi mdi-calendar-check text-info"></i>
                                <div class="fw-semibold">{{ \Carbon\Carbon::parse($challenge->end_date)->format('M j') }}</div>
                                <small class="text-muted">End</small>
                            </div>
                        </div>

                        <!-- Challenge Features -->
                        <div class="mb-3">
                            <div class="d-flex justify-content-center flex-wrap gap-1">
                                @if($challenge->is_steps_goal)
                                    <span class="badge bg-warning text-dark small">
                                        <i class="mdi mdi-target me-1"></i>{{ number_format($challenge->steps_goal) }} steps
                                    </span>
                                @endif
                                @if($challenge->is_max_team_members)
                                    <span class="badge bg-secondary small">
                                        <i class="mdi mdi-account-group me-1"></i>Max {{ $challenge->max_team_members }}
                                    </span>
                                @endif
                                @if($challenge->is_points_prize)
                                    <span class="badge bg-success small">
                                        <i class="mdi mdi-trophy me-1"></i>{{ $challenge->points_prize }} pts
                                    </span>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- Card Footer -->
                    <div class="card-footer bg-transparent border-top-0 pt-0">
                        <div class="d-flex gap-1">
                            <a href="{{ route('departmentChallenges.show', $challenge->id) }}" 
                               class="btn btn-outline-primary btn-sm flex-grow-1">
                                <i class="mdi mdi-eye me-1"></i>View
                            </a>
                            <a href="{{ route('departmentChallenges.edit', $challenge->id) }}" 
                               class="btn btn-outline-warning btn-sm">
                                <i class="mdi mdi-pencil"></i>
                            </a>
                            <button type="button" class="btn btn-outline-danger btn-sm" 
                                    data-bs-toggle="modal" data-bs-target="#deleteModal{{ $challenge->id }}">
                                <i class="mdi mdi-delete"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Delete Modal -->
            <div class="modal fade" id="deleteModal{{ $challenge->id }}" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title text-danger">
                                <i class="mdi mdi-alert-circle me-2"></i>Confirm Deletion
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <p>Are you sure you want to delete the challenge <strong>"{{ $challenge->title }}"</strong>?</p>
                            <div class="alert alert-warning">
                                <small>
                                    <i class="mdi mdi-information me-1"></i>
                                    This will permanently delete:
                                    <ul class="mb-0 mt-2">
                                        <li>The challenge and all its data</li>
                                        <li>All participant records ({{ $challenge->users_count }} participants)</li>
                                        <li>All steps and distance data</li>
                                        <li>Associated images and files</li>
                                    </ul>
                                </small>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            <form action="{{ route('departmentChallenges.destroy', $challenge->id) }}" method="POST" class="d-inline">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger">
                                    <i class="mdi mdi-delete me-1"></i>Delete Permanently
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12">
                <div class="card">
                    <div class="card-body text-center py-5">
                        <i class="mdi mdi-run-fast text-muted mb-3" style="font-size: 4rem;"></i>
                        <h5 class="text-muted">No Department Challenges Found</h5>
                        <p class="text-muted">
                            @if(request()->hasAny(['search', 'status']))
                                Try adjusting your search criteria or filters.
                            @else
                                No department challenges have been created yet.
                            @endif
                        </p>
                        @if(request()->hasAny(['search', 'status']))
                            <a href="{{ route('departmentChallenges.index') }}" class="btn btn-outline-primary me-2">
                                <i class="mdi mdi-refresh me-1"></i>Clear Filters
                            </a>
                        @endif
                        <a href="{{ route('departmentChallenges.create') }}" class="btn btn-primary">
                            <i class="mdi mdi-plus me-1"></i>Create First Challenge
                        </a>
                    </div>
                </div>
            </div>
        @endforelse
    </div>

    <!-- Pagination -->
    @if($challenges->hasPages())
        <div class="row mt-4">
            <div class="col-12 d-flex justify-content-center">
                {{ $challenges->appends(request()->query())->links() }}
            </div>
        </div>
    @endif
</div>

<style>
.hover-shadow-lg {
    transition: all 0.3s ease-in-out;
}

.hover-shadow-lg:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px);
}

.transition-all {
    transition: all 0.3s ease-in-out;
}

.z-index-1 {
    z-index: 1;
}
</style>
@endsection