@section('content')
@php
    $jmlTask = $dataHead->jml_task;
    $jmlTaskDone = $dataHead->jml_task_done;
    $progress = 0;
    if($jmlTaskDone>0) {
        $percentage = ($jmlTaskDone/$jmlTask)*100;
        $progress = (int)$percentage;
    }
    if($progress<50) {
        $bg = 'bg-danger';
    } else if($progress>50 && $progress<85) {
        $bg = 'bg-warning';
    } else {
        $bg = 'bg-success';
    }
@endphp
<!--begin::Subheader-->
<div class="subheader py-2 py-lg-4 subheader-transparent" id="kt_subheader">
    <div class="container-fluid d-flex align-items-center justify-content-between flex-wrap flex-sm-nowrap">
        <!--begin::Details-->
        <div class="d-flex align-items-center flex-wrap mr-2">
            <!--begin::Title-->
            <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">Projects</h5>
            <!--end::Title-->
            <!--begin::Separator-->
            <div class="subheader-separator subheader-separator-ver mt-2 mb-2 mr-5 bg-gray-200"></div>
            <!--end::Separator-->            
        </div>
        <!--end::Details-->
        <!--begin::Toolbar-->
        <div class="d-flex align-items-center">            
            @if($before)
            <!--begin::Button-->
            <a href="javascript:;" onclick="loadContent('laporanProject', this, event)" class="btn btn-primary font-weight-bold ml-2 mr-2">Kembali</a>
            <!--end::Button-->            
            @elseif($team_role_id) 
            <!--begin::Button-->
            <a href="javascript:;" onclick="loadContent('myProjects', this, event)" class="btn btn-primary font-weight-bold ml-2 mr-2">Kembali</a>
            <!--end::Button-->            
            @else
            <!--begin::Button-->
            <a href="javascript:;" onclick="loadContent('projects', this, event)" class="btn btn-primary font-weight-bold ml-2 mr-2">Kembali</a>
            <!--end::Button-->            
            @endif
        </div>
        <!--end::Toolbar-->        
    </div>
