@extends('layouts.master')
@section('before-css')
    <link rel="stylesheet" href="{{asset('assets/styles/vendor/pickadate/classic.css')}}">
    <link rel="stylesheet" href="{{asset('assets/styles/vendor/pickadate/classic.date.css')}}">
@endsection
@section('page-css')
    <link rel="stylesheet" href="{{asset('assets/styles/vendor/animate.css')}}">

@endsection
<style>
    tr.group,
    tr.group:hover {
        background-color: #ddd !important;
    }
    .font-weight-bold label {
        color: red !important;
        font-size: 15px !important;
    }
    .cdk-textarea-autosize{
        min-height: 21px; height: 21px; display: block; width: 100%; resize: none; -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;overflow: hidden;
        box-sizing: content-box;
        word-break: break-word;
        overflow-wrap: break-word;
        word-wrap: break-word;
        -webkit-hyphens: auto;
        hyphens: auto;
        font-size: 18px;
        font-weight: bolder;
        line-height: 1.3em;
        color: #111;
        resize: none;
        border: 0;
        outline: none;
        background: transparent;
        padding: 0 4px 0 0;
    }
    .dropdown, .dropdown-menu {
        z-index:2;
    }
    .navbar {
        position: static;
        z-index: 1;
    }
    /*.dropdown-menu { position: relative !important; z-index: 1999 !important; }*/
