@extends('layouts.admin')

@section('title', 'Quotation ' . $quotation->quotation_number)

@section('page-title', 'Quotation Details')

@section('breadcrumbs')
    <a href="{{ route('admin.quotations.index') }}" class="hover:text-primary">Quotations</a>
    <span class="material-symbols-outlined text-xs">chevron_right</span>
    <span class="text-primary font-medium">{{ $quotation->quotation_number }}</span>
@endsection

@section('header-actions')
    <div class="flex items-center gap-3">
        <a href="{{ route('admin.quotations.edit', $quotation) }}" class="px-4 py-2 border border-[#dbe0e6] text-[#617589] rounded-lg hover:bg-background-light transition-colors flex items-center gap-2">
            <span class="material-symbols-outlined text-lg">edit</span>
            <span>Edit</span>
        </a>
        @if($quotation->canBeConverted())
            <form method="POST" action="{{ route('admin.quotations.convert', $quotation) }}" class="inline">
                @csrf
                <button type="submit" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-blue-600 transition-colors flex items-center gap-2">
                    <span class="material-symbols-outlined text-lg">receipt</span>
                    <span>Convert to Invoice</span>
                </button>
            </form>
        @endif
    </div>
@endsection

@section('content')
<div class="max-w-7xl mx-auto">
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm mb-6">
        <div class="p-6 border-b border-gray-100 flex flex-wrap items-center justify-between gap-4">
            <div>
                <h2 class="text-2xl font-bold text-gray-900">{{ $quotation->quotation_number }}</h2>
                <p class="text-sm text-gray-500 mt-1">
                    Issued {{ $quotation->issue_date->format('M d, Y') }}
                    @if($quotation->expiry_date)
                        · Valid until {{ $quotation->expiry_date->format('M d, Y') }}
                    @endif
                </p>
            </div>
            <div class="flex flex-wrap items-center gap-2 justify-end">
                <button type="button" onclick="qsOpenEmailModal()" class="inline-flex items-center gap-2 px-3 py-2 border border-gray-200 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm" title="Send quotation by email">
                    <span class="material-symbols-outlined text-[18px]">mail</span>
                    <span class="hidden sm:inline">Email</span>
                </button>
                <button type="button" onclick="qsOpenWaLinkModal()" class="inline-flex items-center gap-2 px-3 py-2 border border-gray-200 text-green-700 rounded-lg hover:bg-green-50 transition-colors text-sm" title="Send the public quotation link to the customer’s WhatsApp">
                    <span class="material-symbols-outlined text-[18px]">chat</span>
                    <span class="hidden sm:inline">WhatsApp link</span>
                </button>
                @if(isset($whatsappConfig) && $whatsappConfig && $whatsappConfig->is_active)
                <button type="button" onclick="qsOpenWaPdfModal()" class="inline-flex items-center gap-2 px-3 py-2 border border-gray-200 text-green-700 rounded-lg hover:bg-green-50 transition-colors text-sm" title="Send PDF via WhatsApp Business API">
                    <span class="material-symbols-outlined text-[18px]">picture_as_pdf</span>
                    <span class="hidden sm:inline">WhatsApp PDF</span>
                </button>
                @endif
                <button type="button" onclick="qsCopyPublicLink()" class="inline-flex items-center gap-2 px-3 py-2 border border-gray-200 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm" title="Copy public quotation link">
                    <span class="material-symbols-outlined text-[18px]">link</span>
                    <span class="hidden sm:inline">Copy link</span>
                </button>
                <a href="{{ route('admin.quotations.print', $quotation) }}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-3 py-2 border border-gray-200 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm">
                    <span class="material-symbols-outlined text-[18px]">print</span>
                    <span>Print</span>
                </a>
                <a href="{{ route('admin.quotations.download', $quotation) }}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-3 py-2 border border-gray-200 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm">
                    <span class="material-symbols-outlined text-[18px]">download</span>
                    <span class="hidden sm:inline">Download PDF</span>
                    <span class="sm:hidden">PDF</span>
                </a>
            </div>
        </div>
        <div class="p-6">
            @if(isset($templateView) && view()->exists($templateView))
                @php
                    $templateContent = view($templateView, ['quotation' => $quotation])->render();
                    preg_match_all('/<style[^>]*>(.*?)<\/style>/is', $templateContent, $styleMatches);
                    $styles = !empty($styleMatches[1]) ? '<style>' . implode('</style><style>', $styleMatches[1]) . '</style>' : '';
                    $bodyContent = $templateContent;
                    if (preg_match('/<body[^>]*>(.*?)<\/body>/is', $templateContent, $bodyMatches)) {
                        $bodyContent = $bodyMatches[1];
                    }
                    $bodyContent = preg_replace('/<script\b[^>]*>(.*?)<\/script>/is', '', $bodyContent);
                @endphp
                {!! $styles !!}
                <style>
                    /* Admin screen preview: fixed width/padding tuned for layout panel (overrides template mm rules) */
                    .quotation-screen-preview .quotation-container {
                        width: 994px;
                        max-width: 994px;
                        padding: 10px;
                        box-sizing: border-box;
                    }
                    /*
                     * Text color: only body inner HTML is embedded here, so template `body { color }` does not apply.
                     * Admin shell uses `.min-h-screen.flex { color: white }`, which would otherwise make line items,
                     * pricing summary, and acceptance block unreadable on white/light backgrounds.
                     */
                    .quotation-screen-preview {
                        color: rgba(0, 0, 0, 1);
                    }
                </style>
                <div class="overflow-x-auto">
                    <div class="quotation-screen-preview min-w-[994px] bg-white">
                        {!! $bodyContent !!}
                    </div>
                </div>
            @else
                <div class="p-6 text-gray-500">Template not found.</div>
            @endif
        </div>
    </div>
