@extends('layouts.app')

@section('title', 'New Quality Check')

@section('content')
    <div class="mb-4">
        <h4 class="mb-0">Record Quality Inspection</h4>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0 small">
                <li class="breadcrumb-item"><a href="{{ url('/') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('quality-checks.index') }}">Quality Control</a></li>
                <li class="breadcrumb-item active">New Record</li>
            </ol>
        </nav>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    <form action="{{ route('quality-checks.store') }}" method="POST">
                        @csrf
                        @if($workOrder)
                            <input type="hidden" name="work_order_id" value="{{ $workOrder->id }}">
                            <input type="hidden" name="product_id" value="{{ $workOrder->product_id }}">
                            <div class="alert alert-info border-0 shadow-sm d-flex align-items-center mb-4">
                                <i class="bi bi-info-circle-fill me-3 fs-4"></i>
                                <div>
                                    Inspecting output for <strong>{{ $workOrder->order_number }}</strong>
                                    ({{ $workOrder->product->name }})
                                </div>
                            </div>
                        @else
                            <div class="mb-3">
                                <label class="form-label fw-bold small text-muted text-uppercase">Select Product</label>
                                <select name="product_id" class="form-select" required>
                                    <option value="">Choose product...</option>
                                    @foreach($products as $product)
                                        <option value="{{ $product->id }}">{{ $product->name }} ({{ $product->sku }})</option>
                                    @endforeach
                                </select>
                            </div>
                        @endif

                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label fw-bold small text-muted text-uppercase">Total Quantity
                                    Checked</label>
                                <input type="number" name="checked_quantity" class="form-control form-control-lg" required
                                    step="0.0001" id="qtyChecked">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold small text-muted text-uppercase">Passed Quantity</label>
                                <input type="number" name="passed_quantity" class="form-control form-control-lg" required
                                    step="0.0001" id="qtyPassed">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold small text-muted text-uppercase">Inspection Status</label>
                                <select name="status" class="form-select" required id="statusSelect">
                                    <option value="pass">PASS (Full Approval)</option>
                                    <option value="conditional_pass">CONDITIONAL PASS (Minor Issues)</option>
                                    <option value="fail">FAIL (Rejected)</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold small text-muted text-uppercase">Date of Inspection</label>
                                <input type="date" class="form-control" value="{{ date('Y-m-d') }}" readonly>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label fw-bold small text-muted text-uppercase">Inspection Notes / Defects
                                    found</label>
                                <textarea name="notes" class="form-control" rows="3"
                                    placeholder="Describe any defects or observations..."></textarea>
                            </div>
                        </div>

                        <div class="mt-5 d-flex justify-content-end gap-2">
                            <a href="{{ route('quality-checks.index') }}" class="btn btn-light px-4">Cancel</a>
                            <button type="submit" class="btn btn-warning px-5 shadow-sm">Save Inspection</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.getElementById('qtyPassed').addEventListener('input', function () {
            const checked = parseFloat(document.getElementById('qtyChecked').value) || 0;
            const passed = parseFloat(this.value) || 0;
            const select = document.getElementById('statusSelect');

            if (passed < checked && passed > 0) {
                select.value = 'conditional_pass';
            } else if (passed === 0 && checked > 0) {
                select.value = 'fail';
            } else if (passed === checked && checked > 0) {
                select.value = 'pass';
            }
        });
    </script>
@endsection