@extends('layouts.app')

@section('title', 'Complain ERP — Voucher')

@section('content')

{{-- =============================================================
    Single-voucher shell:
    - On load: fetch('/api/complain/{cs_no}') → render voucher
    - No list view — everything else is out of scope.
    ============================================================= --}}

<div id="app" data-cs-no="{{ $csNo }}">

    {{-- ---- Loading skeleton (shown before API responds) — workshop-themed ---- --}}
    <div id="loader" class="loader" role="status" aria-live="polite" aria-busy="true">
        <div class="loader__card">
            <span class="loader__progress"></span>

            <div class="loader__head">
                <span class="loader__wheel" aria-hidden="true">
                    <svg viewBox="0 0 44 44" aria-hidden="true">
                        <circle class="loader__wheel-rim"  cx="22" cy="22" r="19"/>
                        <circle class="loader__wheel-arc"  cx="22" cy="22" r="19"/>
                        <circle class="loader__wheel-hub"  cx="22" cy="22" r="4.5"/>
                    </svg>
                </span>
                <span class="loader__head-text">
                    <b>Preparing your complaint sheet</b>
                    <em>CS No {{ $csNo }} — fetching workshop records<span class="loader__ellipsis"><i>.</i><i>.</i><i>.</i></span></em>
                </span>
            </div>

            {{-- Content-shaped skeleton so the wait mirrors the sheet that's coming. --}}
            <div class="loader__tiles" aria-hidden="true">
                <span class="sk sk--tile"></span>
                <span class="sk sk--tile"></span>
                <span class="sk sk--tile"></span>
                <span class="sk sk--tile"></span>
            </div>

            <div class="loader__grid" aria-hidden="true">
                <span class="sk sk--line sk--w40"></span><span class="sk sk--line sk--w70"></span>
                <span class="sk sk--line sk--w55"></span><span class="sk sk--line sk--w45"></span>
                <span class="sk sk--line sk--w60"></span><span class="sk sk--line sk--w35"></span>
                <span class="sk sk--line sk--w50"></span><span class="sk sk--line sk--w65"></span>
            </div>

            <div class="loader__rows" aria-hidden="true">
                <span class="sk sk--row"></span>
                <span class="sk sk--row"></span>
                <span class="sk sk--row"></span>
            </div>
        </div>
    </div>

    {{-- ---- Error state (shown if the CS number is invalid / not found / locked / auth fails) ---- --}}
    <div id="errorBanner" class="error-state" hidden>
        <div class="error-state__icon" id="errorIcon">⚠️</div>
        <h3 class="error-state__title" id="errorTitle">Could not load voucher</h3>
        <p class="error-state__text" id="errorText"></p>
        <button type="button" class="btn btn--dark btn--sm" id="errorRetryBtn" onclick="window.ComplainApp.load()">↻ Retry</button>
    </div>

    {{-- =============================================================
         VOUCHER VIEW
         ============================================================= --}}
    <section id="voucherView" hidden>
        <div id="voucherContainer">
            {{-- voucher HTML injected by JS --}}
        </div>
    </section>

</div>

{{-- ---- Mobile sticky quick-action bar (Call) ---- --}}
<div class="mobile-actionbar" id="mobileActionbar" hidden>
    <a href="tel:+8801701224444" class="mobile-actionbar__btn mobile-actionbar__btn--primary">
        <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true"><path d="M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1L6.6 10.8z"/></svg>
        <span>Call Workshop</span>
    </a>
</div>

@endsection

@push('scripts')
    <script src="{{ asset('assets/js/app.js') }}"></script>
    <script>
        // Bootstrap on DOM ready — fetch /api/complain/{cs_no} and render voucher
        document.addEventListener('DOMContentLoaded', function () {
            window.ComplainApp.load();
        });
    </script>
@endpush