@extends('layouts.app')
@section('title',($vendorList->exists ? 'Edit' : 'Create').' Vendor List | BASCORE')
@section('content')
@php
    $route = $vendorList->exists ? route('vendor-lists.update',$vendorList) : route('vendor-lists.store');
    $rows = old('items', $lines);
@endphp
<div class="toolbar">
    <div>
        <h1 class="page-title">{{ $vendorList->exists ? 'Edit' : 'Create' }} Vendor List</h1>
        <div class="page-subtitle">Prepare a client-ready approved vendor/brand list for project submissions.</div>
    </div>
</div>
<form method="post" action="{{ $route }}">
    @csrf
    @if($vendorList->exists) @method('put') @endif
    <div class="card card-pad">
        <div class="grid grid-3">
            <div>
                <label class="label">Project name</label>
                <input class="form-control" name="project_name" value="{{ old('project_name',$vendorList->project_name) }}" placeholder="Project or site name">
            </div>
            <div>
                <label class="label">Customer</label>
                <select class="form-select" name="customer_id">
                    <option value="">Select customer</option>
                    @foreach($customers as $customer)
                        <option value="{{ $customer->id }}" @selected(old('customer_id',$vendorList->customer_id)==$customer->id)>{{ $customer->customer_name }} @if($customer->company_name) - {{ $customer->company_name }} @endif</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="label">Issue date <span class="required">*</span></label>
                <input class="form-control" type="date" name="issue_date" value="{{ old('issue_date',optional($vendorList->issue_date)->format('Y-m-d') ?: now()->format('Y-m-d')) }}" required>
            </div>
        </div>
    </div>

    <div class="card card-pad" style="margin-top:18px">
        <div class="toolbar"><h2>Vendor / Brand Items</h2><button type="button" class="btn btn-light" data-add-vendor-line>Add line</button></div>
        <div class="table-wrap">
            <table class="line-items-table" data-vendor-lines>
                <thead><tr><th style="width:32%">System</th><th style="width:28%">Preferred Brand</th><th style="width:30%">Alternative</th><th style="width:10%"></th></tr></thead>
                <tbody>
                    @foreach($rows as $i => $line)
                        <tr>
                            <td><input class="form-control" name="items[{{ $i }}][system_name]" value="{{ $line['system_name'] ?? '' }}" placeholder="CCTV Cameras"></td>
                            <td><input class="form-control" name="items[{{ $i }}][preferred_brand]" value="{{ $line['preferred_brand'] ?? '' }}" placeholder="Hikvision"></td>
                            <td><input class="form-control" name="items[{{ $i }}][alternative]" value="{{ $line['alternative'] ?? '' }}" placeholder="Dahua / Uniview"></td>
                            <td><button type="button" class="btn btn-sm btn-danger" data-remove-vendor-line>Remove</button></td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <div class="card card-pad" style="margin-top:18px">
        <label class="label">Notes</label>
        <textarea name="notes" rows="4" placeholder="Optional notes for consultant/client submission.">{{ old('notes',$vendorList->notes) }}</textarea>
    </div>
    <div class="actions" style="margin-top:20px">
        <button class="btn btn-primary">Save Vendor List</button>
        <a class="btn btn-light" href="{{ route('vendor-lists.index') }}">Cancel</a>
    </div>
</form>
<template id="vendor-line-template">
    <tr>
        <td><input class="form-control" name="items[0][system_name]" placeholder="System"></td>
        <td><input class="form-control" name="items[0][preferred_brand]" placeholder="Preferred brand"></td>
        <td><input class="form-control" name="items[0][alternative]" placeholder="Alternative"></td>
        <td><button type="button" class="btn btn-sm btn-danger" data-remove-vendor-line>Remove</button></td>
    </tr>
</template>
@endsection