@extends('layouts.digitar')
@section('Breadcrumbs')
    {!! Breadcrumbs::render('biddingStructure.new') !!}
@endsection
@section('content')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/css/jquery-ui.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script src="/assets/js/jquery.mjs.nestedSortable.js"></script>
    <div class="row">
        @include('common.errors')
        <div class="container">
            <div class="col-md-12 the-box rounded">
                <h2 class="text-uppercase">Versão - {{ $version_bidding->name }}</h2>
                <h4 class="text-uppercase">Estrutura de licitação</h4>
                <a href="{{ route('version_bidding.index') }}" class="btn btn-default pull-right"> Voltar </a>

            </div>
            <div class="col-md-12 the-box rounded">
                <div class="row">
                    <div class="col-md-12">
                        @if (count($structurebidding) == 0)
                            <div class="well text-center">
                                <h3>Sem dados. Insira um novo registro.</h3>
                                <button type="button" class="editable btn btn-info" data-item="0" data-method="post"
                                    data-number="1" data-action="store" data-title="Novo registro" data-toggle="modal"
                                    data-target="#myModal"><i class="fa fa-plus"></i> Adicionar estrutura</button>
                            </div>
                        @else
                            <style>
                                .the-box {
                                    margin-bottom: 3px;
                                }

                                ol {
                                    border-left: 1px dashed #cccccc;
                                    list-style: none;
                                    counter-reset: num;
                                }

                                ul {
                                    list-style: none;
                                    counter-reset: num;
                                }

                                /**/
                            </style>
                                                        <div class="col-md-12">
                                <ul class="">
                                    @foreach ($structurebidding as $reg)
                                        {!! renderNode($reg, 0, 0) !!}
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="idModal" placeholder="id" class="form-control">

                    <div class="form-group col-sm-5">
                        <label>Nome:</label>
                        <input type="text" id="nameModal" class="form-control" placeholder="nome" />
                    </div>

                    <!-- Document Type Id Field -->
                    <div class="form-group col-sm-5">
                        {!! Form::label('document_type_id', 'Tipo de documento', ['class' => 'required']) !!}
                        {!! Form::select('document_type_id', $documentType, null, [
                            'id' => 'document_type_id',
                            'class' => 'form-control chosen-document-type',
                        ]) !!}
                    </div>

                    <div class="form-group col-sm-2">
                        <label>Ordem:</label>
                        <input type="text" id="numberModal" class="form-control" placeholder="ordem" />
                    </div>

                    <div class="clearfix"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-remove"></i>
                        Cancelar</button>
                    <button type="button" class="btn btn-primary saveModal"><i class="fa fa-save"></i> Salvar</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        //$('.editable').hide();
        var routeGroup = "";
        var routeModel = "/structurebinddings";
        var cc_title;
        var cc_name;
        var cc_item_id;
        var cc_action;
        var cc_method;

        var cc_url;


        var toggle = function(field, id) {
            var url = "/structurebinddings/toggle/" + id + "/" + field;

            $.ajax({
                method: "GET",
                url: url,
            }).success(function(result, textStatus, jqXHR) {
                if (result) {
                    console.log(result)
                }
            });
        }

        var deletaReg = function(id) {
            var url = '/version_bidding/structurebinddings/delete/' + id;
            $.ajax({
                method: "GET",
                url: url
            }).success(function(result, textStatus, jqXHR) {
                if (JSON.parse(result)) {
                    $('#struc_' + id).fadeOut(400);
                }
            });
        }

        $('#myModal').off('click').on('show.bs.modal', function(e) {
            $('#myModal .modal-dialog .modal-body #nameModal').val('');
            $('#myModal .modal-dialog .modal-body #type').val('');
            $('#myModal .modal-dialog .modal-body #numberModal').val('');
            cc_title = e.relatedTarget.dataset.title;
            cc_name = e.relatedTarget.dataset.name;
            cc_number = e.relatedTarget.dataset.number;
            cc_action = e.relatedTarget.dataset.action;
            cc_item_id = e.relatedTarget.dataset.item;
            cc_method = e.relatedTarget.dataset.method;


            var url = '/get/select/' + cc_item_id;
            $.ajax({
                method: "GET",
                url: url
            }).success(function(result, textStatus, jqXHR) {
                var selectElement = $('#document_type_id');
                for (var i = 0; i < result.length; i++) {

                    console.log(result[i]['name']);

                    selectElement.prepend($('<option></option>').attr('value', result[i]['id']).text(
                        result[i]['name']));
                    selectElement.val(result[i]['id']);

                    selectElement.trigger('chosen:updated');
                }
            });

            cc_url = {
                store: routeGroup + routeModel,
                update: routeGroup + routeModel + '/' + cc_item_id,
                delete: routeGroup + routeModel + '/' + cc_item_id + "/delete"
            }


            $('#myModal .modal-dialog .modal-header .modal-title').html(cc_title);
            $('#myModal .modal-dialog .modal-body #idModal').val(cc_item_id);
            if (cc_name) {
                $('#myModal .modal-dialog .modal-body #nameModal').val(cc_name)
            }

            if (cc_number) {
                $('#myModal .modal-dialog .modal-body #numberModal').val(cc_number)
            }
            $('#nameModal').focus();

            $('.saveModal').on('click', function() {

                var data = {
                    _token: "{{ csrf_token() }}",
                    parent_id: $('#myModal .modal-dialog .modal-body #idModal').val(),
                    order: $('#myModal .modal-dialog .modal-body #numberModal').val(),
                    name: $('#myModal .modal-dialog .modal-body #nameModal').val(),
                    document_type_id: $('#document_type_id').val(),
                    version_bidding_id: '{{ $version_bidding->id }}'
                }
                sendAction(data);
                console.log(data, cc_url[cc_action]);

            })

        });

        var sendAction = function(data) {
            $.ajax({
                method: cc_method,
                url: cc_url[cc_action],
                dataType: "json",
                data: data
            }).success(function(result, textStatus, jqXHR) {
                if (result) {
                    window.location.reload();
                }
            });
        }

        $(document).ready(function() {
            console.log(cc_url);
        });
    </script>
@endsection