@extends('layouts.app')

@section('page-title')
    <div class="row bg-title">
        <!-- .page title -->
        <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12 bg-title-left">
            <h4 style="cursor: pointer;" class="page-title" data-toggle="collapse" data-target="#project-data"><i class="{{ $pageIcon }}"></i> #{{$project->id." ".$project->project_name}} <i class="fa fa-caret-down"></i></h4>
        </div>
        <!-- /.page title -->
        <!-- .breadcrumb -->
        <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12 bg-title-right">
            <ol class="breadcrumb">
                <li><a href="{{ route('admin.dashboard') }}">@lang('app.menu.home')</a></li>
                <li><a href="{{ route('admin.projects.index') }}">Obras</a></li>
            </ol>
        </div>
        <!-- /.breadcrumb -->
    </div>
@endsection
@push('head-script')
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/custom-select/custom-select.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/frappe/frappe-gantt.css') }}">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">

@endpush

@section('content')
    <div class="white-box collapse" id="project-data">
        <h4>Datos del Proyecto</h4>
        <br>
        <div class="row white-box">
            <div class="col-xs-4">
                <b>Nombre Contrato:</b>
                @if($project->project_summary != null)
                    <p>{{$project->project_summary}}</p>
                @else
                    <p style="color: grey;">No posee Nombre de Contrato</p>
                @endif
            </div>
            <div class="col-xs-4">
                <b>Fecha:</b>
                <p>{{$project->date->format('d-m-Y')}}</p>
            </div>
            <div class="col-xs-4">
                <b>Fecha Limite:</b>
                @if($project->deadline != null)
                    <p>{{$project->deadline->format('d-m-Y')}}</p>
                @else
                    <p style="color: grey;">Indefinido</p>
                @endif
            </div>
        </div>
    </div>
    <hr>
    <div id="page_2" class="">
        @include('admin.projects.plan.create-plan')
    </div>
    <div id="page_3" hidden>
        @include('admin.projects.plan.create-resources')  
    </div>
    <div id="page_4" hidden>
        @include('admin.projects.plan.create-materials')  
    </div>
    <div id="page_5" hidden>
        @include('admin.projects.plan.create-costs')  
    </div>

    {{--Ajax Modal--}}
    <div class="modal fade bs-modal-lg in" id="ImportTaskModal" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg" id="modal-data-application">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <span class="caption-subject font-red-sunglo bold uppercase" id="modelHeading"></span>
                </div>
                <div class="modal-body">
                    Cargando...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn default" data-dismiss="modal">Close</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    {{--Ajax Modal Ends--}}

    {{--Ajax Modal--}}
    <div class="modal fade bs-modal-lg in" id="editTaskModal" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg" id="modal-data-application">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <span class="caption-subject font-red-sunglo bold uppercase" id="modelHeading"></span>
                </div>
                <div class="modal-body">
                    Cargando...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn default" data-dismiss="modal">Close</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    {{--Ajax Modal Ends--}}

    {{--Ajax Modal--}}
    <div class="modal fade bs-modal-lg in" id="addResourcesModal" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg" id="modal-data-application">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <span class="caption-subject font-red-sunglo bold uppercase" id="modelHeading"></span>
                </div>
                <div class="modal-body">
                    Cargando...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn default" data-dismiss="modal">Close</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    {{--Ajax Modal Ends--}}
@endsection

@push('footer-script')
<script src="{{ asset('plugins/bower_components/custom-select/custom-select.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.js') }}"></script>
<script src="{{ asset('plugins/frappe/frappe-gantt.js') }}"></script>
<script src="{{ asset('plugins/bower_components/datatables/jquery.dataTables.min.js') }}"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<script src="{{ asset('js/datatables/buttons.server-side.js') }}"></script>
{!! $dataTable->scripts() !!}

