@extends('layouts.admin_dynamic')

@section('content')
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header m-3">
      <h1>{{__('Employees')}}
        @if($user->checkSpPermission('setting.employe.create'))
        <a class="btn btn-small btn-primary pull-right left-margin-10" href="#addEmployeeModal" data-toggle="modal"><i class="fa fa-plus"></i> {{trans('employee.new_employee')}}</a>
          @endif
        @if($user->checkSpPermission('setting.employee.role'))
          <a class="btn btn-small btn-success pull-right left-margin-10" href="#createRole" data-toggle="modal"><i class="fa fa-plus"></i> {{__('Create Role')}}</a>
          @endif
          <a class="btn btn-small btn-info pull-right left-margin-10" href="{{route('permissions.list')}}" data-toggle="modal"><i class="fa fa-plus"></i> {{__('Permissions')}}</a></h1>
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-xs-12">
        <div class="box box-success">
            <div class="box-header">
              @include('partials.filters', ['filter_route'=>url('/employees'), 'filter_id'=>'employeeFilter'])
            </div>
            <div class="box-body">
              @include('employee.table')
			      </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
</div>

<div class="modal fade" id="addEmployeeModal">
  <div class="modal-dialog modal-lg">
      @include('employee.form', ['employee'=>''])
  </div>
</div>

{{-- Link Admin as Agent Modal --}}
<div class="modal fade" id="linkAgentModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">
          <i class="fa fa-link"></i> Link <strong id="linkAgentAdminName"></strong> as Agent
        </h4>
      </div>
      <div class="modal-body">
        <div id="linkAgentAlert" class="alert" style="display:none;"></div>
        <div class="form-group">
          <label>Location <small class="text-muted">(optional)</small></label>
          <input type="text" id="linkAgentLocation" class="form-control" placeholder="e.g. Nairobi">
        </div>
        <div class="form-group">
          <label>Additional Info <small class="text-muted">(optional)</small></label>
          <textarea id="linkAgentAddInfo" class="form-control" rows="3" placeholder="Notes about this agent..."></textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" id="btnSubmitLinkAgent" class="btn btn-warning">
          <i class="fa fa-link"></i> Link as Agent
        </button>
      </div>
    </div>
  </div>
</div>

<script>
$(document).on('click', '.btn-link-agent', function () {
    var adminId   = $(this).data('admin-id');
    var adminName = $(this).data('admin-name');
    $('#linkAgentAdminId').val(adminId);
    $('#linkAgentAdminName').text(adminName);
    $('#linkAgentLocation').val('');
    $('#linkAgentAddInfo').val('');
    $('#linkAgentAlert').hide().removeClass('alert-success alert-danger').text('');
});

$('#btnSubmitLinkAgent').on('click', function () {
    var btn = $(this).prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Linking...');

    $.ajax({
        url: '{{ route("agents.request.post") }}',
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            admin_id: $('#linkAgentAdminId').val(),
            location: $('#linkAgentLocation').val(),
            add_info: $('#linkAgentAddInfo').val(),
        },
        success: function (res) {
            // res.notify is an object like {success: 'msg'} or {error: 'msg'}
            var notify = res.notify || {};
            var isError = notify.hasOwnProperty('error') || notify.hasOwnProperty('danger');

            if (isError) {
                var msg = notify.error || notify.danger || 'Error linking agent.';
                $('#linkAgentAlert').addClass('alert-danger').text(msg).show();
            } else {
                // Reload the employee table
                $.get('{{ url("/employees") }}', function(html) {
                    var newTable = $(html).find('#employeeTable');
                    if (newTable.length) {
                        $('#employeeTable').replaceWith(newTable);
                    }
                });
                $('#linkAgentModal').modal('hide');
                $('body').prepend('<div class="alert alert-success alert-dismissible" style="position:fixed;top:65px;left:50%;transform:translateX(-50%);z-index:9999;min-width:300px;text-align:center;" role="alert"><button type="button" class="close" data-dismiss="alert">&times;</button>Employee linked as agent successfully!</div>');
                setTimeout(function(){ $('.alert-dismissible').fadeOut(400, function(){ $(this).remove(); }); }, 3000);
            }
        },
        error: function (xhr) {
            var msg = 'An error occurred. Please try again.';
            try { msg = xhr.responseJSON.message || msg; } catch(e){}
            $('#linkAgentAlert').addClass('alert-danger').text(msg).show();
        },
        complete: function () {
            $('#btnSubmitLinkAgent').prop('disabled', false).html('<i class="fa fa-link"></i> Link as Agent');
        }
    });
});
</script>

<input type="hidden" id="linkAgentAdminId">

@endsection