</style>
@section('main-content')
    <div class="auth-layout-wrap" style="background-image: url({{asset('assets/images/photo-wide-'.rand(1,4).'.jpg')}})">
        @can('Can view Staff Profile')
            <div class="col-md-12">
                <div class="card user-profile mb-4 mt-12">
                    <div class="card-body">
                        <div class="row mb-4">
                            <div class="col-md-6"><h1>1:1s Cycles</h1></div>
                            <div class="col-md-6">
                                @if(auth()->user()->hasRole('admin') || auth()->user()->can('Create/Edit one to one cycles'))
                                    <button type="button" class="btn btn-lg btn-primary m-1 float-right" data-toggle="modal" data-target=".create-one">Create new 1:1 Cycle</button>
                                @endif
                            </div>
                        </div>
                        <div class="card mb-4 d-flex flex-column">
                            <div class="flex-grow-1 d-bock">
                                <div class="card-body">
                                    <nav>
                                        <div class="nav nav-tabs nav-fill nav-pills" id="nav-tab" role="tablist">
                                            <a class="nav-item nav-link active" id="nav-active-tab" data-toggle="tab" href="#nav-active" role="tab" aria-controls="nav-home" aria-selected="true">Active 1:1s</a>
                                            <a class="nav-item nav-link" id="nav-inactive-tab" data-toggle="tab" href="#nav-inactive" role="tab" aria-controls="nav-profile" aria-selected="false">Inactive 1:1s</a>
                                        </div>
                                    </nav>
                                    <div class="tab-content ul-tab__content" id="nav-tabContent">
                                        @if(is_object($ones) && count($ones)>0)
                                            <div class="tab-pane active" id="nav-active" role="tabpanel" aria-labelledby="nav-active-tab">

                                                @if(auth()->user()->hasRole('admin') || auth()->user()->can('Can view all one to one cycles (VIEW ONLY)'))
                                                    <div class="row">
                                                        @php($count=0)
                                                        @foreach($ones as $one)
                                                            @if($one->enable=='y')
                                                                @php($count++)
                                                                <div class="col-md-4">
                                                                    <div class="card mb-4 ">
                                                                        <div class="card-body justify-content-between align-items-lg-center">
                                                                            <h5 class="heading text-primary">Cycle Name: {{$one->oneTitle}}</h5>
                                                                            <p class="m-0 text-muted text-small w-15 w-sm-100">
                                                                                <b>Type:</b> {{($one->oneTypeId>0)?getToogleCategory(['cat_id'=>$one->oneTypeId,'cat_name'=>'']):'PIP'}}
                                                                            </p>
                                                                            <p class="m-0 text-muted text-small w-15 w-sm-100">
                                                                                <b>Frequency:</b> {{getToogleCategory(['cat_id'=>$one->frequencyId,'cat_name'=>''])}}
                                                                            </p>
                                                                            <p class="m-0 text-muted text-small w-15 w-sm-100">
                                                                                <b>Added by:</b> {{user_details_by_id($one->addedBy)->name}}
                                                                            </p>
                                                                            <p class="m-0 text-muted text-small w-15 w-sm-100 mb-32">
                                                                                <b>Due Date & Time:</b> Every {{getToogleCategory(['cat_id'=>$one->frequencyId,'cat_name'=>''])=='Monthly'?'month on '.date('d \a\t h:ia',strtotime($one->meetDate.' '.$one->meetTime)):'week on '.date('D \a\t h:ia',strtotime($one->meetDate.' '.$one->meetTime))}}
                                                                            </p>
                                                                            <p class="m-0 text-muted text-small w-15 w-sm-100 mb-32">
                                                                                <b>Department:</b>
                                                                                @if($one->one_depts)
                                                                                @foreach($one->one_depts as $onedept)
                                                                                    {!! $onedept->department->dept_name !!},
                                                                                @endforeach
                                                                                @endif
                                                                            </p>

                                                                            <div class=" " id="collapse-icon_{{$one->id}}">
                                                                                <div class="">
                                                                                    <div class="col-sm-6">
                                                                                        <h6 class="">
                                                                                            <div class="">
                                                                                                <a href="javascript:void(0);" class="bg-white " data-container="card-body" data-flip="false" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                                                    <u>Staffs</u>
                                                                                                </a>
                                                                                                <div class="dropdown-menu">
                                                                                                    @php($arrStaffs = explode(',',$one->staffs))
                                                                                                    @foreach($arrStaffs as $staff)
                                                                                                        <span class="m-4">{{user_details_by_id($staff)->name}}</b></span><br>
                                                                                                    @endforeach
                                                                                                </div>
                                                                                            </div>
                                                                                        </h6>
                                                                                        <h6 class="">
                                                                                            <div class="">
                                                                                                <a href="javascript:void(0);" class="bg-white" data-card="body" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                                                    <u>Agenda Points</u>
                                                                                                </a>
                                                                                                <div class="dropdown-menu">
                                                                                                    @foreach($one->template_agendas as $agenda)
                                                                                                        <span class="m-4 text-nowrap">{{ucfirst($agenda->agenda)}}</span><br>
                                                                                                    @endforeach
                                                                                                </div>
                                                                                            </div>
                                                                                        </h6>
                                                                                    </div>

                                                                                </div>

                                                                            </div>

                                                                            <div class="mt-32">
                                                                                <div class="row">
                                                                                    <div class="col-md-6">
                                                                                    @if(auth()->user()->hasRole('admin') || auth()->user()->can('Can delete / edit 1:1 cycles'))
                                                                                        <button type="button" class="btn btn-raised ripple btn-raised-danger delete_one" name="delete_{{$one->id}}" data-one="{{$one->id}}" data-ajaxroute="{{route('one.delete',$one->id)}}">
                                                                                            <span class="ul-btn__icon"><i class="i-Close-Window"></i></span>
                                                                                            <span class="ul-btn__text">Delete</span>
                                                                                        </button>
                                                                                        {{--HIDDEN FOR NOT ALLOWING ANYONE TO EDIT, IT DISTURBS EXISTING DATA --}}
                                                                                            <button type="button" class="btn btn-linkedin btn-icon edit-one" name="edit_{{$one->id}}" data-one="{{$one->id}}" data-route="{{route('one.edit',$one->id)}}">
                                                                                            <span class="ul-btn__icon"><i class="i-Pen-2"></i></span>
                                                                                            <span class="ul-btn__text">Edit</span>
                                                                                        </button>
                                                                                    @endif
                                                                                    </div>


                                                                                    <div class="col-md-6 ">
                                                                                        @if(auth()->user()->hasRole('admin') || auth()->user()->can('Can archive / deactivate 1:1s'))
                                                                                        <label class="switch switch-success float-right" title="Deactivate">
                                                                                            <input type="checkbox" name="switch_{{$one->id}}" data-one="{{$one->id}}" data-ajaxroute="{{route('one.deactivate',$one->id)}}" class="unswitch switch_validate" checked>
                                                                                            <span class="slider"></span>
                                                                                        </label>
                                                                                        @endif
                                                                                    </div>

                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            @endif
                                                        @endforeach
                                                    </div>
                                                    @if($count==0)
                                                        <div class="">
                                                            <div class="col-md-12 text-center mt-32"><h4 class="text-mute mb-4">No active 1:1 found</h4></div>
                                                        </div>
                                                    @endif
                                                @else
                                                    <div class="">
                                                        <div class="col-md-12 text-center mt-32"><h4 class="text-mute mb-4">No active 1:1 found</h4></div>
                                                    </div>
                                                @endif
                                            </div>
                                            <div class="tab-pane fade" id="nav-inactive" role="tabpanel" aria-labelledby="nav-inactive-tab">
                                                <div class="row list-grid">
                                                @php($count=0)
                                                @foreach($ones as $one)
                                                    @if($one->enable=='n')
                                                        @php($count++)
                                                            <div class="list-item col-md-4">
                                                                <div class="card mb-4 ">
                                                                    <div class="card-body justify-content-between align-items-lg-center">
                                                                        <h5 class="heading text-primary">Cycle Name: {{$one->oneTitle}}</h5>
                                                                        <p class="m-0 text-muted text-small w-15 w-sm-100">
                                                                            <b>Type:</b> {{getToogleCategory(['cat_id'=>$one->oneTypeId,'cat_name'=>''])}}
                                                                        </p>
                                                                        <p class="m-0 text-muted text-small w-15 w-sm-100">
                                                                            <b>Frequency:</b> {{getToogleCategory(['cat_id'=>$one->frequencyId,'cat_name'=>''])}}
                                                                        </p>
                                                                        <p class="m-0 text-muted text-small w-15 w-sm-100">
                                                                            <b>Added by:</b> {{user_details_by_id($one->addedBy)->name}}
                                                                        </p>
                                                                        <p class="m-0 text-muted text-small w-15 w-sm-100 mb-32">
                                                                            <b>Due Date & Time:</b> Every {{getToogleCategory(['cat_id'=>$one->frequencyId,'cat_name'=>''])=='Monthly'?'month on '.date('d \a\t h:ia',strtotime($one->meetDate.' '.$one->meetTime)):'week on '.date('D \a\t h:ia',strtotime($one->meetDate.' '.$one->meetTime))}}
                                                                        </p>

                                                                        <div class=" " id="collapse-icon_{{$one->id}}">
                                                                            <div class="">
                                                                                <div class="col-sm-6">
                                                                                    <h6 class="">
                                                                                        <div class="">
                                                                                            <a href="javascript:void(0);" class="bg-white " data-container="card-body" data-flip="false" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                                                <u>Staffs</u>
                                                                                            </a>
                                                                                            <div class="dropdown-menu">
                                                                                                @foreach($one->one_staffs as $staffs)
                                                                                                    <span class="m-4">{{user_details_by_id($staffs->user_id)->name}}</b></span><br>
                                                                                                @endforeach
                                                                                            </div>
                                                                                        </div>
                                                                                    </h6>
                                                                                    <h6 class="">
                                                                                        <div class="">
                                                                                            <a href="javascript:void(0);" class="bg-white" data-card="body" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                                                <u>Agenda Points</u>
                                                                                            </a>
                                                                                            <div class="dropdown-menu">
                                                                                                @foreach($one->template_agendas as $agenda)
                                                                                                    <span class="m-4 text-nowrap">{{ucfirst($agenda->agenda)}}</span><br>
                                                                                                @endforeach
                                                                                            </div>
                                                                                        </div>
                                                                                    </h6>
                                                                                </div>

                                                                            </div>

                                                                        </div>

                                                                        <div class="mt-32">
                                                                            <div class="row">
                                                                                <div class="col-md-6">
                                                                                    <button type="button" class="btn btn-raised ripple btn-raised-danger delete_one" name="delete_{{$one->id}}" data-one="{{$one->id}}" data-ajaxroute="{{route('one.delete',$one->id)}}">
                                                                                        <span class="ul-btn__icon"><i class="i-Close-Window"></i></span>
                                                                                        <span class="ul-btn__text">Delete</span>
                                                                                    </button>
                                                                                    <button type="button" class="btn btn-linkedin btn-icon edit-one" name="edit_{{$one->id}}" data-one="{{$one->id}}" data-ajaxroute="{{route('one.edit',$one->id)}}">
                                                                                        <span class="ul-btn__icon"><i class="i-Pen-2"></i></span>
                                                                                        <span class="ul-btn__text">Edit</span>
                                                                                    </button>
                                                                                </div>
                                                                                <div class="col-md-6 ">
                                                                                    <label class="switch switch-success float-right" title="Activate">
                                                                                        <input type="checkbox" name="switch_{{$one->id}}" data-one="{{$one->id}}" data-ajaxroute="{{route('one.deactivate',$one->id)}}" class="unswitch switch_validate">
                                                                                        <span class="slider"></span>
                                                                                    </label>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                    @endif
                                                @endforeach
                                                </div>
                                                @if($count==0)
                                                    <div class="">
                                                        <div class="col-md-12 text-center mt-32"><h4 class="text-mute mb-4">No in-active 1:1 found</h4></div>
                                                    </div>
                                                @endif
                                            </div>
                                        @else
                                            <div class="tab-pane active" id="nav-active" role="tabpanel" aria-labelledby="nav-active-tab">
                                                <div class="">
                                                    <div class="col-md-12 text-center mt-32"><h4 class="text-mute mb-4">No active 1:1 found</h4></div>
                                                </div>
                                            </div>
                                        @endif

                                    </div>

                                </div>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
        @endcan
    </div>

    <div class="modal fade create-one" id="one_modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <form action="{{route('one.create')}}" method="post" name="frmOne" class="create-items needs-validation" novalidate>
                    @csrf
                    <input type="hidden" name="action" id="action" value="create">
                    <input type="hidden" name="one" id="one" value="0">
                    <input type="hidden" name="agendaLen" id="agendaLen" value="1">
                <div class="modal-body">
                    <textarea rows="1" tabindex="0" name="oneTitle" required="required" id="oneTitle" data-test="draft-view__title-task" cuslashcommandinput="" cdktextareaautosize="" cdkautosizeminrows="1" data-gramm="false" autocomplete="off" data-1p-ignore="" data-form-type="other" class="cdk-textarea-autosize" placeholder="Start typing a 1:1 title here"></textarea>
                    <div class="invalid-feedback">The Title is required.</div>
                    <div class="row">
                        <div class="col-md-12 form-group mt-24 mb-3">
                            <label for="oneTypeId">1:1 Types</label>
                            <select name="oneTypeId" id="oneTypeId" class="form-control" required>
                                @if(is_object($arrOneTypes) && count($arrOneTypes)>0)
                                    @foreach($arrOneTypes as $oneTypes)
                                        <option value="{{$oneTypes->id}}">{{$oneTypes->name}}</option>
                                    @endforeach
                                @else
                                    <option value="">-NONE FOUND-</option>
                                @endif
                            </select>
                        </div>

                        <div class="col-md-12 form-group mb-3">
                            <label for="frequencyId">Frequency</label>
                            <select name="frequencyId" id="frequencyId" class="form-control" required>
                                @if(is_object($frequencies) && count($frequencies)>0)
                                    @foreach($frequencies as $frequency)
                                        <option value="{{$frequency->id}}">{{$frequency->name}}</option>
                                    @endforeach
                                @else
                                    <option value="">-NONE FOUND-</option>
                                @endif
                            </select>
                        </div>

                        <div class="col-md-12 form-group mb-3">
                            <label for="meetDate">When is first 1:1 Event</label>
                            <div class="row">
                                <div class="col-md-6">
                                    <input id="meetDate"  class="form-control" placeholder="date..." name="meetDate" required="required">
                                    <div class="invalid-feedback">The DATE field is required.</div>
                                </div>
                                <div class=" col-md-6">
                                    <input id="meetTime"  class="form-control" placeholder="time..." name="meetTime" required="required">
                                    <div class="invalid-feedback">The TIME field is required.</div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12 form-group mb-3">
                            <label for="staffs">Staffs</label>
                            <select name="staffs[]" class="form-control mutiselect search_init" style="display: none" id="staffs" multiple required="required">
                                @if(isset($deptUsers))
                                    @foreach($deptUsers as $userGroup=>$userArr)
                                        <optgroup label="Everyone in the {{$userGroup}} dept" class="font-weight-bold">
                                            @foreach($userArr as $userID=>$userName)
                                                <option value="{{$userID}}" >{{$userName}}</option>
                                            @endforeach
                                        </optgroup>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                        <div class="col-md-12 form-group mb-3">
                            <label for="staffs">Department</label>
                            <select name="department_id[]" class="form-control mutiselect search_init" style="display: none" id="department_id" multiple required="required">
                                {{--<option value="" >-Select-</option>--}}
                                @if(isset($departments))
                                @foreach($departments as $deptID=>$dept)
                                <option value="{{$deptID}}" >{{$dept}}</option>
                                @endforeach
                                @endif
                            </select>
                        </div>
                        <div class="col-md-12 form-group mb-3">
                            <label for="todo-list-item">Agenda</label>
                            <div class="row">
                                <div class="col-md-12">
                                    <input type="text" class="form-control" id="todo-list-item" placeholder="Start typing one to one agenda points here">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 form-group mb-3" id="todo_wrap"><ul id="show-todo-items"></ul></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary btn-success">Create 1:1 Cycle</button>
                </div>
                </form>
            </div>
        </div>
    </div>


@endsection
@section('page-js')
    <script src="{{asset('assets/js/vendor/pickadate/picker.js')}}"></script>
    <script src="{{asset('assets/js/vendor/pickadate/picker.date.js')}}"></script>
    <script src="{{asset('assets/js/vendor/pickadate/picker.time.js')}}"></script>
    <script src="{{asset('assets/js/vendor/quill.min.js')}}"></script>
    <script src="{{ asset('js/bootstrap-multiselect.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.js" data-turbolinks-track="true"></script>
    <script src="{{asset('assets/js/one.js')}}"></script>
    <script src="{{asset('assets/js/form.validation.script.js')}}"></script>
@endsection