@extends('admin.master')
@section('content')
    <section id="dashboard-content">
        @if(session('message'))
            <div class="alert alert-success">
                {{session('message')}}
            </div>
        @endif
        @if (isset($errors) && count($errors) > 0)
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <div id="relAnuncio" class="col-xs-12 section-content">
            <div class="row">
                <div class="col-xs-12">
                    <h3>Avisos</h3>
                </div>
            </div>
            <div id="rla-content">
                <div class="container-fluid" id="tela-aviso">
                    <div class="row tab-content">
                        <div class="col-xs-9">
                            <h4>Novo Aviso</h4>
                            <div class="row">
                                <div class="col-xs-4">
                                    <form class="form" action="{{route('admin.products.avisos.create')}}" method="POST" enctype="multipart/form-data">
                                        {{csrf_field()}}
                                        <div class="form-group">
                                            <label for="name">Nome:</label>
                                            <input type="text" name="name" id="name" v-model="name" class="form-control" required>
                                        </div>
                                        <div class="form-group">
                                            <label for="imagem">Imagem:</label>
                                            <input type="file" id="imagem" name="imagem" :required="file_url === null"  v-on:change="handleFilePreview($event)" />
                                            <input type="hidden" name="file_url" v-model="file_url" />
                                            <p class="help-block">Tamanho da imagem: 290x300 pixels</p>
                                        </div>
                                        <div class="form-group">
                                            <label for="tipo">Tipo:</label>
                                            <select id="tipo" class="form-control" name="type" required v-on:change="handleChange($event)" v-model="type">
                                                <option value=""> - Selecione -</option>
                                                <option value="1">Site</option>
                                                <option value="2">Tela</option>
                                                <option value="3">Função</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="destino">Destino:</label>
                                            <p class="help-block">Site:</p>
                                            <input type="text" name="url_destino" class="form-control"
                                                   placeholder="Começa com http://" :disabled="site_disabled"  v-model="url_destino">
                                            <p class="help-block">Tela:</p>
                                            <select id="tela_destino" class="form-control" v-bind:disabled="internal_disabled" name="tela_destino" v-model="tela_destino">
                                                <option value=""> - Selecione -</option>
                                                <option value="#/app/home/purchase">Comprar</option>
                                                <option value="#/app/home/myAds">Meus Anúncios</option>
                                                <option value="#/app/home/conversas">Conversas</option>
                                                <option value="#/app/advanced-search">Busca Avançada</option>
                                                <option value="#/app/step-2-announce">Vender (Novo anúncio)</option>
                                                <option value="#/app/favorites">Favoritos</option>
                                                <option value="#/app/profile">Perfil de Compra</option>
                                                <option value="#/app/notifications">Silenciar Notificações</option>
                                                <option value="#/app/car-query">Consulta Veicular</option>
                                                <option value="#/app/about-app">Sobre</option>
                                            </select>
                                            <p class="help-block">Função:</p>
                                            <select id="func_destino" class="form-control" name="func_destino" v-bind:disabled="func_disabled" v-model="func_destino">
                                                <option value=""> - Selecione - </option>
                                                <option value="shareApp">Compartilhe</option>
                                                <option value="openAppStore">Loja (do aparelho do usuário)</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="user_type">Tipo de Usuário:</label>
                                            <select id="user_type"
                                                    v-model="target"
                                                    class="form-control"
                                                    name="user_type[]"
                                                    multiple
                                                    required>
                                                @foreach($user_types as $type)
                                                    <option value="{{$type->id}}">{{$type->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <button class="btn btn-primary">Criar</button>
                                        </div>
                                    </form>
                                </div>
                                <div class="col-xs-4">
                                    <div class="image-preview">
                                        <div id="the-image" style="width: 290px; height: 300px;">
                                            <img v-bind:src="imagePreview" v-show="showPreview" width="290" height="300" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br/>
                    <div class="row tab-content">
                        <div class="col-xs-12">
                            <div class="row">
                                <div class="col-xs-12">
                                    <h4>Avisos Enviados:</h4>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12">
                                    <p>Informação de selecionados e enviados é atualizada de hora em hora:</p>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-xs-12">
                                    <table class="table table-condensed table-responsive table-hover">
                                        <thead>
                                        <tr>
                                            <th>id</th>
                                            <th>Nome</th>
                                            <th>Tipo</th>
                                            <th>Selecionados</th>
                                            <th>Enviados</th>
                                            <th>Data</th>
                                            <th>Ações</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($ads as $ad)
                                            <tr data-toggle="tooltip" data-placement="top" title="<img src='/uploads/ads/{{$ad->filename}}' width='290' height='300' />">
                                                <td>{{ $ad->id }}</td>
                                                <td>{{ $ad->name }}</td>
                                                <td>{{ $ad->tipo }}</td>
                                                <td>{{ $ad->selected }}</td>
                                                <td>{{ $ad->sent }}</td>
                                                <td>{{ $ad->created_at->format('d/m/Y H:i:s') }}</td>
                                                <td>
                                                    <button v-on:click="handleRepost"
                                                            data-nome="{{ $ad->name }}"
                                                            data-type="{{ $ad->type }}"
                                                            data-destination="{{ $ad->destination }}"
                                                            data-target="{{json_encode($ad->user_type)}}"
                                                            data-file="{{$ad->filename}}"
                                                            data-toggle="tooltip"
                                                            data-placement="bottom"
                                                            title="Iniciar um novo aviso igual a este"
                                                            type="button" class="btn btn-sm btn-primary">
                                                        <i class="fa fa-refresh"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-12">
                                    <div align="center">
                                        {!! $ads->render() !!}
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>

            </div>


        </div>
    </section>
@endsection
@section('scripts')
    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip({
                animated: 'fade',
                placement: 'top',
                html: true
            });
        });
    </script>
@endsection