@extends('layouts.backoffice.backoffice')

@section('title')
    Nova 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.store') }}"
                      data-action="store"
                      data-type="games">
                    @csrf
                    <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" />
                            <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') }}">
                    </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') }}">
                    </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">3</option>
                            <option value="6">6</option>
                            <option value="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 }}">{{ $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>
                        </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') }}"></textarea>
                    </div>
                    <div class="form-group mt-2">
                        <label for="logo_image">{{ __('games.logo_image') }}</label>
                        <input required type="file" class="form-control-file" id="logo_image" name="logo">
                    </div>
                    <div class="form-group mt-2">
                        <label for="background_image">{{ __('games.background_image') }}</label>
                        <input required type="file" class="form-control-file" id="background_image" name="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') }}"></textarea>
                    </div>
                    <div class="form-group mt-2">
                        <label for="sponsor_image">{{ __('games.about_us_image') }}</label>
                        <input required type="file" class="form-control-file" id="sponsor_image" name="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') }}"></textarea>
                    </div>
                    <div class="form-group mt-2">
                        <label for="about_us_image">{{ __('games.sponsor_image') }}</label>
                        <input required type="file" class="form-control-file" id="about_us_image" name="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') }}"></textarea>
                    </div>
                    <div class="form-group mt-2">
                        <label for="prizes_image">{{ __('games.prizes_image') }}</label>
                        <input required type="file" class="form-control-file" id="prizes_image" name="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="submit" class="btn btn-primary ml-2">
                                <i class="fa-solid fa-save"></i>
                                Guardar
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@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')