@extends('admin.layouts.main')

@section('title')
@if($edit)
Edit Meeting
@else
Add Meeting
@endif

@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 active" aria-current="page">
                        <a href="{{ route('admin.calendar.index', ['panel' => Session::get('panel')]) }}">{{ @trans('calendar.calendar') }}</a>
                    </li>
                    @if($edit)
                        <li class="breadcrumb-item active" aria-current="page">{{ @trans('calendar.edit_meeting') }}</li>
                    @else
                        <li class="breadcrumb-item active" aria-current="page">{{ @trans('calendar.add_meeting') }}</li>
                    @endif
                </ol>
            </nav>
            <div class="form-sec">
                <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 autofill="false" method="post"
                                    action="{{ route('admin.calender.store_meeting', ['panel' => Session::get('panel') ]) }}" id="storeMeeting">@csrf
                                    <div class="form-body">
                                        @if($edit)
                                        <h2 class="form-sec-title">{{ @trans('calendar.edit_meeting') }}</h2>
                                        <input type="hidden" name="id" value="{{ $meeting->id }}">
                                        @else
                                        <h2 class="form-sec-title">{{ @trans('calendar.add_meeting') }}</h2>
                                        @endif

                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('calendar.meeting_title') }} <span
                                                            class="required">*</span></label>
                                                    <input type="text" name="title" id="title" class="form-control bg-white" placeholder="Enter Meeting Title"
                                                        value="@if($edit) {{ $meeting->title ?? '' }} @endif"/>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('calendar.date') }} <span
                                                            class="required">*</span></label>
                                                    <input type="text" name="date" id="date" class="form-control bg-white" readonly placeholder="Enter Date"
                                                        value="@if($edit) {{ date('d/m/Y', strtotime($meeting->date)) }} @endif"/>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('calendar.start_time') }} <span
                                                            class="required">*</span></label>
                                                    <input type="text" name="start_time" id="start_time" class="form-control timepicker" placeholder="Enter Start Time"
                                                        onkeydown="return (event.keyCode == 9) ? true : false"
                                                        value="@if($edit) {{ date('H:i', strtotime($meeting->start_time)) }} @endif"/>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('calendar.end_time') }} <span
                                                            class="required">*</span></label>
                                                    <input type="text" name="end_time" class="form-control timepicker" id="end_time" placeholder="Enter End Time"
                                                        onkeydown="return (event.keyCode == 9) ? true : false"
                                                        value="@if($edit) {{ date('H:i', strtotime($meeting->end_time)) }} @endif"/>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label
                                                        class="control-label">{{ @trans('calendar.type') }}
                                                        <span class="required">*</span></label>
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" class="custom-control-input" id="internal" name="type" value="internal" checked
                                                            @if($edit && $meeting->type == 'internal') checked @endif >
                                                        <label class="custom-control-label"
                                                            for="internal">{{ @trans('calendar.internal') }}</label>
                                                    </div>
                                                    <div class="custom-control custom-radio">
                                                        <input type="radio" class="custom-control-input" id="external" name="type" value="external"
                                                            @if($edit && $meeting->type == 'external') checked @endif>
                                                        <label class="custom-control-label"
                                                            for="external">{{ @trans('calendar.external') }}</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <h2 class="form-sec-title">Internal Attendees</h2>
                                            </div>
                                            <div class="row col-md-12 internal_attendees_div">
                                                @if($edit)
                                                    @php $intMembers = $meeting->internalMembers->groupBy('department_id'); @endphp
                                                    @foreach($intMembers as $deptId => $users)
                                                        <div class="row col-md-12 m-0 p-0 appended_int_dept" data-id="{{ $loop->iteration }}">
                                                            <div class="col-md-6">
                                                                <div class="form-group btm-arrow select">
                                                                    <label class="control-label">Department</label>
                                                                    <select class="form-control" name="int_dept[{{ $loop->iteration }}]">
                                                                        <option value="" hidden="">Select</option>
                                                                        @foreach ($departments as $dept)
                                                                            <option value="{{ $dept->id }}"
                                                                                @if($dept->id == $deptId) selected @endif>{{ $dept->name }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-5">
                                                                <div class="form-group btm-arrow select">
                                                                    <label class="control-label">Team Members</label>
                                                                    <select class="form-control select-two" name="int_team[{{ $loop->iteration }}][]" multiple="multiple">
                                                                        @foreach($staffMembersList as $user)
                                                                            <option value="{{ $user->id }}"
                                                                                @foreach($users as $member)
                                                                                @if($member->user_id == $user->id) selected @endif
                                                                                @endforeach>{{ $user->full_name }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-1 mt-1">
                                                                <label class="control-label"></label>
                                                                @if($loop->index == 0)
                                                                    <a href="javascript:void(0)" class="btn add-row add-internal-members-row" title="Add"><i
                                                                        class="material-icons">add</i></a>
                                                                @else
                                                                    <a href="javascript:void(0)" class="btn remove-row remove_int_dept" title="Remove"><i
                                                                        class="material-icons">close</i></a>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                @else
                                                    <div class="row col-md-12 m-0 p-0 appended_int_dept" data-id="1">
                                                        <div class="col-md-6">
                                                            <div class="form-group btm-arrow select">
                                                                <label class="control-label">Department</label>
                                                                <select class="form-control" name="int_dept[1]">
                                                                    <option value="" hidden="">Select</option>
                                                                    @foreach ($departments as $dept)
                                                                        <option value="{{ $dept->id }}">{{ $dept->name }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-5">
                                                            <div class="form-group btm-arrow select">
                                                                <label class="control-label">Team Members</label>
                                                                <select class="form-control select-two" name="int_team[1][]" multiple="multiple">
                                                                    @foreach($staffMembersList as $user)
                                                                        <option value="{{ $user->id }}">{{ $user->full_name }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-1 mt-1">
                                                            <label class="control-label"></label>
                                                            <a href="javascript:void(0)" class="btn add-row add-internal-members-row" title="Add"><i class="material-icons">add</i></a>
                                                        </div>
                                                    </div>
                                                @endif
                                            </div>
                                            <div class="col-md-12"><hr/></div>
                                            <div class="col-md-12 p-0 pb-3 external_attendees_section @unless($edit && $meeting->type == 'external') hidden @endunless">
                                                <div class="col-md-12">
                                                    <h2 class="form-sec-title">External Attendees</h2>
                                                </div>
                                                <div class="row col-md-12 external_attendees_div">
                                                    @if($edit && $meeting->type =='external')
                                                        @php $extMembers = $meeting->externalMembers->groupBy('company_id'); @endphp
                                                        @foreach($extMembers as $companyId => $contacts)
                                                        @php $extContactIds = $meeting->externalMembers->pluck('contact_id')->toJson(); @endphp
                                                            <div class="row col-md-12 m-0 p-0 appended_ext_dept" data-id="1">
                                                                <div class="col-md-6">
                                                                    <div class="form-group btm-arrow select">
                                                                        <label class="control-label">Company</label>
                                                                        <select class="form-control ext_company" name="ext_company[1]" data-id="{{ $extContactIds }}">
                                                                            <option value="" hidden="">Select</option>
                                                                            @foreach($companyList as $company)
                                                                                <option value="{{ $company->id }}"
                                                                                    @if($companyId == $company->id) selected @endif>{{ $company->name }}</option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="form-group btm-arrow select">
                                                                        <label class="control-label">Contact Persons</label>
                                                                        <select class="form-control select-two" name="ext_contact[1][]" multiple="multiple">
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                {{-- <div class="col-md-1 mt-1">
                                                                    @if($loop->index == 0)
                                                                    <label class="control-label"></label>
                                                                    <a href="javascript:void(0)" class="btn add-row add-external-members-row" title="Add"><i class="material-icons">add</i></a>
                                                                    @else
                                                                    <label class="control-label"></label>
                                                                    <a href="javascript:void(0)" class="btn remove-row remove_ext_dept" title="Remove"><i class="material-icons">close</i></a>
                                                                    @endif
                                                                </div> --}}
                                                            </div>
                                                        @endforeach
                                                    @else
                                                        <div class="row col-md-12 m-0 p-0 appended_ext_dept" data-id="1">
                                                            <div class="col-md-6">
                                                                <div class="form-group btm-arrow select">
                                                                    <label class="control-label">Company</label>
                                                                    <select class="form-control ext_company" name="ext_company[1]">
                                                                        <option value="" hidden="">Select</option>
                                                                        @foreach($companyList as $company)
                                                                            <option value="{{ $company->id }}">{{ $company->name }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-6">
                                                                <div class="form-group btm-arrow select">
                                                                    <label class="control-label">Contact Persons</label>
                                                                    <select class="form-control select-two" name="ext_contact[1][]" multiple="multiple">
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            {{-- <div class="col-md-1 mt-1">
                                                                <label class="control-label"></label>
                                                                <a href="javascript:void(0)" class="btn add-row add-external-members-row" title="Add"><i class="material-icons">add</i></a>
                                                            </div> --}}
                                                        </div>
                                                    @endif
                                                </div>
                                                <div class="col-md-12"><hr/></div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group btm-arrow select">
                                                    <label class="control-label" for="meeting_type">Meeting Type <span class="required">*</span></label>
                                                    <select class="form-control" id="meeting_type" name="meeting_type">
                                                        <option value="" hidden>Select</option>
                                                        <option value="Face To Face" @if($edit && $meeting->meeting_type == 'Face To Face') selected @endif>Face To Face</option>
                                                        <option value="Skype" @if($edit && $meeting->meeting_type == 'Skype') selected @endif>Virtual</option>
                                                        <option value="Telephone" @if($edit && $meeting->meeting_type == 'Telephone') selected @endif>Telephone</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label class="control-label">{{ @trans('calendar.meeting_information') }}<span class="required">*</span></label>
                                                    <input type="text" name="location" class="form-control" placeholder="Enter Meeting Information"
                                                        value="@if($edit) {{ $meeting->location }} @endif"/>
                                                </div>
                                            </div>
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label
                                                        class="control-label">{{ @trans('calendar.notes') }}</label>
                                                    <textarea name="notes" class="form-control"
                                                        placeholder="Notes">@if($edit) {{ $meeting->notes }} @endif</textarea>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <div class="custom-control custom-checkbox mr-3">
                                                        <input type="checkbox" class="custom-control-input" value="yes"
                                                            name="is_notified" id="is_notified">
                                                        <label class="custom-control-label" for="is_notified">{{ @trans('calendar.notify_attendees') }}</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-btn">
                                        <div style="float: left;">
                                            <a href="{{ route('admin.calendar.index', ['panel' => Session::get('panel')]) }}"
                                                class="btn btn-cncl">{{ @trans('company.cancel') }}</a>
                                        </div>
                                        <div style="float:right;">
                                            <input type="submit" class="btn step-btn submit-btn"
                                                value="{{ @trans('company.save') }}">
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection


@push('pageJs')
{!! JsValidator::formRequest('App\Http\Requests\Calendar\StoreMeeting', '#storeMeeting') !!}
<script>
    var departmentList  = {!! json_encode($departments) !!}
    var staffMembersList = {!! json_encode($staffMembersList) !!}
    var companyList = {!! json_encode($companyList) !!}
    var getContactsByCompanyId = '{{ route("common.select2OptionsById", ["panel" => Session::get("panel"), "id" => null]) }}'
</script>
<script src="{{ asset('js/admin/calendar/meeting.js') }}"></script>
<script>
    $(document).ready(function(){
        @if($edit)
            $('.ext_company').trigger('change');
            $('#start_time').trigger('change')
            $('#end_time').trigger('change')
        @endif

        $('#storeMeeting').on('submit', function(e) {
            e.preventDefault();
            if($('#storeMeeting').valid()) {
                $(".submit-btn").prop("disabled", true).val("Please Wait...");
                e.currentTarget.submit();
            }
        });
    })
</script>
@endpush