@extends('layouts/layoutMaster')

@section('title', __('Teams'))

@section('vendor-style')
@vite([
  'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
  'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
  'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss'
])
@endsection

@section('vendor-script')
@vite([
  'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
  'resources/assets/vendor/libs/sweetalert2/sweetalert2.js'
])
@endsection

@section('page-script')
<script>
const pageData = {
  urls: {
    datatable: @json(route('teams.datatable')),
    store: @json(route('teams.store')),
    show: @json(route('teams.show', ':id')),
    update: @json(route('teams.update', ':id')),
    destroy: @json(route('teams.destroy', ':id')),
    toggleStatus: @json(route('teams.toggleStatus', ':id')),
    generateCode: @json(route('teams.generateCode'))
  },
  labels: {
    teams: @json(__('Teams')),
    addTeam: @json(__('Add Team')),
    editTeam: @json(__('Edit Team')),
    name: @json(__('Name')),
    code: @json(__('Code')),
    description: @json(__('Description')),
    status: @json(__('Status')),
    actions: @json(__('Actions')),
    active: @json(__('Active')),
    inactive: @json(__('Inactive')),
    activate: @json(__('Activate')),
    deactivate: @json(__('Deactivate')),
    edit: @json(__('Edit')),
    delete: @json(__('Delete')),
    confirmStatusChange: @json(__('Change Status?')),
    confirmActivate: @json(__('This will activate the team.')),
    confirmDeactivate: @json(__('This will deactivate the team.')),
    yesChange: @json(__('Yes, change it!')),
    statusUpdated: @json(__('Status updated successfully.')),
    save: @json(__('Save')),
    cancel: @json(__('Cancel')),
    saving: @json(__('Saving...')),
    confirmDelete: @json(__('Are you sure?')),
    confirmDeleteText: @json(__('You will not be able to revert this!')),
    yesDelete: @json(__('Yes, delete it!')),
    deleted: @json(__('Deleted!')),
    teamDeleted: @json(__('Team has been deleted.')),
    success: @json(__('Success!')),
    error: @json(__('Error!')),
    teamCreated: @json(__('Team created successfully.')),
    teamUpdated: @json(__('Team updated successfully.')),
    genericError: @json(__('Something went wrong. Please try again.')),
    nameRequired: @json(__('Name is required')),
    codeRequired: @json(__('Code is required')),
    codeTaken: @json(__('This code is already taken')),
    na: @json(__('N/A')),
    searchTeam: @json(__('Search team...')),
    processing: @json(__('Processing...')),
    noData: @json(__('No data available')),
    search: @json(__('Search')),
    lengthMenu: @json(__('Show _MENU_ entries')),
    info: @json(__('Showing _START_ to _END_ of _TOTAL_ entries')),
    infoEmpty: @json(__('Showing 0 to 0 of 0 entries')),
    infoFiltered: @json(__('(filtered from _MAX_ total entries)')),
    zeroRecords: @json(__('No matching records found')),
    paginate: {
      first: @json(__('First')),
      last: @json(__('Last')),
      next: @json(__('Next')),
      previous: @json(__('Previous'))
    }
  }
};
</script>
@vite(['resources/assets/js/app/team-index.js'])
@endsection

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  {{-- Breadcrumb --}}
  <x-breadcrumb
    :title="__('Teams')"
    :breadcrumbs="[
      ['name' => __('Teams'), 'url' => '']
    ]"
    :home-url="url('/')"
  />

  {{-- Teams List Card --}}
  <div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h5 class="mb-0">{{ __('Teams') }}</h5>
      <button type="button" class="btn btn-primary" id="btnAddTeam" data-bs-toggle="offcanvas"
              data-bs-target="#offcanvasTeam">
        <i class="bx bx-plus me-1"></i>{{ __('Add Team') }}
      </button>
    </div>
    <div class="card-datatable table-responsive">
      <table class="table" id="teamsTable">
        <thead>
          <tr>
            <th>{{ __('ID') }}</th>
            <th>{{ __('Name') }}</th>
            <th>{{ __('Code') }}</th>
            <th>{{ __('Description') }}</th>
            <th>{{ __('Status') }}</th>
            <th>{{ __('Actions') }}</th>
          </tr>
        </thead>
      </table>
    </div>
  </div>
</div>

{{-- Add/Edit Team Offcanvas --}}
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasTeam" aria-labelledby="offcanvasTeamLabel">
  <div class="offcanvas-header border-bottom">
    <h5 id="offcanvasTeamLabel" class="offcanvas-title">{{ __('Add Team') }}</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <form id="teamForm">
      <input type="hidden" name="id" id="teamId">

      <div class="mb-4">
        <label class="form-label" for="teamName">{{ __('Name') }} <span class="text-danger">*</span></label>
        <input type="text" class="form-control" id="teamName" name="name" placeholder="{{ __('Enter team name') }}">
        <div class="invalid-feedback"></div>
      </div>

      <div class="mb-4">
        <label class="form-label" for="teamCode">{{ __('Code') }} <span class="text-danger">*</span></label>
        <input type="text" class="form-control" id="teamCode" name="code" placeholder="{{ __('Enter team code') }}">
        <div class="invalid-feedback"></div>
      </div>

      <div class="mb-4">
        <label class="form-label" for="teamNotes">{{ __('Description') }}</label>
        <textarea class="form-control" id="teamNotes" name="notes" rows="3" placeholder="{{ __('Enter description') }}"></textarea>
      </div>

      <div class="d-flex justify-content-end gap-2">
        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="offcanvas">{{ __('Cancel') }}</button>
        <button type="submit" class="btn btn-primary" id="btnSaveTeam">{{ __('Save') }}</button>
      </div>
    </form>
  </div>
</div>
@endsection