@extends('layouts.backoffice.backoffice')

@section('title')
    Campanhas
@endsection

@section('content')
    <div class="container">
        <div class="row mb-2">
            <div class="col-12 text-right">
                <a class="btn btn-primary" href="{{ route('backoffice.games.create') }}">
                    <i class="fa-solid fa-plus"></i>
                    Nova Campanha
                </a>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th scope="col">Subdomínio</th>
                        <th scope="col">Título</th>
                        <th scope="col">Modalidade</th>
                        <th scope="col">Duração</th>
                        <th scope="col">Categoria</th>
                        <th scope="col">Subcategoria</th>
                        <th scope="col">Pool</th>
                        <th scope="col">Tombola</th>
                        <th scope="col">Estado</th>
                        <th scope="col">Data de Criação</th>
                        <th scope="col">Ações</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($games as $game)
                        <tr>
                            <td>{{ $game->subdomain }}</td>
                            <td>{{ $game->label }}</td>
                            <td>
                                @if($game->play_mode === 'weekly')
                                    <span class="badge badge-info">{{ __('games.play_mode_weekly') }}</span>
                                @else
                                    <span class="badge badge-secondary">{{ __('games.play_mode_single') }}</span>
                                @endif
                            </td>
                            <td>
                                @if($game->isWeeklyMode() && $game->duration_weeks)
                                    {{ $game->duration_weeks }} {{ __('games.weeks') }}
                                @else
                                    -
                                @endif
                            </td>
                            <td>
                                <a href="{{ route('backoffice.categories.edit', ['category' => $game->category_id]) }}">
                                    {{ $game->category->label }}
                                </a>
                            </td>
                            <td>
                                <a href="{{ route('backoffice.subcategories.edit', ['category' => $game->category_id, 'subcategory' => $game->subcategory_id]) }}">
                                    {{ $game->subcategory->label }}
                                </a>
                            </td>
                            <td>
                                @if($game->availableBallsCategory)
                                    {{ $game->availableBallsCategory->label }} - {!! $game->availableBall->label !!}
                                @else
                                    -
                                @endif
                            </td>
                            <td>
                                <a href="{{ route('backoffice.game-backgrounds.edit', ['game_background' => $game->game_background_id]) }}">
                                    {{ $game->gameBackground->label }}
                                </a>
                            </td>
                            <td class="text-center">
                                <div class="form-check form-switch" title="{{ __('games.status_input_label') }}">
                                    <input type="checkbox"
                                           class="form-check-input status-toggle"
                                           data-game-id="{{ $game->id }}"
                                           @checked($game->status)
                                           onchange="toggleGameStatus(this)">
                                    <label class="form-check-label" for="status_{{ $game->id }}">
                                        <span class="status-text">{{ $game->status ? __('games.active') : __('games.inactive') }}</span>
                                    </label>
                                </div>
                            </td>
                            <td>{{ $game->created_at->format('d-m-Y H:i') }}</td>
                            <td>
                                <a class="btn btn-primary"
                                   href="{{ route('backoffice.games.edit', ['game' => $game->id]) }}">
                                    <i class="fa-solid fa-pencil"></i>
                                </a>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>


    <style>
        .table tr td {
            vertical-align: middle;
        }
        /* Cores personalizadas para o switch de status */
        .form-check-input {
            background-color: #dc3545 !important; /* Vermelho para inativo */
            border-color: #dc3545 !important;
        }
        .form-check-input:checked {
            background-color: #28a745 !important; /* Verde para ativo */
            border-color: #28a745 !important;
        }
    </style>

    <script>
        function toggleGameStatus(element) {
            const gameId = $(element).data('game-id');
            const isChecked = $(element).is(':checked');
            const label = $(element).closest('.form-check').find('.status-text');

            $.ajax({
                url: `/backoffice/games/${gameId}/toggle-status`,
                method: 'PUT',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                },
                data: {
                    status: isChecked ? 1 : 0,
                },
                beforeSend: function() {
                    label.css('opacity', '0.5');
                },
                success: function(response) {
                    label.css('opacity', '1');
                    if (response.status === 'success') {
                        label.text(isChecked ? '{{ __('games.active') }}' : '{{ __('games.inactive') }}');
                    } else {
                        alert('Erro ao atualizar status.');
                        $(element).prop('checked', !isChecked);
                    }
                },
                error: function() {
                    alert('Erro na requisição.');
                    $(element).prop('checked', !isChecked);
                    label.css('opacity', '1');
                }
            });
        }
    </script>
@endsection