@extends('layouts.backoffice.backoffice')

@section('title')
    Editar Campanha
@endsection

@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'>
                                {{ __('games.status_input_label') }}
                            </label>
                        </div>
                    </div>
                    <div class="form-group mt-2">
                        <label for="label">{{ __('games.label') }}</label>
                        <input required type="text" class="form-control" id="label" name="label"
                               placeholder="{{ __('games.label') }}"
                               value="{{ $game->label }}">
                    </div>
                    <div class="form-group mt-2">
                        <label for="subdomain">{{ __('games.subdomain') }}</label>
                        <input required type="text" class="form-control" id="subdomain" name="subdomain"
                               placeholder="{{ __('games.subdomain') }}" value="{{ $game->subdomain }}">
                    </div>
                    <div class="form-group mt-2">
                        <label for="rounds">{{ __('games.rounds') }}</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 for="category_id">{{ __('games.category') }}</label>
                        <select class="form-control" id="category_id" name="category_id" required>
                            <option value="">{{ __('games.category') }}</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">{{ __('games.subcategory') }}</label>
                        <select class="form-control" id="subcategory_id" name="subcategory_id" required>
                            <option value="">{{ __('games.subcategory') }}</option>
                            @foreach(($game->category?->subcategories ?? collect()) as $subcategory)
                                <option
                                    value="{{ $subcategory->id }}" @selected($subcategory->id === $game->subcategory_id)>
                                    {{ $subcategory->label }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group mt-2">
                        <label for="description">{{ __('games.description') }}</label>
                        <textarea class="form-control" id="description" name="description"
                                  placeholder="{{ __('games.description') }}">{!! $game->description !!}</textarea>
                    </div>
                    <div class="form-group mt-2">
                        <label for="logo_image">{{ __('games.logo_image') }}</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="background_image">{{ __('games.background_image') }}</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">{{ __('games.about_us') }}</label>
                        <textarea type="text" class="form-control" id="sponsor" name="sponsor"
                                  placeholder="{{ __('games.about_us') }}">{!! $game->sponsor !!}</textarea>
                    </div>
                    <div class="form-group mt-2">
                        <label for="sponsor_image">{{ __('games.about_us_image') }}</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">{{ __('games.sponsor') }}</label>
                        <textarea type="text" class="form-control" id="about_us" name="about_us"
                                  placeholder="{{ __('games.sponsor') }}">{!! $game->about_us !!}</textarea>
                    </div>
                    <div class="form-group mt-2">
                        <label for="about_us_image">{{ __('games.sponsor_image') }}</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">{{ __('games.prizes') }}</label>
                        <textarea type="text" class="form-control" id="prizes" name="prizes"
                                  placeholder="{{ __('games.prizes') }}">{!! $game->prizes !!}</textarea>
                    </div>
                    <div class="form-group mt-2">
                        <label for="prizes_image">{{ __('games.prizes_image') }}</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>
                    <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>
        $(() => {
            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>
        $('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>
@endsection('js')