</div>

{{-- Email --}}
<div id="qs-email-modal" data-admin-modal class="hidden fixed inset-0 z-[60] overflow-y-auto" role="dialog" aria-modal="true">
    <div class="flex min-h-full items-start justify-center px-4 py-6 sm:py-10">
        <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" onclick="qsCloseEmailModal()" aria-hidden="true"></div>
        <div class="relative bg-white rounded-xl shadow-xl max-w-lg w-full p-5 sm:p-6 max-h-[90vh] overflow-y-auto">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-bold text-gray-900">Send quotation via email</h3>
                <button type="button" onclick="qsCloseEmailModal()" class="text-gray-400 hover:text-gray-600 rounded-lg p-1 hover:bg-gray-100" aria-label="Close">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>
            <form id="qs-email-form" class="space-y-4">
                <div class="bg-gray-50 rounded-lg p-4 text-sm">
                    <div class="flex justify-between gap-2">
                        <span class="text-gray-600">Quotation</span>
                        <span class="font-semibold text-gray-900">{{ $quotation->quotation_number }}</span>
                    </div>
                </div>
                @if(!isset($emailConfig) || !$emailConfig || !$emailConfig->is_active)
                    <p class="text-sm text-amber-800 bg-amber-50 border border-amber-200 rounded-lg p-3">Email is not configured or inactive. Set up email under <strong>Settings</strong> before sending.</p>
                @endif
                <div>
                    <label for="qs-email-input" class="block text-sm font-medium text-gray-700 mb-2">Recipient email</label>
                    <input type="email" id="qs-email-input" required class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-gray-900" placeholder="customer@example.com" value="{{ $quotation->customer?->email ?? '' }}">
                </div>
                <div class="flex flex-col-reverse sm:flex-row gap-3 pt-2 border-t border-gray-200">
                    <button type="button" onclick="qsCloseEmailModal()" class="flex-1 px-4 py-2.5 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200">Cancel</button>
                    <button type="submit" id="qs-email-submit" class="flex-1 px-4 py-2.5 text-sm font-medium text-white bg-primary rounded-lg hover:bg-blue-600 disabled:opacity-50" @if(!isset($emailConfig) || !$emailConfig || !$emailConfig->is_active) disabled @endif>Send</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- WhatsApp: public link (wa.me) --}}
