@extends('layouts.member-app')

@section('page-title')
    <div class="row bg-title">
        <!-- .page title -->
        <div class="col-lg-6 col-md-4 col-sm-4 col-xs-12">
            <h4 class="page-title"><i class="{{ $pageIcon }}"></i> @lang($pageTitle) #{{ $project->id }} - <span
                    class="font-bold">{{ ucwords($project->project_name) }}</span></h4>
        </div>
        <!-- /.page title -->
        <!-- .breadcrumb -->
        <div class="col-lg-6 col-sm-8 col-md-8 col-xs-12 text-right">
            @php $pin = $project->pinned() @endphp
            <a href="javascript:;" class="btn btn-sm btn-info @if (!$pin) btn-outline @endif"
                data-placement="bottom" data-toggle="tooltip"
                data-original-title="@if ($pin) @lang('app.unpin') @else @lang('app.pin') @endif"
                data-pinned="@if ($pin) pinned @else unpinned @endif" id="pinnedItem">
                <i class="icon-pin icon-2 pin-icon  @if ($pin) pinned @else unpinned @endif"></i>
            </a>

            @php
                if ($project->status == 'in progress') {
                    $statusText = __('app.inProgress');
                    $statusTextColor = 'text-info';
                    $btnTextColor = 'btn-info';
                } elseif ($project->status == 'on hold') {
                    $statusText = __('app.onHold');
                    $statusTextColor = 'text-warning';
                    $btnTextColor = 'btn-warning';
                } elseif ($project->status == 'not started') {
                    $statusText = __('app.notStarted');
                    $statusTextColor = 'text-warning';
                    $btnTextColor = 'btn-warning';
                } elseif ($project->status == 'canceled') {
                    $statusText = __('app.canceled');
                    $statusTextColor = 'text-danger';
                    $btnTextColor = 'btn-danger';
                } elseif ($project->status == 'finished') {
                    $statusText = __('app.finished');
                    $statusTextColor = 'text-success';
                    $btnTextColor = 'btn-success';
                } elseif ($project->status == 'under review') {
                    $statusText = __('app.underReview');
                    $statusTextColor = 'text-warning';
                    $btnTextColor = 'btn-warning';
                }
            @endphp
            
            <div class="btn-group dropdown">
                <button aria-expanded="true" data-toggle="dropdown"
                    class="btn b-all dropdown-toggle waves-effect waves-light visible-lg visible-md"
                    type="button">{{ $statusText }} <span style="width: 15px; height: 15px;"
                        class="btn {{ $btnTextColor }} btn-small btn-circle">&nbsp;</span></button>
                <ul role="menu" class="dropdown-menu pull-right">
                    <li>
                        <a href="javascript:;" class="submit-ticket" data-status="in progress">@lang('app.inProgress')
                            <span style="width: 15px; height: 15px;" class="btn btn-info btn-small btn-circle">&nbsp;</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;" class="submit-ticket" data-status="on hold">@lang('app.onHold')
                            <span style="width: 15px; height: 15px;"
                                class="btn btn-warning btn-small btn-circle">&nbsp;</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;" class="submit-ticket" data-status="not started">@lang('app.notStarted')
                            <span style="width: 15px; height: 15px;"
                                class="btn btn-warning btn-small btn-circle">&nbsp;</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;" class="submit-ticket" data-status="canceled">@lang('app.canceled')
                            <span style="width: 15px; height: 15px;"
                                class="btn btn-danger btn-small btn-circle">&nbsp;</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;" class="submit-ticket" data-status="finished">@lang('app.finished')
                            <span style="width: 15px; height: 15px;"
                                class="btn btn-success btn-small btn-circle">&nbsp;</span>
                        </a>
                    </li>
                </ul>
            </div>
            <ol class="breadcrumb">
                <li><a href="{{ route('member.dashboard') }}">@lang('app.menu.home')</a></li>
                <li><a href="{{ route('member.projects.index') }}">@lang($pageTitle)</a></li>
                <li class="active">@lang('modules.projects.overview')</li>
            </ol>
        </div>
        <!-- /.breadcrumb -->
    </div>
@endsection

@push('head-script')
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/icheck/skins/all.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/custom-select/custom-select.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/bower_components/multiselect/css/multi-select.css') }}">
    <link rel="stylesheet"
        href="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}">
    <style>
        #section-line-1 .col-in {
            padding: 0 10px;
        }

        #section-line-1 .col-in h3 {
            font-size: 15px;
        }
    </style>
@endpush

