@extends('layouts.vertical-individual', ['page_title' => $title ?? 'Synchrobreathe Report Card'])

@section('css')
    <link href="{{ asset('assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&display=swap" rel="stylesheet" />
    <style>
        .sb-report-page {
            padding: 12px 4px 32px;
        }

        .sb-report-page .form-label {
            font-weight: 600;
        }

        .sb-report-page .form-control,
        .sb-report-page .form-select {
            font-size: 16px;
        }

        .sb-preview {
            margin-top: 16px;
        }

        .sb-sheet-slot {
            margin: 0 auto 16px;
            max-width: 100%;
        }

        .sb-sheet {
            --sb-red: #ad2c31;
            --sb-bar: #a3a3a0;
            --sb-card: #cac9c4;
            --sb-cell: #dadad5;
            --sb-title: #6c6c69;
            background: #fff;
            box-sizing: border-box;
            color: #222;
            display: flex;
            flex-direction: column;
            font-family: Poppins, Arial, sans-serif;
            height: 1024.94pt;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
            width: 927.13pt;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }

        .sb-swoosh {
            border: 34pt solid rgba(243, 214, 216, 0.9);
            border-bottom-color: transparent;
            border-left-color: transparent;
            border-radius: 50%;
            height: 340pt;
            left: -70pt;
            pointer-events: none;
            position: absolute;
            top: 28pt;
            transform: rotate(28deg);
            width: 220pt;
            z-index: 0;
        }

        .sb-bar {
            background: var(--sb-bar);
            flex: 0 0 16pt;
            height: 16pt;
        }

        .sb-head {
            align-items: flex-start;
            display: flex;
            justify-content: space-between;
            min-height: 62pt;
            padding: 8pt 26pt 0;
            position: relative;
            z-index: 1;
        }

        .sb-logo-brand {
            height: 38pt;
            margin-top: 4pt;
            width: auto;
        }

        .sb-logo-cipla {
            height: 18pt;
            margin-top: 12pt;
            width: auto;
        }

        .sb-badge {
            background: var(--sb-red);
            border-radius: 0 0 12pt 12pt;
            color: #fff;
            font-size: 20pt;
            font-weight: 700;
            left: 50%;
            line-height: 1;
            padding: 12pt 34pt 11pt;
            position: absolute;
            top: -16pt;
            transform: translateX(-50%);
            white-space: nowrap;
        }

        .sb-title {
            color: var(--sb-title);
            font-size: 26pt;
            font-weight: 600;
            line-height: 1.15;
            margin: 2pt 20pt 8pt;
            position: relative;
            text-align: center;
            z-index: 1;
        }

        .sb-panel {
            background: var(--sb-card);
            border-radius: 14pt;
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            margin: 0 18pt;
            min-height: 0;
            padding: 12pt 14pt 10pt;
            position: relative;
            z-index: 1;
        }

        .sb-meta {
            display: grid;
            font-size: 13pt;
            font-weight: 700;
            gap: 2pt 16pt;
            grid-template-columns: 1fr 1fr;
            line-height: 1.25;
            margin: 0 4pt 8pt;
        }

        .sb-meta .right {
            padding-right: 28pt;
            text-align: right;
        }

        .sb-meta .val {
            color: var(--sb-red);
        }

        .sb-table-wrap {
            flex: 1 1 auto;
            min-height: 0;
        }

        .sb-table {
            background: var(--sb-cell);
            border-collapse: collapse;
            height: 100%;
            table-layout: fixed;
            width: 100%;
        }

        .sb-table th,
        .sb-table td {
            border: 0.75pt solid #f7f7f5;
            box-sizing: border-box;
            font-weight: 600;
            padding: 1pt 2pt;
            text-align: center;
            vertical-align: middle;
        }

        .sb-table .name-head {
            background: var(--sb-card);
            border: none;
            width: 24%;
        }

        .sb-table .banner {
            background: var(--sb-red);
            border: none;
            color: #fff;
            font-size: 11pt;
            font-weight: 600;
            height: 20pt;
        }

        .sb-table .month {
            background: #e7e7e3;
            color: #4d4d4d;
            font-size: 8pt;
            font-weight: 600;
        }

        .sb-table .metric {
            background: #e3e3df;
            color: var(--sb-red);
            font-size: 7.5pt;
            font-weight: 700;
        }

        .sb-table td.name {
            background: #e3e3df;
            color: #1c1c1c;
            font-size: 8pt;
            overflow: hidden;
            padding-left: 6pt;
            text-align: left;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .sb-table td.num {
            background: var(--sb-cell);
            color: #222;
            font-size: 8pt;
            font-weight: 500;
        }

        .sb-sign {
            color: #3a3a3a;
            font-size: 11pt;
            font-weight: 500;
            margin: 12pt 26pt 8pt;
            position: relative;
            z-index: 1;
        }

        .sb-sign-row,
        .sb-sign-pair > div {
            align-items: flex-end;
            display: flex;
            margin-top: 7pt;
        }

        .sb-sign-pair {
            display: grid;
            gap: 22pt;
            grid-template-columns: 1fr 1fr;
        }

        .sb-sign .fill {
            border-bottom: 0.8pt solid #8d8d8d;
            flex: 1 1 auto;
            margin-left: 4pt;
            min-height: 14pt;
            padding: 0 4pt 1pt;
        }

        #sb-report-loader {
            align-items: center;
            background: rgba(255, 255, 255, 0.85);
            display: none;
            flex-direction: column;
            gap: 12px;
            height: 100%;
            justify-content: center;
            left: 0;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 9999;
        }

        #sb-report-loader.is-visible {
            display: flex;
        }

        .sb-is-hidden {
            display: none !important;
        }

        #sb-another-btn {
            margin-right: 8px;
        }

        @media screen {
            .sb-sheet-slot {
                height: calc(var(--sb-scale, 1) * 1024.94pt);
                overflow: hidden;
                width: calc(var(--sb-scale, 1) * 927.13pt);
            }

            .sb-sheet {
                transform: scale(var(--sb-scale, 1));
                transform-origin: top left;
            }
        }

        @media print {
            @page {
                margin: 0;
                size: 927.13pt 1024.94pt;
            }

            html,
            body,
            .account-pages,
            .account-pages > .container,
            .sb-report-page,
            .sb-preview,
            .sb-sheet-slot {
                background: #fff !important;
                height: auto !important;
                margin: 0 !important;
                max-width: none !important;
                overflow: visible !important;
                padding: 0 !important;
                width: auto !important;
            }

            .sb-report-form,
            .footer,
            .no-print,
            #sb-report-loader {
                display: none !important;
            }

            .sb-sheet {
                box-shadow: none;
                margin: 0;
                page-break-after: always;
                transform: none !important;
            }

            .sb-sheet:last-child {
                page-break-after: auto;
            }
        }
    </style>