<div id="qs-wa-link-modal" data-admin-modal class="hidden fixed inset-0 z-[60] overflow-y-auto" role="dialog" aria-modal="true">
    <div class="flex min-h-full items-start justify-center px-4 py-6 sm:py-10">
        <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" onclick="qsCloseWaLinkModal()" aria-hidden="true"></div>
        <div class="relative bg-white rounded-xl shadow-xl max-w-lg w-full p-5 sm:p-6 max-h-[90vh] overflow-y-auto">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-bold text-gray-900">Send quotation link via WhatsApp</h3>
                <button type="button" onclick="qsCloseWaLinkModal()" class="text-gray-400 hover:text-gray-600 rounded-lg p-1 hover:bg-gray-100" aria-label="Close">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>
            <form id="qs-wa-link-form" class="space-y-4">
                <div class="bg-gray-50 rounded-lg p-4 text-sm space-y-2">
                    <div class="flex justify-between gap-2">
                        <span class="text-gray-600">Quotation</span>
                        <span class="font-semibold text-gray-900">{{ $quotation->quotation_number }}</span>
                    </div>
                    <div class="flex justify-between gap-2 items-start">
                        <span class="text-gray-600 shrink-0 pr-2">Company WhatsApp<br><span class="text-xs font-normal text-gray-500">(Settings → WhatsApp, link sharing)</span></span>
                        <span class="font-semibold text-gray-900 text-right break-all">
                            @if(isset($whatsappSettings) && $whatsappSettings && filled(data_get($whatsappSettings->config, 'link_recipient_phone')))
                                {{ data_get($whatsappSettings->config, 'link_recipient_phone') }}
                            @else
                                <span class="font-normal text-gray-500">Not set</span>
                            @endif
                        </span>
                    </div>
                </div>
                <div>
                    <label for="qs-wa-link-phone" class="block text-sm font-medium text-gray-700 mb-2">Customer WhatsApp <span class="text-gray-500 font-normal">(recipient)</span> <span class="text-red-500">*</span></label>
                    <input type="text" id="qs-wa-link-phone" name="customer_whatsapp" required class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary text-gray-900" placeholder="+1234567890" value="{{ $quotation->customer?->phone ?? '' }}" autocomplete="tel">
                    <p class="mt-1 text-xs text-gray-500">This is the customer’s number that will receive the quotation link. A WhatsApp chat opens with the public view URL ready to send. For reliable link previews, set <code class="text-xs bg-gray-100 px-1 rounded">INVOICE_PUBLIC_BASE_URL</code> in <code class="text-xs bg-gray-100 px-1 rounded">.env</code> to your public HTTPS domain.</p>
                </div>
                <div class="flex flex-col-reverse sm:flex-row gap-3 pt-2 border-t border-gray-200">
                    <button type="button" onclick="qsCloseWaLinkModal()" class="flex-1 px-4 py-2.5 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200">Cancel</button>
                    <button type="submit" id="qs-wa-link-submit" class="flex-1 px-4 py-2.5 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700">Open WhatsApp</button>
                </div>
            </form>
        </div>
    </div>
</div>