<script>
    $('#materials_slt').select2({});
    var nextPage = 2;
    var prevPage = 2;

    function next(next, prev){
        nextPage = next;
        prevPage = prev;
        showPages();
    }
    function back(current){
        nextPage = current-1;
        prevPage = current;
        showPages();
    }
    function showPages(){
        $('#page_'+nextPage).show();
        $('#page_'+prevPage).hide();
    }
    function clearTaskForm(){
        $('#title').val('');
        $('#start_date').val('');
        $('#due_date').val('');
        $('#plus-button').trigger('click');
    }
    $('#save-task').click(function () {
        $.easyAjax({
            url: '{{route('admin.projects.storetask', $project->id)}}',
            container: '#createTask',
            type: "POST",
            redirect: true,
            data: $('#createTask').serialize(),
            success: function(){
                clearTaskForm();
                loadData();
                var msgs = "Unidad de Obra Creada Satisfactoriamente.";
                $.showToastr(msgs, 'success');
            },
            fail: function(){
                var msgs = "Error al Crear Unidad de Obra.";
                $.showToastr(msgs, 'warning');
            }
        })
    });
    function clearMatForm(){
        $("#materials_slt").select2("val", "");
        $('#materials_inp').val('');
        $('#add-material').trigger('click');
        $('#save-materials').prop('disabled', false);
    }
    $('#save-materials').click(function () {
        $(this).prop('disabled', true);
        $.easyAjax({
            url: '{{route('admin.projects.addmatform', $project->id)}}',
            container: '#createMaterial',
            type: "POST",
            redirect: true,
            data: $('#createMaterial').serialize(),
            success: function(data){
                if(data.status == 'success'){
                    clearMatForm();
                    loadTablesMat();
                    loadSelectMat();
                    var msgs = "Material Agregado Satisfactoriamente.";
                    $.showToastr(msgs, 'success');
                }
                if(data.status == 'fail'){
                    clearMatForm();
                    $.showToastr(data.msg, 'warning');
                }
            },
            fail: function(){
                clearMatForm();
                var msgs = "Error al Agregar Material.";
                $.showToastr(msgs, 'warning');
            }
        })
    });
    $(document).ready(function() {
        loadData();
        loadTables();
        loadTablesMat();
        loadSelectMat();
    });

    async function loadData() {
        var projectID = "";
        var viewMode = $('#gantt-view').val();
        var token = "{{ csrf_token() }}";

        var url = "{{ route('admin.projects.ganttData', $project->id) }}";

        $.easyAjax({
            url: url,
            blockUI: true,
            container: '.content-wrapper',
            success: function(response) {
                $("#gantt").html('');
                $("#taskTable").html('<tr><th>Titulo</th><th>Fecha de Inicio</th><th>Fecha de Fin</th><th>Prioridad</th><th>Acciones</th></tr><tr id="tableTaskContent"></tr>');
                if (!response.length) {
                    $('#tableTaskContent').html("<div class='d-flex justify-content-center p-20'>Por los Momentos no hay Unidades de Obra.</div>");
                    return;
                }
                var html = '<tr><th>Titulo</th><th>Fecha de Inicio</th><th>Fecha de Fin</th><th>Prioridad</th><th>Acciones</th></tr>';
                $(response).each(function(index, value){
                    var priority = '';
                    if(value.priority == 'high'){
                        priority = '<td style="color: red; font-size: 1.1em;"><b>Alta</b></td>';
                    }
                    if(value.priority == 'medium'){
                        priority = '<td style="color: gold; font-size: 1.1em;"><b>Media</b></td>';
                    }
                    if(value.priority == 'low'){
                        priority = '<td style="color: green; font-size: 1.1em;"><b>Baja</b></td>';  
                    }
                    var acciones = '<div class="btn-group dropdown m-r-10"><button aria-expanded="false" data-toggle="dropdown" class="btn btn-default dropdown-toggle waves-effect waves-light" type="button"><i class="fa fa-gears "></i></button><ul role="menu" class="dropdown-menu pull-right"><li><a href="javascript:;" onclick="modalCall('+value.id.split('-')[1]+')"><i class="fa fa-pencil" aria-hidden="true"></i> Editar</a></li><li><a href="javascript:;" class="sa-params" onclick="deleteTask('+value.id.split('-')[1]+')"><i class="fa fa-times" aria-hidden="true"></i> Eliminar</a></li></ul></div>'; 

                    html = html+'<tr id="'+value.id+'"><td>'+value.name+'</td><td>'+value.start+'</td><td>'+value.end+'</td>'+priority+'<td>'+acciones+'</td></tr>';
                });
                $("#taskTable").html(html);
                var gantt = new Gantt("#gantt", response, {
                    popup_trigger: "mouseover",
                    view_mode: viewMode,
                    on_click: function(task) {
                        var url = "{{ route('admin.projects.edit-task', ':id')}}";
                        url = url.replace(':id', task.id);
                        $('#modelHeading').html('Editar Unidad de Obra.');
                        $.ajaxModal('#editTaskModal', url);
                    },
                    on_date_change: function(task, start, end) {
                        // console.log(task, start, end);
                        var taskId = task.taskid;
                        var token = '{{ csrf_token() }}';
                        var url =
                            "{{ route('admin.projects.gantt-task-update', ':id') }}";
                        url = url.replace(':id', taskId);
                        var startDate = moment.utc(start.toDateString())
                            .format('DD/MM/Y');
                        var endDate = moment.utc(end.toDateString())
                            .subtract(1, "days").format('DD/MM/Y');

                        $.easyAjax({
                            url: url,
                            type: "POST",
                            container: '#gantt',
                            data: {
                                '_token': token,
                                'start_date': startDate,
                                'end_date': endDate
                            },
                            success: function(){
                                loadData();
                            },
                            fail: function(){
                                loadData();
                            }
                        });
                    },
                    on_progress_change: function(task, progress) {
                        // console.log(task, progress);
                    },
                    on_view_change: function(mode) {
                        // console.log(mode);
                    }
                });
            }
        });
    }

    $('#gantt-view').on('change keyup', function() {
        loadData();
    });

    $('#importTask').on('click', function () {
        var url = "{{ route('admin.projects.import-task', $project->id)}}";
        $('#modelHeading').html('Importar Unidad de Obra.');
        $.ajaxModal('#ImportTaskModal', url);
    });
    $('#importRs').on('click', function () {
        var url = "{{ route('admin.projects.import-rs', $project->id)}}";
        $('#modelHeading').html('Importar Recursos.');
        $.ajaxModal('#ImportTaskModal', url);
    });


    $('#register_btn').on('click', function () {
        var id = [];
        $('.list_input').each(function(){
            if($(this).val() != ""){
                id.push({'id': $(this).attr('id'), 'quantity': $(this).val()});
            }
        });
        var url = "{{ route('admin.projects.addtablematdata', $project->id) }}";
        var token = "{{ csrf_token() }}";

        $.easyAjax({
            type: 'POST',
            url: url,
            data: {'_token': token, '_method': 'POST', 'values': id},
            success: function (response) {
                if (response.status == "success") {
                    var msgs = "Materiales Agregados Satisfactoriamente.";
                    $.showToastr(msgs, 'success');
                    loadTablesMat();
                    loadSelectMat();
                    LaravelDataTables["add-materials-table"].draw();
                }
            }
        });
    });


    function modalCall(id){
        var url = "{{ route('admin.projects.edit-task', ':id')}}";
        url = url.replace(':id', 'task-'+id);
        $('#modelHeading').html('Editar Unidad de Obra.');
        $.ajaxModal('#editTaskModal', url);
    }

    function deleteTask(id){
        swal({
            title: "¿Estas Seguro?",
            text: "No Podras Recuperar la Informacion una vez Borrado.",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Si, ¡Eliminar!",
            cancelButtonText: "No, ¡Cancelar!",
            closeOnConfirm: true,
            closeOnCancel: true
        }, function(isConfirm){
            if (isConfirm) {

                var url = "{{ route('admin.projects.task-delete',':id') }}";
                url = url.replace(':id', id);

                var token = "{{ csrf_token() }}";

                $.easyAjax({
                    type: 'GET',
                        url: url,
                        data: {'_token': token, '_method': 'DELETE'},
                    success: function (response) {
                        if (response.status == "success") {
                            loadData();
                        }
                    }
                });
            }
        });
    };


    async function loadTables(){
        var url = "{{ route('admin.projects.getTableData', $project->id) }}";
        var token = "{{ csrf_token() }}";

        $.easyAjax({
            type: 'GET',
            url: url,
            data: {'_token': token, '_method': 'GET'},
            success: function (response) {
                if (response.status == "success") {
                    var emphtml = '';
                    var trkhtml = '';
                    var machtml = '';
                    var vhclhtml = '';
                    $.each(response.values, function(key, value){
                        if(value.resource_type == 1){
                            emphtml = emphtml+'<tr style="border-left: solid #f2f2f3 1px; border-right: solid #f2f2f3 1px;"><td>'+value.description+'</td><td class="quantity" id="'+value.resource_type+'_'+value.resource_class+'">'+value.quantity+'</td></tr>'
                        }
                        if(value.resource_type == 2){
                            trkhtml = trkhtml+'<tr style="border-left: solid #f2f2f3 1px; border-right: solid #f2f2f3 1px;"><td>'+value.description+'</td><td class="quantity"  id="'+value.resource_type+'_'+value.resource_class+'">'+value.quantity+'</td></tr>'
                        }
                        if(value.resource_type == 3){
                            machtml = machtml+'<tr style="border-left: solid #f2f2f3 1px; border-right: solid #f2f2f3 1px;"><td>'+value.description+'</td><td class="quantity"  id="'+value.resource_type+'_'+value.resource_class+'">'+value.quantity+'</td></tr>'
                        }
                        if(value.resource_type == 4){
                            vhclhtml = vhclhtml+'<tr style="border-left: solid #f2f2f3 1px; border-right: solid #f2f2f3 1px;"><td>'+value.description+'</td><td class="quantity" id="'+value.resource_type+'_'+value.resource_class+'">'+value.quantity+'</td></tr>'
                        }
                    });
                    emphtml = '<tr style="background-color: rgb(127, 127, 127);"><th style="border-top: none; border-left: none; color: white; ">Cargo</th><th style="color: white; border-top: none;">Cantidad</th></tr>'+emphtml;

                    trkhtml = '<tr style="background-color: rgb(127, 127, 127);"><th style="border-top: none; border-left: none; color: white;">Clase</th><th style="color: white; border-top: none;">Cantidad</th></tr>'+trkhtml;

                    machtml = '<tr style="background-color: rgb(127, 127, 127);"><th style="border-top: none; border-left: none; color: white;">Clase</th><th style="color: white; border-top: none;">Cantidad</th></tr>'+machtml;

                    vhclhtml = '<tr style="background-color: rgb(127, 127, 127);"><th style="border-top: none; border-left: none; color: white;">Clase</th><th style="color: white; border-top: none;">Cantidad</th></tr>'+vhclhtml;

                    $('#empTable').html(emphtml);
                    $('#trkTable').html(trkhtml);
                    $('#macTable').html(machtml);
                    $('#vhclTable').html(vhclhtml);
                }
            }
        });
    };
    async function loadTablesMat(){
        var url = "{{ route('admin.projects.gettablematdata', $project->id) }}";
        var token = "{{ csrf_token() }}";

        $.easyAjax({
            type: 'GET',
            url: url,
            data: {'_token': token, '_method': 'GET'},
            success: function (response) {
                if (response.status == "success") {
                    var htmlmat = '<tr><th>Descripción</th><th>Cantidad</th><th>Proveedores</th></tr>';
                    if(response.values.length > 0){ 
                        $.each(response.values, function(key, value){
                            var providers = '';
                            $.each(value.providers, function(key2, value2){
                                providers = providers+'<li>'+value2.name+'</li>';
                            });
                            htmlmat = htmlmat+'<tr data-material-id="'+value.id+'"><td>'+value.description+'</td><td class="mat_quantity">'+value.quantity+'</td><td><ul>'+providers+'</ul></td></tr>';
                        });
                    }else{
                        htmlmat = htmlmat+'<tr><td></td><td><center>No hay Materiales Registrados</center></td><td></td></tr>'; 
                    }
                    $('#table-materials').html(htmlmat);
                }
            }
        });
    };

    async function loadSelectMat(){
        var url = "{{ route('admin.projects.getselectmatdata', $project->id) }}";
        var token = "{{ csrf_token() }}";

        $.easyAjax({
            type: 'GET',
            url: url,
            data: {'_token': token, '_method': 'GET'},
            success: function (response) {
                if (response.status == "success") {
                    var htmlslc = '<option value="">--</option>';
                    if(response.values.length > 0){ 
                        $.each(response.values, function(key, value){
                            htmlslc = htmlslc+'<option value="'+value.id+'">'+value.name+'</option>';
                        });
                    }
                    $('#materials_slt').html(htmlslc);
                }
            }
        });
    };


    $('#add-employee').on('click', function (){
        var url = "{{ route('admin.projects.add-employee', $project->id)}}";
        $('#modelHeading').html('Agregar Empleados.');
        $.ajaxModal('#addResourcesModal', url);
    });
    $('#add-truck').on('click', function (){
        var url = "{{ route('admin.projects.add-truck', $project->id)}}";
        $('#modelHeading').html('Agregar Camiones.');
        $.ajaxModal('#addResourcesModal', url);
    });
    $('#add-machine').on('click', function (){
        var url = "{{ route('admin.projects.add-machine', $project->id)}}";
        $('#modelHeading').html('Agregar Maquinaria.');
        $.ajaxModal('#addResourcesModal', url);
    });
    $('#add-cars').on('click', function (){
        var url = "{{ route('admin.projects.add-cars', $project->id)}}";
        $('#modelHeading').html('Agregar Vehiculos.');
        $.ajaxModal('#addResourcesModal', url);
    });
    //Edicion de Cantidad Dinamica.

    $(document).on('keyup', '#new_quant', function(e){
        if(e.keyCode == 13){
            var q = $(this).val();
            var newval = $(this).parent().html(q);
            if(newval.text() == '' || newval.text() == oldvalue){
                newval.text(oldvalue);
            }else{
                $.easyAjax({
                    url: "{{route('admin.projects.changequantity', $project->id)}}",
                    type: "POST",
                    data: {'_token': "{{ csrf_token() }}", 'data': [newval.attr('id'), newval.text()]},
                    success: function (response) {
                        if(response.status == 'updated'){
                            var msgs = "Recurso Actualizado Satisfactoriamente.";
                            $.showToastr(msgs, 'success');
                        }
                        if(response.status == 'deleted'){
                            var msgs = "Recurso Eliminado Satisfactoriamente.";
                            $.showToastr(msgs, 'success');
                            loadTables();
                        }

                    }
                });
            }
            console.log(newval.text());
            editing = false;
        }
    });

    $(document).on('keyup', '#new_quant_mat', function(e){
        if(e.keyCode == 13){
            var q = $(this).val();
            var newval = $(this).parent().html(q);
            if(newval.text() == '' || newval.text() == oldvalue2){
                newval.text(oldvalue2);
            }else{
                $.easyAjax({
                    url: "{{route('admin.projects.changequantitymat', $project->id)}}",
                    type: "POST",
                    data: {'_token': "{{ csrf_token() }}", 'data': [newval.closest('tr').data('material-id'), newval.text()]},
                    success: function (response) {
                        if(response.status == 'updated'){
                            var msgs = "Material Actualizado Satisfactoriamente.";
                            $.showToastr(msgs, 'success');
                        }
                        if(response.status == 'deleted'){
                            var msgs = "Material Eliminado Satisfactoriamente.";
                            $.showToastr(msgs, 'success');
                            loadTablesMat();
                            loadSelectMat();
                        }

                    }
                });
            }
            console.log(newval.text());
            editing2 = false;
        }
    });

    var editing = false;
    var oldvalue;
    $(document).on('click', '.quantity', function(){
        if(!editing){
            editing = true;
            oldvalue = $(this).text();
            $(this).html('<input type="number" name="new_quant" id="new_quant" class="form-control" style="border: none;" value="'+oldvalue+'">');
        }
    });

    var editing2 = false;
    var oldvalue2;
    $(document).on('click', '.mat_quantity', function(){
        if(!editing2){
            editing2 = true;
            oldvalue2 = $(this).text();
            $(this).html('<input type="number" name="new_quant" id="new_quant_mat" class="form-control" style="border: none;" value="'+oldvalue2+'">');
        }
    });
</script>
@endpush