@endsection

@section('content')
    <div id="sb-report-loader" aria-live="polite" aria-busy="false">
        <img src="/images/loader-large.gif" alt="" width="64" height="64">
        <span class="text-muted">Generating report card...</span>
    </div>

    <div class="sb-report-page">
        <form method="get" action="{{ $base_url }}/report" id="sb-report-form" class="sb-report-form card{{ !empty($report) ? ' sb-is-hidden' : '' }}">
            <div class="card-body">
                <h4 class="page-title">{{ $title }}</h4>
                <p class="text-muted">Select a user (territory), then add the lines that appear on the report card.</p>

                @if (!empty($reportError))
                    <div class="alert alert-danger" role="alert">{{ $reportError }}</div>
                @endif

                @if (!empty($token ?? ''))
                    <input type="hidden" name="token" value="{{ $token }}">
                @endif

                <div class="mb-3">
                    <label for="field-tm_id" class="form-label">User (territory)</label>
                    <select name="tm_id" id="field-tm_id" class="form-select" required>
                        <option value=""></option>
                        @foreach ($territories as $territory)
                            <option value="{{ $territory['id'] }}"@if(($tmId ?? '') === $territory['id']) selected @endif>{{ $territory['label'] }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="mb-3">
                    <label for="field-comment" class="form-label">Comment</label>
                    <textarea name="comment" id="field-comment" class="form-control" rows="3">{{ $comment ?? '' }}</textarea>
                </div>

                <div class="mb-3">
                    <label for="field-rbm" class="form-label">RBM</label>
                    <input type="text" name="rbm" id="field-rbm" class="form-control" value="{{ $rbm ?? '' }}">
                </div>

                <div class="mb-3">
                    <label for="field-zbm" class="form-label">ZBM</label>
                    <input type="text" name="zbm" id="field-zbm" class="form-control" value="{{ $zbm ?? '' }}">
                </div>

                <div class="mb-3">
                    <label for="field-marketing" class="form-label">Marketing</label>
                    <input type="text" name="marketing" id="field-marketing" class="form-control" value="{{ $marketing ?? '' }}">
                </div>

                <button type="submit" class="btn btn-primary">Generate report card</button>
            </div>
        </form>

        @if (!empty($report))
            @php
                $doctorCount = count($report['doctors']);
                $blankRows = max(0, 19 - $doctorCount);
                $monthCount = max(count($report['months']), 1);
            @endphp
            <div class="no-print text-end mb-2" id="sb-report-actions">
                <button type="button" class="btn btn-outline-dark btn-sm" id="sb-another-btn">Generate another report</button>
                <a class="btn btn-dark btn-sm" id="sb-download-btn" href="{{ $base_url }}/download?{{ http_build_query(array_filter(['token' => $token ?? '', 'tm_id' => $tmId ?? '', 'comment' => $comment ?? '', 'rbm' => $rbm ?? '', 'zbm' => $zbm ?? '', 'marketing' => $marketing ?? ''], function ($value) { return $value !== ''; })) }}">Download</a>
            </div>
            <div class="sb-preview" id="sb-report-card">
                    <div class="sb-sheet-slot">
                        <article class="sb-sheet">
                            <div class="sb-swoosh" aria-hidden="true"></div>
                            <div class="sb-bar"></div>
                            <header class="sb-head">
                                <img class="sb-logo-brand" src="{{ asset('images/reportcard/foracort-synchrobreathe.png') }}" alt="foracort synchrobreathe">
                                <div class="sb-badge">Report Card</div>
                                <img class="sb-logo-cipla" src="{{ asset('images/reportcard/cipla.png') }}" alt="Cipla">
                            </header>
                            <h1 class="sb-title">Upgradation of Respi Physician</h1>
                            <section class="sb-panel">
                                <div class="sb-meta">
                                    <div>Name: <span class="val">{{ $report['tm']['name'] }}</span></div>
                                    <div class="right">HQ: <span class="val">{{ $report['tm']['hq'] }}</span></div>
                                    <div>ABM: <span class="val">{{ $report['tm']['abm'] }}</span></div>
                                    <div class="right">Zone: <span class="val">{{ $report['tm']['zone'] }}</span></div>
                                </div>
                                <div class="sb-table-wrap">
                                    <table class="sb-table">
                                        <colgroup>
                                            <col class="name-head">
                                            @for ($i = 0; $i < $monthCount * 2; $i++)
                                                <col>
                                            @endfor
                                        </colgroup>
                                        <thead>
                                            <tr>
                                                <th class="name-head" rowspan="3"></th>
                                                <th class="banner" colspan="{{ $monthCount * 2 }}">Foracort Sync Productivity</th>
                                            </tr>
                                            <tr>
                                                @forelse ($report['months'] as $month)
                                                    <th class="month" colspan="2">{{ $month['label'] }}</th>
                                                @empty
                                                    <th class="month" colspan="2"></th>
                                                @endforelse
                                            </tr>
                                            <tr>
                                                @foreach ($report['months'] as $month)
                                                    <th class="metric">QTY</th>
                                                    <th class="metric">Value</th>
                                                @endforeach
                                                @if ($report['months'] === [])
                                                    <th class="metric">QTY</th>
                                                    <th class="metric">Value</th>
                                                @endif
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($report['doctors'] as $doctor)
                                                <tr>
                                                    <td class="name">{{ $doctor['name'] }}</td>
                                                    @foreach ($report['months'] as $month)
                                                        @php
                                                            $cell = $doctor['cells'][$month['key']] ?? null;
                                                        @endphp
                                                        <td class="num">{{ $cell['qty'] ?? '0' }}</td>
                                                        <td class="num">{{ $cell['value'] ?? '0' }}</td>
                                                    @endforeach
                                                </tr>
                                            @endforeach
                                            @for ($i = 0; $i < $blankRows; $i++)
                                                <tr>
                                                    <td class="name"></td>
                                                    @foreach ($report['months'] as $month)
                                                        <td class="num"></td>
                                                        <td class="num"></td>
                                                    @endforeach
                                                    @if ($report['months'] === [])
                                                        <td class="num"></td>
                                                        <td class="num"></td>
                                                    @endif
                                                </tr>
                                            @endfor
                                        </tbody>
                                    </table>
                                </div>
                            </section>
                            <div class="sb-sign">
                                <div class="sb-sign-row">
                                    <span>Comment:</span>
                                    <span class="fill">{{ $report['comment'] }}</span>
                                </div>
                                <div class="sb-sign-pair">
                                    <div>
                                        <span>RBM:</span>
                                        <span class="fill">{{ $report['rbm'] }}</span>
                                    </div>
                                    <div>
                                        <span>ZBM:</span>
                                        <span class="fill">{{ $report['zbm'] }}</span>
                                    </div>
                                </div>
                                <div class="sb-sign-row">
                                    <span>Marketing:</span>
                                    <span class="fill">{{ $report['marketing'] }}</span>
                                </div>
                            </div>
                            <div class="sb-bar"></div>
                        </article>
                    </div>
            </div>
        @endif
    </div>
@endsection

@section('script')
    <script src="{{ asset('assets/libs/select2/select2.min.js') }}"></script>
@endsection

@section('script-bottom')
    <script>
        $(function () {
            $('#field-tm_id').select2({
                width: '100%',
                placeholder: 'Select a user (territory)',
                allowClear: true
            });

            $('#sb-report-form').on('submit', function (event) {
                if (!$('#field-tm_id').val()) {
                    event.preventDefault();
                    $('#field-tm_id').select2('open');
                    return;
                }
                $('#sb-report-loader').addClass('is-visible').attr('aria-busy', 'true');
            });

            function scaleReportSheets() {
                var preview = document.getElementById('sb-report-card');
                if (!preview) {
                    return;
                }
                var sheet = preview.querySelector('.sb-sheet');
                if (!sheet) {
                    return;
                }
                var natural = sheet.offsetWidth;
                if (!natural) {
                    return;
                }
                var scale = Math.min(1, preview.clientWidth / natural);
                preview.querySelectorAll('.sb-sheet-slot').forEach(function (slot) {
                    slot.style.setProperty('--sb-scale', String(scale));
                });
            }

            scaleReportSheets();
            $(window).on('resize', scaleReportSheets);

            $('#sb-download-btn').on('click', function (event) {
                event.preventDefault();
                var params = new URLSearchParams(new FormData(document.getElementById('sb-report-form')));
                window.location = '{{ $base_url }}/download?' + params.toString();
            });

            $('#sb-another-btn').on('click', function () {
                $('#field-tm_id').val(null).trigger('change');
                $('#field-comment, #field-rbm, #field-zbm, #field-marketing').val('');
                $('#sb-report-form').removeClass('sb-is-hidden');
                $('#sb-report-actions, #sb-report-card').addClass('sb-is-hidden');
                var form = document.getElementById('sb-report-form');
                if (form && form.scrollIntoView) {
                    form.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            });
        });
    </script>
@endsection