@php
    $canCreateQuotation = \App\Support\AdminAccess::canAction('quotations', 'create');
    $canViewQuotation = \App\Support\AdminAccess::canAction('quotations', 'view');
@endphp

<div class="container-xxl flex-grow-1 container-p-y">
    <style>
        .invoice-detail-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.45);
            z-index: 1200;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .invoice-detail-modal {
            width: 100%;
            max-width: 920px;
            max-height: 90vh;
            background: #fff;
            border-radius: 18px;
            box-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .invoice-detail-header {
            position: relative;
            padding-right: 64px !important;
            flex-shrink: 0;
        }

        .invoice-detail-body {
            padding: 24px;
            overflow-y: auto;
        }

        .invoice-modal-close {
            position: absolute;
            top: 18px;
            right: 18px;
            margin: 0 !important;
        }

        .invoice-info-card {
            background: #f8fafc;
            border: 1px solid #e9eef5;
            border-radius: 14px;
            padding: 16px;
            height: 100%;
        }

        .invoice-summary-row {
            display: flex;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 10px;
        }

        .invoice-summary-row.total {
            border-top: 1px solid #dde5ef;
            padding-top: 12px;
            margin-top: 12px;
            font-weight: 700;
        }
    </style>

    <div class="card shadow-sm border-0" style="border-radius: 15px;">
        <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center" style="border-radius: 15px 15px 0 0;">
            <h5 class="mb-0 fw-bold">
                <i class="fa-solid fa-file-signature me-2 text-primary"></i> {{ __('Quotation Management') }}
            </h5>
            <div class="d-flex gap-2 align-items-center">
                <input type="text" wire:model.live="search" class="form-control form-control-sm rounded-pill px-3" style="width: 250px;" placeholder="{{ __('Search Quotation # or Customer...') }}">
                @if($canCreateQuotation)
                    <a href="{{ route('admin.pos') }}" class="btn btn-primary btn-sm rounded-pill shadow-sm text-nowrap">
                        <i class="fa-solid fa-plus me-1"></i> {{ __('New Quotation') }}
                    </a>
                @endif
            </div>
        </div>

        <div class="table-responsive text-nowrap">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th class="fw-bold">{{ __('Quotation #') }}</th>
                        <th class="fw-bold">{{ __('Customer') }}</th>
                        <th class="fw-bold">{{ __('Date') }}</th>
                        <th class="fw-bold">{{ __('Total Amount') }}</th>
                        <th class="text-center fw-bold">{{ __('Actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($quotations as $quotation)
                        <tr>
                            <td><span class="fw-bold text-primary">#{{ $quotation->quotation_number }}</span></td>
                            <td>{{ $quotation->customer->display_name ?? __('Walk-in Customer') }}</td>
                            <td>{{ $quotation->created_at->format('d M, Y') }}</td>
                            <td><span class="fw-bold">Rs. {{ number_format($quotation->total, 0) }}</span></td>
                            <td class="text-center">
                                <div class="btn-group">
                                    @if($canViewQuotation)
                                        <button class="btn btn-sm btn-icon btn-label-secondary shadow-none border-0 mx-1"
                                                title="{{ __('View Details') }}"
                                                wire:click="openViewModal({{ $quotation->id }})">
                                            <i class="fa-solid fa-eye text-info"></i>
                                        </button>
                                    @endif
                                    <a href="{{ route('admin.pos', ['invoice' => 'q-' . $quotation->id]) }}"
                                       class="btn btn-sm btn-icon btn-label-secondary shadow-none border-0 mx-1"
                                       title="{{ __('Open in POS') }}">
                                        <i class="fa-solid fa-pen-to-square text-warning"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center py-5">
                                <img src="https://cdn-icons-png.flaticon.com/512/7486/7486744.png" style="width: 80px; opacity: 0.3;">
                                <p class="mt-3 text-muted small">{{ __('No quotations found.') }}</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="card-footer bg-white border-0 py-3">
            {{ $quotations->links() }}
        </div>
    </div>

    @if($showViewModal && $selectedQuotation)
        <div class="invoice-detail-backdrop">
            <div class="invoice-detail-modal">
                <div class="modal-header border-bottom px-4 py-3 invoice-detail-header">
                    <div>
                        <h4 class="mb-1">{{ __('Quotation Details') }}</h4>
                        <small class="text-muted">{{ __('Saved quotation information in one place.') }}</small>
                    </div>
                    <button type="button" class="btn-close invoice-modal-close" wire:click="closeViewModal"></button>
                </div>

                <div class="invoice-detail-body">
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <div class="invoice-info-card">
                                <div class="text-muted small mb-1">{{ __('Quotation Number') }}</div>
                                <h5 class="mb-2">#{{ $selectedQuotation->quotation_number }}</h5>
                                <div class="text-muted">{{ __('Date:') }} {{ $selectedQuotation->created_at->format('d M, Y') }}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="invoice-info-card">
                                <div class="text-muted small mb-1">{{ __('Customer') }}</div>
                                <h6 class="mb-1">{{ $selectedQuotation->customer->display_name ?? __('Walk-in Customer') }}</h6>
                                <div class="text-muted">{{ $selectedQuotation->customer->phone ?? __('Phone not available') }}</div>
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive mb-4">
                        <table class="table table-bordered align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>{{ __('Product') }}</th>
                                    <th class="text-center" style="width: 110px;">{{ __('Qty') }}</th>
                                    <th class="text-end" style="width: 150px;">{{ __('Price') }}</th>
                                    <th class="text-end" style="width: 150px;">{{ __('Total') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($selectedQuotation->items as $item)
                                    <tr>
                                        <td>{{ $item->product_name }}</td>
                                        <td class="text-center">{{ number_format($item->qty, 2) }}</td>
                                        <td class="text-end">Rs. {{ number_format($item->price, 2) }}</td>
                                        <td class="text-end">Rs. {{ number_format($item->total, 2) }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center text-muted py-4">{{ __('No quotation items found.') }}</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div class="invoice-info-card">
                        <div class="invoice-summary-row">
                            <span>{{ __('Sub Total') }}</span>
                            <strong>Rs. {{ number_format($selectedQuotation->subtotal, 2) }}</strong>
                        </div>
                        <div class="invoice-summary-row">
                            <span>{{ __('Discount') }}</span>
                            <strong>Rs. {{ number_format($selectedQuotation->discount, 2) }}</strong>
                        </div>
                        <div class="invoice-summary-row total">
                            <span>{{ __('Grand Total') }}</span>
                            <strong>Rs. {{ number_format($selectedQuotation->total, 2) }}</strong>
                        </div>
                    </div>
                </div>

                <div class="modal-footer border-top px-4 py-3">
                    <button type="button" class="btn btn-light border" wire:click="closeViewModal">{{ __('Close') }}</button>
                    <a href="{{ route('admin.pos', ['invoice' => 'q-' . $selectedQuotation->id]) }}"
                       class="btn btn-primary">
                        <i class="fa-solid fa-pen-to-square me-1"></i> {{ __('Open in POS') }}
                    </a>
                </div>
            </div>
        </div>
    @endif
</div>