@extends('layouts.app')

@section('title','Add Supplier Quotations for Project')

@section('content')
<h1 class="h3 mb-4">Project: {{ $project->project_name }}</h1>

<form action="{{ route('projects.quotes.store',$project) }}" method="POST">
    @csrf

    <div class="mb-3">
        <label class="form-label">Select Suppliers (type to search & select multiple)</label>
        <select name="suppliers[]" class="form-select js-multi-supplier-select" multiple size="6" required>
            @foreach($suppliers as $supplier)
                <option value="{{ $supplier->id }}"
                    @if($project->suppliers->contains($supplier->id)) selected @endif
                >{{ $supplier->business_name }}</option>
            @endforeach
        </select>
    </div>

    <h5 class="mt-4">Quotation Details</h5>

    @foreach($suppliers as $supplier)
        <div class="mb-4 supplier-entry" data-supplier-id="{{ $supplier->id }}">
            <h6>{{ $supplier->business_name }}</h6>

            <input type="hidden" name="suppliers[]" value="{{ $supplier->id }}">

            <div class="row mb-2">
                <div class="col-md-6">
                    <label class="form-label">Place of Delivery</label>
                    <input type="text" name="place_of_delivery[{{ $supplier->id }}]" class="form-control"
                           value="{{ $project->suppliers->firstWhere('id',$supplier->id)->pivot->place_of_delivery ?? '' }}">
                </div>
                <div class="col-md-6">
                    <label class="form-label">Delivery Terms</label>
                    <input type="text" name="delivery_terms[{{ $supplier->id }}]" class="form-control"
                           value="{{ $project->suppliers->firstWhere('id',$supplier->id)->pivot->delivery_terms ?? '' }}">
                </div>
            </div>

            <div class="row mb-2">
                <div class="col-md-4">
                    <label class="form-label">Date of Delivery</label>
                    <input type="date" name="date_of_delivery[{{ $supplier->id }}]" class="form-control"
                           value="{{ optional(optional($project->suppliers->firstWhere('id', $supplier->id))->pivot)->date_of_delivery ? optional($project->suppliers->firstWhere('id', $supplier->id))->pivot->date_of_delivery->format('Y-m-d') : '' }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Payment Mode</label>
                    <input type="text" name="payment_mode[{{ $supplier->id }}]" class="form-control"
                           value="{{ $project->suppliers->firstWhere('id',$supplier->id)->pivot->payment_mode ?? '' }}">
                </div>
                <div class="col-md-4">
                    <label class="form-label">Quoted Price</label>
                    <input type="text" name="quoted_price[{{ $supplier->id }}]" class="form-control"
                           value="{{ $project->suppliers->firstWhere('id',$supplier->id)->pivot->quoted_price ?? '' }}">
                </div>
            </div>

        </div>
    @endforeach

    <button type="submit" class="btn btn-primary">Save All Quotations</button>
    <a href="{{ route('projects.index') }}" class="btn btn-secondary">Back</a>
</form>

<script>
    // You can add JavaScript logic here to hide/show supplier-entry blocks
    // if the supplier is not selected in the multi-select, e.g.:
    document.querySelector('.js-multi-supplier-select').addEventListener('change', function(e){
        const selected = new Set(Array.from(e.target.selectedOptions).map(opt => opt.value));
        document.querySelectorAll('.supplier-entry').forEach(div => {
            const sid = div.getAttribute('data-supplier-id');
            if (selected.has(sid)) {
                div.style.display = '';
            } else {
                div.style.display = 'none';
            }
        });
    });

    // On page load trigger the change event:
    document.querySelector('.js-multi-supplier-select').dispatchEvent(new Event('change'));
</script>

@endsection