@extends('layouts.omd.omd')

@section('page-title', 'Create RFQ')

@section('content')

<div class="container py-4">

    <h4 class="mb-4">Create RFQ</h4>

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

    <form method="POST" action="{{ route('omd.store.rfq') }}" enctype="multipart/form-data">
        @csrf

        {{-- RFQ DETAILS --}}
        <div class="card mb-3">
            <div class="card-header fw-semibold">RFQ Details</div>
            <div class="card-body">
                <div class="row g-3">

                    <div class="col-12">
                        <label class="form-label">Description <span class="text-danger">*</span></label>
                        <textarea name="description" rows="2"
                            class="form-control @error('description') is-invalid @enderror"
                            required>{{ old('description', $materialName ?? '') }}</textarea>
                        @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>


                    <div class="col-md-4">
                        <label class="form-label">
                            Select Project <span class="text-danger">*</span>
                        </label>

                        <select name="project_id" class="form-select @error('project_id') is-invalid @enderror"
                            required>

                            <option value="">
                                Select Project
                            </option>

                            @foreach($projects as $project)

                            <option value="{{ $project->id }}" {{ old('project_id', request('project_id'))==$project->id
                                ? 'selected' : '' }}>

                                {{ $project->project_name ?? 'Project - '.$project->title }}

                            </option>

                            @endforeach

                        </select>

                        @error('project_id')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>

                    @php
                    $categories = ['steel', 'cement', 'electrical', 'hardware'];

                    $selectedCategory = strtolower(old('category', $materialName ?? ''));

                    $matched = in_array($selectedCategory, $categories);
                    @endphp

                    <div class="col-md-4">

                        <label class="form-label">
                            Requested Item <span class="text-danger">*</span>
                        </label>

                        <select id="categorySelect" name="category"
                            class="form-select @error('category') is-invalid @enderror" required>

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

                            <option value="steel" {{ $selectedCategory=='steel' ? 'selected' : '' }}>
                                Steel
                            </option>

                            <option value="cement" {{ $selectedCategory=='cement' ? 'selected' : '' }}>
                                Cement
                            </option>

                            <option value="electrical" {{ $selectedCategory=='electrical' ? 'selected' : '' }}>
                                Electrical
                            </option>

                            <option value="hardware" {{ $selectedCategory=='hardware' ? 'selected' : '' }}>
                                Hardware
                            </option>

                            <option value="other" {{ !$matched && !empty($selectedCategory) ? 'selected' : '' }}>
                                Other
                            </option>

                        </select>

                        @error('category')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                        @enderror

                    </div>

                    {{-- OTHER ITEM INPUT --}}
                    <div class="col-md-4 {{ !$matched && !empty($selectedCategory) ? '' : 'd-none' }}"
                        id="otherItemDiv">

                        <label class="form-label">
                            Enter Item Name
                        </label>

                        <input type="text" name="other_category" class="form-control" placeholder="Enter custom item"
                            value="{{ !$matched ? $selectedCategory : old('other_category') }}">

                    </div>

                    <div class="col-md-4">
                        <label class="form-label">Site Location <span class="text-danger">*</span></label>
                        <input type="text" id="location" name="site_location"
                            class="form-control @error('site_location') is-invalid @enderror"
                            value="{{ old('site_location') }}" placeholder="Enter city" required>

                        <input type="hidden" name="latitude" id="latitude">
                        <input type="hidden" name="longitude" id="longitude">
                        <!-- <div class="form-text">Vendors within 150 km will be notified.</div> -->
                        @error('site_location')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>



                    <div class="col-md-4">
                        <label class="form-label">Delivery Date <span class="text-danger">*</span></label>
                        <input type="date" name="delivery_date"
                            class="form-control @error('delivery_date') is-invalid @enderror"
                            value="{{ old('delivery_date') }}" min="{{ now()->addDay()->toDateString() }}" required>
                        @error('delivery_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>


                    <div class="col-md-6">
                        <label class="form-label">Upload Drawings</label>
                        <input type="file" name="rfq_drawings[]" multiple
                            class="form-control @error('rfq_drawings') is-invalid @enderror">

                        <div class="form-text">You can upload multiple files (PDF, Image, DWG)</div>

                        @error('rfq_drawings')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

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

        {{-- ITEMS --}}
        <div class="card mb-3">
            <div class="card-header fw-semibold d-flex justify-content-between align-items-center">
                <span>Items</span>
                <button type="button" class="btn btn-success btn-sm" onclick="addRow()">+ Add Item</button>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-bordered mb-0 align-middle" id="itemsTable">
                        <thead class="table-light text-center" style="font-size:.83rem">
                            <tr>
                                <th>Product Name <span class="text-danger">*</span></th>
                                <th style="width:120px">Grade</th>
                                <th style="width:130px">Size</th>
                                <th style="width:80px">Qty <span class="text-danger">*</span></th>
                                <th style="width:90px">Unit</th>
                                <th style="width:50px"></th>
                            </tr>
                        </thead>
                        <tbody id="itemsTbody">
                            <tr>
                                <td><input type="text" name="items[0][name]" class="form-control form-control-sm"
                                        placeholder="e.g. TMT Bar" required
                                        value="{{ old('items.0.name', $materialName ?? '') }}"></td>
                                <td><input type="text" name="items[0][grade]" class="form-control form-control-sm"
                                        placeholder="Fe500" value="{{ old('items.0.grade') }}"></td>
                                <td><input type="text" name="items[0][size]" class="form-control form-control-sm"
                                        placeholder="12mm" value="{{ old('items.0.size') }}"></td>
                                <td><input type="number" name="items[0][qty]"
                                        class="form-control form-control-sm text-center" min="1" required
                                        value="{{ old('items.0.qty') }}"></td>
                                <td>
                                    <select name="items[0][unit]" class="form-select form-select-sm">
                                        @foreach(['MT', 'KG', 'NOS', 'RMT', 'SQM', 'LTR', 'BAG'] as $u)
                                        <option value="{{ $u }}" {{ old('items.0.unit')==$u ? 'selected' : '' }}>{{ $u
                                            }}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td class="text-center">
                                    <button type="button" class="btn btn-outline-danger btn-sm"
                                        onclick="removeRow(this)">✕</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>


        <div class="card mb-3">
            <div class="card-header fw-semibold">Select Vendors (Optional)</div>
            <div class="card-body">

                <div class="form-check mb-2">
                    <input class="form-check-input" type="checkbox" id="selectAllVendors">
                    <label class="form-check-label fw-semibold" for="selectAllVendors">
                        Select All Vendors
                    </label>
                </div>

                <div class="row">
                    @foreach($vendorList as $vendor)
                    <div class="col-md-3">
                        <div class="form-check">
                            <input class="form-check-input vendor-checkbox" type="checkbox" name="vendors[]"
                                value="{{ $vendor->id }}" id="vendor{{ $vendor->id }}">

                            <label class="form-check-label" for="vendor{{ $vendor->id }}">
                                {{ $vendor->name }}
                            </label>
                        </div>
                    </div>
                    @endforeach
                </div>

            </div>
        </div>

        <div class="text-end">
            <button type="submit" class="btn btn-primary px-4">Create RFQ &amp; Notify Vendors</button>
        </div>

    </form>
</div>

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

    const categorySelect = document.getElementById('categorySelect');
    const otherItemDiv = document.getElementById('otherItemDiv');

    function toggleOtherInput() {

        if (categorySelect.value === 'other') {

            otherItemDiv.classList.remove('d-none');

        } else {

            otherItemDiv.classList.add('d-none');
        }
    }

    toggleOtherInput();

    categorySelect.addEventListener('change', toggleOtherInput);

});
</script>

