@extends('layouts.app')

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

@section('content')
<div class="row align-items-center mb-4">
    <div class="col">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('quotes.index') }}">Quotes</a></li>
                <li class="breadcrumb-item active">{{ $quote->quote_number }}</li>
            </ol>
        </nav>
        <h2 class="h4">Quote: {{ $quote->quote_number }}</h2>
    </div>
    <div class="col-auto d-flex gap-2">
        <a href="{{ route('quotes.edit', $quote->id) }}" class="btn btn-outline-secondary rounded-pill">
            <i class="fas fa-edit me-2"></i>Edit
        </a>
        <button class="btn btn-outline-primary rounded-pill" onclick="window.print()">
            <i class="fas fa-print me-2"></i>Print
        </button>
        @if($quote->status == 'accepted')
        <a href="{{ route('quotes.convert', $quote->id) }}" class="btn btn-primary rounded-pill">
            <i class="fas fa-file-invoice me-2"></i>Convert to Invoice
        </a>
        <a href="{{ route('quotes.convert_so', $quote->id) }}" class="btn btn-info rounded-pill text-dark ms-2">
            <i class="fas fa-shopping-cart me-2"></i>Convert to Sales Order
        </a>
        @endif
        <div class="dropdown">
            <button class="btn btn-outline-secondary rounded-pill" type="button" data-bs-toggle="dropdown">
                More Actions <i class="fas fa-chevron-down ms-1"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu-end shadow border-0 rounded-3">
                @if($quote->status == 'draft')
                <li>
                    <form action="{{ route('quotes.update', $quote->id) }}" method="POST">
                        @csrf @method('PUT')
                        <input type="hidden" name="status" value="sent">
                        <button class="dropdown-item"><i class="fas fa-paper-plane me-2 text-muted"></i>Mark as Sent</button>
                    </form>
                </li>
                @endif
                @if($quote->status == 'sent')
                <li>
                    <form action="{{ route('quotes.update', $quote->id) }}" method="POST">
                        @csrf @method('PUT')
                        <input type="hidden" name="status" value="accepted">
                        <button class="dropdown-item text-success"><i class="fas fa-check me-2"></i>Accept</button>
                    </form>
                </li>
                <li>
                    <form action="{{ route('quotes.update', $quote->id) }}" method="POST">
                        @csrf @method('PUT')
                        <input type="hidden" name="status" value="rejected">
                        <button class="dropdown-item text-danger"><i class="fas fa-times me-2"></i>Reject</button>
                    </form>
                </li>
                @endif
                <li><hr class="dropdown-divider"></li>
                <li>
                    <form action="{{ route('quotes.destroy', $quote->id) }}" method="POST" onsubmit="return confirm('Delete this quote?')">
                        @csrf @method('DELETE')
                        <button class="dropdown-item text-danger"><i class="fas fa-trash-alt me-2"></i>Delete</button>
                    </form>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="row g-4">
    <div class="col-md-9">
        <div class="card border-0 shadow-sm rounded-4 p-4 mb-4 invoice-print shadow-lg">
            <!-- Header Section -->
            <div class="row mb-5">
                <div class="col-6">
                    <img src="{{ asset('img/logo.png') }}" alt="Logo" height="40" class="mb-3 opacity-75">
                    <h5 class="fw-bold mb-0">ESTIMATE</h5>
                    <p class="text-muted small mb-0">{{ $quote->quote_number }}</p>
                </div>
                <div class="col-6 text-end">
                    <h6 class="fw-bold mb-1">Company Address</h6>
                    <p class="small text-muted mb-0">City, State, Country<br>Phone: +91 0000000000</p>
                </div>
            </div>

            <!-- Client & Summary Section -->
            <div class="row mb-5">
                <div class="col-4">
                    <p class="small text-muted text-uppercase fw-bold mb-2">Estimate For</p>
                    <h6 class="fw-bold mb-1">{{ $quote->customer->display_name ?: $quote->customer->name }}</h6>
                    <p class="small text-muted mb-0">
                        {{ $quote->customer->billing_address }}<br>
                        {{ $quote->customer->billing_city }}, {{ $quote->customer->billing_state }}<br>
                        {{ $quote->customer->billing_zip }}
                    </p>
                </div>
                <div class="col-4 ms-auto text-end">
                    <div class="mb-2">
                        <span class="small text-muted text-uppercase fw-bold me-2">Date:</span>
                        <span class="small">{{ $quote->quote_date }}</span>
                    </div>
                    <div>
                        <span class="small text-muted text-uppercase fw-bold me-2">Expiry Date:</span>
                        <span class="small">{{ $quote->expiry_date }}</span>
                    </div>
                </div>
            </div>

            @if($quote->subject)
            <div class="mb-4">
                <h6 class="fw-bold small text-muted text-uppercase mb-2">Subject</h6>
                <p class="mb-0">{{ $quote->subject }}</p>
            </div>
            @endif

            <!-- Item Table -->
            <div class="table-responsive mb-5">
                <table class="table table-borderless">
                    <thead class="bg-light-subtle border-bottom border-top">
                        <tr class="small fw-bold text-muted text-uppercase">
                            <th class="ps-3 py-3">#</th>
                            <th class="py-3">Items & Description</th>
                            <th class="py-3 text-end">Qty</th>
                            <th class="py-3 text-end">Rate</th>
                            <th class="pe-3 py-3 text-end">Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($quote->items as $index => $item)
                        <tr class="border-bottom-dashed">
                            <td class="ps-3 py-3 text-muted">{{ $index + 1 }}</td>
                            <td class="py-3 fw-bold">{{ $item->item_name }}</td>
                            <td class="py-3 text-end">{{ number_format($item->quantity, 2) }}</td>
                            <td class="py-3 text-end">{{ formatCurrency($item->rate) }}</td>
                            <td class="pe-3 py-3 text-end fw-bold">{{ formatCurrency($item->amount) }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Footer Section (Totals) -->
            <div class="row">
                <div class="col-6">
                    @if($quote->notes)
                    <div class="mb-4">
                        <h6 class="fw-bold small text-muted text-uppercase mb-1">Notes</h6>
                        <p class="small text-muted mb-0">{{ $quote->notes }}</p>
                    </div>
                    @endif
                    @if($quote->terms)
                    <div>
                        <h6 class="fw-bold small text-muted text-uppercase mb-1">Terms & Conditions</h6>
                        <p class="small text-muted mb-0 font-italic">{{ $quote->terms }}</p>
                    </div>
                    @endif
                </div>
                <div class="col-4 ms-auto bg-light rounded-4 p-4">
                    <div class="d-flex justify-content-between mb-3">
                        <span class="text-muted small">Sub Total</span>
                        <span id="label-subtotal" class="small">{{ formatCurrency($quote->subtotal) }}</span>
                    </div>
                    @if($quote->discount > 0)
                    <div class="d-flex justify-content-between mb-3 text-danger">
                         <span class="small">Discount ({{ $quote->discount_type == 'percentage' ? $quote->discount.'%' : getCurrencySymbol() }})</span>
                         <span class="small">-{{ formatCurrency($quote->discount_type == 'percentage' ? ($quote->subtotal * $quote->discount / 100) : $quote->discount) }}</span>
                    </div>
                    @endif
                    @if($quote->tax_id)
                    <div class="d-flex justify-content-between mb-3">
                        <span class="text-muted small">{{ $quote->tax->name }} ({{ $quote->tax->rate }}%)</span>
                        <span id="label-tax-amount" class="small">{{ formatCurrency($quote->tax_amount) }}</span>
                    </div>
                    @endif
                    @if($quote->adjustment != 0)
                    <div class="d-flex justify-content-between mb-3">
                        <span class="text-muted small">Adjustment</span>
                        <span class="small">{{ formatCurrency($quote->adjustment) }}</span>
                    </div>
                    @endif
                    <hr>
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="fw-bold mb-0">Total</h6>
                        <h5 class="fw-bold mb-0 text-primary" id="label-total">{{ formatCurrency($quote->total_amount) }}</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <!-- Sidebar Info -->
        <div class="card border-0 shadow-sm rounded-4 p-4 mb-4">
            <h6 class="fw-bold mb-3">Information</h6>
            <div class="mb-3">
                <label class="small text-muted d-block">Status</label>
                <span class="badge {{ $badgeClass ?? 'bg-secondary' }} rounded-pill px-3">{{ ucfirst($quote->status) }}</span>
            </div>
            <div class="mb-3">
                <label class="small text-muted d-block">Reference#</label>
                <span class="fw-bold">{{ $quote->reference_number ?: 'N/A' }}</span>
            </div>
            <div class="mb-0">
                <label class="small text-muted d-block">Customer</label>
                <a href="{{ route('customers.show', $quote->customer_id) }}" class="text-decoration-none fw-bold">{{ $quote->customer->display_name ?: $quote->customer->name }}</a>
            </div>
        </div>

        <div class="card border-0 shadow-sm rounded-4 p-4">
            <h6 class="fw-bold mb-3">Timeline</h6>
            <div class="timeline-small small">
                <div class="border-start ps-3 pb-3 position-relative">
                    <div class="position-absolute translate-middle-x start-0 top-0 mt-1 rounded-circle bg-primary" style="width: 10px; height: 10px; left: -1px;"></div>
                    <span class="fw-bold">Quote Created</span>
                    <p class="text-muted mb-0">{{ $quote->created_at->format('M d, Y h:i A') }}</p>
                </div>
                <div class="border-start ps-3 pb-0 position-relative">
                    <div class="position-absolute translate-middle-x start-0 top-0 mt-1 rounded-circle bg-muted border" style="width: 10px; height: 10px; left: -1px;"></div>
                    <span class="text-muted">Last Updated</span>
                    <p class="text-muted mb-0">{{ $quote->updated_at->format('M d, Y h:i A') }}</p>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.border-bottom-dashed { border-bottom: 1px dashed #dee2e6; }
.bg-light-subtle { background-color: #f8fbff; }
@media print {
    .btn, .dropdown, .timeline-small, .col-md-3, nav { display: none !important; }
    .col-md-9 { width: 100% !important; margin: 0 !important; }
    .card { box-shadow: none !important; }
    body { background-color: #fff !important; }
}
</style>
@endsection