@extends('admin.layouts.masterlayout')

@section('styles')
<style>
    .question-card {
        border: 1px solid #444;
        border-radius: 8px;
        background-color: #1e1e2f;
        color: #ffffff;
        padding: 16px;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .question-card .card-header {
        border-bottom: 1px solid #555;
        margin-bottom: 10px;
    }
    .question-card .badge {
        font-size: 0.85em;
    }
    .question-actions a {
        margin-right: 6px;
    }
    .team-logo {
        width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 6px;
        border: 1px solid #ccc;
        background-color: #fff;
    }
</style>
@endsection

@section('content')
<div class="main-content">
    <div class="row page-titles mx-0">
        <div class="col-sm-6 p-md-0">
            <h4 class="mb-2">Match Details</h4>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <!-- Match Header Card -->
            <div class="card mb-4 bg-dark text-white">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <div class="text-center me-4">
                            <img src="{{ asset($subcategory->team1flag ?? '/assets/default_logo.png') }}" class="team-logo mb-2">
                            <div><strong>{{ $subcategory->team1fullName }}</strong></div>
                        </div>
                        <div class="flex-grow-1 text-center">
                            <h4 class="mb-1">{{ $subcategory->team1fullName }} vs {{ $subcategory->team2fullName }}</h4>
                            <div class="text-muted">{{ $subcategory->subcategory }}</div>
                            <div class="text-muted">
                                {{ \Carbon\Carbon::parse($subcategory->start_date_ist)->format('l, d-M-Y h:i A') }}
                            </div>
                            <span class="badge bg-{{ $subcategory->status == 1 ? 'success' : 'danger' }}">
                                {{ $subcategory->status == 1 ? 'Active' : 'Inactive' }}
                            </span>
                        </div>
                        <div class="text-center ms-4">
                            <img src="{{ asset($subcategory->team2flag ?? '/assets/default_logo.png') }}" class="team-logo mb-2">
                            <div><strong>{{ $subcategory->team2fullName }}</strong></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tabs Card -->
            <div class="card bg-dark text-white">
                <div class="card-header border-bottom border-secondary pb-0">
                  <ul class="nav nav-tabs card-header-tabs" id="detailTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active text-white" id="existing-tab" data-bs-toggle="tab" data-bs-target="#existing" type="button" role="tab">
                            Existing Questions
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link text-white" id="new-tab" data-bs-toggle="tab" data-bs-target="#new" type="button" role="tab">
                            New Questions
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link text-white" id="polling-tab" data-bs-toggle="tab" data-bs-target="#polling" type="button" role="tab">
                            Polling Question
                        </button>
                    </li>
                </ul>

                </div>
                <div class="card-body">
                    <div class="tab-content">
                        <!-- Existing Questions Tab -->
                        <div class="tab-pane fade show active" id="existing" role="tabpanel">
                            @if($subcategory->questions->count())
                                <div class="row">
                                    @foreach($subcategory->questions as $question)
                                        <div class="col-md-6 col-lg-4 mb-4">
                                            <div class="question-card">
                                                <div class="card-header">
                                                    <h5 class="mb-0">{{ $question->question }}</h5>
                                                </div>
                                                <div class="flex-grow-1">
                                                    <p class="mb-2">{{ $question->description }}</p>

                                                    @if ($question->polling == 2)
                                                        @php
                                                            $options = DB::table('questionoptions')
                                                                ->where('question_id', $question->id)
                                                                ->get();
                                                        @endphp
                                                        <div class="mb-2">
                                                            <strong>Polling Options:</strong>
                                                            <div class="mt-2 d-flex flex-wrap gap-2">
                                                                @foreach ($options as $opt)
                                                                    <div class="badge bg-dark border" style="padding:10px; border-radius:5px;">
                                                                        <div><strong>{{ $opt->options_str }}</strong></div>
                                                                        <div>
                                                                            <span class="badge bg-success me-1">Yes: {{ $opt->yes_point }}</span>
                                                                            <span class="badge bg-danger">No: {{ $opt->no_point }}</span>
                                                                        </div>
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                        </div>
                                                    @endif

                                                    <div class="mb-2">
                                                        <span class="badge bg-info me-1">Filter1: {{ $question->filter1 ?? '-' }}</span>
                                                        <span class="badge bg-secondary">Filter2: {{ $question->filter2 ?? '-' }}</span>
                                                    </div>

                                                    <div class="mb-2">
                                                        @php
                                                            $statusLabels = [
                                                                1 => ['text' => 'Upcoming', 'color' => 'secondary'],
                                                                2 => ['text' => 'Live', 'color' => 'success'],
                                                                3 => ['text' => 'Completed', 'color' => 'primary'],
                                                                4 => ['text' => 'Canceled', 'color' => 'danger'],
                                                                5 => ['text' => 'Paused', 'color' => 'warning'],
                                                            ];
                                                            $status = $statusLabels[$question->status] ?? ['text' => 'Unknown', 'color' => 'light'];
                                                        @endphp
                                                        Status:
                                                        <span class="badge bg-{{ $status['color'] }}">
                                                            {{ $status['text'] }}
                                                        </span>
                                                    </div>

                                                    <div class="mb-2">
                                                        <strong>Yes Point:</strong> {{ $question->yes_point }}
                                                        &nbsp; | &nbsp;
                                                        <strong>No Point:</strong> {{ $question->no_point }}
                                                    </div>

                                                    <div class="mb-2">
                                                        Start On:
                                                        <span class="text-muted">
                                                            {{ optional($question->start_on)->format('d M Y h:i A') ?? 'N/A' }}
                                                        </span>
                                                    </div>

                                                    @if($question->expires_in)
                                                        <div class="mb-2">
                                                            Expires In:
                                                            <span class="text-muted">
                                                                {{ \Carbon\Carbon::parse($question->expires_in)->format('d M Y h:i A') }}
                                                            </span>
                                                        </div>
                                                    @endif
                                                </div>

                                                    <div class="question-actions mt-3">
                                                        @if($question->polling == 2)
                                                            <a href="{{ route('question.editPolling', $question->id) }}" class="btn btn-outline-light btn-sm">Edit Polling</a>
                                                        @else
                                                            <a href="{{ route('question.edit', $question->id) }}" class="btn btn-outline-light btn-sm">Edit</a>
                                                        @endif

                                                        @if($question->status == 5)
                                                            <form method="POST" action="{{ route('question.unpause', $question->id) }}" style="display:inline;">
                                                                @csrf
                                                                <button type="submit" class="btn btn-outline-success btn-sm">Unpause</button>
                                                            </form>
                                                        @elseif($question->status == 2)
                                                            <form method="POST" action="{{ route('question.pause', $question->id) }}" style="display:inline;">
                                                                @csrf
                                                                <button type="submit" class="btn btn-outline-warning btn-sm">Pause</button>
                                                            </form>
                                                        @endif

                                                        <form method="POST" action="{{ route('question.abandon', $question->id) }}" style="display:inline;">
                                                            @csrf
                                                            <button type="submit" class="btn btn-outline-danger btn-sm">Abandon</button>
                                                        </form>
                                                    </div>

                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @else
                                <p class="text-muted">No questions available for this match.</p>
                            @endif
                        </div>






                        <!-- New Questions Tab -->
                    <div class="tab-pane fade" id="new" role="tabpanel">

                            <!-- Category Select -->
                            <div class="mb-3">
                                <label class="form-label text-white">Select Question Category</label>
                                <select class="form-control" id="questionCategorySelect">
                                    <option value="">-- Select Category --</option>
                                    @foreach ($questionCategories as $category)
                                        <option value="{{ $category->id }}">{{ $category->description }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Template Cards -->
                            <div id="templateCards" class="container">
                                @foreach ($questionTemplates as $template)
                                    <div class="row justify-content-center mb-4 template-item" data-category="{{ $template->question_category_id }}">
                                        <div class="col-12">
                                            <div class="card" style="background-color: rgb(14, 14, 20); color: #fff; border: 1px solid #444; margin: 50px 0;">
                                                <div class="row justify-content-center">


                                                    <div class="col-md-6">
                                                        <div class="card bg-dark text-white text-center" style="border: 1px solid #111; padding: 20px;">
                                                            <div class="card-header text-end">
                                                                <span class="badge bg-success">TEMPLATE</span>
                                                            </div>
                                                            <div class="card-body">
                                                        <h5 class="mb-3 template-text" id="template-text-{{ $template->id }}">{{ $template->template }}</h5>

                                                            <p class="text-muted template-description" id="template-description-{{ $template->id }}">This is a description for the template.</p>

                                                                <div class="d-flex justify-content-center mt-3">
                                                                <button class="btn btn-outline-success me-2 template-yes" id="template-yes-{{ $template->id }}">Yes Point: 5</button>
                                                                <button class="btn btn-outline-danger template-no" id="template-no-{{ $template->id }}">No Point: 5</button>

                                                                </div>
                                                            <button 
                                                                    class="btn btn-outline-primary select-template-btn mt-2" 
                                                                    data-template-id="{{ $template->id }}"
                                                                data-placeholder='@json($template->placeholders_array)'
                                                                    data-template-text="{{ $template->template }}"
                                                                >
                                                                    Select Template
                                                                </button>



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


                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>


                            <!-- Selected Template Area -->
                        <div id="selectedTemplateArea" class="container mt-5" style="display:none;">
                            <div class="card bg-dark text-white p-4">
                                <!-- Template title -->
                                <h4 id="selectedTemplateText" class="mb-3"></h4>

                                <!-- Placeholder fields go here -->
                                <div id="placeholderFields" class="mt-3"></div>

                                <!-- Fixed fields -->
                                <form id="newQuestionForm" method="POST" action="{{ route('question.store') }}">
                                    @csrf
                                    <input type="hidden" name="subcategory_id" value="{{ $subcategory->id }}">

                                    <div class="row mt-3">
                                        <div class="col-md-6">
                                            <label>Yes Point</label>
                                            <input type="number" name="yes_point" class="form-control" value="5">
                                        </div>
                                        <div class="col-md-6">
                                            <label>No Point</label>
                                            <input type="number" name="no_point" class="form-control" value="5">
                                        </div>
                                    </div>

                                    <div class="row mt-3">
                                        <div class="col-md-6">
                                            <label>Start On</label>
                                            <input type="datetime-local" name="start_on" class="form-control" value="{{ now()->format('Y-m-d\TH:i') }}">
                                        </div>
                                        <div class="col-md-6">
                                            <label>Expires In</label>
                                            <input type="datetime-local" name="expires_in" class="form-control">
                                        </div>
                                    </div>

                                    <div class="mt-3">
                                        <label>Description</label>
                                        <textarea name="description" class="form-control"></textarea>
                                    </div>

                                    <div class="mt-3">
                                        <label>Source of Truth</label>
                                        <input type="text" name="source_truth" class="form-control">
                                    </div>


                                    <div class="mt-3">
                                    <label>Status</label>
                                    <select name="status" class="form-control">
                                        <option value="1" selected>UpComming</option>
                                        <option value="2">Live</option>
                                    </select>
                                </div>

                                    <input type="hidden" name="question" id="finalQuestionInput" required>

                                    <button type="submit" class="btn btn-success mt-4">Create Question</button>
                                </form>
                            </div>
                        </div>



                    </div>
                    <!-- NEW QUESTION TAB ENDS -->




                    <!-- POLLING QUESTION TAB -->
                 <div class="tab-pane fade" id="polling" role="tabpanel">
                    <div class="container mt-4">
                        <div class="card bg-dark text-white p-4">
                            <h4>Create Polling Question</h4>

                            <form method="POST" action="{{ route('question.storePolling') }}">
                                @csrf
                                <input type="hidden" name="subcategory_id" value="{{ $subcategory->id }}">

                                <div class="mb-3">
                                    <label class="form-label">Question</label>
                                    <input type="text" name="question" class="form-control" required>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">Description</label>
                                    <textarea name="description" class="form-control"></textarea>
                                </div>

                                <div class="row mt-3">
                                    <div class="col-md-6">
                                        <label>Start On</label>
                                        <input type="datetime-local" name="start_on" class="form-control" value="{{ now()->format('Y-m-d\TH:i') }}">
                                    </div>
                                    <div class="col-md-6">
                                        <label>Expires In</label>
                                        <input type="datetime-local" name="expires_in" class="form-control">
                                    </div>
                                </div>

                                <hr class="my-4">

                                <h5>Options (6 total)</h5>
                                @for ($i = 0; $i < 6; $i++)
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label>Option {{ $i + 1 }} Text</label>
                                            <input type="text" name="options[{{ $i }}][text]" class="form-control">
                                        </div>
                                        <div class="col-md-2">
                                            <label>Yes Point</label>
                                            <input type="number" name="options[{{ $i }}][yes_point]" class="form-control" value="5">
                                        </div>
                                        <div class="col-md-2">
                                            <label>No Point</label>
                                            <input type="number" name="options[{{ $i }}][no_point]" class="form-control" value="5">
                                        </div>
                                        <div class="col-md-2">
                                            <label>Result</label>
                                            <select name="options[{{ $i }}][result]" class="form-control">
                                                <option value="0" selected>Pending</option>
                                                <option value="1">Yes</option>
                                                <option value="2">No</option>
                                            </select>
                                        </div>
                                    </div>
                                @endfor

                                <div class="mt-3">
                                    <label>Status</label>
                                    <select name="status" class="form-control">
                                        <option value="1" selected>UpComming</option>
                                        <option value="2">Live</option>
                                    </select>
                                </div>

                                <button type="submit" class="btn btn-success mt-4">Create Polling Question</button>
                            </form>

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






                    </div>
                </div>
            </div>
        </div>
    </div> 
</div>
@endsection





@section('scripts')
<script>
    window.subcategoryData = @json($subcategoryJson);
</script>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const subcategory = @json($subcategoryJson);
    const teams = [subcategory.team1fullName || 'Team 1', subcategory.team2fullName || 'Team 2'];

    document.getElementById('questionCategorySelect').addEventListener('change', function() {
        const selected = this.value;
        document.querySelectorAll('.template-item').forEach(item => {
            item.style.display = !selected || item.getAttribute('data-category') === selected ? 'block' : 'none';
        });
        document.getElementById('selectedTemplateArea').style.display = 'none';
    });

    document.querySelectorAll('.select-template-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            const templateId = btn.getAttribute('data-template-id');
            const templateText = btn.getAttribute('data-template-text') || '';
            let placeholders = [];

            try {
                placeholders = JSON.parse(btn.getAttribute('data-placeholder') || '[]');
            } catch {
                placeholders = [];
            }

            // Populate placeholder fields
            const fields = document.getElementById('placeholderFields');
            fields.innerHTML = '';
            placeholders.forEach(ph => {
                const div = document.createElement('div');
                div.className = 'mb-3';

                const label = document.createElement('label');
                label.textContent = ph;
                div.appendChild(label);

                let input;
                if (ph.toLowerCase().includes('team')) {
                    input = document.createElement('select');
                    input.className = 'form-control placeholder-input';
                    input.setAttribute('data-placeholder', ph);
                    teams.forEach(team => {
                        const option = document.createElement('option');
                        option.value = team;
                        option.textContent = team;
                        input.appendChild(option);
                    });
                } else {
                    input = document.createElement('input');
                    input.type = 'text';
                    input.className = 'form-control placeholder-input';
                    input.setAttribute('data-placeholder', ph);
                }

                div.appendChild(input);
                fields.appendChild(div);

                input.addEventListener('input', () => updatePreview(templateId, templateText));
                input.addEventListener('change', () => updatePreview(templateId, templateText));
            });

            document.getElementById('selectedTemplateText').textContent = templateText;
            document.getElementById('selectedTemplateArea').style.display = 'block';

            // Listen for Yes/No points too
            document.querySelector('input[name="yes_point"]').addEventListener('input', () => updatePreview(templateId, templateText));
            document.querySelector('input[name="no_point"]').addEventListener('input', () => updatePreview(templateId, templateText));
            document.querySelector('textarea[name="description"]').addEventListener('input', () => updatePreview(templateId, templateText));

            updatePreview(templateId, templateText);
        });
    });

    function updatePreview(templateId, templateText) {
        let result = templateText;
        document.querySelectorAll('.placeholder-input').forEach(input => {
            const key = input.getAttribute('data-placeholder');
            const val = input.value || '-';
            result = result.replace(new RegExp(`\\$\\{${key}\\}`, 'g'), val);
        });

        // Update preview box
        const preview = document.getElementById('templatePreview');
        if (preview) preview.textContent = result;
            document.getElementById('finalQuestionInput').value = result;
        // Update matching card in grid
        const textEl = document.getElementById(`template-text-${templateId}`);
        const descEl = document.getElementById(`template-description-${templateId}`);
        const yesEl = document.getElementById(`template-yes-${templateId}`);
        const noEl = document.getElementById(`template-no-${templateId}`);

        // Placeholder-substituted question text
        if (textEl) textEl.textContent = result || 'Template Preview';

        // Description field from form
        const descriptionVal = document.querySelector('textarea[name="description"]')?.value || 'Default Description';
        if (descEl) descEl.textContent = descriptionVal;

        // Yes/No Points
        const yesVal = document.querySelector('input[name="yes_point"]')?.value || '5';
        const noVal = document.querySelector('input[name="no_point"]')?.value || '5';

        if (yesEl) yesEl.textContent = `Yes Point: ${yesVal}`;
        if (noEl) noEl.textContent = `No Point: ${noVal}`;


    }
});
</script>



@endsection