@extends('layouts.cms')

@section('content')

<div class="section-heading clearfix">
    <h2 class="section-title"><i class="fas fa-users"></i> Integrantes de Equipo</h2>
    <a href="javascript:;" id="btn-member" class="btn btn-primary right">Agregar Integrante</a>
</div>

<div class="panel-content">
    <h2 class="heading">Integrantes</h2>
    <div class="grid sortable clearfix">
        @foreach($members as $member)
            <div class="card shadow-drop-center card-member col-xl-1 col-lg-4 col-md-6 col-sm-12" draggable="true" data-id="{{ $member->id }}" data-priority="{{ $member->priority }}" ondragend="dragEnd(event)">
                <div class="card-body">
                    <img class="card-img-top img-{{ $member->id }}" src="{{ str_replace('https://v2.yekoclub.com', env('SERVICE_ADMIN'), $member->image) }}" style="margin: auto !important; max-height: 190px;" alt="Card image cap">
                    <h3 class="card-title name-{{ $member->id }}" style="margin-top: 10px;">{{ $member->full_name }}</h3>
                    <span class="badge badge-secondary position-{{ $member->id }}">{{ $member->position }}</span>
                    <p class="card-text description-{{ $member->id }}">{{ $member->description }}</p>
                </div>
                <div class="card-footer">
                    <a href="#" class="btn btn-primary update-member" data-id="{{ $member->id }}" data-priority="{{ $member->priority }}">Editar</a>
                    <a href="#" class="btn btn-danger delete-member" data-id="{{ $member->id }}">Eliminar</a>
                </div>
            </div>
        @endforeach
    </div>
</div>

<div class="modal fade" id="modal-member" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h5 class="modal-title">Agregar Nuevo Miembro</h5>
            </div>
            <div class="modal-body">
                <form id="form-members" multipart/form-data>
                    <div class="form-group">
                        <label for="name">Nombre:</label>
                        <input type="text" name="name" id="name" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="position">Posición:</label>
                        <input type="text" name="position" id="position" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="description">Descripción:</label>
                        <textarea class="form-control" name="description" id="description" rows="3"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="image">Url de la Imagen:</label>
                        <input type="file" name="image" id="image" class="inputfile">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                <button type="submit" id="save-member" form="form-members" class="btn btn-primary">Guardar</button>
            </div>
        </div>
    </div>
</div>

@endsection

<style>

    @-webkit-keyframes shadow-drop-center {
        0% {
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        }
        100% {
            box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.35);
        }
    }

    @keyframes shadow-drop-center {
        0% {
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        }
        100% {
            box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.35);
        }
    }

    .card {
        border: 1px solid #cccccc;
        border-radius: 10px;
        height: 400px;
        max-width: 270px;
        padding: 10px;
        margin: 10px;
    }

    .card-title {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .card-member {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .card-body {
        display: flex;
        flex-direction: column;
        justify-content: start;
    }

    .badge{
        align-self: flex-start;
    }

    .card-footer {
        align-self: flex-end;
    }

    .card-text {
        overflow: hidden;
        position: relative; 
        line-height: 1.2em;
        max-height: 3.6em; 
        text-align: justify;
        margin-top: 10px;
    }

    .shadow-drop-center {
        -webkit-animation: shadow-drop-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
                animation: shadow-drop-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }
</style>

@section('footer')
<script>

    sortable('.grid', {
        forcePlaceholderSize: true,
        placeholderClass: 'col col-3 border border-blue',
    });

    function dragEnd(event) {
        updatePriority();
    }

    $('#btn-member').click(function(){
        $('#modal-member').modal();
    });

    $('#form-members').submit(function(e){
        e.preventDefault();
        var form = new FormData(this);

        form.set('_token', "{{ csrf_token() }}");
        form.set('account', "{{ $account }}");

        if($('#save-member').html() == 'Guardar'){

            $.ajax({
                type: "POST",
                enctype: 'multipart/form-data',
                url: "members/create",
                data: form,
                processData: false,
                contentType: false,
                cache: false,
                timeout: 600000,
                success: function (data) {
                    alert(data.success);
                    window.location.reload();
                },
                error: function (e) {
                    console.log(e);
                }
            });

        } else {
            
            var priority = $('#save-member').attr('data-priority');
            var id = $('#save-member').attr('data-id');

            form.set('priority', priority);
            form.set('id', id);

            $.ajax({
                type: "POST",
                enctype: 'multipart/form-data',
                url: "members/update",
                data: form,
                processData: false,
                contentType: false,
                cache: false,
                timeout: 600000,
                success: function (data) {
                    alert(data.success);
                    window.location.reload();
                },
                error: function (e) {
                    console.log(e)
                }
            });
        }
    });

    $('.delete-member').click(function(){
        var id = $(this).attr('data-id');
        
        $.post('members/delete', {account: "{{ $account }}", _token: "{{ csrf_token() }}", id: id }, function( response ) {
            alert(response.success);
            window.location.reload();
        }).fail(function(err){
            console.log(err);
        });
    });

    $('.update-member').click(function(){

        var id = $(this).attr('data-id');
        var priority = $(this).attr('data-priority');
        var data = getMemberInfo(id);
        
        $('#save-member').html('Modificar');
        $('#save-member').attr('data-id', id);
        $('#save-member').attr('data-priority', priority);
        $('.modal-title').html('Modificar Información');
        
        $('#name').val(data.name);
        $('#position').val(data.position);
        $('#description').val(data.description);

        $('#modal-member').modal();
        
    });

    var updatePriority = function(){
        var data = [];
        var list = $('.sortable').find('.card');
        
        $.each(list, function(index, input){
            var id = $(input).attr('data-id');
            card = {
                'id': id,
                'name': $('.name-' + id).html(),
                'priority': index,
                'position': $('.position-' + id).html(),
                'description': $('.description-' + id).html(),
                '_token': "{{ csrf_token() }}",
                'domain': "{{ $account }}"
            };
            data.push(card);
        });

        $.each(data, function(index, value){
            $.post('members/update', value, function(response){
                console.log(response)
            }).fail(function(err){
                console.log(err);
            });
        });
    }

    var getMemberInfo = function(id){

        var name = $('.name-' + id).text();
        var position = $('.position-' + id).text();
        var description = $('.description-' + id).text();
        var image = $('.img-' + id).attr('src');

        return { name, position, description, image, id };
    };

</script>
@endsection