@extends('layouts.app')

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

    <h2><i class="bi bi-file-spreadsheet"></i> Add Project Quotation</h2>

    {{-- 🔍 Search Form --}}
    <form method="GET" action="{{ route('projects.search') }}">
        <div class="input-group mb-3">
            <input 
                type="text" 
                name="search" 
                class="form-control" 
                placeholder="Search projects..."
                value="{{ request('search') }}"
            >
            <button class="btn btn-primary" type="submit"><i class="bi bi-search"></i> Search</button>
        </div>
    </form>

    {{-- 📌 Projects Table --}}
    <table class="table table-bordered">
        <thead>
            <tr style="text-align:center;">
                <th>Project Name</th>
                <th>Code</th>
                <th>PR #</th>
                <th>PO #</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($projects as $project)
            <tr>
                <td>{{ $project->project_name }}</td>
                <td>{{ $project->project_code }}</td>
                <td>{{ $project->pr_number }}</td>
                <td>{{ $project->po_number }}</td>
                <td style="text-align:center;">
                    <button 
                        class="btn btn-success btn-sm openQuotationModal"
                        data-id="{{ $project->id }}"
                        data-name="{{ $project->project_name }}"
                    >
                        <i class="bi bi-plus-lg"></i> Add Supplier's Quotation
                    </button>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>

    {{ $projects->links() }}

</div>

{{-- ================= MODAL: ADD QUOTATION ================= --}}
<div class="modal fade" id="quotationModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

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

                <div class="modal-header">
                    <h5 class="modal-title">Submit Quotation</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">

                    {{-- Hidden Project ID --}}
                    <input type="hidden" id="modal_project_id" name="project_id">

                    <p><strong>Project:</strong> 
                        <span id="modal_project_name"></span>
                    </p>

                    <hr>

                    {{-- Supplier Search --}}
                    <h5> <i class="bi bi-search"></i> Search Supplier</h5>

                    <div class="input-group mb-3">
                        <input type="text" 
                               id="supplierSearch" 
                               class="form-control"
                               placeholder="Search supplier by name, PhilGEPS no., or contact person">
                        <button type="button" class="btn btn-primary" id="searchSupplierBtn">Search</button>
                    </div>

                    {{-- Supplier Results Table --}}
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Select</th>
                                <th>Business Name</th>
                                <th>PhilGEPS No.</th>
                                <th>Contact Person</th>
                            </tr>
                        </thead>
                        <tbody id="supplierResults">
                            {{-- Results inserted by JavaScript --}}
                        </tbody>
                    </table>

                    <hr>

                    <div class="mb-3">
                        <label class="form-label">Quantity</label>
                        <input type="number" min="1" class="form-control" name="quantity" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Unit Cost</label>
                        <input type="number" min="0" step="0.01" class="form-control" name="unit_cost" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Bid Amount</label>
                        <input type="number" step="0.01" class="form-control" name="bid_amount" required>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn btn-primary">Save Quotation</button>
                </div>

            </form>

        </div>
    </div>
</div>


@endsection


@section('scripts')
<script>

document.addEventListener("DOMContentLoaded", function () {

    /*
    document.addEventListener("DOMContentLoaded", function () {

        // Refresh only once after first load
        if (!localStorage.getItem("page_refreshed_once")) {
            localStorage.setItem("page_refreshed_once", "true");
            location.reload();
        }

    }); */

    //OPEN MODAL — FIXED using event delegation
 
        document.addEventListener("click", function (e) {
            if (e.target.classList.contains("openQuotationModal")) {

                document.getElementById("modal_project_id").value = e.target.dataset.id;
                document.getElementById("modal_project_name").innerText = e.target.dataset.name;

                let modal = new bootstrap.Modal(document.getElementById("quotationModal"));
                modal.show();
            }
        }); 
    
    /*
    document.addEventListener("click", function (e) {
    let btn = e.target.closest(".openQuotationModal");

        if (btn) {
            document.getElementById("modal_project_id").value = btn.dataset.id;
            document.getElementById("modal_project_name").innerText = btn.dataset.name;

            let modal = new bootstrap.Modal(document.getElementById("quotationModal"));
            modal.show();
        }
    }); */

    // SEARCH SUPPLIER AJAX
    document.getElementById("searchSupplierBtn").addEventListener("click", function () {
        let keyword = document.getElementById("supplierSearch").value;

        fetch("{{ route('suppliers.search') }}?keyword=" + keyword)
            .then(response => response.json())
            .then(data => {
                
                let results = "";

                data.forEach(s => {
                    results += `
                        <tr>
                            <td>
                                <input type="radio" name="supplier_id" value="${s.id}">
                            </td>
                            <td>${s.business_name}</td>
                            <td>${s.philgeps_no}</td>
                            <td>${s.contact_person}</td>
                        </tr>
                    `;
                });

                document.getElementById("supplierResults").innerHTML = results;
            });
    });

});
</script>
@endsection