<script>
    let idx = 1;
    const units = ['MT', 'KG', 'NOS', 'RMT', 'SQM', 'LTR', 'BAG'];

    function addRow() {
        const tbody = document.getElementById('itemsTbody');
        const tr = document.createElement('tr');
        tr.innerHTML = `
                <td><input type="text"   name="items[${idx}][name]"  class="form-control form-control-sm" placeholder="e.g. Angle Iron" required></td>
                <td><input type="text"   name="items[${idx}][grade]" class="form-control form-control-sm" placeholder="IS2062"></td>
                <td><input type="text"   name="items[${idx}][size]"  class="form-control form-control-sm" placeholder="50x50x5mm"></td>
                <td><input type="number" name="items[${idx}][qty]"   class="form-control form-control-sm text-center" min="1" required></td>
                <td><select name="items[${idx}][unit]" class="form-select form-select-sm">
                    ${units.map(u => `<option value="${u}">${u}</option>`).join('')}
                </select></td>
                <td class="text-center">
                    <button type="button" class="btn btn-outline-danger btn-sm" onclick="removeRow(this)">✕</button>
                </td>`;
        tbody.appendChild(tr);
        idx++;
    }



    function removeRow(btn) {
        const rows = document.getElementById('itemsTbody').querySelectorAll('tr');
        if (rows.length <= 1) { alert('At least one item is required.'); return; }
        btn.closest('tr').remove();
    }
</script>


<script>
    document.getElementById('selectAllVendors').addEventListener('change', function () {
        document.querySelectorAll('.vendor-checkbox').forEach(cb => {
            cb.checked = this.checked;
        });
    });
</script>
@endsection