@extends('layouts.app')
@section('content')
<script type="text/javascript">
    $(document).ready(function () {
        $('.btn-delete').click(function () {
            var projectId = $(this).attr("projectId");
            var taskId = $(this).attr('taskId');
            $('#project_id').val(projectId);
            $('#task_id').val(taskId);
        });
        $('.btn-add-work').click(function(){
            var wtaskId = $(this).attr('wtaskId');
            var ptId = $(this).attr('ptId');
            $('#w_task_id').val(wtaskId);
            $('#pt_id').val(ptId);

            // Clear previous options
            var worksSelect = $('#work');
            worksSelect.empty();

            // Load works for this task
            $.ajax({
                url: '{{ route("works_by_task") }}',
                type: 'GET',
                data: { wtaskId: wtaskId },
                success: function(data) {
                    worksSelect.append('<optgroup label="-- {{__("Works")}} --"></optgroup>');
                    $.each(data, function(key, work) {
                        worksSelect.append('<option value="' + work.id + '">' + work.work + '</option>');
                    });
                    // If using select2 or similar, refresh it:
                    worksSelect.trigger('change');
                }
            });
        });
        $('.delete-work').click(function(){
            var dptId = $(this).attr('dptId');
            var dworkId = $(this).attr('dworkId');
            var dtaskId = $(this).attr('dtaskId');
            $('#d_pt_id').val(dptId);
            $('#d_task_id').val(dtaskId);
            $('#d_work_id').val(dworkId);
        });
        $('.add-worker').click(function(){
            var uptId = $(this).attr('uptId');
            $('#u_pt_id').val(uptId);
        });
        $('.add-date').click(function(){
            var tptId = $(this).attr('tptId');
            $('#t_pt_id').val(tptId);
        });
        $('.add-status').click(function(){
            var sptId = $(this).attr('sptId');
            $('#s_pt_id').val(sptId);
        });
        $('.add-equipment').click(function(){
            var ptId = $(this).attr('ptId');
            $('#e_pt_id').val(ptId);
        });
        $('.add-image').click(function(){
            var ptId = $(this).attr('ptId');
            var workId = $(this).attr('workId');
            var projectId = $(this).attr("projectId");
            var url = '/workflow/images/'+ptId+'/'+workId+'/'+projectId;
            document.getElementById('btn_show_images').href = url;
            $('#i_pt_id').val(ptId);
            $('#i_work_id').val(workId);
        });
        $('.add-file').click(function(){
            var ptId = $(this).attr('ptId');
            var workId = $(this).attr('workId');
            var projectId = $(this).attr("projectId");
            var url = '/workflow/files/'+ptId+'/'+workId+'/'+projectId;
            document.getElementById('btn_show_files').href = url;
            $('#f_pt_id').val(ptId);
            $('#f_work_id').val(workId);
        });
        $('#equipment_category').val(0);
        $('#equipment_category').change(function(){
            $('#equipment').val(0);
            if($(this).val() != ''){
                var route = $(this).attr('route');
                var id = $(this).val();
                var dependent = $(this).data('dependent');
                var _token = $('input[name="_token"]').val();
                $.ajax({
                    type	:	"POST",
                    cache	: 	false,
                    url		:	route,
                    data    :   {
                        "_token" : _token,
                        'id'  : id
                    },
                    success	: function(result){
                        $('#'+dependent).html(result);
                    }

                });
            }
        });
    });
</script>
<header class="page-header">
    <h2>{{$project->project_name.' ('.$duration.')'}}</h2>
</header>
<div class="timeline">
    <div class="tm-body">
        <div class="tm-title">
            <h3 class="h5 text-uppercase">{{$project->project_name}}</h3>
        </div>
        <ol class="tm-items">
            @foreach($tasks as $task)
            <li>
                <div class="tm-info">
                    <div class="tm-icon"><i class="fa @if($task->done == 1)fa-check @else fa-star @endif"></i></div>
                    <time class="tm-datetime" datetime="2013-11-23 19:13">
                        <div class="tm-datetime-date">@if($task->start_date && $task->end_date) {{timeDuration($task->start_date, $task->end_date)}} @endif</div>
                        <div class="tm-datetime-time">@if($task->done) {{__('DONE')}} @endif</div>
                    </time>
                </div>
                <div class="tm-box appear-animation" data-appear-animation="fadeInRight"data-appear-animation-delay="100">
                    <p>
                        {{strtoupper($task->task)}}
                    </p>