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

@section('page-style')
<style>
.hover-shadow-lg {
    transition: all 0.3s ease;
}

.hover-shadow-lg:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
}

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

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

@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">Company 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-trophy me-2"></i>Company Challenges
                    </h1>
                    <p class="text-muted mb-0">Manage company-wide 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('companyChallenges.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('companyChallenges.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, or company...">
                </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>

                    <!-- Challenge Image -->
                    <div class="position-relative">
                        <img src="{{ $challenge->image }}" class="card-img-top" alt="{{ $challenge->title }}" 
                             style="height: 200px; object-fit: cover;">
                        <div class="position-absolute bottom-0 start-0 w-100 p-3" 
                             style="background: linear-gradient(transparent, rgba(0,0,0,0.7));">
                            <h5 class="text-white mb-1 fw-bold">{{ $challenge->title }}</h5>
                            <p class="text-white-50 mb-0 small">{{ $challenge->company->name }}</p>
                        </div>
                    </div>

                    <div class="card-body d-flex flex-column">
                        <!-- Challenge Details -->
                        <div class="mb-3">
                            <p class="text-muted small mb-2">{{ Str::limit($challenge->description, 100) }}</p>
                            
                            <div class="row text-center mb-3">
                                <div class="col-4">
                                    <div class="border-end">
                                        <div class="fw-bold text-primary">{{ number_format($challenge->required_steps) }}</div>
                                        <small class="text-muted">Required Steps</small>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="border-end">
                                        <div class="fw-bold text-success">{{ $challenge->users_count }}</div>
                                        <small class="text-muted">Participants</small>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="fw-bold text-info">{{ $challenge->type }}</div>
                                    <small class="text-muted">Type</small>
                                </div>
                            </div>

                            <!-- Date Range -->
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <div class="text-center">
                                    <small class="text-muted d-block">Start Date</small>
                                    <span class="fw-semibold">{{ \Carbon\Carbon::parse($challenge->start_date)->format('M d, Y') }}</span>
                                </div>
                                <div class="text-center">
                                    <small class="text-muted d-block">End Date</small>
                                    <span class="fw-semibold">{{ \Carbon\Carbon::parse($challenge->end_date)->format('M d, Y') }}</span>
                                </div>
                            </div>

                            <!-- Prize Info -->
                            @if($challenge->is_points_prize)
                                <div class="alert alert-info py-2 mb-3">
                                    <div class="d-flex align-items-center">
                                        <i class="mdi mdi-gift me-2"></i>
                                        <div>
                                            <small class="fw-semibold d-block">{{ number_format($challenge->points_prize) }} Points</small>
                                            @if($challenge->prize_description)
                                                <small class="text-muted">{{ Str::limit($challenge->prize_description, 50) }}</small>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>

                        <!-- Action Buttons -->
                        <div class="mt-auto">
                            <div class="d-flex gap-2">
                                <a href="{{ route('companyChallenges.show', $challenge->id) }}"
                                   class="btn btn-outline-primary btn-sm flex-fill">
                                    <i class="mdi mdi-eye me-1"></i>View
                                </a>
                                <a href="{{ route('companyChallenges.edit', $challenge->id) }}"
                                   class="btn btn-outline-warning btn-sm flex-fill">
                                    <i class="mdi mdi-pencil me-1"></i>Edit
                                </a>
                                <button type="button" class="btn btn-outline-danger btn-sm" 
                                        onclick="confirmDelete({{ $challenge->id }}, '{{ $challenge->title }}')">
                                    <i class="mdi mdi-delete"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12">
                <div class="card">
                    <div class="card-body text-center py-5">
                        <i class="mdi mdi-trophy-outline text-muted" style="font-size: 4rem;"></i>
                        <h4 class="mt-3 text-muted">No Company Challenges Found</h4>
                        <p class="text-muted">Create your first company challenge to get started!</p>
                        <a href="{{ route('companyChallenges.create') }}" class="btn btn-primary">
                            <i class="mdi mdi-plus me-1"></i>Create Challenge
                        </a>
                    </div>
                </div>
            </div>
        @endforelse
    </div>

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

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirm Delete</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 "<span id="challengeTitle"></span>"?</p>
                <p class="text-danger small">This action cannot be undone.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form id="deleteForm" method="POST" class="d-inline">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Delete</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
function confirmDelete(id, title) {
    document.getElementById('challengeTitle').textContent = title;
    document.getElementById('deleteForm').action = `/CRM/companyChallenges/${id}`;
    new bootstrap.Modal(document.getElementById('deleteModal')).show();
}
</script>
@endsection