@extends('layouts.layout-horizontal')

@section('title', 'Enquiry Details')

@section('css')
<style>
    .progress-bar-wrap {
        background: #e9ecef; border-radius: 4px; height: 8px; overflow: hidden; width: 100%;
    }
    .progress-bar-fill {
        height: 100%; border-radius: 4px; transition: width .3s;
    }
    .progress-bar-fill.full { background: #198754; }
    .progress-bar-fill.partial { background: #fd7e14; }
    .progress-bar-fill.none { background: #e9ecef; }

    .qty-badge { font-size: .75rem; padding: 2px 8px; border-radius: 10px; }
    .qty-done { background: #d1e7dd; color: #0f5132; }
    .qty-pending { background: #fff3cd; color: #664d03; }
    .qty-full { background: #cfe2ff; color: #084298; }

    .convert-table th { font-size: .8rem; text-transform: uppercase; color: #6c757d; }
    .convert-table td { vertical-align: middle; }
    .convert-table .form-control-sm { max-width: 90px; text-align: right; }

    .company-radio-group { display: flex; gap: 8px; flex-wrap: wrap; }
    .company-radio-group .btn-check:checked + .btn-outline-primary {
        background: #0d6efd; color: #fff; border-color: #0d6efd;
    }
    .company-radio-group .btn { font-size: .85rem; padding: 4px 14px; border-radius: 20px; }

    .summary-card { border-left: 4px solid; padding: 12px 16px; background: #f8f9fa; border-radius: 4px; margin-bottom: 12px; }
    .summary-card.open { border-color: #198754; }
    .summary-card.partial { border-color: #fd7e14; }
    .summary-card.closed { border-color: #6c757d; }
</style>
@endsection

@section('content')
<div class="container-fluid">
    {{-- Top Bar --}}
    <div class="d-flex justify-content-between align-items-center mb-3">
        <a href="{{ route('sale-enquiries.index') }}" class="btn btn-outline-secondary btn-sm">
            <i class="ri-arrow-left-line"></i> Back
        </a>
        <div class="d-flex gap-2 align-items-center">
            <a href="{{ route('sale-enquiries.pdf', $enquiry->id) }}" class="btn btn-outline-dark btn-sm" target="_blank">
                <i class="ri-printer-line"></i> PDF
            </a>
            @if($enquiry->status == 'open')
            <a href="{{ route('sale-enquiries.edit', $enquiry->id) }}" class="btn btn-outline-primary btn-sm">
                <i class="ri-pencil-line"></i> Edit
            </a>
            <form action="{{ route('sale-enquiries.close', $enquiry->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Close this enquiry manually?')">
                @csrf
                <button class="btn btn-outline-warning btn-sm">Close Enquiry</button>
            </form>
            @else
            <span class="badge bg-dark fs-6">Closed</span>
            @endif
        </div>
    </div>

    @php
        $totalQty = $enquiry->items->sum('qty');
        $totalOutward = $enquiry->items->sum('outward_qty');
        $overallPercent = $totalQty > 0 ? round(($totalOutward / $totalQty) * 100) : 0;
        $enquiryStatus = $overallPercent >= 100 ? 'closed' : ($overallPercent > 0 ? 'partial' : 'open');
    @endphp

    {{-- Summary Card --}}
    <div class="summary-card {{ $enquiryStatus }}">
        <div class="row align-items-center">
            <div class="col-md-4">
                <h5 class="mb-1">{{ $enquiry->party->name }}</h5>
                <div class="text-muted" style="font-size: .85rem;">
                    {{ $enquiry->enquiry_no }} &middot; {{ $enquiry->enquiry_date->format('d-M-Y') }}
                    &middot; <span class="badge {{ $enquiry->status=='open' ? 'bg-success' : 'bg-secondary' }}">{{ ucfirst($enquiry->status) }}</span>
                </div>
            </div>
            <div class="col-md-4">
                <div class="d-flex align-items-center gap-2">
                    <div class="progress-bar-wrap flex-grow-1">
                        <div class="progress-bar-fill {{ $enquiryStatus }}" style="width: {{ $overallPercent }}%;"></div>
                    </div>
                    <strong style="font-size: .85rem;">{{ $overallPercent }}%</strong>
                </div>
                <div class="text-muted" style="font-size: .78rem;">
                    {{ indian_number($totalOutward, 2) }} of {{ indian_number($totalQty, 2) }} converted
                </div>
            </div>
            <div class="col-md-4 text-end">
                <div style="font-size: .85rem;">Total: <strong>{{ indian_number($enquiry->grand_total, 2) }}</strong></div>
                @php
                    $convertedAmt = $enquiry->items->sum(function($i) {
                        return $i->qty > 0 ? ($i->outward_qty / $i->qty) * $i->line_total : 0;
                    });
                    $pendingAmt = $enquiry->grand_total - $convertedAmt;
                @endphp
                <span class="qty-badge qty-done">Done: {{ indian_number($convertedAmt, 2) }}</span>
                <span class="qty-badge qty-pending">Pending: {{ indian_number(max(0, $pendingAmt), 2) }}</span>
            </div>
        </div>
    </div>

    {{-- Items Table with Progress --}}
    <div class="card mb-3">
        <div class="card-body p-0">
            <table class="table table-sm align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th style="width: 5%;">#</th>
                        <th style="width: 30%;">Product</th>
                        <th class="text-center" style="width: 8%;">Qty</th>
                        <th class="text-center" style="width: 8%;">Converted</th>
                        <th class="text-center" style="width: 8%;">Pending</th>
                        <th style="width: 15%;">Progress</th>
                        <th class="text-end" style="width: 10%;">Rate</th>
                        <th class="text-end" style="width: 10%;">Total</th>
                        <th class="text-center" style="width: 6%;">Status</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($enquiry->items as $idx => $item)
                    @php
                        $remaining = max(0, $item->qty - $item->outward_qty);
                        $pct = $item->qty > 0 ? round(($item->outward_qty / $item->qty) * 100) : 0;
                        $itemStatus = $pct >= 100 ? 'full' : ($pct > 0 ? 'partial' : 'none');
                    @endphp
                    <tr class="{{ $pct >= 100 ? 'table-success' : '' }}">
                        <td class="text-muted">{{ $idx + 1 }}</td>
                        <td>
                            <strong>{{ $item->product->name }}</strong>
                            {{-- HSN hidden --}}
                        </td>
                        <td class="text-center"><strong>{{ indian_number($item->qty, 2) }}</strong> {{ $item->unit }}</td>
                        <td class="text-center">
                            <span class="qty-badge qty-done">{{ indian_number($item->outward_qty, 2) }}</span>
                        </td>
                        <td class="text-center">
                            <span class="qty-badge {{ $remaining > 0 ? 'qty-pending' : 'qty-done' }}">{{ indian_number($remaining, 2) }}</span>
                        </td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                <div class="progress-bar-wrap flex-grow-1">
                                    <div class="progress-bar-fill {{ $itemStatus }}" style="width: {{ $pct }}%;"></div>
                                </div>
                                <span style="font-size:.75rem; min-width: 30px;">{{ $pct }}%</span>
                            </div>
                        </td>
                        <td class="text-end">{{ indian_number($item->rate, 2) }}</td>
                        <td class="text-end"><strong>{{ indian_number($item->line_total, 2) }}</strong></td>
                        <td class="text-center">
                            @if($pct >= 100)
                                <span class="badge bg-success">Done</span>
                            @elseif($pct > 0)
                                <span class="badge bg-warning text-dark">Partial</span>
                            @else
                                <span class="badge bg-secondary">Pending</span>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    {{-- Convert to Invoice Section --}}
    @if($enquiry->status == 'open')
    @php
        $hasRemaining = $enquiry->items->contains(fn($i) => $i->remainingQty() > 0);
    @endphp
    @if($hasRemaining)
    <div class="card border-primary">
        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
            <h6 class="mb-0"><i class="ri-exchange-line"></i> Convert to Invoice</h6>
        </div>
        <div class="card-body">
            <form action="{{ route('sale-enquiries.convert', $enquiry->id) }}" method="POST" id="convertForm" target="_blank">
                @csrf

                {{-- Company Selection --}}
                <div class="mb-3">
                    <label class="form-label fw-bold">Generate Invoice In:</label>
                    <div class="company-radio-group">
                        @foreach($companies as $c)
                        <div>
                            <input type="radio" class="btn-check" name="target_company_id"
                                   id="company_{{ $c->id }}" value="{{ $c->id }}"
                                   {{ $loop->first ? 'checked' : '' }}>
                            <label class="btn btn-outline-primary" for="company_{{ $c->id }}">
                                {{ $c->name }} <span class="text-muted">({{ $c->mode }})</span>
                            </label>
                        </div>
                        @endforeach
                    </div>
                </div>

                {{-- Items to Convert --}}
                <table class="table table-sm convert-table align-middle">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 5%;">
                                <input type="checkbox" id="selectAll" checked>
                            </th>
                            <th style="width: 35%;">Product</th>
                            <th class="text-center" style="width: 12%;">Enquiry Qty</th>
                            <th class="text-center" style="width: 12%;">Already Converted</th>
                            <th class="text-center" style="width: 12%;">Remaining</th>
                            <th class="text-center" style="width: 14%;">Convert Qty</th>
                            <th class="text-end" style="width: 10%;">Rate</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($enquiry->items as $item)
                        @php $rem = $item->remainingQty(); @endphp
                        @if($rem > 0)
                        <tr data-item-id="{{ $item->id }}">
                            <td>
                                <input type="checkbox" class="item-check" checked data-item-id="{{ $item->id }}">
                            </td>
                            <td>
                                <strong>{{ $item->product->name }}</strong>
                                {{-- HSN hidden --}}
                            </td>
                            <td class="text-center">{{ indian_number($item->qty, 2) }} {{ $item->unit }}</td>
                            <td class="text-center">
                                <span class="qty-badge qty-done">{{ indian_number($item->outward_qty, 2) }}</span>
                            </td>
                            <td class="text-center">
                                <span class="qty-badge qty-pending">{{ indian_number($rem, 2) }}</span>
                            </td>
                            <td class="text-center">
                                <input type="number" class="form-control form-control-sm convert-qty"
                                       value="{{ $rem }}" min="0.001" max="{{ $rem }}" step="0.001"
                                       data-max="{{ $rem }}" data-item-id="{{ $item->id }}">
                            </td>
                            <td class="text-end">{{ indian_number($item->rate, 2) }}</td>
                        </tr>
                        @endif
                        @endforeach
                    </tbody>
                </table>

                {{-- Hidden inputs populated by JS --}}
                <div id="hiddenItems"></div>

                <div class="d-flex justify-content-end gap-2 mt-3">
                    <button type="submit" class="btn btn-success">
                        <i class="ri-exchange-line"></i> Convert Selected to Invoice
                    </button>
                </div>
            </form>
        </div>
    </div>
    @else
    <div class="alert alert-info">All items have been fully converted to invoices.</div>
    @endif
    @endif
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const selectAll = document.getElementById('selectAll');
    const checks = document.querySelectorAll('.item-check');
    const form = document.getElementById('convertForm');

    // Select all toggle
    if (selectAll) {
        selectAll.addEventListener('change', function() {
            checks.forEach(c => c.checked = this.checked);
        });
        checks.forEach(c => {
            c.addEventListener('change', () => {
                selectAll.checked = [...checks].every(c => c.checked);
            });
        });
    }

    // Cap qty to max remaining
    document.querySelectorAll('.convert-qty').forEach(input => {
        input.addEventListener('input', function() {
            const max = parseFloat(this.dataset.max);
            if (parseFloat(this.value) > max) this.value = max;
            if (parseFloat(this.value) < 0) this.value = 0;
        });
    });

    // Build hidden inputs on submit
    if (form) {
        form.addEventListener('submit', function(e) {
            const hidden = document.getElementById('hiddenItems');
            hidden.innerHTML = '';

            let hasItems = false;
            checks.forEach((chk, idx) => {
                if (!chk.checked) return;
                const itemId = chk.dataset.itemId;
                const qtyInput = document.querySelector(`.convert-qty[data-item-id="${itemId}"]`);
                const qty = parseFloat(qtyInput?.value || 0);
                if (qty <= 0) return;

                hasItems = true;
                hidden.innerHTML += `<input type="hidden" name="items[${idx}][item_id]" value="${itemId}">`;
                hidden.innerHTML += `<input type="hidden" name="items[${idx}][qty]" value="${qty}">`;
            });

            if (!hasItems) {
                e.preventDefault();
                alert('Select at least one item with valid quantity.');
            } else {
                // Reload this page after short delay so progress updates
                setTimeout(() => window.location.reload(), 500);
            }
        });
    }
});
</script>
@endpush