@extends('layouts.app')
@section('content')
<div class="container-fluid project-page">
    <div class="row title-container">
        <div class="col-xs-12">
            <h1>
                <a>
                    {{ $project->name}}
                </a>
            </h1>
            <h3>
                {{ $project->getMagentoProductType()}}
            </h3>
        </div>
    </div>
</div>

<div class="container project-edit-page">
    <div class="row">
        <div class="col-xs-12">
            <h3>Texts</h3>
            <button id="new" class="btn btn-info">Add new text field</button>
            <div id="text-grid">
                <div class="row header-row">
                    <div class="col-xs-4">Name</div>
                    <div class="col-xs-1">Type</div>
                    <div class="col-xs-2">Format</div>
                    <div class="col-xs-1">Order</div>
                    <div class="col-xs-4">Action</div>
                </div>
                @each('projects.texts.row', $texts, 'text')
            </div>
            <button id="return" onclick="window.location.href = '/project/{{ $project->id}}'" class="btn btn-success">Return to project</button>
        </div>
    </div>
</div>

<script type="text/javascript">
    $( document ).ready(function() {
        showNewFormBind();
        editBind();
        removeBind();

        function removeBind() {
            var $button = $("button.btn-remove");
            $button.tooltip();
            $button.click(function () {
                var id = $(this).attr('data-id');
                var url = "/text/"+id;
                $.ajax({
                    url: url,
                    type: 'DELETE',
                    data: { "_token": "{{ csrf_token() }}" },
                    success: function(result,status,xhr) {
                        $(".content-row[data-id = '"+id+"']").replaceWith(result);
                    },
                });
            });
        }

        function editBind() {
            var $button = $("button.btn-edit");
            $button.tooltip();
            $button.click(function() {
                var id = $(this).attr('data-id');
                var url = "/text/"+id+"/edit";
                $.ajax({
                    url: url,
                    type: 'GET',
                    success: function(result,status,xhr) {
                        $(".content-row[data-id = '"+id+"']").replaceWith(result);
                    },
                    complete: function(xhr,status) {
                        submitBind();
                        $(".btn-remove-form").click(function() {
                            $("form[data-id = '"+id+"']").remove();
                        });
                        $("form[data-id = '"+id+"']").find("input#name").focus();
                    }
                });
            });
        }

        function submitBind() {
            var $button = $("button.btn-submit");
            $button.tooltip();
            $(".edit-form").submit(function () {
                var $form = $(this);
                var formData = $form.serializeArray();
                var url = $form.attr('action');
                $.ajax({
                    url: url,
                    type: 'PUT',
                    data: formData,
                    success: function(result,status,xhr) {
                        $form.replaceWith(result);
                    },
                    complete: function(xhr,status) {
                        editBind();
                        removeBind();
                        submitBind();
                    }
                });

                return false;
            });
        }

        function newFormSubmit() {
            $("#new-form").submit(function(event) {
                var $form = $(this);
                var formData = $form.serializeArray();
                var url = $form.attr('action');
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: formData,
                    success: function(result,status,xhr) {
                        $form.remove();
                        $('#text-grid').append(result);
                    },
                    complete: function(xhr,status) {
                        $(".btn-remove-new").click(function() {
                            $("#new-form").remove();
                        });
                        editBind();
                        removeBind();
                        newFormSubmit();
                    }
                });
                return false;
            });
        }

        function showNewFormBind() {
            $("button#new").click(function() {
                if (!$("#new-form").length) {
                    $.ajax({
                        url: "/text/create/{{$project->id}}",
                        type: 'GET',
                        success: function(result,status,xhr) {
                            $('#text-grid').append(result);
                        },
                        complete: function(xhr,status) {
                            $(".btn-remove-new").click(function() {
                                $("#new-form").remove();
                            });
                            newFormSubmit();
                            $("#new-form #name").focus();
                            $("#new-form").find("button").tooltip();
                        }
                    });
                } else {
                    $("#new-form #name").focus();
                }
            });
        }

    });
</script>
@stop