@extends('layouts.omd.omd')
@section('page-title', 'Create Order')
@section('content')
    @php
        $projectId = $projectId ?? request()->query('project_id');
        $description = $description ?? request()->query('description');
    @endphp

        <div class="container py-4">

            <div class="d-flex justify-content-between align-items-center mb-4">
                <h3 class="mb-0">Create Order</h3>
                <a href="{{ route('omd.orders.index') }}" class="btn btn-secondary">← Back</a>
            </div>

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

            <form action="{{ route('omd.orders.store') }}" method="POST">
                @csrf
                <input type="hidden" name="project_id" value="{{ $projectId }}">
                {{-- Section 1: PO & Vendor --}}
                <div class="card mb-4">
                    <div class="card-header fw-semibold">Order Information</div>
                    <div class="card-body">
                        <div class="row g-3">

                            <div class="col-md-6">
                                <label class="form-label">PO Number <span class="text-danger">*</span></label>
                               <input type="text" class="form-control bg-light" value="PO-{{ date('y') }}-Auto" readonly>
                                @error('po_number') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Vendor <span class="text-danger">*</span></label>
                                <select name="vendor_id" class="form-select @error('vendor_id') is-invalid @enderror">
                                    <option value="">-- Select Vendor --</option>
                                    @foreach($vendors as $vendor)
                                    <option value="{{ $vendor->id }}" {{ old('vendor_id') == $vendor->id ? 'selected' : '' }}>
                                        {{ $vendor->user->name }}
                                    </option>
                                    @endforeach
                                </select>
                                @error('vendor_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

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

                {{-- Section 2: Material --}}
                <div class="card mb-4">
                    <div class="card-header fw-semibold">Material Details</div>
                    <div class="card-body">
                        <div class="row g-3">

                            <div class="col-md-6">
                                <label class="form-label">Material Name <span class="text-danger">*</span></label>
                               <input type="text"
                                    name="material_name"
                                    class="form-control @error('material_name') is-invalid @enderror"
                                    value="{{ $description ?? old('material_name') }}"
                                    placeholder="e.g. Steel Rod">
                                @error('material_name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Material Specification</label>
                                <input type="text" name="material_spec" class="form-control" value="{{ old('material_spec') }}"
                                    placeholder="e.g. IS 1786 Fe500">
                            </div>

                            <div class="col-md-3">
                                <label class="form-label">Quantity <span class="text-danger">*</span></label>
                                <input type="number" name="quantity" id="quantity"
                                    class="form-control @error('quantity') is-invalid @enderror" value="{{ old('quantity') }}"
                                    placeholder="0">
                                @error('quantity') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-3">
                                <label class="form-label">Unit</label>
                                <input type="text" name="unit" class="form-control" value="{{ old('unit') }}"
                                    placeholder="e.g. MT, KG, PCS">
                            </div>

                            <div class="col-md-3">
                                <label class="form-label">Rate (₹) <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">₹</span>
                                    <input type="number" step="0.01" name="rate" id="rate"
                                        class="form-control @error('rate') is-invalid @enderror" value="{{ old('rate') }}"
                                        placeholder="0.00">
                                </div>
                                @error('rate') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-3">
                                <label class="form-label">GST %</label>
                                <div class="input-group">
                                    <input type="number" step="0.01" name="gst_percent" id="gst_percent" class="form-control"
                                        value="{{ old('gst_percent', 18) }}" placeholder="18">
                                    <span class="input-group-text">%</span>
                                </div>
                            </div>

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

                {{-- Section 3: Price Summary --}}
                <div class="card mb-4">
                    <div class="card-header fw-semibold">Price Summary</div>
                    <div class="card-body">
                        <div class="row g-3">

                            <div class="col-md-4">
                                <label class="form-label">Subtotal (₹)</label>
                                <div class="input-group">
                                    <span class="input-group-text">₹</span>
                                    <input type="number" name="subtotal" id="subtotal" class="form-control bg-light" readonly
                                        placeholder="0.00">
                                </div>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label">GST Amount (₹)</label>
                                <div class="input-group">
                                    <span class="input-group-text">₹</span>
                                    <input type="number" name="gst_amount" id="gst_amount" class="form-control bg-light"
                                        readonly placeholder="0.00">
                                </div>
                            </div>

                            <div class="col-md-4">
                                <label class="form-label fw-bold">Total Amount (₹)</label>
                                <div class="input-group">
                                    <span class="input-group-text">₹</span>
                                    <input type="number" name="total_amount" id="total_amount"
                                        class="form-control bg-success-subtle fw-bold" readonly placeholder="0.00">
                                </div>
                            </div>

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

                {{-- Section 4: Delivery --}}
                <div class="card mb-4">
                    <div class="card-header fw-semibold">Delivery Details</div>
                    <div class="card-body">
                        <div class="row g-3">

                            <div class="col-md-6">
                                <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') }}">
                                @error('delivery_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Delivery Location</label>
                                <input type="text" name="delivery_location" class="form-control"
                                    value="{{ old('delivery_location') }}" placeholder="e.g. Warehouse A, Mumbai">
                            </div>

                            <div class="col-md-12">
                                <label class="form-label">Notes</label>
                                <textarea name="notes" class="form-control" rows="3"
                                    placeholder="Any special instructions...">{{ old('notes') }}</textarea>
                            </div>

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

                {{-- Actions --}}
                <div class="d-flex gap-2 justify-content-end">
                    <a href="{{ route('omd.orders.index') }}" class="btn btn-secondary px-4">Cancel</a>
                    <button type="submit" class="btn btn-success px-4">Save Order</button>
                </div>

            </form>
        </div>

        <script>
            function calculate() {
                const qty = parseFloat(document.getElementById('quantity').value) || 0;
                const rate = parseFloat(document.getElementById('rate').value) || 0;
                const gstPct = parseFloat(document.getElementById('gst_percent').value) || 0;

                const subtotal = qty * rate;
                const gstAmount = subtotal * gstPct / 100;
                const total = subtotal + gstAmount;

                document.getElementById('subtotal').value = subtotal.toFixed(2);
                document.getElementById('gst_amount').value = gstAmount.toFixed(2);
                document.getElementById('total_amount').value = total.toFixed(2);
            }

            document.getElementById('quantity').addEventListener('input', calculate);
            document.getElementById('rate').addEventListener('input', calculate);
            document.getElementById('gst_percent').addEventListener('input', calculate);
        </script>

@endsection