@extends('layouts.app')
@section('title', 'নতুন অর্ডার')
@section('page-title', 'নতুন অফিস অর্ডার তৈরি')

@section('content')
<div class="row">
    <div class="col-lg-8">
        <div class="card stat-card">
            <div class="card-header bg-white border-0 pt-4 px-4">
                <h6 class="fw-semibold mb-0"><i class="bi bi-cart-plus text-primary me-2"></i>অর্ডারের তথ্য</h6>
            </div>
            <div class="card-body p-4">
                <form method="POST" action="{{ route('admin.orders.store') }}" id="orderForm">
                    @csrf

                    {{-- Customer --}}
                    <div class="mb-4">
                        <h6 class="text-primary border-bottom pb-2 mb-3"><i class="bi bi-person me-2"></i>গ্রাহক</h6>
                        <div class="row g-3">
                            <div class="col-md-8">
                                <label class="form-label fw-semibold">গ্রাহক বেছে নিন <span class="text-danger">*</span></label>
                                <select name="customer_id" id="customerSelect"
                                    class="form-select @error('customer_id') is-invalid @enderror" required>
                                    <option value="">-- গ্রাহক খুঁজুন --</option>
                                    @foreach($customers as $c)
                                        <option value="{{ $c->id }}"
                                            data-address="{{ $c->address }}"
                                            {{ old('customer_id') == $c->id ? 'selected' : '' }}>
                                            {{ $c->name }} — {{ $c->phone }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('customer_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">ডেলিভারির তারিখ</label>
                                <input type="date" name="scheduled_date" value="{{ old('scheduled_date', date('Y-m-d')) }}"
                                    class="form-control">
                            </div>
                            <div class="col-md-12">
                                <label class="form-label fw-semibold">ডেলিভারি ঠিকানা</label>
                                <input type="text" name="delivery_address" id="deliveryAddress"
                                    value="{{ old('delivery_address') }}"
                                    class="form-control" placeholder="গ্রাহকের ঠিকানা (পরিবর্তন করতে পারবেন)">
                            </div>
                        </div>
                    </div>

                    {{-- Order Items --}}
                    <div class="mb-4">
                        <h6 class="text-primary border-bottom pb-2 mb-3"><i class="bi bi-fire me-2"></i>সিলিন্ডার আইটেম</h6>
                        <div id="itemsContainer">
                            <div class="item-row row g-2 mb-2 align-items-end" data-index="0">
                                <div class="col-md-5">
                                    <label class="form-label small fw-semibold">সিলিন্ডার টাইপ</label>
                                    <select name="items[0][type_id]" class="form-select type-select" required>
                                        <option value="">-- টাইপ --</option>
                                        @foreach($types as $t)
                                            <option value="{{ $t->id }}" data-price="{{ $t->selling_price }}">
                                                {{ $t->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label small fw-semibold">পরিমাণ</label>
                                    <input type="number" name="items[0][quantity]" class="form-control qty-input"
                                        min="1" value="1" required>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label small fw-semibold">একক মূল্য (৳)</label>
                                    <input type="number" name="items[0][unit_price]" class="form-control price-input"
                                        min="0" step="0.01" placeholder="0.00" required>
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label small fw-semibold">সাবটোটাল</label>
                                    <div class="form-control bg-light subtotal fw-semibold text-success">৳০</div>
                                </div>
                            </div>
                        </div>

                        <button type="button" id="addItem" class="btn btn-sm btn-outline-primary mt-2">
                            <i class="bi bi-plus-circle me-1"></i>আরও আইটেম যোগ করুন
                        </button>
                    </div>

                    {{-- Payment --}}
                    <div class="mb-4">
                        <h6 class="text-primary border-bottom pb-2 mb-3"><i class="bi bi-cash me-2"></i>পেমেন্ট</h6>
                        <div class="row g-3 align-items-center">
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">মোট পরিমাণ</label>
                                <div class="input-group">
                                    <span class="input-group-text">৳</span>
                                    <div class="form-control bg-light fw-bold fs-5 text-primary" id="totalDisplay">০.০০</div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">অগ্রিম পেমেন্ট</label>
                                <div class="input-group">
                                    <span class="input-group-text">৳</span>
                                    <input type="number" name="paid_amount" id="paidInput"
                                        class="form-control" min="0" step="0.01" value="0">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label fw-semibold">বকেয়া থাকবে</label>
                                <div class="input-group">
                                    <span class="input-group-text">৳</span>
                                    <div class="form-control bg-light fw-bold text-danger" id="dueDisplay">০.০০</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">নোট</label>
                        <textarea name="notes" class="form-control" rows="2" placeholder="কোনো বিশেষ নির্দেশনা...">{{ old('notes') }}</textarea>
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary px-4">
                            <i class="bi bi-check2 me-2"></i>অর্ডার তৈরি করুন
                        </button>
                        <a href="{{ route('admin.orders.index') }}" class="btn btn-outline-secondary px-4">বাতিল</a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Sidebar info --}}
    <div class="col-lg-4">
        <div class="card stat-card mb-3" id="customerInfo" style="display:none">
            <div class="card-header bg-white border-0 pt-3 pb-0">
                <h6 class="fw-semibold small mb-0"><i class="bi bi-person-circle text-primary me-2"></i>গ্রাহকের তথ্য</h6>
            </div>
            <div class="card-body" id="customerInfoBody"></div>
        </div>

        <div class="card stat-card">
            <div class="card-header bg-white border-0 pt-3 pb-0">
                <h6 class="fw-semibold small mb-0"><i class="bi bi-fire text-warning me-2"></i>স্টক অবস্থা</h6>
            </div>
            <div class="card-body">
                @foreach($types as $t)
                <div class="d-flex justify-content-between align-items-center mb-2 p-2 rounded bg-light">
                    <span class="small fw-semibold">{{ $t->name }}</span>
                    <span class="badge bg-success">
                        {{ \App\Models\Cylinder::where('cylinder_type_id', $t->id)->where('status','full')->where('holder_type','warehouse')->count() }} ভর্তি
                    </span>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
const customers = @json($customers->keyBy('id'));
const types = @json($types->keyBy('id'));
let itemCount = 1;

// গ্রাহক সিলেক্ট
document.getElementById('customerSelect').addEventListener('change', function() {
    const c = customers[this.value];
    if (!c) { document.getElementById('customerInfo').style.display = 'none'; return; }
    document.getElementById('deliveryAddress').value = c.address ?? '';
    document.getElementById('customerInfoBody').innerHTML = `
        <div class="small">
            <div class="mb-1"><i class="bi bi-telephone text-muted me-2"></i>${c.phone}</div>
            <div class="mb-1"><i class="bi bi-geo-alt text-muted me-2"></i>${c.address ?? 'ঠিকানা নেই'}</div>
            <hr class="my-2">
            <div class="d-flex justify-content-between">
                <span class="text-muted">ডিপোজিট:</span>
                <span class="fw-semibold text-success">৳${parseFloat(c.deposit_amount).toFixed(2)}</span>
            </div>
            <div class="d-flex justify-content-between mt-1">
                <span class="text-muted">বকেয়া:</span>
                <span class="fw-semibold text-danger">৳${parseFloat(c.due_balance).toFixed(2)}</span>
            </div>
        </div>`;
    document.getElementById('customerInfo').style.display = 'block';
});

// টাইপ সিলেক্টে দাম auto-fill
document.addEventListener('change', function(e) {
    if (e.target.classList.contains('type-select')) {
        const row = e.target.closest('.item-row');
        const t = types[e.target.value];
        if (t) row.querySelector('.price-input').value = parseFloat(t.selling_price).toFixed(2);
        updateRow(row);
        updateTotal();
    }
    if (e.target.classList.contains('price-input') || e.target.classList.contains('qty-input')) {
        updateRow(e.target.closest('.item-row'));
        updateTotal();
    }
});

document.addEventListener('input', function(e) {
    if (['price-input','qty-input'].some(c => e.target.classList.contains(c))) {
        updateRow(e.target.closest('.item-row'));
        updateTotal();
    }
    if (e.target.id === 'paidInput') updateDue();
});

function updateRow(row) {
    const qty   = parseFloat(row.querySelector('.qty-input').value) || 0;
    const price = parseFloat(row.querySelector('.price-input').value) || 0;
    row.querySelector('.subtotal').textContent = '৳' + (qty * price).toFixed(2);
}

function updateTotal() {
    let total = 0;
    document.querySelectorAll('.item-row').forEach(row => {
        const qty   = parseFloat(row.querySelector('.qty-input').value) || 0;
        const price = parseFloat(row.querySelector('.price-input').value) || 0;
        total += qty * price;
    });
    document.getElementById('totalDisplay').textContent = total.toFixed(2);
    updateDue();
}

function updateDue() {
    const total = parseFloat(document.getElementById('totalDisplay').textContent) || 0;
    const paid  = parseFloat(document.getElementById('paidInput').value) || 0;
    document.getElementById('dueDisplay').textContent = Math.max(0, total - paid).toFixed(2);
}

// নতুন আইটেম যোগ
document.getElementById('addItem').addEventListener('click', function() {
    const idx = itemCount++;
    const container = document.getElementById('itemsContainer');
    const html = `
    <div class="item-row row g-2 mb-2 align-items-end" data-index="${idx}">
        <div class="col-md-5">
            <select name="items[${idx}][type_id]" class="form-select type-select" required>
                <option value="">-- টাইপ --</option>
                ${Object.values(types).map(t => `<option value="${t.id}" data-price="${t.selling_price}">${t.name}</option>`).join('')}
            </select>
        </div>
        <div class="col-md-2">
            <input type="number" name="items[${idx}][quantity]" class="form-control qty-input" min="1" value="1" required>
        </div>
        <div class="col-md-3">
            <input type="number" name="items[${idx}][unit_price]" class="form-control price-input" min="0" step="0.01" placeholder="0.00" required>
        </div>
        <div class="col-md-1">
            <div class="form-control bg-light subtotal fw-semibold text-success">৳০</div>
        </div>
        <div class="col-md-1">
            <button type="button" class="btn btn-sm btn-outline-danger remove-item w-100">
                <i class="bi bi-trash"></i>
            </button>
        </div>
    </div>`;
    container.insertAdjacentHTML('beforeend', html);
});

document.addEventListener('click', function(e) {
    if (e.target.closest('.remove-item')) {
        e.target.closest('.item-row').remove();
        updateTotal();
    }
});
</script>
@endpush