@extends('layouts.app', ['activePage' => 'client-management', 'menuParent' => 'laravel', 'titlePage' => __('Client Management')])

@section('content')
  <div class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
            <div class="card">
              <div class="card-header card-header-primary card-header-icon">
                <div class="card-icon">
                  <i class="material-icons">group</i>
                </div>
                <h4 class="card-title">{{ __('Clients') }}</h4>
              </div>
              <div class="card-body">
                <div class="row">
                    <div class="col-12 text-left">
                        <a href="{{ route('client.create') }}" class="btn btn-sm btn-primary">{{ __('Add Client') }}</a>
                    </div>
                </div>
                <table id="list_of_clients" class="table table-striped table-no-bordered table-hover">
                  <thead>
                    <tr>
                      <th>Actions</th>
                      <th>Name</th>
                      <th>Logo</th>
                    </tr>
                  </thead>
                  <tbody>
                    @foreach($clients as $client)
                        <tr>
                          <td class="td-actions text-left" style="width: 80px">
                            <form action="{{ route('client.destroy', $client) }}" method="post">
                                @csrf
                                @method('delete')
                                
                                <a rel="tooltip" class="btn btn-success btn-link" href="{{ route('client.edit', $client) }}" data-original-title="" title="">
                                    <i class="material-icons">edit</i>
                                    <div class="ripple-container"></div>
                                </a>
                                <button type="button" class="btn btn-danger btn-link" data-original-title="" title="" onclick="confirm('{{ __("Are you sure you want to delete this client? Doing so will delete all projects associated with the client and all users will have this project unassigned. Are you sure you would like to proceed?") }}') ? this.parentElement.submit() : ''">
                                    <i class="material-icons">delete_forever</i>
                                    <div class="ripple-container"></div>
                                </button>
                            </form>
                          </td>
                          <td>
                            {{ $client->name }}
                          </td>
                          <td>
                            <div class="avatar avatar-sm rounded-circle img-circle" style="width:100px; height:100px;overflow: hidden;">
                                <img src="{{ $client->logo() }}" alt="" style="max-width: 100px;">
                            </div>
                          </td>
                        </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@push('js')
  <script>
    $(document).ready(function() {
      $('#list_of_clients').DataTable({
        "targets": 'no-sort',
        "bSort": false,
        "order": []
      });
      $('#datatables').fadeIn(1100);
      $('#datatables').DataTable({
        "pagingType": "full_numbers",
        "lengthMenu": [
          [10, 25, 50, -1],
          [10, 25, 50, "All"]
        ],
        responsive: true,
        language: {
          search: "_INPUT_",
          searchPlaceholder: "Search users",
        },
        "columnDefs": [
          { "orderable": false, "targets": 5 },
        ],
      });
    });
  </script>
@endpush