@section('content')
    <section class="dash_panel">
        <div class="sttabs tabs-style-line">
            @include('member.projects.show_project_menu')
            <div class="content-wrap">
                <div id="section-line-1" class="show">
                    <div class="row">
                        <div class="col-md-9">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="customCard">
                                        <h4 class="m-0 fw-500">@lang('app.project') @lang('app.details')</h4>
                                        {!! $project->project_summary !!}
                                    </div>
                                </div>
                                @if ($user->can('view_clients') || $project->isProjectManager || $project->isProjectCoordinator || $user->isProjectManager($user->id) || $user->isProjectCoordinator($user->id))
                                <div class="col-md-4">
                                    <div class="customCard">
                                        <div class="panel-wrapper collapse in">
                                            <div class="panel-body">
                                                <h4 class="m-t-0">@lang('modules.client.clientDetails')</h4>
                                                @if (!is_null($project->client))
                                                <dl>
                                                    @if (!is_null($project->client->client_details))
                                                        <dt>@lang('modules.client.companyName')</dt>
                                                        <dd class="m-b-10">
                                                            {{ $project->client->client_details->company_name }}
                                                        </dd>
                                                    @endif

                                                    <dt>@lang('modules.client.clientName')</dt>
                                                    <dd class="m-b-10">{{ ucwords($project->client->name) }}
                                                    </dd>

                                                    <dt>@lang('modules.client.clientEmail')</dt>
                                                    <dd class="m-b-10">{{ $project->client->email }}</dd>
                                                </dl>
                                                @else
                                                @lang('messages.noClientAddedToProject') @endif {{-- Custom fields data --}} @if (isset($fields))
                                                    <dl>
                                                        @foreach ($fields as $field)
                                                            <dt>{{ ucfirst($field->label) }}</dt>
                                                            <dd class="m-b-10">
                                                                @if ($field->type == 'text')
                                                                    {{ $project->custom_fields_data['field_' . $field->id] ?? '-' }}
                                                                @elseif($field->type == 'password')
                                                                    {{ $project->custom_fields_data['field_' . $field->id] ?? '-' }}
                                                                @elseif($field->type == 'number')
                                                                    {{ $project->custom_fields_data['field_' . $field->id] ?? '-' }}
                                                                @elseif($field->type == 'textarea')
                                                                    {{ $project->custom_fields_data['field_' . $field->id] ?? '-' }}
                                                                @elseif($field->type == 'radio')
                                                                    {{ !is_null($project->custom_fields_data['field_' . $field->id])
                                                                        ? $project->custom_fields_data['field_' . $field->id]
                                                                        : '-' }}
                                                                @elseif($field->type == 'select')
                                                                    {{ !is_null($project->custom_fields_data['field_' . $field->id]) &&
                                                                    $project->custom_fields_data['field_' . $field->id] != ''
                                                                        ? $field->values[$project->custom_fields_data['field_' . $field->id]]
                                                                        : '-' }}
                                                                @elseif($field->type == 'checkbox')
                                                                    {{ !is_null($project->custom_fields_data['field_' . $field->id])
                                                                        ? $field->values[$project->custom_fields_data['field_' . $field->id]]
                                                                        : '-' }}
                                                                @elseif($field->type == 'date')
                                                                    {{ \Carbon\Carbon::parse($project->custom_fields_data['field_' . $field->id])->format($global->date_format) }}
                                                                @endif
                                                            </dd>
                                                        @endforeach
                                                    </dl>
                                                @endif {{-- custom fields data end --}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endif
                                @if (
                                $project->isProjectAdmin ||
                                $user->can('edit_projects') ||
                                $project->isProjectManager ||
                                $project->isProjectCoordinator
                                || $user->isProjectManager($user->id) || $user->isProjectCoordinator($user->id))
                                <div class="col-md-8">
                                    <div class="customCard">
                                        <div class="panel-wrapper collapse in">
                                            <div class="panel-body" id="timer-list">
                                                <h4 class="m-0">@lang('modules.projects.activeTimers')</h4>
                                                @forelse($activeTimers as $key=>$time)
                                                    <div class="row m-b-10">
                                                        <div class="col-xs-12 m-b-5">
                                                            {{ ucwords($time->user->name) }}
                                                        </div>
                                                        <div class="col-xs-9 font-12">
                                                            {{ $time->duration }}
                                                        </div>
                                                        <div class="col-xs-3 text-right">
                                                            <button type="button"
                                                                data-time-id="{{ $time->id }}"
                                                                class="btn btn-danger btn-xs stop-timer">@lang('app.stop')</button>
                                                        </div>
                                                    </div>

                                                @empty
                                                    @lang('messages.noActiveTimer')
                                                @endforelse
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endif
                            </div>
                            @if ($project->isProjectManager || $project->isProjectCoordinator || $user->isProjectManager($user->id) || $user->isProjectCoordinator($user->id))
                            <div class="row p-t-10">
                                <div class="col-md-12">
                                    <div class="customCard">
                                        <div class="panel-wrapper collapse in">
                                            <div class="panel-body">
                                                <div class="row">
                                                    @empty(!$project->portal)
                                                    <div class="col-xs-3">
                                                        <div
                                                            class="font-semi-bold">@lang('app.portal')</div>
                                                        <p class="m-0">{{ $project->portal }}</p>
                                                    </div>
                                                    @endempty

                                                    @empty(!$project->hourly_fixed)
                                                    <div class="col-xs-3">
                                                        <div
                                                            class="font-semi-bold">@lang('app.hourly/fixed')</div>
                                                        <p class="m-0">{{ $project->hourly_fixed }}</p>
                                                    </div>
                                                    @endempty

                                                    @if (!empty($project->project_email_date) && $project->project_email_date != '0000-00-00')
                                                    <div class="col-xs-3">
                                                        <div
                                                            class="font-semi-bold">@lang('app.projectEmailDate')</div>
                                                        <p class="m-0">{{ $project->project_email_date }}</p>
                                                    </div>
                                                    @endif

                                                    @if (!empty($project->kick_off_date) && $project->kick_off_date != '0000-00-00')
                                                    <div class="col-xs-3">
                                                        <div
                                                            class="font-semi-bold">@lang('app.kickOffCallDate')</div>
                                                        <p class="m-0">{{ $project->kick_off_date }}</p>
                                                    </div>
                                                    @endif

                                                    @empty(!$project->overall_planned_hours)
                                                    <div class="col-xs-3">
                                                        <div
                                                            class="font-semi-bold">@lang('modules.projects.plannedHours')</div>
                                                        <p class="m-0">{{ $project->overall_planned_hours }}</p>
                                                    </div>
                                                    @endempty

                                                    @empty(!$project->overall_spent_hours)
                                                    <div class="col-xs-3">
                                                        <div
                                                            class="font-semi-bold">@lang('modules.projects.spentHours')</div>
                                                        <p class="m-0">{{ $project->overall_spent_hours }}</p>
                                                    </div>
                                                    @endempty

                                                    @if (!empty($project->basecamp_setup_date) && $project->basecamp_setup_date != '0000-00-00')
                                                    <div class="col-xs-3">
                                                        <div
                                                            class="font-semi-bold">@lang('app.baseCampSetupdate')</div>
                                                        <p class="m-0">{{ $project->basecamp_setup_date }}</p>
                                                    </div>
                                                    @endif

                                                    @empty(!$project->priority)
                                                    <div class="col-xs-3">
                                                        <div
                                                            class="font-semi-bold">@lang('modules.tasks.priority')</div>
                                                        <p class="m-0">{{ $project->priority }}</p>
                                                    </div>
                                                    @endempty

                                                    @empty(!$project->weightage)
                                                    <div class="col-xs-3">
                                                        <div
                                                            class="font-semi-bold">@lang('app.weightage')</div>
                                                        <p class="m-0">{{ $project->weightage }}</p>
                                                    </div>
                                                    @endempty

                                                    @empty(!$project->total_milestones)
                                                    <div class="col-xs-3">
                                                        <div
                                                            class="font-semi-bold">@lang('modules.projects.totalMilestones')</div>
                                                        <p class="m-0">{{ $project->total_milestones }}</p>
                                                    </div>
                                                    @endempty

                                                    @empty(!$project->cr_added)
                                                    <div class="col-xs-3">
                                                        <div
                                                            class="font-semi-bold">@lang('app.crAdded')</div>
                                                        <p class="m-0">{{ $project->cr_added }}</p>
                                                    </div>
                                                    @endempty

                                                    @empty(!$project->owner_id)
                                                    <div class="col-xs-3">
                                                        <div
                                                            class="font-semi-bold">@lang('modules.projects.ownership')</div>
                                                        <p class="m-0">{{ $project->owner->name }}</p>
                                                    </div>
                                                    @endempty
                                                </div>
                                            </div>

                                            @if ($project->members->count() > 0)
                                            <div class="panel-body b-t">
                                                <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 10px;">
                                                    <div class="font-semi-bold" style="margin-right: 10px;">
                                                        @lang('modules.projects.projectMember') :-
                                                    </div>
                                                    @foreach ($project->members as $member)
                                                        <div
                                                            style="background-color: #f9f9f9; border: 1px solid #ccc; padding: 5px 10px; border-radius: 5px; white-space: nowrap;">
                                                            {{ $member->user->name }}
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                            @endempty

                                            @if ($project->managers->count() > 0)
                                            <div class="panel-body b-t">
                                                <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 10px;">
                                                    <label class="font-semi-bold"
                                                        style="margin-right: 10px;">
                                                        @lang('modules.projects.projectManager') :-
                                                    </label>

                                                    @foreach ($project->managers as $manager)
                                                        <div
                                                            style="background-color: #f9f9f9; border: 1px solid #ccc; padding: 5px 10px; border-radius: 5px; white-space: nowrap;">
                                                            {{ $manager->user->name }}
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                            @endempty
                                            @if ($project->coordinators->count() > 0)
                                            <div class="panel-body b-t">
                                                <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 10px;">
                                                    <label class="font-semi-bold"
                                                        style="margin-right: 10px;">
                                                        @lang('modules.projects.projectCoordinator') :-
                                                    </label>

                                                    @foreach ($project->coordinators as $coordinator)
                                                        <div
                                                            style="background-color: #f9f9f9; border: 1px solid #ccc; padding: 5px 10px; border-radius: 5px; white-space: nowrap;">
                                                            {{ $coordinator->user->name }}
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                            @endempty
                                            @if ($project->resources->count() > 0)
                                            <div class="panel-body b-t">
                                                <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 10px;">
                                                    <label class="font-semi-bold"
                                                        style="margin-right: 10px;">
                                                        @lang('modules.projects.resourcesWorking') :-
                                                    </label>

                                                    @foreach ($project->resources as $resource)
                                                    @if($resource->user)
                                                        <div
                                                            style="background-color: #f9f9f9; border: 1px solid #ccc; padding: 5px 10px; border-radius: 5px; white-space: nowrap;">
                                                            {{ $resource->user->name }}
                                                        </div>
                                                    @endif
                                                    @endforeach
                                                </div>
                                            </div>
                                            @endempty
                                        </div> 
                                    </div>
                                </div>
                                @if ($milestones->count() > 0)
                                <div class="col-md-12">
                                    <div class="customCard" id="milestones">
                                        <div class="panel-heading b-b">@lang('modules.projects.milestones')</div>
                                        <div class="panel-wrapper collapse in">
                                            <div class="panel-body">
                                                @forelse ($milestones as $key=>$item)
                                                    <div class="row m-b-10">
                                                        <div class="col-xs-12 m-b-5">
                                                            <a href="javascript:;" class="milestone-detail"
                                                                data-milestone-id="{{ $item->id }}">
                                                                <h6>{{ ucfirst($item->milestone_title) }}</h6>
                                                            </a>
                                                        </div>
                                                        <div class="col-xs-6">
                                                            @if ($item->status == 'complete')
                                                                <label
                                                                    class="label label-success">@lang('app.complete')</label>
                                                            @else
                                                                <label
                                                                    class="label label-danger">@lang('app.incomplete')</label>
                                                            @endif
                                                        </div>
                                                        <div class="col-xs-6 text-right">
                                                            @if ($item->cost > 0)
                                                                {{ $item->currency->currency_symbol . $item->cost }}
                                                            @endif
                                                        </div>
                                                    </div>
                                                @empty
                                                    @lang('messages.noRecordFound')
                                                @endforelse
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endif
                            </div>
                            @endif
                        </div>
                        <div class="col-md-3">
                            <div class="customCard m-b-15">
                                <div class="panel-heading">@lang('modules.projects.members')
                                    <span class="label label-rouded label-custom pull-right">{{ count($project->members) }}</span>
                                </div>
                                <div class="panel-wrapper collapse in">
                                    <div class="panel-body p-t-0">
                                        <div class="d-flex avatar-group">
                                        @forelse($project->members as $member)
                                        @if (!empty($member->user))
                                            <img src="{{ asset($member->user->image_url) }}" data-toggle="tooltip" data-original-title="{{ ucwords($member->user->name) }}" alt="user" class="avatar" width="25" height="25" height="25">
                                        @endif
                                        @empty
                                        @lang('messages.noMemberAddedToProject')
                                        @endforelse
                                        </div>
                                    </div>
                                </div>
                            </div>
                             <div class="customCard m-b-15">
                                <div class="panel-wrapper collapse in">
                                    <div class="panel-body ">
                                        <div class="row">
                                            <div class="col-md-12 project-stats text-start">
                                                <span class="text-danger font-semi-bold">{{ count($openTasks) }}</span>
                                                <span> @lang('modules.projects.openTasks')</span>
                                            </div>
                                            <div class="col-md-12 project-stats text-start">
                                                <span class="text-info font-semi-bold">{{ $daysLeft }}</span>
                                                <span> @lang('modules.projects.daysLeft')</span>
                                            </div>
                                            <div class="col-md-12 project-stats text-start">
                                                <span class="text-success font-semi-bold">{{ $hoursLogged }}</span>
                                                <span> @lang('modules.projects.hoursLogged')</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="customCard m-b-15">
                                <div class="panel-heading">@lang('modules.projects.activityTimeline')</div>
                                <div class="panel-wrapper collapse in">
                                    <div class="panel-body p-t-0">
                                        <div class="steamline">
                                            @foreach ($activities as $activ)
                                                <div class="sl-item">
                                                    <div class="sl-left"><i
                                                            class="fa fa-circle text-primary"></i>
                                                    </div>
                                                    <div class="sl-right">
                                                        <div>
                                                            <h6>{{ $activ->activity }}</h6> <span
                                                                class="sl-date">{{ $activ->created_at->diffForHumans() }}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('footer-script')
<script src="{{ asset('js/cbpFWTabs.js') }}"></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/bower_components/multiselect/js/jquery.multi-select.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
<script type="text/javascript">
    //    (function () {
    //
    //        [].slice.call(document.querySelectorAll('.sttabs')).forEach(function (el) {
    //            new CBPFWTabs(el);
    //        });
    //
    //    })();
    $('#timer-list').on('click', '.stop-timer', function() {
        var id = $(this).data('time-id');
        var url = '{{ route('member.all-time-logs.stopTimer', ':id') }}';
        url = url.replace(':id', id);
        var token = '{{ csrf_token() }}'
        $.easyAjax({
            url: url,
            type: "POST",
            data: {
                timeId: id,
                _token: token
            },
            success: function(data) {
                $('#timer-list').html(data.html);
            }
        })

    });
    $('ul.showProjectTabs .projects').addClass('tab-current');
    $('body').on('click', '#pinnedItem', function() {
        var type = $('#pinnedItem').attr('data-pinned');
        var id = {{ $project->id }};
        console.log(['type', type]);
        var dataPin = type.trim(type);
        if (dataPin == 'pinned') {
            swal({
                title: "@lang('messages.sweetAlertTitle')",
                text: "@lang('messages.projectunpinText')",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "@lang('messages.confirmUnpin')",
                cancelButtonText: "@lang('messages.confirmNoArchive')",
                closeOnConfirm: true,
                closeOnCancel: true
            }, function(isConfirm) {
                if (isConfirm) {

                    var url = "{{ route('member.pinned.destroy', ':id') }}";
                    url = url.replace(':id', id);

                    var token = "{{ csrf_token() }}";
                    $.easyAjax({
                        type: 'POST',
                        url: url,
                        data: {
                            '_token': token,
                            '_method': 'DELETE'
                        },
                        success: function(response) {
                            if (response.status == "success") {
                                $.unblockUI();
                                $('.pin-icon').removeClass('pinned');
                                $('.pin-icon').addClass('unpinned');
                                $('#pinnedItem').attr('data-pinned', 'unpinned');
                                $('#pinnedItem').attr('data-original-title', 'Pin');
                                $("#pinnedItem").tooltip("hide");
                            }
                        }
                    });
                }
            });
        } else {

            swal({
                title: "@lang('messages.sweetAlertTitle')",
                text: "@lang('messages.projectPin')",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "@lang('app.yes')",
                cancelButtonText: "@lang('messages.confirmNoArchive')",
                closeOnConfirm: true,
                closeOnCancel: true
            }, function(isConfirm) {
                if (isConfirm) {

                    var url = "{{ route('member.pinned.store') }}";

                    var token = "{{ csrf_token() }}";
                    $.easyAjax({
                        type: 'POST',
                        url: url,
                        data: {
                            '_token': token,
                            'project_id': id
                        },
                        success: function(response) {
                            if (response.status == "success") {
                                $.unblockUI();
                                $('.pin-icon').removeClass('unpinned');
                                $('.pin-icon').addClass('pinned');
                                $('#pinnedItem').attr('data-pinned', 'pinned');
                                $('#pinnedItem').attr('data-original-title', 'Unpin');
                                $("#pinnedItem").tooltip("hide");
                            }
                        }
                    });
                }
            });

        }
    });
</script>

<script>
    $('.submit-ticket').on('click', function() {
        const status = $(this).data('status');
        const url = '{{ route('member.projects.updateStatus', $project->id) }}';
        const token = '{{ csrf_token() }}'
        $.easyAjax({
            url: url,
            type: "POST",
            data: {
                status: status,
                _token: token
            },
            success: function(data) {
                window.location.reload();
            }
        })
    })
</script>
@endpush