</div>
<!--end::Subheader-->
<!--begin::Card-->
<div class="card card-custom gutter-b">
    <div class="card-body ribbon ribbon-clip ribbon-right">
        <div class="ribbon-target" style="top: 2px;" id="ribbon_target">
            @if($dataHead->status_id == 1)
            <span class="ribbon-inner bg-primary"></span>{{ $dataHead->status_project }}
            @elseif($dataHead->status_id == 2)
            <span class="ribbon-inner bg-warning"></span>{{ $dataHead->status_project }}
            @elseif($dataHead->status_id == 3)
            <span class="ribbon-inner bg-success"></span>{{ $dataHead->status_project }}
            @else
            <span class="ribbon-inner bg-danger"></span>{{ $dataHead->status_project }}
            @endif
        </div>
        <div class="d-flex">
            <!--begin: Pic-->
            <div class="flex-shrink-0 mr-7 mt-lg-0 mt-3">
                <div class="symbol symbol-50 symbol-lg-120">
                    <img alt="Pic" src="{{ ($dataHead->logo_url) ? $dataHead->logo_url : asset('assets/media/logos/no_img.png') }}" style="object-fit: contain; object-position: center center;"/>
                </div>
                <div class="symbol symbol-50 symbol-lg-120 symbol-primary d-none">
                    <span class="font-size-h3 symbol-label font-weight-boldest">JM</span>
                </div>
            </div>
            <!--end: Pic-->
            <!--begin: Info-->
            <div class="flex-grow-1">
                <!--begin: Title-->
                <div class="d-flex align-items-center justify-content-between flex-wrap">
                    <div class="mr-3">
                        <!--begin::Name-->
                        <a href="#" class="d-flex align-items-center text-dark text-hover-primary font-size-h5 font-weight-bold mr-3">{{ $dataHead->project_name ?? '' }}
                        <i class="flaticon2-correct text-success icon-md ml-2"></i></a>
                        <!--end::Name-->
                        <!--begin::Contacts-->
                        <div class="d-flex flex-wrap my-2">
                            <a href="#" class="text-muted text-hover-primary font-weight-bold mr-lg-8 mr-5 mb-lg-0 mb-2">
                            <span class="svg-icon svg-icon-md svg-icon-gray-500 mr-1">
                                <!--begin::Svg Icon | path:assets/media/svg/icons/Communication/Mail-notification.svg-->
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24"/>
                                        <path d="M5.84026576,8 L18.1597342,8 C19.1999115,8 20.0664437,8.79732479 20.1528258,9.83390904 L20.8194924,17.833909 C20.9112219,18.9346631 20.0932459,19.901362 18.9924919,19.9930915 C18.9372479,19.9976952 18.8818364,20 18.8264009,20 L5.1735991,20 C4.0690296,20 3.1735991,19.1045695 3.1735991,18 C3.1735991,17.9445645 3.17590391,17.889153 3.18050758,17.833909 L3.84717425,9.83390904 C3.93355627,8.79732479 4.80008849,8 5.84026576,8 Z M10.5,10 C10.2238576,10 10,10.2238576 10,10.5 L10,11.5 C10,11.7761424 10.2238576,12 10.5,12 L13.5,12 C13.7761424,12 14,11.7761424 14,11.5 L14,10.5 C14,10.2238576 13.7761424,10 13.5,10 L10.5,10 Z" fill="#000000"/>
                                        <path d="M10,8 L8,8 L8,7 C8,5.34314575 9.34314575,4 11,4 L13,4 C14.6568542,4 16,5.34314575 16,7 L16,8 L14,8 L14,7 C14,6.44771525 13.5522847,6 13,6 L11,6 C10.4477153,6 10,6.44771525 10,7 L10,8 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                    </g>
                                </svg>
                                <!--end::Svg Icon-->
                            </span>{{ $dataHead->unit_name ?? '' }}</a>
                            <a href="#" class="text-muted text-hover-primary font-weight-bold mr-lg-8 mr-5 mb-lg-0 mb-2">
                            <span class="svg-icon svg-icon-md svg-icon-gray-500 mr-1">
                                <!--begin::Svg Icon | path:assets/media/svg/icons/General/Lock.svg-->
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <polygon points="0 0 24 0 24 24 0 24"/>
                                        <path d="M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                        <path d="M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z" fill="#000000" fill-rule="nonzero"/>
                                    </g>
                                </svg>
                                <!--end::Svg Icon-->
                            </span>{{ $dataHead->pm ?? '' }}</a>
                            {{-- <a href="#" class="text-muted text-hover-primary font-weight-bold">
                            <span class="svg-icon svg-icon-md svg-icon-gray-500 mr-1">
                                <!--begin::Svg Icon | path:assets/media/svg/icons/Map/Marker2.svg-->
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24" />
                                        <path d="M9.82829464,16.6565893 C7.02541569,15.7427556 5,13.1079084 5,10 C5,6.13400675 8.13400675,3 12,3 C15.8659932,3 19,6.13400675 19,10 C19,13.1079084 16.9745843,15.7427556 14.1717054,16.6565893 L12,21 L9.82829464,16.6565893 Z M12,12 C13.1045695,12 14,11.1045695 14,10 C14,8.8954305 13.1045695,8 12,8 C10.8954305,8 10,8.8954305 10,10 C10,11.1045695 10.8954305,12 12,12 Z" fill="#000000" />
                                    </g>
                                </svg>
                                <!--end::Svg Icon-->
                            </span>Melbourne</a> --}}
                        </div>
                        <!--end::Contacts-->
                    </div>
                    <div class="my-lg-0 my-1">     
                        @if($team_role_id == 1 || $team_role_id == 2)                                              
                            <a href="javascript:;" onclick="loadContent('mng_meeting/{{ $dataHead->id }}?team_role_id={{ $team_role_id }}', this, event)" class="btn btn-sm btn-light-info font-weight-bolder text-uppercase">Management Meeting</a>
                        @endif
                        <a href="javascript:;" onclick="loadContent('budgeting_project/{{ $dataHead->id }}?team_role_id={{ $team_role_id }}', this, event)" class="btn btn-sm btn-light-info font-weight-bolder text-uppercase">Realisasi Budget</a>
                        @if(Auth::user()->role_id == 6)
                            <a href="javascript:;" onclick="editProject('{{ $dataHead->id }}','{{ json_encode($dataHead) }}')" class="btn btn-sm btn-light-info font-weight-bolder text-uppercase">Edit Project</a>
                        @endif
                        @if ($team_role_id == 1 || Auth::user()->role_id == 6)
                            <a href="javascript:;" onclick="statusProject('{{ $dataHead->status_id }}','{{ $dataHead->id }}','{{ $progress }}')" class="btn btn-sm btn-light-info font-weight-bolder text-uppercase mr-3">Update Status</a>
                        @endif
                        @if ($dataHead->status_id != 3 && ($team_role_id == 1 || Auth::user()->role_id == 6)) 
                            <a href="javascript:;" onclick="generateTask('{{ $dataHead->id }}')" class="btn btn-sm btn-info font-weight-bolder text-uppercase">Generate Task</a>
                        @endif
                    </div>
                </div>
                <!--end: Title-->
                <!--begin: Content-->
                <div class="d-flex align-items-center flex-wrap justify-content-between">
                    <div class="flex-grow-1 font-weight-bold text-dark-50 py-5 py-lg-2 mr-5">{{ $dataHead->project_detail ?? '' }}</div>
                    <div class="d-flex flex-wrap align-items-center py-2">
                        <div class="d-flex align-items-center mr-10">
                            <div class="mr-6">
                                <div class="font-weight-bold mb-2">Start Date</div>
                                <span class="btn btn-sm btn-text btn-light-primary text-uppercase font-weight-bold">{{ ($dataHead->start_date) ? date('d M ,Y', strtotime($dataHead->start_date)) : '' }}</span>
                            </div>
                            <div class="">
                                <div class="font-weight-bold mb-2">Due Date</div>
                                <span class="btn btn-sm btn-text btn-light-danger text-uppercase font-weight-bold">{{ ($dataHead->due_date) ? date('d M ,Y', strtotime($dataHead->due_date)) : '' }}</span>
                            </div>
                        </div>
                        <div class="flex-grow-1 flex-shrink-0 w-150px w-xl-300px mt-4 mt-sm-0">                            
                            <span class="font-weight-bold">Progress</span>
                            <div class="progress progress-xs mt-2 mb-2">
                                <div class="progress-bar {{ $bg }}" role="progressbar" style="width: {{ $progress }}%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <span class="font-weight-bolder text-dark">{{ $progress }}%</span>
                        </div>
                    </div>
                </div>
                <!--end: Content-->
            </div>
            <!--end: Info-->
        </div>
        <div class="separator separator-solid my-7"></div>
        <!--begin: Items-->
        {{-- <div class="d-flex align-items-center flex-wrap"> --}}
        <div class="row">     
            <!--begin: Item-->
            <div class="d-flex align-items-center flex-lg-fill mr-5 my-1">
                <span class="mr-4">
                    <i class="flaticon-piggy-bank icon-2x text-muted font-weight-bold"></i>
                </span>
                <div class="d-flex flex-column text-dark-75">
                    <span class="font-weight-bolder font-size-sm">Budget</span>
                    <span class="font-weight-bolder font-size-h5">
                    <span class="text-dark-50 font-weight-bold">Rp. </span>{{ number_format($dataHead->budget_amount,0,',','.') }}</span>
                </div>
            </div>
            <!--end: Item-->
            <!--begin: Item-->
            <div class="d-flex align-items-center flex-lg-fill mr-5 my-1">
                <span class="mr-4">
                    <i class="flaticon-book icon-2x text-muted font-weight-bold"></i>
                </span>
                <div class="d-flex flex-column text-dark-75">
                    <span class="font-weight-bolder font-size-sm">Terpakai</span>
                    <span class="font-weight-bolder font-size-h5">
                    <span class="text-dark-50 font-weight-bold">Rp. </span>{{ number_format($dataHead->budget_amount-$dataHead->outstanding,0,',','.') }}</span>
                </div>
            </div>
            <!--end: Item-->
            <!--begin: Item-->
            <div class="d-flex align-items-center flex-lg-fill mr-5 my-1">
                <span class="mr-4">
                    <i class="flaticon-coins icon-2x text-muted font-weight-bold"></i>
                </span>
                <div class="d-flex flex-column text-dark-75">
                    <span class="font-weight-bolder font-size-sm">Sisa</span>
                    <span class="font-weight-bolder font-size-h5">
                    <span class="text-dark-50 font-weight-bold">Rp. </span>{{ number_format($dataHead->outstanding,0,',','.') }}</span>
                </div>
            </div>
            <!--end: Item-->   
            <!--begin: Item-->
            <div class="d-flex justify-content-center flex-lg-fill mr-5 my-1">
            {{-- <div class="col-lg-4 text-center"> --}}                
                <span class="mr-4">
                    <i class="flaticon-file-2 icon-2x text-muted font-weight-bold"></i>
                </span>
                <div class="d-flex flex-column">
                    <span class="text-dark-75 font-weight-bolder font-size-sm" id="jml_task">{{ $dataHead->jml_task ?? 0 }} Tasks</span>
                    @if($team_role_id == 1 || $team_role_id == 2) 
                        <a href="#" onclick="loadContent(`kanbanProject/{{ $dataHead->id }}`, this, event)" class="text-primary font-weight-bolder">tap to view</a>
                    @else
                        <a href="#task_row" class="text-primary font-weight-bolder">tap to view</a>
                    @endif
                </div>                
            </div>
            <!--end: Item-->
            <!--begin: Item-->
            <div class="d-flex justify-content-center flex-lg-fill mr-5 my-1">
            {{-- <div class="col-lg-4 text-center"> --}}
                <span class="mr-4">
                    <i class="flaticon-chat-1 icon-2x text-muted font-weight-bold"></i>
                </span>
                <div class="d-flex flex-column">
                    <span class="text-dark-75 font-weight-bolder font-size-sm" id="jmlComments">{{ $dataHead->jml_comment ?? 0 }} Comments</span>
                    <a href="javascript:;" onclick="commentProject('{{ $dataHead->id }}')" class="text-primary font-weight-bolder">tap to view</a>
                </div>
            </div>
            <!--end: Item-->
            <!--begin: Item-->
            <div class="d-flex justify-content-center flex-lg-fill my-1">
            {{-- <div class="col-lg-4 text-center"> --}}
                <span class="mr-4">
                    <i class="flaticon-network icon-2x text-muted font-weight-bold"></i>
                </span>                
                @php
                    $str = $dataHead->foto_member;
                    $no = 0;
                    $arrStr = explode(",",$str);                    
                @endphp                    
                <div class="symbol-group symbol-hover" id="foto_thumbnail_member">
                    @if($arrStr)
                        @foreach ($arrStr as $key => $item)                        
                            @if($key < 5)                                
                                @php
                                    $itemExplode = explode('|',$item);                                    
                                    $no++;
                                @endphp                                          
                                <div class="symbol symbol-30 symbol-circle" data-toggle="tooltip" title="{{ $itemExplode[1] ?? '' }}">
                                    <img alt="Pic" src="{{ $itemExplode[0] ?? asset('media/logos/no_img.png') }}" onerror="this.error=null, this.src='{{ asset('assets/media/logos/no_img.png') }}'" style="object-fit: cover; object-position: center;"/>
                                </div>                                       
                            @endif                     
                        @endforeach                        
                        @php
                            $sisa = count($arrStr) - $no;
                        @endphp
                        @if($sisa > 0)
                            <div class="symbol symbol-30 symbol-circle symbol-light">
                                <span class="symbol-label font-weight-bold">{{ count($arrStr) - $no }}+</span>
                            </div>
                        @endif
                    @endif
                </div>                
            </div>
            <!--end: Item-->
        </div>
        {{-- </div> --}}
        <!--begin: Items-->
    </div>
