@extends('admin.layouts.main')

@section('title')
Project - Information
@endsection

@section('content')
<main>
    <div class="two-col">

        @include("admin.common.sidebar")

        <div class="right-sec">

            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('admin.project.index',['panel' => session('panel')])}}">{{ @trans('project::project.projects') }}</a></li>
                    @if(Session::has('editFromUrl'))
                    <li class="breadcrumb-item active" aria-current="page">{{ @trans('project::project.edit_project') }} </li>
                    @else
                    <li class="breadcrumb-item active" aria-current="page">{{ @trans('project::project.create_project') }} </li>
                    @endif
                </ol>
            </nav>

            <div class="form-sec">

                @include('project::modules.store.common.form-step')

                <div class="container">
                    <div class="row">
                        <div class="col-xl-8 offset-xl-2 col-lg-10 offset-lg-1">
                            <div class="step-box">
                                <form method="post" action="{{ route('admin.project.store_dept_and_team', ['panel' => session('panel')]) }}" id="frmDeptAndTeam" name="frmDeptAndTeam" autocomplete="off">
                                    @csrf

                                    <input type="hidden" name="id" value="{{ $id }}" />

                                    <div class="tab">
                                        <h2 class="form-sec-title">{{ @trans('project::project.department_and_team') }}</h2>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('project::project.select_department_and_sub_department') }}
                                                        <span class="required">*</span>
                                                        <img src="{{asset('img/admin/ic_info_pm_tooltip.svg')}}" class="tooltip-popover project-tooltip-popover cursor-pointer" data-content="{{ @trans('project::project_tooltip.project_dept_and_sub_dept') }}" tabindex="0">
                                                    </label>
                                                    <select class="form-control select-two select-two-tree" id="dept_and_sub_depts" name="dept_and_sub_depts[]" multiple="multiple" data-placeholder="Select">
                                                    </select>
                                                    <ul class="list-unstyled dept-subdept-select2 d-flex flex-wrap mt-2 mb-0" style="display: none !important;"></ul>
                                                </div>
                                            </div>
                                        </div>
                                        <h2 class="form-sec-title">{{ @trans('project::project.team_member') }}</h2>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group btm-arrow select">
                                                    <label class="control-label">{{ @trans('project::project.project_owner') }}
                                                        <span class="required">*</span>
                                                        <img src="{{asset('img/admin/ic_info_pm_tooltip.svg')}}" class="tooltip-popover project-tooltip-popover cursor-pointer" data-content="{{ @trans('project::project_tooltip.project_owner') }}" tabindex="0">
                                                    </label>
                                                    <select class="form-control" id="project_owner" name="project_owner">
                                                        <option value="" hidden>Select</option>
                                                        @foreach($staffUsers as $staffUser)
                                                        <option value="{{ $staffUser->id }}" @if($project->projectOwner->first() && $project->projectOwner->first()->id == $staffUser->id)
                                                            selected data-locked="true" @endif>{{ $staffUser->full_name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="form-group btm-arrow select">
                                                    <label class="control-label">{{ @trans('project::project.observer') }}
                                                        <img src="{{asset('img/admin/ic_info_pm_tooltip.svg')}}" class="tooltip-popover project-tooltip-popover cursor-pointer" data-content="{{ @trans('project::project_tooltip.project_observer') }}" tabindex="0">
                                                    </label>
                                                    <select class="form-control select-two-with-locked-options" id="observers" name="observers[]" multiple="multiple" data-placeholder="Select">
                                                        @foreach($staffUsers as $staffUser)
                                                        <option value="{{ $staffUser->id }}" @if(in_array($staffUser->id, $project->observers->pluck('id')->toArray()))
                                                            selected data-locked="true" @endif>{{ $staffUser->full_name }} - {{ $staffUser->roles[0]->display_name ?? '' }}</option>
                                                        @endforeach
                                                    </select>
                                                    <ul class="list-unstyled d-flex flex-wrap mt-2 mb-0" style="display: none !important;"></ul>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('project::project.approver') }}
                                                        <span class="required">*</span>
                                                        <img src="{{asset('img/admin/ic_info_pm_tooltip.svg')}}" class="tooltip-popover project-tooltip-popover cursor-pointer" data-content="{{ @trans('project::project_tooltip.project_approver') }}" tabindex="0">
                                                    </label>
                                                    <select class="form-control select-two-with-locked-options" id="approvers" name="approvers[]" multiple="multiple" data-placeholder="Select">
                                                        @foreach($usersWhoHaveApproverPermission as $staffUser)
                                                        <option value="{{ $staffUser->id }}" @if(in_array($staffUser->id, $project->approvers->pluck('id')->toArray()))
                                                            selected data-locked="true" @endif>{{ $staffUser->full_name }} - {{ $staffUser->roles[0]->display_name ?? '' }}</option>
                                                        @endforeach
                                                    </select>
                                                    <ul class="list-unstyled d-flex flex-wrap mt-2 mb-0" style="display: none !important;"></ul>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('project::project.project_implementer') }}
                                                        <img src="{{asset('img/admin/ic_info_pm_tooltip.svg')}}" class="tooltip-popover project-tooltip-popover cursor-pointer" data-content="{{ @trans('project::project_tooltip.project_implementer') }}" tabindex="0">
                                                    </label>
                                                    <select class="form-control select-two-with-locked-options" id="implemeters" name="implemeters[]" multiple="multiple" data-placeholder="Select">
                                                        @foreach($staffUsers as $staffUser)
                                                        <option value="{{ $staffUser->id }}" @if(in_array($staffUser->id, $project->implementers->pluck('id')->toArray()))
                                                            selected data-locked="true" @endif>{{ $staffUser->full_name }} - {{ $staffUser->roles[0]->display_name ?? '' }}</option>
                                                        @endforeach
                                                    </select>
                                                    <ul class="list-unstyled d-flex flex-wrap mt-2 mb-0" style="display: none !important;"></ul>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('project::project.project_member') }}
                                                        <img src="{{asset('img/admin/ic_info_pm_tooltip.svg')}}" class="tooltip-popover project-tooltip-popover cursor-pointer" data-content="{{ @trans('project::project_tooltip.project_member') }}" tabindex="0">
                                                    </label>
                                                    <select class="form-control select-two-with-locked-options" id="members" name="members[]" multiple="multiple" data-placeholder="Select">
                                                        @foreach($staffUsers as $staffUser)
                                                        <option value="{{ $staffUser->id }}" @if(in_array($staffUser->id, $project->members->pluck('id')->toArray()))
                                                            selected data-locked="true" @endif>{{ $staffUser->full_name }} - {{ $staffUser->roles[0]->display_name ?? '' }}</option>
                                                        @endforeach
                                                    </select>
                                                    <ul class="list-unstyled d-flex flex-wrap mt-2 mb-0" style="display: none !important;"></ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="tab-btn">
                                        <div style="float: left;">
                                            @if(Session::has('editFromUrl') && (Session::get('editFromUrl') == 'detailsSingleStep' || Session::get('editFromUrl') == 'details'))
                                            <a class="btn btn-cncl" href="{{ route('admin.project.tabs',['panel' => session('panel'), 'id' => $project->id]) }}">
                                                {{ @trans('project::project.cancel') }}
                                            </a>
                                            @elseif ((Session::has('editFromUrl') && Session::get('editFromUrl') == 'kanbanView') || Session::get('addFromUrl') == 'kanbanView')
                                            <a class="btn btn-cncl" href="{{ route('admin.project.kanban_index',['panel' => session('panel')]) }}">{{ @trans('project::project.cancel') }}</a>
                                            @else
                                            <a class="btn btn-cncl" href="{{ route('admin.project.index',['panel' => session('panel')]) }}">{{ @trans('project::project.cancel') }}</a>
                                            @endif
                                        </div>
                                        <div style="float:right;">
                                            @if(request()->input('edit'))
                                            <a class="btn btn-cncl mr-3" href="{{ route('admin.project.info', ['panel' => Session::get('panel'), 'id' => $id, 'edit' => 'true']) }}">{{ @trans('project::project.prev') }}</a>
                                            @elseif(!Session::has('editFromUrl'))
                                            <a class="btn btn-cncl mr-3" href="{{ route('admin.project.info', ['panel' => Session::get('panel'), 'id' => $id]) }}">{{ @trans('project::project.prev') }}</a>
                                            @endif
                                            @if(Session::has('editFromUrl') && Session::get('editFromUrl') == 'detailsSingleStep')
                                            <button type="submit" id="nextBtn" class="btn step-btn submitDepBtn">{{ @trans('project::project.save') }}</button>
                                            @else
                                            <button type="submit" id="nextBtn" class="btn step-btn submitDepBtn">{{ @trans('project::project.save_next') }}</button>
                                            @endif
                                        </div>
                                    </div>
                                </form>

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

    </div>
