@extends('layouts.app')

@section('content')
<div class="container mt-4">

    <h3 class="mb-4">Create Inspection & Acceptance Report (IAR)</h3>

    {{-- Show any global validation errors --}}
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach ($errors->all() as $err)
                    <li>{{ $err }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('iar.store') }}" method="POST">
        @csrf

        {{-- ======================= --}}
        {{-- IAR FIELDS --}}
        {{-- ======================= --}}
        <div class="row mb-3">
            <div class="col-md-4">
                <label class="form-label">IAR No</label>
                <input type="text" name="iar_no" class="form-control" value="{{ old('iar_no') }}">
                @error('iar_no') <small class="text-danger">{{ $message }}</small> @enderror
            </div>

            <div class="col-md-4">
                <label class="form-label">BUS No</label>
                <input type="text" name="bus_no" class="form-control" value="{{ old('bus_no') }}">
                @error('bus_no') <small class="text-danger">{{ $message }}</small> @enderror
            </div>

            <div class="col-md-4">
                <label class="form-label">IAR Date</label>
                <input type="date" name="iar_date" class="form-control" value="{{ old('iar_date') }}">
                @error('iar_date') <small class="text-danger">{{ $message }}</small> @enderror
            </div>
        </div>

        <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') }}">
                @error('invoice_no') <small class="text-danger">{{ $message }}</small> @enderror
            </div>

            <div class="col-md-4">
                <label class="form-label">Delivery Receipt No</label>
                <input type="text" name="delivery_no" class="form-control" value="{{ old('delivery_no') }}">
                @error('delivery_no') <small class="text-danger">{{ $message }}</small> @enderror
            </div>

            <div class="col-md-4">
                <label class="form-label">Delivery Schedule</label>
                <input type="date" name="delivery_sched" class="form-control" value="{{ old('delivery_sched') }}">
                @error('delivery_sched') <small class="text-danger">{{ $message }}</small> @enderror
            </div>
        </div>

        <div class="mb-3">
            <label class="form-label">Delivery Evaluation</label>
            <input type="text" name="delivery_eval" class="form-control" value="{{ old('delivery_eval') }}">
            @error('delivery_eval') <small class="text-danger">{{ $message }}</small> @enderror
        </div>

        <hr class="my-4">

        {{-- ======================= --}}
        {{-- QUOTATION SEARCH FIELD --}}
        {{-- ======================= --}}
        <div class="mb-3">
            <label class="form-label">Search Quotation (by Project or Supplier)</label>

            <div class="input-group">
                <input type="text"
                       id="quotation_search"
                       class="form-control"
                       placeholder="Type project name, project code, or supplier...">
                <button class="btn btn-outline-secondary" type="button" id="quotation_search_btn">
                    Search
                </button>
            </div>

            <div id="quotation_results"
                 class="list-group position-absolute w-50 mt-1"
                 style="z-index: 1000; max-height: 230px; overflow-y:auto; display:none;">
            </div>

            @error('quotation_id') <small class="text-danger">{{ $message }}</small> @enderror
        </div>

        {{-- Hidden Fields Automatically Filled After Selecting Quotation --}}
        <input type="hidden" name="quotation_id" id="quotation_id" value="{{ old('quotation_id') }}">
        <input type="hidden" name="project_id" id="project_id" value="{{ old('project_id') }}">
        <input type="hidden" name="supplier_id" id="supplier_id" value="{{ old('supplier_id') }}">

        <div class="mb-2" id="selected_quotation_summary" style="display: none;">
            <div class="alert alert-info py-2 px-3 mb-0">
                <strong>Selected Quotation:</strong>
                <span id="selected_quotation_text"></span>
            </div>
        </div>

        <hr class="my-4">

        <button type="submit" class="btn btn-primary">Save IAR</button>
        <a href="{{ route('iar.index') }}" class="btn btn-secondary">Cancel</a>

    </form>
</div>
@endsection

@section('scripts')
<script>
(function () {
    const searchInput   = document.getElementById("quotation_search");
    const searchButton  = document.getElementById("quotation_search_btn");
    const resultsBox    = document.getElementById("quotation_results");
    const quotationId   = document.getElementById("quotation_id");
    const projectId     = document.getElementById("project_id");
    const supplierId    = document.getElementById("supplier_id");
    const selSummaryBox = document.getElementById("selected_quotation_summary");
    const selSummaryTxt = document.getElementById("selected_quotation_text");

    function doSearch() {
        let query = searchInput.value.trim();

        if (query.length < 2) {
            resultsBox.style.display = "none";
            resultsBox.innerHTML = "";
            return;
        }

        resultsBox.style.display = "block";
        resultsBox.innerHTML = `<div class="list-group-item">Searching...</div>`;

        fetch("{{ route('quotation.search') }}?q=" + encodeURIComponent(query))
            .then(res => res.json())
            .then(data => {
                resultsBox.innerHTML = "";

                if (!Array.isArray(data) || data.length === 0) {
                    resultsBox.innerHTML = `<div class="list-group-item">No results found.</div>`;
                    return;
                }

                data.forEach(item => {
                    let row = document.createElement("a");
                    row.classList.add("list-group-item", "list-group-item-action");
                    row.style.cursor = "pointer";

                    row.innerHTML = `
                        <strong>Q#${item.id}</strong> —
                        ${item.project.project_code}: ${item.project.project_name}<br>
                        <small>Supplier: ${item.supplier.supplier_name}</small><br>
                        <small>Qty: ${item.quantity} | Bid: ₱${parseFloat(item.bid_amount).toLocaleString()}</small>
                    `;

                    row.addEventListener("click", function () {
                        const text = `Q#${item.id} — ${item.project.project_name} — ${item.supplier.supplier_name}`;

                        searchInput.value = text;
                        quotationId.value = item.id;
                        projectId.value   = item.project.id;
                        supplierId.value  = item.supplier.id;

                        selSummaryTxt.textContent = text;
                        selSummaryBox.style.display = "block";

                        resultsBox.style.display = "none";
                    });

                    resultsBox.appendChild(row);
                });
            })
            .catch(err => {
                console.error(err);
                resultsBox.innerHTML = `<div class="list-group-item text-danger">Error fetching results.</div>`;
            });
    }

    // Search when clicking the button
    searchButton.addEventListener("click", function () {
        doSearch();
    });

    // Search when pressing Enter in input
    searchInput.addEventListener("keydown", function (e) {
        if (e.key === "Enter") {
            e.preventDefault();
            doSearch();
        }
    });

    // Optional: auto-search as you type (can comment out if you only want button)
    searchInput.addEventListener("keyup", function (e) {
        if (e.key !== "Enter") {
            doSearch();
        }
    });

    // Click outside to hide results
    document.addEventListener("click", function (e) {
        if (!resultsBox.contains(e.target) && e.target !== searchInput && e.target !== searchButton) {
            resultsBox.style.display = "none";
        }
    });
})();
</script>
@endsection