@extends('layouts.app')

@section('title','New Purchase')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-3">
    <h3>New Purchase</h3>
    <a href="{{ route('purchases.index') }}" class="btn btn-outline-secondary btn-sm">
        Back
    </a>
</div>

<form action="{{ route('purchases.store') }}" method="POST" class="card p-4">
    @csrf

    <div class="row mb-3">
        <div class="col-md-4">
            <label class="form-label">Invoice No</label>
            <input type="text" name="invoice_no" class="form-control"
                   value="{{ old('invoice_no') }}">
        </div>

        <div class="col-md-4">
            <label class="form-label">Date</label>
            <input type="date" name="date" class="form-control"
                   value="{{ old('date', date('Y-m-d')) }}" required>
        </div>

        <div class="col-md-4">
            <label class="form-label">Supplier</label>
            <select name="supplier_id" class="form-select" required>
                <option value="">-- Select supplier --</option>
                @foreach($suppliers as $s)
                    <option value="{{ $s->id }}" @selected(old('supplier_id') == $s->id)>
                        {{ $s->name }} @if($s->phone) ({{ $s->phone }}) @endif
                    </option>
                @endforeach
            </select>
        </div>
    </div>

    {{-- PRODUCT + IMAGE --}}
    <div class="row mb-3">
        <div class="col-lg-8">
            <div class="row">

                {{-- PRODUCT DROPDOWN --}}
                <div class="col-md-7 mb-3">
                    <label class="form-label">Product</label>
                    <select name="product_id" id="purchase-product-select"
                            class="form-select" required>

                        <option value="">-- Select product --</option>

                        @foreach($products as $p)
                            <option value="{{ $p->id }}"
                                data-image="{{ $p->image_primary ? asset('storage/'.$p->image_primary) : '' }}"
                                @selected(old('product_id') == $p->id)
                            >
                                {{ $p->sku }} - {{ $p->name }}
                                @if($p->size) (Size: {{ $p->size }}) @endif
                                @if($p->color) [{{ $p->color }}] @endif
                            </option>
                        @endforeach

                    </select>
                </div>

                {{-- QTY --}}
                <div class="col-md-2 mb-3">
                    <label class="form-label">Qty</label>
                    <input type="number" name="qty" min="1" class="form-control"
                           value="{{ old('qty',1) }}" required>
                </div>

                {{-- COST --}}
                <div class="col-md-3 mb-3">
                    <label class="form-label">Cost / Unit</label>
                    <input type="number" name="cost" min="0" step="0.01"
                           class="form-control" value="{{ old('cost') }}" required>
                </div>

                {{-- PAID --}}
                <div class="col-md-3 mb-3">
                    <label class="form-label">Paid</label>
                    <input type="number" name="paid" min="0" step="0.01"
                           class="form-control" value="{{ old('paid',0) }}">
                </div>
            </div>
        </div>

        {{-- IMAGE PREVIEW --}}
        <div class="col-lg-4">
            <label class="form-label d-block">Product Preview</label>

            <div class="card" style="max-width:260px;">
                <div class="card-body text-center">

                    <div id="product-image-placeholder"
                         class="text-muted small mb-2">
                         No image selected
                    </div>

                    <img id="product-image-preview"
                         src=""
                         class="img-fluid img-thumbnail d-none">
                </div>
            </div>
        </div>
    </div>

    <button class="btn btn-primary">Save Purchase</button>
</form>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {

    const select      = document.getElementById('purchase-product-select');
    const img         = document.getElementById('product-image-preview');
    const placeholder = document.getElementById('product-image-placeholder');

    function updatePreview() {
        const option = select.options[select.selectedIndex];
        if (!option) return;

        const url = option.dataset.image;

        if (url) {
            img.src = url;
            img.classList.remove('d-none');
            placeholder.classList.add('d-none');
        } else {
            img.src = '';
            img.classList.add('d-none');
            placeholder.classList.remove('d-none');
        }
    }

    select.addEventListener('change', updatePreview);
    updatePreview(); // Load old() image on refresh
});
</script>
@endpush