@extends('admin.layouts.app')

@section('title', 'Question Management')

@section('content')

    <div class="container-fluid">
        {{-- 
        <div class="py-3 d-flex justify-content-between align-items-center">

            <div>
                <h4 class="fs-18 fw-semibold mb-1">
                    Question Management
                </h4>
                <p class="text-muted mb-0">
                    Manage contest-wise questions and add new quiz questions.
                </p>
            </div>

            <a href="#" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#importCsvModal">
                <i class="mdi mdi-file-delimited"></i> Import CSV
            </a>

            <a href="{{ route('admin.questions.create') }}" class="btn btn-primary">
                <i class="mdi mdi-plus-circle-outline me-1"></i>
                Add Questions
            </a>

        </div> --}}

        <div class="py-3 d-flex justify-content-between align-items-center flex-wrap gap-3">

            <div>
                <h4 class="fs-18 fw-semibold mb-1">
                    Question Management
                </h4>
                <p class="text-muted mb-0">
                    Manage contest-wise questions and add new quiz questions.
                </p>
            </div>

            <div class="d-flex align-items-center gap-2">
                <a href="#" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#importCsvModal">
                    <i class="mdi mdi-file-delimited me-1"></i>
                    Import CSV
                </a>

                <a href="{{ route('admin.questions.create') }}" class="btn btn-primary">
                    <i class="mdi mdi-plus-circle-outline me-1"></i>
                    Add Questions
                </a>
            </div>

        </div>

        <div class="card">

            <div class="card-body">

                <div class="table-responsive">

                    <table class="table table-bordered table-hover align-middle datatable">

                        <thead class="table-light">

                            <tr>

                                <th width="60">#</th>
                                <th>Contest</th>
                                <th>Category</th>
                                <th width="130">Entry Fee</th>
                                <th width="150">Questions</th>
                                <th width="180" class="text-center">Action</th>

                            </tr>

                        </thead>

                        <tbody>

                            @forelse($contests as $contest)
                                <tr>

                                     <td>{{ $contests->firstItem() + $loop->index }}</td>

                                    <td>

                                        <div>

                                            <strong>{{ $contest->title }}</strong>

                                            <br>

                                            <small class="text-muted">

                                                {{ $contest->quiz_start_time ? \Carbon\Carbon::parse($contest->quiz_start_time)->format('d M Y') : '-' }}

                                            </small>

                                        </div>

                                    </td>

                                    <td>

                                        <span class="badge bg-secondary">

                                            {{ $contest->category->name }}

                                        </span>

                                    </td>

                                    <td>

                                        @if ($contest->entry_fee > 0)
                                            ₹{{ number_format($contest->entry_fee, 2) }}
                                        @else
                                            <span class="badge bg-success">
                                                Free
                                            </span>
                                        @endif

                                    </td>

                                    <td>

                                        <span class="badge bg-primary fs-13 px-3 py-2">

                                            {{ $contest->questions_count }}

                                            {{ Str::plural('Question', $contest->questions_count) }}

                                        </span>

                                    </td>

                                    <td class="text-center">

                                        <a href="{{ route('admin.questions.show', $contest->id) }}"
                                            class="btn btn-info btn-sm">

                                            <i class="mdi mdi-format-list-bulleted-square me-1"></i>

                                            Manage Questions

                                        </a>

                                    </td>

                                </tr>

                            @empty

                                <tr>

                                    <td colspan="6" class="text-center py-5">

                                        <i class="mdi mdi-help-circle-outline display-5 text-muted"></i>

                                        <h6 class="mt-3">
                                            No Contest Found
                                        </h6>

                                        <p class="text-muted mb-0">
                                            Please create a contest first to add questions.
                                        </p>

                                    </td>

                                </tr>
                            @endforelse

                        </tbody>

                    </table>

                      <div class="mt-3">
                        {{ $contests->links() }}
                    </div>

                </div>

            </div>

        </div>

    </div>

    <!-- Import CSV Modal -->
    <div class="modal fade" id="importCsvModal" tabindex="-1" aria-labelledby="importCsvModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <form action="{{ route('admin.questions.import') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="modal-content">

                    <div class="modal-header">
                        <h5 class="modal-title" id="importCsvModalLabel">
                            Import Questions CSV
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">

                        <div class="mb-3">
                            <label class="form-label">Contest</label>

                            <select name="contest_id" class="form-select" required>
                                <option value="">Select Contest</option>

                                @foreach ($importContests as $contest)
                                    <option value="{{ $contest->id }}">
                                        {{ $contest->title }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">CSV File</label>

                            <input type="file" name="csv_file" class="form-control" accept=".csv" required>

                            <small class="text-muted">
                                Only .csv files are allowed.
                            </small>
                        </div>

                    </div>

                    <div class="modal-footer">

                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            Cancel
                        </button>

                        <button type="submit" class="btn btn-success">
                            <i class="mdi mdi-upload"></i> Import
                        </button>

                    </div>

                </div>

            </form>
        </div>
    </div>

@endsection