@extends('layouts.app')

@section('form-title') {{ __(ucfirst(\Illuminate\Support\Str::singular($org_type))) }} - {{ $organisation->name }}@endsection
@section('form-sub-title') {{ __($organisation->type_names) }} @endsection

@section('breadcrumb') 
  @if($type_available)
    <li class="breadcrumb-item"><a href="{{ route('organisations.index', ['type' => $org_type]) }}">{{ __(ucfirst($org_type)) }}</a> </li> 
  @else
    <li class="breadcrumb-item"><a href="{{ route('organisations.index') }}">{{ __(ucfirst($org_type)) }}</a> </li> 
  @endif
  <li class="breadcrumb-item">{{ __(ucfirst(\Illuminate\Support\Str::singular($org_type))) }} </li> 
@endsection

@section('content')

<style>
  #show-map {
    height: 200px;
    /* The height is 400 pixels */
    width: 100%;
    /* The width is the width of the web page */
  }
</style>
    

<div class="pcoded-inner-content">
    <div class="main-body">
      <div class="page-wrapper">
        <!-- Page body start -->
        <div class="page-body">
          <div class="row">
            <div class="col-sm-12">
                <div class="card mb-4">
                    <div class="card-block">
                        <div class="row">
                            <div class="col-sm-12">
                                <!-- Nav tabs -->
                                <ul class="nav nav-tabs md-tabs" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" data-bs-toggle="tab" href="#main" loaded="yes" role="tab">{{ __('Main information') }}</a>
                                        <div class="slide"></div>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-bs-toggle="tab" href="#projects" loaded="no" role="tab">{{ __('Projects') }}</a>
                                        <div class="slide"></div>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-bs-toggle="tab" href="#tasks" loaded="no" role="tab">{{ __('Tasks') }}</a>
                                        <div class="slide"></div>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-bs-toggle="tab" href="#contacts" loaded="no" role="tab">{{ __('Contacts') }}</a>
                                        <div class="slide"></div>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-bs-toggle="tab" href="#groups" loaded="no" role="tab">{{ __('Groups') }}</a>
                                        <div class="slide"></div>
                                    </li>
                                </ul>
                                <!-- Tab panes -->
                                <div class="tab-content card-block p-0">
                                    {{-- Main information start --}}
                                    @include('organisations.includes.main-info')
                                    {{-- Main information end --}}

                                    {{-- Projects start --}}
                                    @include('organisations.includes.projects')
                                    {{-- Projects end --}}

                                    {{-- Tasks start --}}
                                    @include('organisations.includes.tasks')
                                    {{-- Tasks end --}}

                                    {{-- Contacts start --}}
                                    @include('organisations.includes.contacts')
                                    {{-- Contacts end --}}

                                    {{-- Groups start --}}
                                    @include('organisations.includes.groups')
                                    {{-- Groups end --}}
                                </div>
                                <input type="hidden" name="active_tab" id="active_tab" value="main">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Page body end -->
    </div>
  </div>
</div>
@endsection

@push('child-scripts')
@if(!empty($organisation->latitude) && !empty($organisation->longitude))
<script src="https://maps.googleapis.com/maps/api/js?key={{ config('furnit.google_map_key') }}&callback=initMap&libraries=&v=weekly&channel=2" async></script>
<script>
  // Initialize and add the map
function initMap() {
  // The location of Uluru
  const uluru = { lat: {{ $organisation->latitude }}, lng: {{ $organisation->longitude }} };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("show-map"), {
    zoom: 20,
    center: uluru,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}
</script>
@endif

<script>
$(document).ready(function() {
  var organisation = '{{ $organisation->id }}';

  $(document).on('click', '.parent-pagination a', function(event){
    event.preventDefault();
    let page = $(this).attr('href').split('page=')[1];
    let type = $('#active_tab').val();
    fetch_data(page, type, organisation);
  });

  $(document).on('click', '.child-pagination a', function(event){
    event.preventDefault();
    let page = $(this).attr('href').split('page=')[1];
    let type = $('#task_active_tab').val();
    fetch_data(page, type, organisation);
  });

  function fetch_data(page, type, organisation){
    let project_status = '';
    if(type === 'projects'){
      project_status = $('#status').val();
    }
    $.ajax({
      url: "{{ route('organiation.tab.data') }}",
      data: {page: page, type: type, organisation: organisation, project_status: project_status},
      success: function(data){
        $('#'+type).html(data);
        initFooTable();
      }
    });
  }

  initFooTable();
  
  function initFooTable(){
    $('.data-table').footable({
      "paging": {
        "enabled": false,
      },
      "sorting": {
        "enabled": true
      }
    });
  }

  $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
    let loaded = $(e.target).attr("loaded");
    let type = $(e.target).attr("href").split('#')[1];
    let page = 1;
    // check for tasks inner tabs
    if(type === 'open' || type === 'waiting' || type === 'closed'){
      $('#task_active_tab').val(type);
    }else{
      $('#active_tab').val(type);
    }
    
    if(loaded !== 'yes' && type != 'tasks'){
      fetch_data(page, type, organisation);
      // mark this tab as already loaded
      $(e.target).attr("loaded", 'yes');
    }
  });

  $(document).on('click', '#btn-add-group', function(){
    let url = "{{ route('groups.store') }}";
    $('#modal-group').modal('show');
    $('#modal-title').html("{{ __('Add group') }}");
    $('#frm-group').attr('action', url);
    $('#group_name').val('');
    $('#_method').val('POST');
  });

  $(document).on('click', '.ge', function(e){
    let group_id = $(this).data('group-id');
    let group_name = $(this).data('group-name');
    let url = "{{ route('groups.update', ':id') }}".replace(':id', group_id)
    
    $('#modal-group').modal('show');
    $('#modal-title').html("{{ __('Update group') }}");
    $('#group_name').val(group_name);
    $('#frm-group').attr('action', url);
    $('#_method').val('PUT');
  });

  $(document).on('submit', '#frm-group', function(e){
    e.preventDefault();

    $.ajax({
        type: $('#frm-group').attr('method'),
        url: $('#frm-group').attr('action'),
        data: $(this).serialize(),
        success: function(resp){
            if(resp.error){
                $.each(resp.messages, function(key, msg) {
                    $('#'+key+'_msg').html(msg);
                    $('#'+key+'_msg').show();
                });
            }else{
              let type = $('#active_tab').val();
              $('#modal-group').modal('hide');
              alertSuccess(resp.messages[0]);
              fetch_data(1, type, organisation);
            }
        },
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
  });

  $(document).on('click', '.gd', function(e){
    let group_id = $(this).data('group-id');

    swal({
        title: '{{ __("Are you sure you want to delete this group?") }}',
        text: "",
        type: "warning",
        showCancelButton: true,
        cancelButtonText: '{{ __("No") }}',
        confirmButtonColor: "#DC3545",
        confirmButtonText: '{{ __("Yes") }}',
        closeOnConfirm: false
    },
    function(){
        $.ajax({
            type: 'POST',
            url: "{{ route('groups.destroy', ':id') }}".replace(':id', group_id),
            data:{_method: 'DELETE'},
            success: function(resp){
              let type = $('#active_tab').val();
              swal.close();
              alertSuccess('{{ __("Group deleted successfully!") }}');
              fetch_data(1, type, organisation);
            },
            headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    });
  });

  function alertSuccess(msg){
    Swal.fire({
      position: 'top-end',
      icon: 'success',
      title: msg,
      showConfirmButton: false,
      timer: 2500
    });
  }

  $(document).on('change', '#status', function(){
    fetch_data(1, 'projects', organisation);
  });
});

</script>
@endpush