@if(isset($whatsappConfig) && $whatsappConfig && $whatsappConfig->is_active)
{{-- WhatsApp Business API: PDF --}}
<div id="qs-wa-pdf-modal" data-admin-modal class="hidden fixed inset-0 z-[60] overflow-y-auto" role="dialog" aria-modal="true">
    <div class="flex min-h-full items-start justify-center px-4 py-6 sm:py-10">
        <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" onclick="qsCloseWaPdfModal()" aria-hidden="true"></div>
        <div class="relative bg-white rounded-xl shadow-xl max-w-lg w-full p-5 sm:p-6 max-h-[90vh] overflow-y-auto border border-gray-100">
            <div class="flex items-start justify-between gap-3 mb-4">
                <div class="flex items-center gap-3 min-w-0">
                    <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-green-50 text-green-700">
                        <span class="material-symbols-outlined text-2xl">description</span>
                    </div>
                    <div class="min-w-0">
                        <h3 class="text-lg font-bold text-gray-900 leading-tight">Send quotation PDF via WhatsApp</h3>
                        <p class="text-sm text-gray-500 mt-0.5">Delivered through your WhatsApp Business API</p>
                    </div>
                </div>
                <button type="button" onclick="qsCloseWaPdfModal()" class="text-gray-400 hover:text-gray-600 shrink-0 rounded-lg p-1 hover:bg-gray-100" aria-label="Close">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>
            <form id="qs-wa-pdf-form" class="space-y-4">
                <div class="rounded-xl border border-gray-200 bg-gradient-to-br from-gray-50 to-white p-4 space-y-2 text-sm">
                    <div class="flex justify-between gap-2">
                        <span class="text-gray-600">Quotation</span>
                        <span class="font-semibold text-gray-900">{{ $quotation->quotation_number }}</span>
                    </div>
                    <div class="flex justify-between gap-2">
                        <span class="text-gray-600">Customer</span>
                        <span class="font-medium text-gray-900 truncate max-w-[60%]">{{ $quotation->customer?->name ?? '—' }}</span>
                    </div>
                    <div class="flex justify-between gap-2 pt-2 border-t border-gray-200/80">
                        <span class="text-gray-600">Total</span>
                        <span class="font-semibold text-primary">{{ $quotation->currency }} {{ number_format((float) $quotation->total, 2) }}</span>
                    </div>
                </div>
                <div>
                    <label for="qs-wa-pdf-phone" class="block text-sm font-semibold text-gray-800 mb-2">Customer WhatsApp number <span class="text-red-500">*</span></label>
                    <input type="tel" id="qs-wa-pdf-phone" required autocomplete="tel" class="w-full rounded-lg border border-gray-300 bg-white text-gray-900 px-4 py-3 shadow-sm focus:border-primary focus:ring-2 focus:ring-primary/20 sm:text-sm" placeholder="e.g. +14166368482" value="{{ $quotation->customer?->phone ?? '' }}">
                    <p class="mt-2 text-xs text-gray-500">International format with country code. The PDF is generated and attached by the API.</p>
                </div>
                <div class="flex flex-col-reverse sm:flex-row sm:justify-end gap-3 pt-2">
                    <button type="button" onclick="qsCloseWaPdfModal()" class="w-full sm:w-auto px-4 py-2.5 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm font-medium">Cancel</button>
                    <button type="submit" id="qs-wa-pdf-submit" class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm font-semibold shadow-sm">
                        <span class="material-symbols-outlined text-lg">send</span>
                        <span id="qs-wa-pdf-submit-label">Send PDF</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endif

@php
    $canManualReminder = auth()->user()->hasPermission('send_manual_reminders') || auth()->user()->hasRole(\App\Enums\RoleEnum::SUPER_ADMIN->value);
