@extends('layouts.layout-horizontal')

@section('title', ' Products')

@section('css')
@endsection

@section('content')
<div class="">
  <div class="row g-3">
    <div class="col-md-6">
      <div class="card">
        <div class="card-header d-flex align-items-center justify-content-between">
            <h5 class="mb-0">{{ $product->name }}</h5>
            <div>
                <a class="btn btn-sm btn-outline-primary" href="{{ route('products.edit', $product) }}">Edit</a>
                <a class="btn btn-sm btn-outline-secondary" href="{{ route('products.index') }}">Back</a>
            </div>
        </div>
        <div class="card-body">
        <div><strong>Product ID:</strong> {{ $product->product_id }}</div>
        <div><strong>Unit:</strong> {{ $product->unit ?? '-' }}</div>
        <div><strong>HSN:</strong> {{ $product->hsn ?? '-' }}</div>
        <div><strong>Cost Price:</strong> {{ $product->mrp ? '₹' . number_format($product->mrp, 2) : '-' }}</div>
        @if($product->image_path)
          <div class="mt-3 product-image-wrap">
            <img src="{{ asset('storage/'.$product->image_path) }}"
                 class="product-image"
                 alt="{{ $product->name }}"
                 loading="lazy">
          </div>
        @endif
      </div>
    </div>
    <div class="col-md-6">
      <div class="card">
        <div class="card-header d-flex align-items-center justify-content-between">
          <h5 class="mb-0">Tax Rates</h5>
        </div>
        <div class="card-body">
          <ul class="mb-0">
            @forelse($product->taxRates as $t)
              <li>{{ $t->starts_at->format('d M Y') }} — {{ rtrim(rtrim(indian_number($t->percentage,2,'.',''), '0'),'.') }}%</li>
            @empty
              <li>No tax rates</li>
            @endforelse
          </ul>
        </div>
      </div>
    </div>

    {{-- Opening Stock & Current Balance per Company --}}
    <div class="col-12">
      <div class="card">
        <div class="card-header d-flex align-items-center justify-content-between">
          <h5 class="mb-0">Opening Stock & Current Balance (per Company)</h5>
        </div>
        <div class="card-body">
        <p class="text-muted small mb-3">
          <i class="ph-duotone ph-info"></i>
          Set the opening stock for each company. When saved, the balance (c1/c2/c3) will be updated accordingly.
        </p>

        <div class="table-responsive">
          <table class="table table-hover table-sm align-middle">
            <thead class="table-light">
              <tr>
                <th>Company</th>
                <th>Opening Date</th>
                <th class="text-end">Opening Qty</th>
                <th class="text-end">Current Balance</th>
                <th width="150">Actions</th>
              </tr>
            </thead>
            <tbody>
              @foreach($companies as $company)
                @php
                  $stockCol = 'c' . $company->id;
                  $opening = $product->openings->where('company_id', $company->id)->first();
                @endphp
                <tr>
                  <td><strong>{{ $company->name }}</strong></td>

                  @if($opening)
                    {{-- Existing opening - show edit form --}}
                    <form action="{{ route('products.opening-stocks.update', [$product, $opening]) }}" method="POST" class="d-contents">
                      @csrf
                      @method('PUT')
                      <td>
                        <input type="date" name="as_on_date" class="form-control form-control-sm"
                               value="{{ $opening->as_on_date->format('Y-m-d') }}" required>
                      </td>
                      <td>
                        <input type="number" name="qty_pcs" class="form-control form-control-sm text-end"
                               step="0.01" min="0" value="{{ $opening->qty_pcs }}" required>
                      </td>
                      <td class="text-end fw-bold fs-5">{{ indian_number($product->$stockCol ?? 0, 2) }}</td>
                      <td>
                        <button type="submit" class="btn btn-sm btn-success">Update</button>
                    </form>
                        <form action="{{ route('products.opening-stocks.destroy', [$product, $opening]) }}"
                              method="POST" class="d-inline"
                              onsubmit="return confirm('Delete opening stock for {{ $company->name }}? This will subtract {{ $opening->qty_pcs }} from the balance.')">
                          @csrf @method('DELETE')
                          <button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
                        </form>
                      </td>
                  @else
                    {{-- No opening - show add form --}}
                    <form action="{{ route('products.opening-stocks.store', $product) }}" method="POST" class="d-contents">
                      @csrf
                      <input type="hidden" name="company_id" value="{{ $company->id }}">
                      <td>
                        <input type="date" name="as_on_date" class="form-control form-control-sm"
                               value="{{ now()->toDateString() }}" required>
                      </td>
                      <td>
                        <input type="number" name="qty_pcs" class="form-control form-control-sm text-end"
                               step="0.01" min="0" placeholder="Enter qty" required>
                      </td>
                      <td class="text-end fw-bold fs-5">{{ indian_number($product->$stockCol ?? 0, 2) }}</td>
                      <td>
                        <button type="submit" class="btn btn-sm btn-primary">Add Opening</button>
                      </td>
                    </form>
                  @endif
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>

        <div class="alert alert-info small mt-3 mb-0">
          <strong>How it works:</strong>
          <ul class="mb-0 mt-1">
            <li><strong>Add Opening:</strong> Adds the quantity to the current balance</li>
            <li><strong>Update Opening:</strong> Adjusts the balance by the difference (new qty - old qty)</li>
            <li><strong>Delete Opening:</strong> Subtracts the quantity from the current balance</li>
          </ul>
        </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .d-contents { display: contents; }
  /* Product image preview — cap to a sane thumbnail height so high-res
     source photos don't blow out the card layout, center the image in
     the available space, and keep aspect ratio intact. */
  .product-image-wrap {
    width: 100%;
    max-width: 240px;
    aspect-ratio: 1 / 1;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .product-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
  }
</style>
@endsection