{% extends 'back.html.twig' %}

{% block title %} Projects{% endblock %}

{% block body %}

<div class="app-content-header">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6"><h3 class="mb-0">Project ({{ project.name }})</h3></div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-end">
                    <li class="breadcrumb-item"><a href="{{ path('app_admin_dashboard') }}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ path('admin_project_index') }}">Projects</a></li>
                    <li class="breadcrumb-item active">Edit Project</li>
                </ol>
            </div>
        </div>
    </div>
</div>

    <div class="app-content">
        <div class="container-fluid">
            <div class="row g-4">
                <div class="col-md-12">
                    <div class="card ">
                        <div class="card-header with-border" style="padding-bottom: 0px;">
                            {% include '@Project/project/partials/project-header-links.html.twig' %}
                        </div>
                        <div class="card-body">
                            <div class="tab-content">
                                <div id="edit_customer_details" class="tab-pane active">
                                    <form class="form-horizontal" action="javascript:void(0)">
                                        <div class="form-group row mb-3">
                                            <label for="project_name" class="col-sm-2 col-form-label">Name <span class="compulsory">*</span></label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" id="project_name" placeholder="Project Name" value="{{ project.name }}">
                                            </div>
                                        </div>
                                        <div class="form-group row mb-3">
                                            <label for="project_name" class="col-sm-2 col-form-label">Code</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" placeholder="Project Code" value="{{ project.code }}" disabled="disabled">
                                            </div>
                                        </div>
                                        <div class="form-group row mb-3">
                                            <label for="project_description" class="col-sm-2 col-form-label">Description</label>
                                            <div class="col-sm-10">
                                                <textarea class="form-control" rows="5" id="project_description" placeholder="Project Description">{{ project.description }}</textarea>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="project_start_date" class="col-sm-2 control-label">Start Date</label>
                                                    <div class="col-sm-12">
                                                        <input type="text" class="form-control" id="project_start_date" placeholder="Start Date" value="{{ project.startDate|date('Y-m-d') }}">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="project_end_date" class="col-sm-6 control-label">Estimated End Date</label>
                                                    <div class="col-sm-12">
                                                        <input type="text" class="form-control" id="project_end_date" placeholder="Estimated End Date" value="{{ project.estimatedEndDate|date('Y-m-d') }}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="project_contact_person" class="col-sm-6 control-label">Estimated Budget</label>
                                                    <div class="col-sm-12">
                                                        <input type="number" class="form-control" id="project_estimated_budget" placeholder="Estimated Budget" value="{{ project.estimatedBudget }}">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="project_estimated_work_hours" class="col-sm-6 control-label">Estimated Work Hours</label>
                                                    <div class="col-sm-12">
                                                        <input type="number" class="form-control" id="project_estimated_work_hours" placeholder="Estimated Work Hours" value="{{ project.estimatedWorkHours }}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <button type="button" class="btn btn-primary" id="updateProjectBtn" style="float: right;">Update Project</button>
                                    </form>
                                </div>
                            </div>

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

{% endblock %}

{% block javascripts %}
    <script type="text/javascript">

        $(document).ready(function () {

            $("#project_start_date").datepicker({dateFormat: 'yy-mm-dd'});
            $("#project_end_date").datepicker({dateFormat: 'yy-mm-dd'});

            $("#updateProjectBtn").on("click", function (e) {

                var button = $(this);
                var name = $.trim($("#project_name").val());
                var description = $.trim($("#project_description").val());
                var startDate = $.trim($("#project_start_date").val());
                var endDate = $.trim($("#project_end_date").val());
                var budget = $.trim($("#project_estimated_budget").val());
                var workHours = $.trim($("#project_estimated_work_hours").val());

                if (
                    validateInput(name, 'Project Name')
                ) {
                    button.attr('disabled', true);

                    $.ajax({
                        type: 'post',
                        url: '{{ path('api_project_edit') }}',
                        data: {
                            id: {{ project.id }},
                            name : name,
                            description : description,
                            startDate : startDate,
                            endDate : endDate,
                            budget : budget,
                            workHours : workHours
                        },
                        success: function (html) {

                            Swal.fire(
                                'Success!',
                                'Project Updated Successfully!',
                                'success'
                            );
                            // reloading the page on success
                            setTimeout(function(){ location.reload(); }, 2500);
                        },
                        fail: function () {
                            button.attr('disabled', false);
                            toastr.options.progressBar = true;
                            toastr.error('Failed to Update Project!', 'Error!');
                        }
                    });
                }

            });

        });

    </script>

{% endblock %}