@endphp
@if($canManualReminder)
<div class="max-w-7xl mx-auto mt-6 px-0">
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex flex-wrap items-center justify-between gap-3 mb-4">
            <h3 class="text-lg font-bold text-gray-900">Billing reminders</h3>
            <button type="button" id="open-quotation-reminder-modal" class="px-4 py-2 rounded-lg bg-violet-600 text-white text-sm font-semibold hover:bg-violet-700">Send reminder</button>
        </div>
        <p class="text-sm text-gray-500 mb-3">Recent emails queued or sent for this quotation.</p>
        <div class="overflow-x-auto">
            <table class="w-full text-left text-sm">
                <thead class="border-b border-gray-200 text-xs uppercase text-gray-500">
                    <tr>
                        <th class="py-2 pr-4">Type</th>
                        <th class="py-2 pr-4">To</th>
                        <th class="py-2 pr-4">Status</th>
                        <th class="py-2">Sent</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($quotation->reminderLogs as $log)
                        <tr>
                            <td class="py-2 pr-4 font-medium text-gray-900">{{ str_replace('_', ' ', $log->reminder_type) }}</td>
                            <td class="py-2 pr-4 text-gray-600">{{ $log->recipient_email }}</td>
                            <td class="py-2 pr-4"><span class="px-2 py-0.5 rounded text-xs font-medium {{ $log->status === 'sent' ? 'bg-emerald-100 text-emerald-800' : ($log->status === 'failed' ? 'bg-rose-100 text-rose-800' : 'bg-slate-100 text-slate-700') }}">{{ $log->status }}</span></td>
                            <td class="py-2 text-gray-600">{{ $log->sent_at?->format('M j, Y g:i A') ?? '—' }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="4" class="py-6 text-center text-gray-500">No reminder log entries yet.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<div id="quotation-reminder-modal" class="fixed inset-0 z-[60] hidden items-center justify-center bg-slate-900/50 p-4">
    <div class="bg-white rounded-xl shadow-xl max-w-lg w-full p-6 border border-gray-200">
        <h4 class="text-lg font-bold text-gray-900 mb-4">Send reminder email</h4>
        <form id="quotation-reminder-form" class="space-y-4">
            @csrf
            <div>
                <label class="block text-sm font-medium text-gray-600 mb-1">Recipient</label>
                <input type="email" name="recipient_email" value="{{ $quotation->customer->email ?? '' }}" required class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-600 mb-1">Subject</label>
                <input type="text" name="subject" value="Reminder: Quotation {{ $quotation->quotation_number }}" required class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-600 mb-1">Message (HTML allowed)</label>
                <textarea name="body" rows="5" required class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm font-mono"><p>Dear {{ $quotation->customer->name ?? 'Customer' }},</p><p>This is a reminder regarding quotation <strong>{{ $quotation->quotation_number }}</strong>.</p><p>Thank you.</p></textarea>
            </div>
            <label class="flex items-center gap-2 text-sm text-gray-600">
                <input type="checkbox" name="as_follow_up" value="1" class="rounded border-gray-300 text-violet-600">
                Log as follow-up reminder
            </label>
            <div class="flex gap-2 justify-end pt-2">
                <button type="button" id="close-quotation-reminder-modal" class="px-4 py-2 rounded-lg border border-gray-300 text-sm font-semibold text-gray-600 hover:bg-gray-50">Cancel</button>
                <button type="submit" class="px-4 py-2 rounded-lg bg-violet-600 text-white text-sm font-semibold">Send</button>
            </div>
        </form>
        <p id="quotation-reminder-msg" class="mt-3 text-sm hidden"></p>
    </div>
</div>
@endif

{{-- Success toast --}}
<div id="qs-success-modal" data-admin-modal class="hidden fixed inset-0 z-[70] overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen px-4">
        <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" onclick="qsCloseSuccessModal()"></div>
        <div class="relative bg-white rounded-xl shadow-xl max-w-md w-full p-6">
            <div class="flex items-center gap-4 mb-4">
                <div class="flex-shrink-0 w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                    <span class="material-symbols-outlined text-green-600 text-2xl">check_circle</span>
                </div>
                <div class="flex-1 min-w-0">
                    <h3 class="text-lg font-bold text-gray-900">Done</h3>
                    <p id="qs-success-message" class="text-sm text-gray-500 mt-1"></p>
                </div>
                <button type="button" onclick="qsCloseSuccessModal()" class="text-gray-400 hover:text-gray-600 shrink-0" aria-label="Close">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>
            <button type="button" onclick="qsCloseSuccessModal()" class="w-full px-4 py-2 text-sm font-medium text-white bg-primary rounded-lg hover:bg-blue-600">OK</button>
        </div>
    </div>
</div>

@push('scripts')
<script>
(function () {
    const quotationId = {{ (int) $quotation->id }};

    function getAdminCsrfToken() {
        const meta = document.querySelector('meta[name="csrf-token"]');
        if (meta?.content) return meta.content;
        const input = document.querySelector('input[name="_token"]');
        return input?.value || '';
    }

    function adminJsonFetchInit(body) {
        return {
            method: 'POST',
            credentials: 'same-origin',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': getAdminCsrfToken(),
            },
            body: body !== undefined ? JSON.stringify(body) : undefined,
        };
    }

    async function qsFetchShareLink() {
        const res = await fetch(`/admin/quotations/${quotationId}/share-link`, {
            method: 'GET',
            credentials: 'same-origin',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': getAdminCsrfToken(),
            },
        });
        const data = await res.json().catch(() => ({}));
        if (!res.ok || !data.success || !data.link) {
            throw new Error(data.message || 'Could not create share link');
        }
        return data.link;
    }

    window.qsShowSuccess = function (message) {
        const el = document.getElementById('qs-success-message');
        const modal = document.getElementById('qs-success-modal');
        if (el) el.textContent = message;
        if (modal) {
            modal.classList.remove('hidden');
            window.clearTimeout(window._qsSuccessT);
            window._qsSuccessT = setTimeout(() => modal.classList.add('hidden'), 3200);
        } else {
            alert(message);
        }
    };

    window.qsCloseSuccessModal = function () {
        document.getElementById('qs-success-modal')?.classList.add('hidden');
    };

    window.qsOpenEmailModal = function () {
        document.getElementById('qs-email-modal')?.classList.remove('hidden');
    };
    window.qsCloseEmailModal = function () {
        document.getElementById('qs-email-modal')?.classList.add('hidden');
    };

    window.qsOpenWaLinkModal = function () {
        document.getElementById('qs-wa-link-modal')?.classList.remove('hidden');
    };
    window.qsCloseWaLinkModal = function () {
        document.getElementById('qs-wa-link-modal')?.classList.add('hidden');
    };

    window.qsOpenWaPdfModal = function () {
        document.getElementById('qs-wa-pdf-modal')?.classList.remove('hidden');
    };
    window.qsCloseWaPdfModal = function () {
        document.getElementById('qs-wa-pdf-modal')?.classList.add('hidden');
    };

    window.qsCopyPublicLink = async function () {
        const bladeUrl = @json($quotation->getPublicUrl());
        try {
            if (bladeUrl) {
                await navigator.clipboard.writeText(bladeUrl);
                qsShowSuccess('Public quotation link copied to clipboard.');
                return;
            }
        } catch (_) { /* fall through */ }
        try {
            const link = await qsFetchShareLink();
            await navigator.clipboard.writeText(link);
            qsShowSuccess('Public quotation link copied to clipboard.');
        } catch (e) {
            alert(e.message || 'Could not copy link');
        }
    };

    document.getElementById('qs-email-form')?.addEventListener('submit', async function (e) {
        e.preventDefault();
        const email = document.getElementById('qs-email-input')?.value.trim();
        if (!email) return;
        const submit = document.getElementById('qs-email-submit');
        const orig = submit ? submit.textContent : '';
        if (submit) { submit.disabled = true; submit.textContent = 'Sending…'; }
        try {
            const res = await fetch(`/admin/quotations/${quotationId}/send-email`, adminJsonFetchInit({ email }));
            const data = await res.json().catch(() => ({}));
            if (res.status === 419) {
                alert('Session expired. Refresh the page and try again.');
                return;
            }
            if (data.success) {
                qsCloseEmailModal();
                qsShowSuccess(data.message || 'Quotation email request completed.');
            } else {
                alert(data.message || 'Could not send email.');
            }
        } catch (err) {
            alert('Network error: ' + (err.message || 'try again'));
        } finally {
            if (submit) { submit.disabled = false; submit.textContent = orig; }
        }
    });

    document.getElementById('qs-wa-link-form')?.addEventListener('submit', async function (e) {
        e.preventDefault();
        const raw = document.getElementById('qs-wa-link-phone')?.value.trim() || '';
        const digits = raw.replace(/\D/g, '');
        if (!digits) {
            alert('Enter a phone number with country code.');
            return;
        }
        const submit = document.getElementById('qs-wa-link-submit');
        const orig = submit ? submit.innerHTML : '';
        if (submit) { submit.disabled = true; submit.innerHTML = '<span class="material-symbols-outlined animate-spin text-[18px]">sync</span>'; }
        try {
            const link = await qsFetchShareLink();
            const msg = `Quotation {{ $quotation->quotation_number }}\n\nView:\n\n${link}`;
            window.open(`https://wa.me/${digits}?text=${encodeURIComponent(msg)}`, '_blank', 'noopener,noreferrer');
            qsCloseWaLinkModal();
            qsShowSuccess('If WhatsApp did not open, allow pop-ups for this site.');
        } catch (err) {
            alert(err.message || 'Could not open WhatsApp.');
        } finally {
            if (submit) { submit.disabled = false; submit.innerHTML = orig; }
        }
    });

    document.getElementById('qs-wa-pdf-form')?.addEventListener('submit', async function (e) {
        e.preventDefault();
        const phone = document.getElementById('qs-wa-pdf-phone')?.value.trim() || '';
        if (!phone) {
            alert('Enter the customer WhatsApp number.');
            return;
        }
        const submit = document.getElementById('qs-wa-pdf-submit');
        const label = document.getElementById('qs-wa-pdf-submit-label');
        const origLabel = label ? label.textContent : '';
        if (submit) submit.disabled = true;
        if (label) label.textContent = 'Sending…';
        try {
            const res = await fetch(`/admin/quotations/${quotationId}/send-whatsapp`, adminJsonFetchInit({ phone }));
            const data = await res.json().catch(() => ({}));
            if (res.ok && data.success) {
                qsCloseWaPdfModal();
                qsShowSuccess(data.message || 'Quotation PDF sent via WhatsApp.');
                return;
            }
            alert(data.message || 'Failed to send PDF via WhatsApp.');
        } catch (err) {
            alert('Error: ' + (err.message || 'try again'));
        } finally {
            if (submit) submit.disabled = false;
            if (label) label.textContent = origLabel;
        }
    });

    var qModal = document.getElementById('quotation-reminder-modal');
    var qForm = document.getElementById('quotation-reminder-form');
    var qMsg = document.getElementById('quotation-reminder-msg');
    if (qModal && qForm) {
        document.getElementById('open-quotation-reminder-modal')?.addEventListener('click', function () {
            qModal.classList.remove('hidden');
            qModal.classList.add('flex');
            qMsg?.classList.add('hidden');
        });
        document.getElementById('close-quotation-reminder-modal')?.addEventListener('click', function () {
            qModal.classList.add('hidden');
            qModal.classList.remove('flex');
        });
        qForm.addEventListener('submit', function (e) {
            e.preventDefault();
            qMsg?.classList.add('hidden');
            var fd = new FormData(qForm);
            fetch('/admin/quotations/' + quotationId + '/send-reminder', {
                method: 'POST',
                headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json', 'X-CSRF-TOKEN': getAdminCsrfToken() },
                body: fd
            }).then(function (r) { return r.json().then(function (j) { return { ok: r.ok, j: j }; }); })
            .then(function (x) {
                if (qMsg) {
                    qMsg.classList.remove('hidden');
                    qMsg.textContent = x.j.message || (x.ok ? 'Sent.' : 'Failed');
                    qMsg.className = 'mt-3 text-sm ' + (x.ok ? 'text-emerald-600' : 'text-rose-600');
                }
                if (x.ok) setTimeout(function () { location.reload(); }, 1200);
            }).catch(function () {
                if (qMsg) {
                    qMsg.classList.remove('hidden');
                    qMsg.textContent = 'Network error';
                    qMsg.className = 'mt-3 text-sm text-rose-600';
                }
            });
        });
    }
})();
</script>
@endpush
@endsection