@extends('layouts.app')

@section('title', 'Settings · Stock & batches')

@section('content')
<div class="container-fluid">
    @include('settings._tabs')

    <div class="row g-4">
        <div class="col-xl-8">
            <form method="POST" action="{{ route('settings.stock.update') }}" class="settings-card">
                @csrf
                <div class="settings-card-head">
                    <h6><i class="bi bi-boxes me-2 text-primary"></i>Which batch is sold first</h6>
                    <p class="text-muted small mb-0">When a product has more than one batch on the shelf, sales take from one batch until it is finished, then the next.
                        Expired batches are never sold, whichever you choose.</p>
                </div>
                <div class="settings-card-body">
                    <label class="order-option {{ $sellOrder === 'fifo' ? 'is-chosen' : '' }}">
                        <input type="radio" class="form-check-input" name="batch_sell_order" value="fifo" @checked($sellOrder === 'fifo')>
                        <span>
                            <span class="fw-bold d-block">First in, first out (FIFO)</span>
                            <span class="small text-muted">The batch that arrived first is sold first. Stock rotates in the order it was delivered.</span>
                        </span>
                    </label>
                    <label class="order-option {{ $sellOrder === 'fefo' ? 'is-chosen' : '' }}">
                        <input type="radio" class="form-check-input" name="batch_sell_order" value="fefo" @checked($sellOrder === 'fefo')>
                        <span>
                            <span class="fw-bold d-block">First expiry, first out (FEFO)</span>
                            <span class="small text-muted">The batch that expires soonest is sold first, even if it arrived later. Usual in pharmacies: less stock expires on the shelf.</span>
                        </span>
                    </label>
                    <div class="alert alert-light border small mt-3 mb-0">
                        <i class="bi bi-info-circle me-1"></i> The two differ only when a newer delivery expires sooner than older stock.
                        With FIFO the older stock goes first, and the POS shows the newer batch's expiry so it is not forgotten.
                    </div>
                    <button class="btn btn-primary mt-3">Save</button>
                </div>
            </form>
        </div>
        <div class="col-xl-4">
            <div class="settings-card">
                <div class="settings-card-head"><h6><i class="bi bi-grid-3x3-gap me-2 text-primary"></i>On the POS screen</h6></div>
                <div class="settings-card-body small">
                    <p class="mb-2">Each product shows a thin bar of its batches in the order they are sold, and a note when it matters:</p>
                    <ul class="ps-3 mb-0">
                        <li class="mb-1"><span class="text-danger fw-semibold">15 expired ›</span>: tap the arrow to take the expired batch out of stock.</li>
                        <li class="mb-1"><span class="text-primary fw-semibold">6 left of batch B12</span>: the batch being sold is about to finish.</li>
                        <li><span class="text-warning fw-semibold">15 expire in 9 days</span>: how many are close to expiry, in either order. "· selling now" means that batch is the one being sold. The number goes down as they are sold.</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .order-option { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: .6rem; cursor: pointer; }
    .order-option .form-check-input { margin-top: .2rem; flex-shrink: 0; }
    .order-option.is-chosen, .order-option:has(input:checked) { border-color: var(--theme-primary); background: #f0fdf4; }
</style>
@endsection