@extends('layouts.usermaster')

@section('title')
@if ($meeting->id == 0) New Meeting @else Edit Meeting @endif
@endsection

@section('content.header.title')
<strong>@if ($meeting->id == 0) New Meeting @else Edit Meeting @endif</strong>
@endsection

@section('css')
<link rel="stylesheet" type="text/css"
  href="{{ asset('js/plugins/daterangepicker/daterangepicker.css') }}" />
<link rel="stylesheet" type="text/css"
  href="{{ asset('js/plugins/select2/css/select2.min.css') }}" />
<link rel="stylesheet" type="text/css"
  href="{{ asset('js/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}" />
<link rel="stylesheet" type="text/css"
  href="{{ asset('js/plugins/bootstrap-switch/css/bootstrap3/bootstrap-switch.min.css') }}" />
@endsection

@section('content')
<section class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="card card-primary">
          <form role="form" method="POST"
            @if($meeting->current_flag == 1) action="{{url('/user/meetings')}}" @endif
            id="mtgForm">
            @if ($meeting->id > 0) @method('PUT') @endif
            @csrf
            <input type="hidden" id="id" name="id" value="{{$meeting->id}}">
            <input type="hidden" id="start_datetime" name="start_datetime"
              value="{{$meeting->start_datetime}}">
            <input type="hidden" id="end_datetime" name="end_datetime"
              value="{{$meeting->end_datetime}}">
            <input type="hidden" id="attendees" name="attendees"
              value="">
            <div class="card-body">
              <div class="form-group">
                <label for="title">Topic</label>
                <input class="form-control" id="title" name="title" placeholder="My Meeting"
                  value="{{$meeting->title}}" required @if ($meeting->current_flag == 0) readonly
                @endif>
              </div>
              <div class="form-group">
                <label for="notes">Description</label>
                <textarea class="form-control" rows="3"
                  placeholder="Enter your meeting description" name="notes"
                  id="notes" @if ($meeting->current_flag == 0) readonly
                  @endif>{{$meeting->notes}}</textarea>
              </div>
              <hr />
              <div class="form-row">
                <div class="form-group col-md-6">
                  <label for="date_range">When</label>
                  <div class="input-group">
                    <input type="text" class="form-control" placeholder=""
                      aria-label="" aria-describedby="reportrange"
                      id="date_range" name="date_range" readonly>
                    <div class="input-group-append">
                      <button class="btn btn-outline-secondary" type="button"
                        id="reportrange">
                        <i class="fa fa-calendar"></i>
                      </button>
                    </div>
                  </div>
                </div>
                <div class="form-group col-md-6">
                  <label for="tz_name">Time Zone</label>
                  <select class="form-control" id="tz_name" name="tz_name"
                    @if($meeting->current_flag == 0) readonly @endif>
                    @foreach($timezone as $id =>$name)
                    <option value="{{$id}}" @if($meeting->tz_name == $id) selected @endif >
                      {{$name}}</option>
                    @endforeach
                  </select>
                </div>
              </div>
              <hr />
              <div class="form-group">
                <label for="notes">Guests</label>
                <select name="guests" id="guests" class="form-control"
                  multiple="multiple">
                  @foreach($meeting->attendees as $att)
                  <option value="{{$att->email}}">{{$att->email}}</option>
                  @endforeach
                </select>
              </div>
              <div class="form-group">
                <label for="record_flag">Record Meeting</label>
                <input type="checkbox" id="record_flag" name="record_flag"
                  @if($meeting->record_flag == 1)
                checked
                @endif data-bootstrap-switch>
              </div>
              @if($meeting->id > 0)
              <hr />
              <div class="form-row">
                <div class="form-group col-md-4">
                  <label for="date_range">Meeting #</label>
                  <input class="form-control" type="text" placeholder=""
                    value="{{ $meeting->meeting_num }}" readonly>
                </div>
                <div class="form-group col-md-4">
                  <label for="date_range">Moderator Access Code</label>
                  <input class="form-control" type="text" placeholder=""
                    value="{{ $meeting->access_code }}" readonly>
                </div>
                <div class="form-group col-md-4">
                  <label for="date_range">Participant Access Code</label>
                  <input class="form-control" type="text" placeholder=""
                    value="{{ $meeting->user_code }}" readonly>
                </div>
              </div>
              @endif
            </div>
            <div class="card-footer">
              <a href="/user/meetings/" class="btn btn-default" role="button"
                aria-pressed="true">Cancel</a>
              @if ($meeting->current_flag != 0)
              <button type="button" id="saveButton" name="saveButton"
                class="btn btn-primary float-right">Save</button>
              @endif
            </div>

          </form>
        </div>
        <!-- /.card -->
      </div>
    </div>
  </div>
</section>
@endsection('content')

@section('javascript')
<script type="text/javascript" src="{{ asset('js/plugins/daterangepicker/moment.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/plugins/daterangepicker/daterangepicker.js') }}"></script>
<script src="{{ asset('js/plugins/select2/js/select2.min.js') }}"></script>
<script src="{{ asset('js/plugins/bootstrap-switch/js/bootstrap-switch.min.js') }}"></script>
<script src="{{ asset('js/pages/page_base.js') }}"></script>
<script src="{{ asset('js/pages/user/meetinginfo.js') }}"></script>
@endsection


@section('page_script')
<script>
window.onload = function () {
 
   $("#saveButton").click(function () {
    saveMeeting();
   });

  @if (@isset($meeting) && $meeting->id > 0)
  var start = moment('{{ $meeting->start_datetime}}');
  var end = moment('{{ $meeting->end_datetime}}');
   var sel = [
  @foreach($meeting->attendees as $att)
  '{{$att->email}}',
  @endforeach
];
  @else
   var sel = [];
  var start = '', end = '';
  @endif

  setDatePickers(start, end);
  setGuests(sel);

  $("#record_flag").each(function(){
  $(this).bootstrapSwitch('state', $(this).prop('checked'));
  });
};

    </script>
@endsection