@extends('layouts.app')

@section('form-title') {{ __(ucfirst($org_type)) }} @endsection

@section('breadcrumb') 
  @if(!empty($org_type))
  <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') }}">{{ __('Organisations') }}</a> </li> 
  @endif
@endsection
    
@section('content')
<div class="pcoded-inner-content">
  <div class="main-body">
    <div class="page-wrapper">
      <div class="page-body">
        <div class="row">
          @php
            $add_ability = empty($org_type) ? 'create other organizations' : 'add ' . $org_type . ' organisations';
          @endphp
          @if(canViewUpdate($add_ability))
          {{-- Add new organisation --}}
          <div class="col-sm-5">
            <div class="card mb-0">
              <div class="card-header">
                <h5>{{ __('New ' .$org_type) }}</h5>
              </div>
              <div class="card-block">
                <div class="input-group">
                  @if(!empty($org_type))
                    <a class="btn btn-primary" href="{{ route('organisations.create', ['type' => $org_type]) }}"> 
                      {{ __('Add new '.$org_type) }} 
                    </a>
                  @else
                    <a class="btn btn-primary" href="{{ route('organisations.create') }}"> 
                      {{ __('Add new organisation') }} 
                    </a>
                  @endif
                </div>
              </div>
            </div>
          </div>
          @endif
          {{-- Add new organisation end --}}
          <div class="col-sm-7">
            <div class="card">
              <div class="card-header">
                <h5>{{ __('Search '. $org_type) }}</h5>
              </div>
              <div class="card-block">
                <form action="{{ route('organisation.search') }}" method="post">
                  @csrf
                  <div class="input-group">
                    <input type="text" name="search" id="search_org" class="form-control" placeholder="{{ __('Search for') }}" value="@if(!empty($search)) {{ $search }} @endif">
                    <input type="hidden" name="org_type" id="org_type" value="{{ $org_type }}">
                    <button class="btn btn-primary" type="submit" id="btn_search_org">
                      <span id="search_spinner" class="spinner-border spinner-border-sm" style="display: none;"></span>
                      {{ __('Search') }}
                    </button>
                  </div>
                </form>
                <div id="search-box"></div>
              </div>
            </div>
          </div>
          {{-- Search end --}}
        </div>
        <div class="row">
          <div class="card">
            <div class="card-header">
              <h5>{{ __($org_type) }}</h5>
            </div>
            <div class="card-block">
              <div class="row mb-3">
                <div class="table-responsive">
                  <table class="table table-striped data-table">
                    <thead>
                      <tr>
                        <th>{{ __(ucfirst($org_type)) }}</th>
                        <th data-sortable="false">{{ __('Phone') }}</th>
                        <th>{{ __('E-mail address') }}</th>
                        <th data-sortable="false">{{ __('Website') }}</th>
                        <th>
                          @if($org_type === 'organisations')
                            {{ __('Type(s)') }}
                          @else
                            {{ __('Type') }}
                          @endif
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      @forelse ($organisations as $organisation)
                        <tr>
                          <td>
                            @if(!empty($org_type))
                              <a class="a-blue" href="{{ route('organisations.show', [$organisation->uuid, 'type' => $org_type]) }}"> {{ $organisation->name }}
                                @if($organisation->application_owner === 'yes') <span class="text-info"> ({{ __('Application Owner') }}) </span>@endif
                              </a>
                            @else
                              <a class="a-blue" href="{{ route('organisations.show', $organisation->uuid) }}"> {{ $organisation->name }}
                                @if($organisation->application_owner === 'yes') <span class="text-info"> ({{ __('Application Owner') }}) </span>@endif
                              </a>
                            @endif
                          </td>
                          <td><a class="a-blue" href="tel:{{ formatPhoneNumber($organisation->phone) }}">{{ formatPhoneNumber($organisation->phone) }}</a></td>
                          <td><a class="a-blue" href="mailto:{{ $organisation->email }}">{{ $organisation->email }}</a></td>
                          <td><a class="a-blue" href="{{ $organisation->website }}" target="__blank"> {{ $organisation->website }}</a></td>
                          <td>
                            @if($org_type === 'organisations')
                              {{ $organisation->type_names }}
                            @else
                              {{ __(ucfirst($org_type)) }}
                            @endif
                          </td>
                        </tr>
                      @empty
                        <tr>
                          <td colspan="5" class="text-center">
                            {{ __('No result found') }}
                          </td>
                        </tr>
                      @endforelse
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="row text-center">
                {{ $organisations->appends(request()->query())->links() }}
              </div>
            </div>
          </div>
        </div>
        {{-- Organisation listing end --}}
      </div>
    </div>
  </div>
</div>
@endsection

@push('child-scripts')
<script>
  $('.data-table').footable({
    "paging": {
      "enabled": false,
    },
    "sorting": {
      "enabled": true
    }
  });

  $("#search_org").keyup(function(){
    let search_text = $(this).val();
    let org_type = $('#org_type').val();
    
    if(search_text.length >= 3){
      $.ajax({
          url: "{{ route('organisation.search') }}",
          method: 'post',
          data: {search: search_text, org_type: org_type},
          beforeSend: function(){
            $('#search_spinner').show();
          },
          headers: {
              'X-CSRF-TOKEN': '{{ csrf_token() }}'
          },
          success: function(data){
            $('#search-box').html(data);
            $('#search_spinner').hide();
          }
      });
    }else if(search_text.length == 0){
      $('#search-box').html('');
    }
  });
</script>
@endpush