@extends('crm.master')

@section('title', 'Asset Categories')

@php
  $nextDir = fn ($column) => ($sort === $column && $dir === 'asc') ? 'desc' : 'asc';
@endphp

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">

  <div class="row mb-4">
    <div class="col-12">
      <div class="d-flex align-items-center justify-content-between">
        <div>
          <h4 class="mb-1">Asset Categories</h4>
          <p class="text-muted mb-0">Organize assets with category-level pools and asset counts</p>
        </div>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createModal">
          <i class="icon-base ti tabler-plus me-2 icon-14px"></i>
          New Asset Category
        </button>
      </div>
    </div>
  </div>

  @include('crm.managements.categories.tabs')

  <div class="card mb-3">
    <div class="card-body py-3">
      <form method="GET" action="{{ route('crm.asset-categories.index') }}" class="row g-2 align-items-end">
        <div class="col-md-4">
          <label class="form-label">Search</label>
          <div class="input-group">
            <input type="text" name="search" class="form-control" placeholder="Search by name or description..." value="{{ $search ?? '' }}">
            <button class="btn btn-outline-secondary" type="submit">
              <i class="ti tabler-search"></i>
            </button>
          </div>
        </div>
        <div class="col-md-auto">
          <label class="form-label d-block">&nbsp;</label>
          <a href="{{ route('crm.asset-categories.index') }}" class="btn btn-label-secondary">Reset</a>
        </div>
      </form>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <div class="card crm-grid-card">
        <div class="table-responsive crm-grid-wrap">
          @include('crm.components.alerts')

          <table class="table table-hover crm-grid-table">
            <thead class="table-light">
              <tr>
                <th class="bg-secondary text-white">
                  <a href="{{ route('crm.asset-categories.index', ['search' => $search, 'sort' => 'id', 'dir' => $nextDir('id')]) }}" class="text-reset text-decoration-none">
                    ID
                  </a>
                </th>
                <th class="bg-secondary text-white">
                  <a href="{{ route('crm.asset-categories.index', ['search' => $search, 'sort' => 'name', 'dir' => $nextDir('name')]) }}" class="text-reset text-decoration-none">
                    Name
                  </a>
                </th>
                <th class="bg-secondary text-white">Description</th>
                <th class="bg-secondary text-white">
                  <a href="{{ route('crm.asset-categories.index', ['search' => $search, 'sort' => 'pools', 'dir' => $nextDir('pools')]) }}" class="text-reset text-decoration-none">
                    Pools
                  </a>
                </th>
                <th class="bg-secondary text-white">
                  <a href="{{ route('crm.asset-categories.index', ['search' => $search, 'sort' => 'assets', 'dir' => $nextDir('assets')]) }}" class="text-reset text-decoration-none">
                    Assets
                  </a>
                </th>
              </tr>
            </thead>
            <tbody>
              @forelse($assetCategories as $item)
                <tr>
                  <td>{{ $item->id }}</td>
                  <td>
                    <a href="javascript:void(0)" class="fw-semibold text-primary"
                      data-bs-toggle="modal" data-bs-target="#editModal{{ $item->hash_id }}">
                      {{ $item->name }}
                    </a>
                  </td>
                  <td><span class="text-muted small">{{ $item->description ?: '-' }}</span></td>
                  <td>{{ number_format($item->pools_count ?? 0) }}</td>
                  <td>{{ number_format((int) ($item->assets_count ?? 0)) }}</td>
                </tr>

                <div class="modal fade" id="editModal{{ $item->hash_id }}" tabindex="-1" aria-hidden="true">
                  <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title">Edit Asset Category</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                      </div>
                      <form action="{{ route('crm.asset-categories.update', $item->hash_id) }}" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="modal-body">
                          <div class="mb-4">
                            <label class="form-label">Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="name"
                              maxlength="45" value="{{ $item->name }}" required />
                          </div>
                          <div class="mb-2">
                            <label class="form-label">Description</label>
                            <input type="text" class="form-control" name="description"
                              value="{{ $item->description }}" />
                          </div>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Cancel</button>
                          <button type="submit" class="btn btn-primary">Save</button>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>

              @empty
                <tr>
                  <td colspan="5" class="text-center py-5">
                    <p class="text-muted mb-2">No asset categories found</p>
                    <button type="button" class="btn btn-primary btn-sm"
                      data-bs-toggle="modal" data-bs-target="#createModal">
                      Add First Asset Category
                    </button>
                  </td>
                </tr>
              @endforelse
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

</div>

<div class="modal fade" id="createModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">New Asset Category</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form action="{{ route('crm.asset-categories.store') }}" method="POST">
        @csrf
        <div class="modal-body">
          <div class="mb-4">
            <label class="form-label">Name <span class="text-danger">*</span></label>
            <input type="text" class="form-control @error('name') is-invalid @enderror"
              name="name" maxlength="45" value="{{ old('name') }}"
              placeholder="Enter category name" required />
            @error('name')
              <span class="invalid-feedback">{{ $message }}</span>
            @enderror
          </div>
          <div class="mb-2">
            <label class="form-label">Description</label>
            <input type="text" class="form-control @error('description') is-invalid @enderror"
              name="description" value="{{ old('description') }}"
              placeholder="Optional description" />
            @error('description')
              <span class="invalid-feedback">{{ $message }}</span>
            @enderror
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Save</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@section('page-script')
@if($errors->any())
<script>
  document.addEventListener('DOMContentLoaded', function () {
    var modal = new bootstrap.Modal(document.getElementById('createModal'));
    modal.show();
  });
</script>
@endif
@endsection