</main>
@endsection

@push('pageJs')
<script>
    var dateJsFormat = '{{ config('
    custom.formats.date_js ') }}';
</script>
<script src="{{ asset('js/vendor/select2.customSelectionAdapter.js') }}"></script>
<script src="{{ asset('js/admin/project/store.js') }}"></script>
<script src="{{ asset('js/vendor/select2-tree.js') }}"></script>
{!! JsValidator::formRequest('Modules\Project\Http\Requests\Add\StoreDeptAndTeamRequest', '#frmDeptAndTeam') !!}
<script>
    var CustomSelectionAdapter = $.fn.select2.amd.require("select2/selection/customSelectionAdapter");
    $('#dept_and_sub_depts').select2ToTree({
        allowClear: true,
        selectionAdapter: CustomSelectionAdapter,
        selectionContainer: $('.dept-subdept-select2'),
        treeData: {
            dataArr: {!! json_encode($deptSelect2Data) !!},
            expandAll: true
        },
        templateSelection: function(selection) {
            return jQuery(selection.element).data('display');
        }
    }).on('change.select2', function(e) {
        if ($('#dept_and_sub_depts').val().length > 0) {
            $('.dept-subdept-select2').show();
        } else {
            $('.dept-subdept-select2').attr("style", "display: none !important");;
        }
    });
    $('#dept_and_sub_depts').trigger('change');
    $(document).on('click', '.submitDepBtn', function() {

        if ($('#frmDeptAndTeam').valid()) {
            $('.submitDepBtn').text('Please wait...');
            $('.submitDepBtn').attr('disabled', 'disabled');
            $('#frmDeptAndTeam').submit();
        }
    });
</script>
@endpush

@push('pageCss')
<link rel="stylesheet" href="{{ asset('css/vendor/select2.customSelectionAdapter.css') }}">
<link rel="stylesheet" href="{{ asset('css/admin/project/store.css') }}">
<link rel="stylesheet" href="{{ asset('css/vendor/select2-tree.css') }}">
<style>
    .locked-tag .select2-selection__choice__remove {
        display: none !important;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        padding: 2px 10px 2px 10px;
        border-radius: 50px;
        margin: 0 10px 10 0;
        color: #4E5867;
        font-size: 14px;
        letter-spacing: 0;
        border: 1px solid #4E5867;
        background-color: transparent;
        border-radius: 15px;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__rendered {
        padding: 0 10px;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__clear {
        margin-right: 9px !important;
    }
</style>
@endpush