@extends('layouts.user_type.auth')

@section('content')

<main class="main-content position-relative max-height-vh-100 h-100 mt-1 border-radius-lg">
  <div class="container-fluid py-4">
    <div class="row">
      <div class="col-12">
        <div class="card mb-4">
          <div class="card-header pb-0">
            <div class="row">
              <div class="col-6">
                <h6>
                  <i class="fas fa-eye me-2 text-info"></i>
                  Item Details
                </h6>
                <p class="text-sm mb-0">
                  <i class="fa fa-check text-info" aria-hidden="true"></i>
                  <span class="font-weight-bold">Detailed information about this item</span>
                </p>
              </div>
              <div class="col-6 text-end">
                <div class="d-flex gap-2 justify-content-end">
                  <a href="{{ route('items.index') }}" class="btn bg-gradient-secondary btn-sm">
                    <i class="fas fa-arrow-left me-1"></i>Back to List
                  </a>
                  @can('edit items')
                  <a href="{{ route('items.edit', $item) }}" class="btn bg-gradient-warning btn-sm">
                    <i class="fas fa-edit me-1"></i>Edit Item
                  </a>
                  @endcan
                </div>
              </div>
            </div>
          </div>

          <div class="card-body p-3">
            <div class="row">
              <!-- Left Column - Main Info -->
              <div class="col-lg-8">
                <!-- Item Name & Status -->
                <div class="mb-4">
                  <div class="d-flex align-items-center mb-3">
                    <div class="icon icon-shape icon-lg bg-gradient-info shadow text-center me-3">
                      <i class="fas fa-box text-lg opacity-10" aria-hidden="true"></i>
                    </div>
                    <div>
                      <h4 class="text-dark font-weight-bold mb-1">{{ $item->name }}</h4>
                      <div class="d-flex align-items-center gap-2">
                        @if($item->is_expired)
                          <span class="badge badge-sm bg-gradient-danger">
                            <i class="fas fa-exclamation-triangle me-1"></i>Expired
                          </span>
                        @elseif($item->is_expiring_soon)
                          <span class="badge badge-sm bg-gradient-warning">
                            <i class="fas fa-clock me-1"></i>Expiring Soon
                          </span>
                        @else
                          <span class="badge badge-sm bg-gradient-success">
                            <i class="fas fa-check-circle me-1"></i>Normal
                          </span>
                        @endif
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Stock Information -->
                <div class="row mb-4">
                  <div class="col-md-6">
                    <div class="card">
                      <div class="card-body p-3">
                        <div class="row">
                          <div class="col-8">
                            <div class="numbers">
                              <p class="text-sm mb-0 text-capitalize font-weight-bold">Current Stock</p>
                              <h5 class="font-weight-bolder mb-0">
                                {{ $item->stock }}
                                <span class="text-{{ $item->stock > 20 ? 'success' : ($item->stock > 5 ? 'warning' : 'danger') }} text-sm font-weight-bolder">
                                  @if($item->stock == 0)
                                    Out of Stock
                                  @elseif($item->stock < 10)
                                    Low Stock
                                  @else
                                    Available
                                  @endif
                                </span>
                              </h5>
                            </div>
                          </div>
                          <div class="col-4 text-end">
                            <div class="icon icon-shape bg-gradient-{{ $item->stock > 20 ? 'success' : ($item->stock > 5 ? 'warning' : 'danger') }} shadow text-center border-radius-md">
                              <i class="fas fa-cubes text-lg opacity-10" aria-hidden="true"></i>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="col-md-6">
                    <div class="card">
                      <div class="card-body p-3">
                        <div class="row">
                          <div class="col-8">
                            <div class="numbers">
                              <p class="text-sm mb-0 text-capitalize font-weight-bold">Category</p>
                              <h5 class="font-weight-bolder mb-0">
                                @switch($item->category)
                                  @case('computer')
                                    <span class="text-primary">Computer</span>
                                    @break
                                  @case('laptop')
                                    <span class="text-info">Laptop</span>
                                    @break
                                  @case('antivirus')
                                    <span class="text-success">Antivirus</span>
                                    @break
                                  @default
                                    <span class="text-secondary">Unknown</span>
                                @endswitch
                              </h5>
                            </div>
                          </div>
                          <div class="col-4 text-end">
                            <div class="icon icon-shape bg-gradient-info shadow text-center border-radius-md">
                              @switch($item->category)
                                @case('computer')
                                  <i class="fas fa-desktop text-lg opacity-10" aria-hidden="true"></i>
                                  @break
                                @case('laptop')
                                  <i class="fas fa-laptop text-lg opacity-10" aria-hidden="true"></i>
                                  @break
                                @case('antivirus')
                                  <i class="fas fa-shield-alt text-lg opacity-10" aria-hidden="true"></i>
                                  @break
                                @default
                                  <i class="fas fa-tag text-lg opacity-10" aria-hidden="true"></i>
                              @endswitch
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Description -->
                <div class="card mb-4">
                  <div class="card-header pb-0">
                    <h6 class="mb-0">
                      <i class="fas fa-info-circle me-2 text-info"></i>
                      Description
                    </h6>
                  </div>
                  <div class="card-body p-3">
                    <p class="text-sm mb-0">
                      {{ $item->description ?: 'No description available for this item.' }}
                    </p>
                  </div>
                </div>
              </div>

              <!-- Right Column - Additional Info -->
              <div class="col-lg-4">
                <!-- Expiry Information -->
                <div class="card mb-4">
                  <div class="card-header pb-0">
                    <h6 class="mb-0">
                      <i class="fas fa-calendar me-2 text-info"></i>
                      Expiry Information
                    </h6>
                  </div>
                  <div class="card-body p-3">
                    @if($item->expired_at)
                      <div class="d-flex align-items-center mb-3">
                        <div class="icon icon-shape icon-sm bg-gradient-{{ $item->is_expired ? 'danger' : ($item->is_expiring_soon ? 'warning' : 'success') }} shadow text-center me-3">
                          <i class="fas fa-calendar text-white"></i>
                        </div>
                        <div>
                          <h6 class="mb-0 text-sm">Expiry Date</h6>
                          <p class="text-xs text-secondary mb-0">{{ $item->expired_at->format('d M Y') }}</p>
                        </div>
                      </div>
                      @if($item->is_expired)
                        <div class="alert alert-danger text-white text-center" role="alert">
                          <i class="fas fa-exclamation-triangle me-2"></i>
                          This item has expired
                        </div>
                      @elseif($item->is_expiring_soon)
                        <div class="alert alert-warning text-white text-center" role="alert">
                          <i class="fas fa-clock me-2"></i>
                          Expires in {{ $item->expired_at->diffInDays(now()) }} days
                        </div>
                      @else
                        <div class="alert alert-success text-white text-center" role="alert">
                          <i class="fas fa-check-circle me-2"></i>
                          Valid for {{ $item->expired_at->diffInDays(now()) }} days
                        </div>
                      @endif
                    @else
                      <div class="d-flex align-items-center mb-3">
                        <div class="icon icon-shape icon-sm bg-gradient-info shadow text-center me-3">
                          <i class="fas fa-infinity text-white"></i>
                        </div>
                        <div>
                          <h6 class="mb-0 text-sm">No Expiry Date</h6>
                          <p class="text-xs text-secondary mb-0">This item has no expiration date</p>
                        </div>
                      </div>
                    @endif
                  </div>
                </div>

                <!-- Location & Serial -->
                <div class="card mb-4">
                  <div class="card-header pb-0">
                    <h6 class="mb-0">
                      <i class="fas fa-map-marker-alt me-2 text-info"></i>
                      Location & Serial
                    </h6>
                  </div>
                  <div class="card-body p-3">
                    <div class="d-flex align-items-center mb-3">
                      <div class="icon icon-shape icon-sm bg-gradient-info shadow text-center me-3">
                        <i class="fas fa-map-marker-alt text-white"></i>
                      </div>
                      <div>
                        <h6 class="mb-0 text-sm">Location</h6>
                        <p class="text-xs text-secondary mb-0">{{ $item->distribution ?: 'Not specified' }}</p>
                      </div>
                    </div>
                    <div class="d-flex align-items-center">
                      <div class="icon icon-shape icon-sm bg-gradient-secondary shadow text-center me-3">
                        <i class="fas fa-barcode text-white"></i>
                      </div>
                      <div>
                        <h6 class="mb-0 text-sm">Serial Number</h6>
                        <p class="text-xs text-secondary mb-0">{{ $item->serial_number ?: 'No serial number' }}</p>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- Timestamps -->
                <div class="card">
                  <div class="card-header pb-0">
                    <h6 class="mb-0">
                      <i class="fas fa-clock me-2 text-info"></i>
                      Timestamps
                    </h6>
                  </div>
                  <div class="card-body p-3">
                    <div class="d-flex align-items-center mb-3">
                      <div class="icon icon-shape icon-sm bg-gradient-success shadow text-center me-3">
                        <i class="fas fa-plus text-white"></i>
                      </div>
                      <div>
                        <h6 class="mb-0 text-sm">Created</h6>
                        <p class="text-xs text-secondary mb-0">{{ $item->created_at->format('d M Y H:i') }}</p>
                      </div>
                    </div>
                    <div class="d-flex align-items-center">
                      <div class="icon icon-shape icon-sm bg-gradient-warning shadow text-center me-3">
                        <i class="fas fa-edit text-white"></i>
                      </div>
                      <div>
                        <h6 class="mb-0 text-sm">Last Updated</h6>
                        <p class="text-xs text-secondary mb-0">{{ $item->updated_at->format('d M Y H:i') }}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

@endsection