@extends('layouts.backoffice.backoffice')

@section('title')
    Editar Campanha
@endsection

    <style>
        .form-check-input {
            background-color: #dc3545 !important;
            border-color: #dc3545 !important;
        }
        .form-check-input:checked {
            background-color: #28a745 !important;
            border-color: #28a745 !important;
        }
    </style>

    @section('content')
    <div class="container">
        <div class="card">
            <div class="card-body">
                <form class="ajax"
                      method="POST"
                      enctype="multipart/form-data"
                      action="{{ route('backoffice.games.update', ['game' => $game->id]) }}"
                      data-action="patch"
                      data-type="games">
                    @csrf
                    @method('PUT')
                    <div class="col-12 text-right">
                        <div class="form-check form-switch" title='Toggle'>
                            <input type="checkbox" class="form-check-input"
                                   id="status"
                                   name="status"
                                @checked($game->status)/>
                            <label class="form-check-label" for='status'>
                                <span class="status-text">{{ $game->status ? __('games.active') : __('games.inactive') }}</span>
                            </label>
                        </div>
                    </div>
                    <div class="form-group mt-2">
                        <label for="label">1. Título ou SloganCode</label>
                        <input required type="text" class="form-control" id="label" name="label"
                               value="{{ $game->label }}">
                    </div>
                    <div class="form-group mt-2">
                        <label for="subdomain">2. Subdominio</label>
                        <input required type="text" class="form-control" id="subdomain" name="subdomain"
                               value="{{ $game->subdomain }}">
                    </div>
                    <div class="form-group mt-2">
                        <label for="rounds">3. Número de Apostas Gratuitas</label>
                        <select class="form-control" id="rounds" name="rounds" required>
                            <option value="3" @selected($game->rounds === 3)>3</option>
                            <option value="6" @selected($game->rounds === 6)>6</option>
                            <option value="9" @selected($game->rounds === 9)>9</option>
                        </select>
                    </div>
                    <div class="form-group mt-2">
                        <label>3.1 Modalidade de Jogo</label>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="play_mode" id="play_mode_single" value="single" @checked($game->play_mode === 'single')>
                            <label class="form-check-label" for="play_mode_single">
                                Jogar uma única vez a série de apostas
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="play_mode" id="play_mode_weekly" value="weekly" @checked($game->play_mode === 'weekly')>
                            <label class="form-check-label" for="play_mode_weekly">
                                Jogar a série de apostas 1 vez por semana durante várias semanas
                            </label>
                        </div>
                    </div>
                    <div id="weekly-options" class="form-group mt-2" @style(['display: none;' => $game->play_mode !== 'weekly'])>
                        <label for="duration_weeks">Duração em semanas</label>
                        <select class="form-control" id="duration_weeks" name="duration_weeks">
                            @foreach($durationOptions as $weeks)
                                <option value="{{ $weeks }}" @selected($game->duration_weeks === $weeks)>
                                    {{ $weeks }} semanas
                                </option>
                            @endforeach
                        </select>
                        <div class="row mt-2">
                            <div class="col-md-6">
                                <label for="start_date">Data de início</label>
                                <input type="date" class="form-control" id="start_date" name="start_date"
                                       value="{{ $game->start_date?->format('Y-m-d') }}">
                            </div>
                            <div class="col-md-6">
                                <label for="end_date">Data de fim</label>
                                <input type="date" class="form-control" id="end_date" name="end_date"
                                       value="{{ $game->end_date?->format('Y-m-d') }}" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="form-group mt-2">
                        <label for="category_id">4. Categoria</label>
                        <select class="form-control" id="category_id" name="category_id" required>
                            <option value="">4. Categoria</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" @selected($category->id === $game->category_id)>
                                    {{ $category->label }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group mt-2">
                        <label for="subcategory_id">5. Subcategoria</label>
                        <select class="form-control" id="subcategory_id" name="subcategory_id" required>
                            <option value="">5. Subcategoria</option>
                            @foreach(($game->category?->subcategories ?? collect()) as $subcategory)
                                <option value="{{ $subcategory->id }}" @selected($subcategory->id === $game->subcategory_id)>
                                    {{ $subcategory->label }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <available-balls-select-component
                        :available-balls-categories="{{ json_encode($availableBallsCategories) }}"
                        :available-balls-category-id="{{ json_encode($game->available_balls_category_id) }}"
                        :available-ball-id="{{ json_encode($game->available_ball_id) }}">
                    </available-balls-select-component>
                    <div class="form-group mt-2">
                        <label for="game_background_id">5.3. Escolher a Tombola/Consola</label>
                        <select class="form-control" id="game_background_id" name="game_background_id" required>
                            @foreach($gameBackgrounds as $gameBackground)
                                <option value="{{ $gameBackground->id }}"
                                    @selected($gameBackground->id === $game->game_background_id)>
                                    {{ $gameBackground->label }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group mt-2">
                        <label for="description">6. Descrição do Marquee</label>
                        <textarea class="form-control" id="description" name="description"
                                  placeholder="6. Descrição do Marquee">{!! $game->description !!}</textarea>
                    </div>
                    <div class="form-group mt-2">
                        <label for="logo_image">6.1. Logo do Patrocinador</label>
                        <input type="file" class="form-control-file" id="logo_image" name="logo">
                        <img class="w-25 mt-3" src="{{ asset($game->logo) }}" alt="logo" />
                    </div>
                    <div class="form-group mt-2">
                        <label for="sponsor_link">6.2. Link do Patrocinador</label>
                        <input type="url" class="form-control" id="sponsor_link" name="sponsor_link"
                               placeholder="6.2. Link do Patrocinador" value="{{ $game->sponsor_link }}">
                    </div>
                    <div class="form-group mt-2">
                        <label for="background_image">7. Background-Tema</label>
                        <input type="file" class="form-control-file" id="background_image" name="background">
                        <img class="w-25 mt-3" src="{{ asset($game->background) }}" alt="background" />
                    </div>
                    <div class="form-group mt-2">
                        <label for="sponsor">8. Sobre a Campanha</label>
                        <textarea type="text" class="form-control" id="sponsor" name="sponsor_name"
                                  placeholder="8. Sobre a Campanha">{!! $game->sponsor_name !!}</textarea>
                    </div>
                    <div class="form-group mt-2">
                        <label for="sponsor_image">8.1. Imagem Sobre a Campanha</label>
                        <input type="file" class="form-control-file" id="sponsor_image" name="sponsor_image">
                        <img class="w-25 mt-3" src="{{ asset($game->sponsor_image) }}" alt="sponsor image" />
                    </div>
                    <div class="form-group mt-2">
                        <label for="about_us">9. Regulamento</label>
                        <textarea type="text" class="form-control" id="about_us" name="about_us"
                                  placeholder="9. Regulamento">{!! $game->about_us !!}</textarea>
                    </div>
                    <div class="form-group mt-2">
                        <label for="about_us_image">9.1. Imagem do Regulamento</label>
                        <input type="file" class="form-control-file" id="about_us_image" name="about_us_image">
                        <img class="w-25 mt-3" src="{{ asset($game->about_us_image) }}" alt="about us image" />
                    </div>
                    <div class="form-group mt-2">
                        <label for="prizes">10. Prémios</label>
                        <textarea type="text" class="form-control" id="prizes" name="prizes"
                                  placeholder="10. Prémios">{!! $game->prizes !!}</textarea>
                    </div>
                    <div class="form-group mt-2">
                        <label for="prizes_image">10.1 Imagem dos Prémios</label>
                        <input type="file" class="form-control-file" id="prizes_image" name="prizes_image">
                        <img class="w-25 mt-3" src="{{ asset($game->prizes_image) }}" alt="prizes image" />
                    </div>
                    <div class="form-group mt-2">
                        <label for="sponsor_id">12. Patrocinador</label>
                        <select class="form-control" id="sponsor_id" name="sponsor_id">
                            <option value="">Patrocinador (opcional)</option>
                            @foreach($sponsors as $sponsor)
                                <option value="{{ $sponsor->id }}" @selected($game->sponsor_id == $sponsor->id)>
                                    {{ $sponsor->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <hr />
                    <div class="row mt-2">
                        <div class="col-12 text-right">
                            <a class="btn btn-danger" href="{{ route('backoffice.games.index') }}">
                                <i class="fa-solid fa-chevron-left"></i>
                                Cancelar
                            </a>
                            <button type="button" onclick="$('#game-delete-form').trigger('submit')"
                                    class="btn btn-danger ml-2">
                                <i class="fa-solid fa-trash"></i>
                                Eliminar
                            </button>
                            <button type="submit" class="btn btn-primary ml-2">
                                <i class="fa-solid fa-save"></i>
                                Guardar
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <form id="game-delete-form"
          class="ajax"
          action="{{ route('backoffice.games.destroy', ['game' => $game->id]) }}"
          method="POST"
          data-action="delete"
          data-type="games">
        @csrf
        @method('DELETE')
    </form>
@endsection

@section('js')
    <script>
        $(() => {
            $('input[name="play_mode"]').on('change', function() {
                if ($(this).val() === 'weekly') {
                    $('#weekly-options').show();
                } else {
                    $('#weekly-options').hide();
                }
            });

            function calculateEndDate() {
                const startDate = $('#start_date').val();
                const durationWeeks = parseInt($('#duration_weeks').val());

                if (startDate && durationWeeks) {
                    const start = new Date(startDate);
                    const end = new Date(start);
                    end.setDate(end.getDate() + (durationWeeks * 7));
                    const year = end.getFullYear();
                    const month = String(end.getMonth() + 1).padStart(2, '0');
                    const day = String(end.getDate()).padStart(2, '0');
                    $('#end_date').val(`${year}-${month}-${day}`);
                }
            }

            $('#start_date, #duration_weeks').on('change', calculateEndDate);
        });
    </script>

    <script>
        $(() => {
            const tinymceSettings = {
                plugins: 'code table lists',
                toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright | indent outdent | bullist numlist | code | table',
            };
            tinymce.init({
                selector: 'textarea#description',
                ...tinymceSettings,
            });
            tinymce.init({
                selector: 'textarea#sponsor',
                ...tinymceSettings,
            });
            tinymce.init({
                selector: 'textarea#about_us',
                ...tinymceSettings,
            });
            tinymce.init({
                selector: 'textarea#prizes',
                ...tinymceSettings,
            });
        });
    </script>

    <script>
        $(() => {
            $('#status').on('change', function() {
                const isChecked = $(this).is(':checked');
                $(this).closest('.form-check').find('.status-text').text(
                    isChecked ? '{{ __('games.active') }}' : '{{ __('games.inactive') }}'
                );
            });
        });
    </script>

    <script>
        $('body').on('change', '#category_id', function() {

            if (!$(this).val()) {
                $('#subcategory_id').html('<option value="">{{ __('games.subcategory') }}</option>');
                return;
            }

            $.ajax({
                url: '{{ route('backoffice.categories.get-subcategories') }}',
                method: 'GET',
                data: {
                    category_id: $(this).val(),
                },
                success: function(response) {
                    $('#subcategory_id').html('<option value="">{{ __('games.subcategory') }}</option>');
                    response.data.subcategories.forEach(subcategory => {
                        $('#subcategory_id').append(`<option value="${subcategory.id}">${subcategory.label}</option>`);
                    });
                },
                error: function(xhr, status, error) {
                    $('#subcategory_id').html('<option value="">{{ __('games.subcategory') }}</option>');
                },
            });
        });
    </script>

    <script src="{{ mix('assets/js/backoffice-vue.js') }}"></script>
@endsection('js')