@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
            <div class="alert alert-success" id="alertJS" style="display:none;">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <strong></strong>
            </div>



            <div class="panel panel-default">

                <div class="panel-heading">

                    <div>

                        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#CriarOfertaModal">CRIAR OFERTA</button>
                        <button type="button" class="btn btn-primary" onclick="updateCasinoForm()">ATUALIZAR CASINO</button>
                        <form id="update-casino-form" action="#" method="POST" style="display: none;">
                            {{method_field('delete')}}	
                            {{csrf_field()}}
                        </form>
                    </div>

                </div>

                <div class="panel-body">

                    <table id="myTable" class="table table-striped table-hover table-responsive">

                        <thead>

                            <tr>

                                <th>Nome</th>

                                <th>Marca</th>

                                <th>Rentável</th>

                                <th>Oferta do Mês</th>

                                <th>Posição</th>

                                <th>Landings</th>

                                <th>Ações</th>

                            </tr>

                        </thead>

                        <tbody>

                            <!-- {{$Brands}} -->

                            @foreach($Offers as $Offer)

                            <tr>

                                <td style="vertical-align:middle">{{$Offer->Name}}</td>

                                <td style="vertical-align:middle">{{$Offer->BrandName}}</td>

                                <td style="vertical-align:middle">{{$YesNo[$Offer->Featured]}}</td>

                                <td style="vertical-align:middle">{{$YesNo[$Offer->MonthOffer]}}</td>

                                <td style="vertical-align:middle">{{$Offer->Position}}</td>

                                <td style="vertical-align:middle">{{$Offer->LandingsName}}</td>

                                <td width="10%" style="vertical-align:middle">

                                    <button class="btn btn-primary open_modal" value="{{$Offer->id}}"><i class="fa fa-pencil"></i></button>

                                    <button class="btn btn-danger" onclick="validarEliminar({{$Offer->id}})"><i class="fa fa-trash"></i></button>

                                    <form id="delete-form-{{$Offer->id}}" action="{{ route('gambling-delete', $Offer->id) }}" method="POST" style="display: none;">

                                        {{method_field('delete')}}

                                        {{csrf_field()}}

                                    </form>

                                </td>

                            </tr>

                            @endforeach

                        </tbody>

                    </table>

                </div>

            </div>

            

            <div class="modal fade" id="CriarOfertaModal" tabindex="-1" role="dialog" aria-labelledby="CriarOfertaModal" aria-hidden="true">

                <div class="modal-dialog" role="document">

                    <div class="modal-content">

                        <div class="modal-header">

                            <h5 class="modal-title">CRIAR OFERTA</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="criarOferta" method="post" action="{{ route('gambling-offer-store') }}">

                                {{ csrf_field() }}

                                <div class="form-group">

                                    <label for="BrandID">Marca</label>

                                    <select class="form-control" id="BrandID" name="BrandID">

                                        <option value="">Selecione</option>

                                        @foreach($Brands AS $Brand)

                                            <option value="{{$Brand->id}}">{{$Brand->Name}}</option>

                                        @endforeach

                                    </select>

                                </div>

                                <div class="form-group">

                                    <label for="Name">Nome</label>

                                    <input type="text" class="form-control" id="Name" name="Name" aria-describedby="" placeholder="Nome oferta" required>                                    

                                </div>

                                <div class="form-group">

                                    <label for="text1">Texto 1</label>

                                    <input type="text" class="form-control" id="text1" name="Text1" placeholder="Texto 1">

                                </div>

                                <div class="form-group">

                                    <label for="text2">Texto 2</label>

                                    <input type="text" class="form-control" id="text2" name="Text2" placeholder="Texto 2">

                                </div>

                                <div class="form-group">

                                    <label for="text3">Texto 3</label>

                                    <input type="text" class="form-control" id="text3" name="Text3" placeholder="Texto 3">

                                </div>

                                <div class="form-group">

                                    <label for="CampaignUrl">Url</label>

                                    <input type="text" class="form-control" id="CampaignUrl" name="CampaignUrl" placeholder="Url campanha">

                                </div>

                                <div class="form-group col-lg-6">

                                    <label for="rating">Rating</label>

                                    <input type="number" step="0.1" class="form-control" id="Rating" name="Rating" placeholder="Rating">

                                </div>

                                <div class="form-group col-lg-6">

                                    <label for="MonthOffer">Oferta do Mês</label>

                                    <select class="form-control" id="MonthOffer" name="MonthOffer" required>

                                        <option value="0">Não</option>

                                        <option value="1">Sim</option>

                                    </select>

                                </div>

                                <div class="form-group col-lg-6">

                                    <label for="Featured">Rentável</label>

                                    <select class="form-control" id="Featured" name="Featured">

                                        <option value="0">Não</option>

                                        <option value="1">Sim</option>

                                    </select>

                                </div>

                                <div class="form-group col-lg-6">

                                    <label for="Position">Posição</label>

                                    <select class="form-control" id="Position" name="Position">

                                        <option value="">Sem posição</option>

                                        <option value="1">1</option>

                                        <option value="2">2</option>

                                        <option value="3">3</option>

                                    </select>

                                </div>

                                <!-- <div class="form-group custom-file">

                                    <label class="custom-file-label" for="Imagem">Escolha o ficheiro...</label>

                                    <input type="file" class="btn btn-default" id="Imagem" name="Imagem" required>

                                </div> -->

                                <label for="Landings">Landings</label>

                                <div class="form-group">                                    

                                    @foreach($Landings as $landings)

                                    <div class="col-lg-3">

                                        <input type="checkbox" height="25px" name="Landings[]" value="{{$landings->id}}"> {{$landings->Name}}

                                    </div>

                                    @endforeach 

                                </div>

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

                            </form>
                            <button onclick="createOffer()" class="btn btn-primary">Criar</button>
                            <button onclick="$('#criarOferta').reset()" class="btn btn-primary">Limpar</button>

                            <script>
                            function createOffer() {
                                form = $('#criarOferta');                                
                                alert = $('#alertJS');                                
                                $.ajax({
                                    url: form.attr("action"),
                                    dataType: 'json',
                                    type: form.attr("method"),
                                    data: { _token: form.find('input[name="_token"]').val() , data : window.btoa($("#criarOferta").serialize())},
                                    success: function (response) {
                                        $('#CriarOfertaModal').modal('hide');

                                        alert.find('strong').text(response.message);
                                        alert.show();

                                        window.location.reload(true);
                                        /*
                                        setTimeout(function () { // wait metade de 1 seconds and reload
                                            window.location.reload(true);
                                        }, 500);
                                        */
                                    },
                                    error: function (request, status, error) {
                                        console.log(error);
                                    }
                                });
                            }
                            </script>

                        </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="EditOfertaModal" tabindex="-1" role="dialog" aria-labelledby="EditOfertaModal" aria-hidden="true">

                <div class="modal-dialog" role="document">

                    <div class="modal-content">

                        <div class="modal-header">

                            <h5 class="modal-title">EDITAR OFERTA</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="editarOferta" role="form" method="put" action="{{ route('gambling-offer-update') }}">

                                {{ csrf_field() }}
                                {{ method_field('PUT') }}

                                <div class="form-group">

                                    <label for="EditBrandID">Marca</label>

                                    <select class="form-control" id="EditBrandID" name="BrandID">

                                        <option value="">Selecione</option>

                                        @foreach($Brands AS $Brand)

                                            <option value="{{$Brand->id}}">{{$Brand->Name}}</option>

                                        @endforeach

                                    </select>

                                </div>

                                <div class="form-group">

                                    <label for="EditName">Nome</label>

                                    <input type="text" class="form-control" id="EditName" name="Name" aria-describedby="" placeholder="Nome oferta" value="" required>                                    

                                </div>

                                <div class="form-group">

                                    <label for="Edittext1">Texto 1</label>

                                    <input type="text" class="form-control" id="Edittext1" name="Text1" placeholder="Texto 1" value="">

                                </div>

                                <div class="form-group">

                                    <label for="Edittext2">Texto 2</label>

                                    <input type="text" class="form-control" id="Edittext2" name="Text2" placeholder="Texto 2" value="">

                                </div>

                                <div class="form-group">

                                    <label for="Edittext3">Texto 3</label>

                                    <input type="text" class="form-control" id="Edittext3" name="Text3" placeholder="Texto 3" value="">

                                </div>

                                <div class="form-group">

                                    <label for="EditCampaignUrl">Url</label>

                                    <input type="text" class="form-control" id="EditCampaignUrl" name="CampaignUrl" placeholder="Url campanha" value="">

                                </div>

                                <div class="form-group col-lg-6">

                                    <label for="Editrating">Rating</label>

                                    <input type="number" step="0.1" class="form-control" id="Editrating" name="Rating" placeholder="Rating" value="">

                                </div>

                                <div class="form-group col-lg-6">

                                    <label for="EditMonthOffer">Oferta do Mês</label>

                                    <select class="form-control" id="EditMonthOffer" name="MonthOffer" required value="">

                                        <option value="0">Não</option>

                                        <option value="1">Sim</option>

                                    </select>

                                </div>

                                <div class="form-group col-lg-6">

                                    <label for="EditFeatured">Rentável</label>

                                    <select class="form-control" id="EditFeatured" name="Featured" value="">

                                        <option value="0">Não</option>

                                        <option value="1">Sim</option>

                                    </select>

                                </div>

                                <div class="form-group col-lg-6">

                                    <label for="EditPosition">Posição</label>

                                    <select class="form-control" id="EditPosition" name="Position" value="">

                                        <option value="">Sem posição</option>

                                        <option value="1">1</option>

                                        <option value="2">2</option>

                                        <option value="3">3</option>

                                    </select>

                                </div>

                                <label for="Landings">Landings</label>

                                <div class="form-group">

                                    @foreach($Landings as $landings)

                                    <div class="col-lg-3">

                                        <input id="EditLandingsID-{{$landings->id}}" type="checkbox" height="25px" name="Landings[]" value="{{$landings->id}}"> {{$landings->Name}}

                                    </div>

                                    @endforeach 

                                </div>

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



                                <input type="hidden" id="EditOfferID" name="OfferID" value="">
                            </form>

                            <button onclick="updateOffer()" class="btn btn-primary">Guardar</button>

                            <script>
                                function updateOffer() {
                                    form = $('#editarOferta');                                
                                    alert = $('#alertJS');                                
                                    $.ajax({
                                        url: form.attr("action"),
                                        dataType: 'json',
                                        type: form.attr("method"),
                                        data: { _token: form.find('input[name="_token"]').val() , data : window.btoa($("#editarOferta").serialize())},
                                        success: function (response) {
                                            $('#EditOfertaModal').modal('hide');
    
                                            alert.find('strong').text(response.message);
                                            alert.show();
                                            
                                            window.location.reload(true);
                                            /*
                                            setTimeout(function () { // wait metade de 1 seconds and reload
                                                window.location.reload(true);
                                            }, 500);
                                            */
                                        },
                                        error: function (request, status, error) {
                                            console.log(error);
                                        }
                                    });
                                }
                            </script>

                        </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;

    }
    
    function updateCasinoForm() {
        // Get some values from elements on the page:
        var $form = $('#update-casino-form');
        var serializedData = $form.serialize();

        request = $.ajax({
            url: "/gambling/landings/casino/cache",
            type: "post",
            data: serializedData
        })
        
        // Callback handler that will be called on success
        request.done(function (response, textStatus, jqXHR){
            alert(response.message);
        });

        // Callback handler that will be called on failure
        request.fail(function (jqXHR, textStatus, errorThrown){
            console.error("Ocorreu um erro: "+
                textStatus, errorThrown
            );
        });
    }


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



        $('#EditOfertaModal input').each(function(){

            // console.log($(this));

            // $(this).val("");

            $(this).removeAttr("checked");

        });



        var url = "offers/edit";

        var id= $(this).val();

        

        $.get(url + '/' + id, function (data) {

            //success data

            // console.log(data);



            var position = data.Position;

            if(data.Position==0){

                position = "";

            }

            var arr;
            if(data.Landings)
                arr = data.Landings.split(',');

            // console.log(arr);



            $('#EditOfferID').val(data.id);

            $('#EditBrandID').val(data.BrandID);

            $('#EditName').val(data.Name);

            $('#Edittext1').val(data.Text1);

            $('#Edittext2').val(data.Text2);

            $('#Edittext3').val(data.Text3);

            $('#EditCampaignUrl').val(data.CampaignUrl);

            $('#Editrating').val(data.Rating);



            $('#EditMonthOffer').val(data.MonthOffer);

            $('#EditFeatured').val(data.Featured);

            $('#EditPosition').val(position);

            

            if(data.Landings) {
                $.each( arr, function( index, value ) {
                    $('#EditLandingsID-'+value).attr("checked","checked");
                });
            }

            

            $('#EditOfertaModal').modal('show');

        }) 

    });





</script>