</div>
<!--end::Card-->
<!--begin::Row-->
<div class="row" id="task_row">
    <div class="col-lg-12">
        <!--begin::Advance Table Widget 3-->
        <div class="card card-custom card-stretch gutter-b">
            <!--begin::Header-->
            <div class="card-header border-0 py-5">
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label font-weight-bolder text-dark">Task Monitoring</span>
                    <span class="text-muted mt-3 font-weight-bold font-size-sm" id="task_on_progress">Terdapat {{ ($totTask) ? $totTask->totonprogress:0 }} Task Berjalan</span>
                </h3>
                <div class="card-toolbar">
                    @if ($dataHead->status_id != 3 && ($team_role_id == 1 || Auth::user()->role_id == 6) ) 
                    <a href="javascript:void(0);" onclick="tambahMember('{{ $dataHead->team_code }}');" class="btn btn-success font-weight-bolder font-size-sm">
                    <span class="svg-icon svg-icon-md svg-icon-white">
                        <!--begin::Svg Icon | path:assets/media/svg/icons/Communication/Add-user.svg-->
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <polygon points="0 0 24 0 24 24 0 24" />
                                <path d="M18,8 L16,8 C15.4477153,8 15,7.55228475 15,7 C15,6.44771525 15.4477153,6 16,6 L18,6 L18,4 C18,3.44771525 18.4477153,3 19,3 C19.5522847,3 20,3.44771525 20,4 L20,6 L22,6 C22.5522847,6 23,6.44771525 23,7 C23,7.55228475 22.5522847,8 22,8 L20,8 L20,10 C20,10.5522847 19.5522847,11 19,11 C18.4477153,11 18,10.5522847 18,10 L18,8 Z M9,11 C6.790861,11 5,9.209139 5,7 C5,4.790861 6.790861,3 9,3 C11.209139,3 13,4.790861 13,7 C13,9.209139 11.209139,11 9,11 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" />
                                <path d="M0.00065168429,20.1992055 C0.388258525,15.4265159 4.26191235,13 8.98334134,13 C13.7712164,13 17.7048837,15.2931929 17.9979143,20.2 C18.0095879,20.3954741 17.9979143,21 17.2466999,21 C13.541124,21 8.03472472,21 0.727502227,21 C0.476712155,21 -0.0204617505,20.45918 0.00065168429,20.1992055 Z" fill="#000000" fill-rule="nonzero" />
                            </g>
                        </svg>
                        <!--end::Svg Icon-->
                    </span>Add New Member</a>
                    @endif
                </div>
            </div>
            <!--end::Header-->
            <!--begin::Body-->
            <div class="card-body pt-0 pb-3">
                <!--begin::Table-->
                <div class="table-responsive">
                    <table class="table table-sm table-hover" id="indexTable">
                        <thead>
                            <tr class="text-uppercase">
                                @foreach($tableHead as $item)
                                    <th class="{{$item[1]}}" {{($item[0] == 'Act') ? "style='width:130px;'":""}}>{{$item[0]}}</th>
                                @endforeach
                                {{-- <th style="min-width: 250px" class="pl-7">
                                    <span class="text-dark-75">Member Name</span>
                                </th>
                                <th style="min-width: 100px">Jumlah Task</th>
                                <th style="min-width: 100px">Task Selesai</th>
                                <th style="min-width: 150px">Task Belum Selesai</th>
                                <th style="min-width: 130px">Act</th> --}}
                            </tr>
                        </thead>
                        <tbody>                                                  
                        </tbody>
                    </table>
                </div>
                <!--end::Table-->
            </div>
            <!--end::Body-->
        </div>
        <!--end::Advance Table Widget 3-->
    </div>
</div>
<!--end::Row-->
@include('content.projects.personil')
@include('content.projects.rincianTask')
@include('content.projects.formTask')
@include('content.projects.commentProject')
@include('content.projects.formGenerateTask')
@include('content.projects.updateStatusProject')
@include('content.projects.editProject')
@endsection
@section('script')
    @include('content.projects.actionForm')
@endsection