@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row">
        @include('gambling.parts.top')

        <div class="col-md-12 ">
            @if ($message = Session::get('message'))
            <div class="alert alert-success alert-block">
                <button type="button" class="close" data-dismiss="alert">×</button>	
                    <strong>{{ $message }}</strong>
            </div>
            @endif

            @if($errors->has('Image'))
                <script type="text/javascript">
                    $(window).on('load',function(){
                        $('#CriarMarcaModal').modal('show');
                    });
                </script>
            @endif

            <div class="panel panel-default">
                <div class="panel-heading">
                    <div>
                        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#CriarMarcaModal">CRIAR MARCA</button>
                    </div>
                </div>
                <div class="panel-body">
                    <table id="myTable" class="table table-striped table-hover table-responsive">
                        <thead>
                            <tr>
                                <th>Nome</th>
                                <th>Imagem</th>
                                <th>Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($Brands as $Brand)
                            <tr>
                                <td width="45%" style="vertical-align:middle">{{$Brand->Name}}</td>
                                <td width="45%" style="vertical-align:middle">
                                    <img src="{{$Brand->Image}}" width="50px" height="50px" />
                                </td>
                                <td width="10%" style="vertical-align:middle">
                                    <button class="btn btn-primary open_modal" value="{{$Brand->id}}"><i class="fa fa-pencil"></i></button>
                                    <button class="btn btn-danger" onclick="validarEliminar({{$Brand->id}})"><i class="fa fa-trash"></i></button>
                                    <form id="delete-form-{{$Brand->id}}" action="{{ route('gambling-brand-delete', $Brand->id) }}" method="POST" style="display: none;">
                                        {{method_field('delete')}}
                                        {{csrf_field()}}
                                    </form>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="modal fade" id="CriarMarcaModal" tabindex="-1" role="dialog" aria-labelledby="CriarMarcaModal" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">CRIAR MARCA</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form id="CriarMarca" role="form" method="POST" action="/gambling/brands/create" files="true" enctype="multipart/form-data">
                                {{ csrf_field() }}                            
                                <div class="form-group">
                                    <label for="Name">Nome</label>
                                    <input type="text" class="form-control" id="Name" name="Name" aria-describedby="" placeholder="Nome marca" value="{{old('Name')}}" required>                                    
                                </div>                                
                                <div class="form-group custom-file">
                                    <label class="custom-file-label" for="Image">Escolha o ficheiro...</label>
                                    <input type="file" class="btn btn-default" id="Image" name="Image" required>

                                    @if ($errors->has('Image'))
                                        <span class="help-block" style="color: #E74C3C;">
                                            <strong>{{ $errors->first('Image') }}</strong>
                                        </span>
                                    @endif

                                </div>
                                <div class="row" style="line-height:30px">&nbsp;</div>

                                <button type="submit" class="btn btn-primary">Criar</button>
                                <button type="reset" class="btn btn-primary">Limpar</button>
                            </form>

                        </div>
                        <div class="modal-footer">
                            <!-- <button type="button" class="btn btn-primary">Criar</button> -->
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                        </div>
                    </div>
                </div>
            </div>


            <div class="modal fade" id="EditMarcaModal" tabindex="-1" role="dialog" aria-labelledby="EditMarcaModal" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">EDITAR MARCA</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form id="EditMarca" role="form" method="post" action="/gambling/brands/edit" files="true" enctype="multipart/form-data">
                                {{ csrf_field() }}  
                                {{method_field('PUT')}}                          
                                <div class="form-group">
                                    <label for="Name">Nome</label>
                                    <input type="text" class="form-control" id="EditName" name="Name" aria-describedby="" placeholder="Nome marca" value="" required>
                                </div>

                                <div class="form-group custom-file">
                                    <label class="custom-file-label" for="ImageAtual">Imagem atual:</label>
                                    <div id="BrandImage"></div>
                                    <div class="row" style="line-height:30px">&nbsp;</div>
                                    <label class="custom-file-label" for="Image">Escolha o ficheiro...</label>
                                    <input type="file" class="btn btn-default" id="Image" name="Image">
                                    @if ($errors->has('Image'))
                                        <span class="help-block" style="color: #E74C3C;">
                                            <strong>{{ $errors->first('Image') }}</strong>
                                        </span>
                                    @endif

                                </div>

                                <input type="hidden" id="EditBrandID" name="BrandID" value="">

                                <button type="submit" class="btn btn-primary">Guardar</button>
                            </form>

                        </div>
                        <div class="modal-footer">
                            <!-- <button type="button" class="btn btn-primary">Criar</button> -->
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>

@endsection
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>    
    function validarEliminar(num){
        // console.log(num);
        var x = confirm('Tem a certeza que pretende eliminar este registo?');
        // console.log(x);
        if(x == true){
            // console.log('teste true');
            event.preventDefault(); 
            document.getElementById('delete-form-'+num).submit();
        }
        return;
    }

    $(document).on('click','.open_modal',function(){

        $('#EditMarcaModal #BrandImage').each(function(){
            $('img').remove();
            $('br').remove();
        });

        var url = "brands/edit";
        var id= $(this).val();
        $.get(url + '/' + id, function (data) {
            //success data
            console.log(data);
            $('#EditBrandID').val(data.id);
            $('#EditName').val(data.Name);
            
            var img = data.Image;
            $("#BrandImage").append('<img src="'+img+'" style="width:50px;height:50px;"><br/>');
            console.log(img);

            // $('#').val(data.LandingUrl);
            // $('#btn-save').val("update");
            $('#EditMarcaModal').modal('show');
        }) 
    });

</script>