
@extends('capture.layoutv6')

@section('style')
<style>
    .pp-page .pp-card {
        border: 1px solid var(--vz-border-color);
        border-radius: 14px;
        box-shadow: 0 1px 2px rgba(56, 65, 74, .06);
        overflow: hidden;
    }

    .pp-page .pp-card-header {
        background: var(--vz-card-bg);
        border-bottom: 1px solid var(--vz-border-color);
        padding: 1rem 1.25rem;
    }

    .pp-page .pp-icon {
        width: 40px;
        height: 40px;
        border-radius: 11px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex: 0 0 auto;
    }

    .pp-page .pp-title {
        font-size: 15px;
        font-weight: 600;
        margin: 0;
        line-height: 1.3;
    }

    .pp-page .pp-subtitle {
        font-size: 12px;
        color: var(--vz-secondary-color, #878a99);
        margin: 0;
    }

    /* ---- แถบค้นหา ---- */
    .pp-page .pp-filter {
        background: var(--vz-light);
        border: 1px solid var(--vz-border-color);
        border-radius: 12px;
        padding: .75rem;
    }

    .pp-page .pp-filter .input-group-text {
        background: var(--vz-card-bg);
        border-right: 0;
        color: #878a99;
    }

    .pp-page .pp-filter .form-control {
        border-left: 0;
        padding-left: 0;
    }

    .pp-page .pp-filter .form-control:focus {
        box-shadow: none;
        border-color: var(--vz-border-color);
    }

    .pp-page .pp-filter .input-group:focus-within {
        border-radius: .25rem;
        box-shadow: 0 0 0 2px rgba(64, 81, 137, .12);
    }

    .pp-page .filter-date {
        background: var(--vz-card-bg);
        cursor: pointer;
    }

    /* ---- ตาราง ---- */
    .pp-page .pp-scroll {
        max-height: 460px;
        overflow: auto;
        border: 1px solid var(--vz-border-color);
        border-radius: 12px;
    }

    .pp-page .pp-table {
        margin-bottom: 0;
        border-collapse: separate;
        border-spacing: 0;
    }

    .pp-page .pp-table thead th {
        position: sticky;
        top: 0;
        z-index: 5;
        background: var(--vz-light);
        color: #878a99;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .4px;
        text-transform: uppercase;
        white-space: nowrap;
        padding: .7rem .85rem;
        border-bottom: 1px solid var(--vz-border-color);
    }

    .pp-page .pp-table tbody td {
        padding: .65rem .85rem;
        vertical-align: middle;
        font-size: 13.5px;
        border-bottom: 1px solid var(--vz-border-color);
    }

    .pp-page .pp-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .pp-page .pp-table tbody tr:hover td {
        background: var(--vz-light);
    }

    .pp-page .pp-hn {
        font-weight: 600;
        letter-spacing: .3px;
    }

    .pp-page .pp-name {
        font-weight: 500;
    }

    .pp-page .pp-no {
        color: #878a99;
        font-size: 12px;
    }

    .pp-page .pp-empty {
        padding: 2.5rem 1rem !important;
        text-align: center;
        color: #878a99;
    }

    .pp-page .pp-empty:hover {
        background: transparent !important;
    }

    .pp-page .pp-empty i {
        font-size: 34px;
        display: block;
        margin-bottom: .5rem;
        opacity: .45;
    }

    /* ---- datepicker ให้เข้ากับธีม ---- */
    .datepicker {
        border-radius: 10px;
        box-shadow: 0 5px 20px rgba(30, 32, 37, .12);
        border: 1px solid var(--vz-border-color);
        padding: .5rem;
        z-index: 1060 !important;
    }

    .datepicker table tr td.active,
    .datepicker table tr td.active:hover {
        background: var(--vz-primary) !important;
        background-image: none !important;
        border-radius: 6px;
    }

    .datepicker table tr td.today {
        background: rgba(var(--vz-primary-rgb), .12) !important;
        border-radius: 6px;
    }

    .datepicker table tr td,
    .datepicker table tr th {
        border-radius: 6px;
    }
</style>
@endsection

@section('title-left')
    <div class="d-flex align-items-center gap-2 py-2">
        <span class="pp-icon bg-primary-subtle text-primary"><i class="ri-printer-line"></i></span>
        <div>
            <h4 class="mb-0 fs-16 fw-semibold">Print Cases</h4>
            <p class="pp-subtitle">จัดการและพิมพ์เอกสารเคสผู้ป่วย</p>
        </div>
    </div>
@endsection

@section('title-right')
    <div class="d-flex align-items-center gap-2 py-2">
        <span class="badge bg-light text-muted fw-normal border">
            <i class="ri-refresh-line align-middle me-1"></i>รีเฟรชใน <span id="ppCountdown">20</span> วิ
        </span>
        <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#exportPdfModal">
            <i class="ri-file-download-line align-bottom me-1"></i> Export PDF
        </button>
    </div>
@endsection

@section('content')

    <div class="container-fluid pp-page mt-2">
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show d-flex align-items-center" role="alert">
                <i class="ri-checkbox-circle-line fs-18 me-2"></i>
                <div class="flex-grow-1">{{ session('success') }}</div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show d-flex align-items-center" role="alert">
                <i class="ri-error-warning-line fs-18 me-2"></i>
                <div class="flex-grow-1">{{ session('error') }}</div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        {{-- ================= แถบค้นหา (ใช้กับทั้งสองตาราง) ================= --}}
        <div class="row g-2 mb-3 pp-filter" id="ppSearch">
            <div class="col-xl-2 col-md-6">
                <div class="input-group input-group-sm">
                    <span class="input-group-text"><i class="ri-user-search-line"></i></span>
                    <input type="text" class="form-control search-input" id="search_hn"
                        value="{{ $search['hn'] }}" placeholder="HN" autocomplete="off">
                </div>
            </div>
            <div class="col-xl-3 col-md-6">
                <div class="input-group input-group-sm">
                    <span class="input-group-text"><i class="ri-account-circle-line"></i></span>
                    <input type="text" class="form-control search-input" id="search_name"
                        value="{{ $search['name'] }}" placeholder="Name" autocomplete="off">
                </div>
            </div>
            <div class="col-xl-2 col-md-6">
                <div class="input-group input-group-sm">
                    <span class="input-group-text"><i class="ri-calendar-2-line"></i></span>
                    <input type="text" class="form-control filter-date" id="search_datefrom"
                        value="{{ $search['datefrom'] }}" placeholder="Start-Date" autocomplete="off">
                </div>
            </div>
            <div class="col-xl-2 col-md-6">
                <div class="input-group input-group-sm">
                    <span class="input-group-text"><i class="ri-calendar-check-line"></i></span>
                    <input type="text" class="form-control filter-date" id="search_dateto"
                        value="{{ $search['dateto'] }}" placeholder="End-Date" autocomplete="off">
                </div>
            </div>
            <div class="col-xl-2 col-md-6">
                <div class="input-group input-group-sm">
                    <span class="input-group-text"><i class="ri-stethoscope-line"></i></span>
                    <input type="text" class="form-control search-input" id="search_doctor"
                        value="{{ $search['doctor'] }}" placeholder="แพทย์" autocomplete="off">
                </div>
            </div>
            <div class="col-xl-1 col-12 d-flex align-items-center gap-2">
                <button type="button" class="btn btn-outline-secondary btn-sm" id="searchReset">
                    <i class="ri-eraser-line align-bottom"></i> ล้าง
                </button>
                <span class="spinner-border spinner-border-sm text-primary d-none" id="ppLoading" role="status"></span>
            </div>
            <div class="col-12">
                <small class="text-muted">
                    <i class="ri-information-line align-bottom"></i>
                    ไม่ระบุช่วงวันที่ = แสดงตั้งแต่วันนี้เป็นต้นไป / ระบุ Start-Date เพื่อค้นหาย้อนหลัง
                </small>
            </div>
        </div>

        <div class="row g-4">
            {{-- ================= รอพิมพ์ ================= --}}
            <div class="col-12">
                <div class="card pp-card mb-0">
                    <div class="pp-card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                        <div class="d-flex align-items-center gap-2">
                            <span class="pp-icon bg-primary-subtle text-primary"><i class="ri-file-list-3-line"></i></span>
                            <div>
                                <h5 class="pp-title">รายการรอพิมพ์</h5>
                                <p class="pp-subtitle">เคสที่ยังไม่ได้พิมพ์เอกสาร</p>
                            </div>
                        </div>
                        <span class="badge bg-primary-subtle text-primary fs-12 px-3 py-2 rounded-pill"
                            id="waitCount">
                            {{ count($tb_case) }} รายการ
                        </span>
                    </div>
                    <div class="card-body">
                        <div class="pp-scroll">
                            <table class="table pp-table" id="tableCase">
                                <thead>
                                    <tr>
                                        <th>HN</th>
                                        <th>ชื่อ-นามสกุล</th>
                                        <th>วันที่</th>
                                        <th>แพทย์</th>
                                        <th>สถานะ</th>
                                        <th class="text-end">จัดการ</th>
                                    </tr>
                                </thead>
                                <tbody id="waitBody">
                                    @include('printpdf.table.wait', ['tb_case' => $tb_case])
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ================= พิมพ์แล้ว ================= --}}
            <div class="col-12">
                <div class="card pp-card mb-0">
                    <div class="pp-card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                        <div class="d-flex align-items-center gap-2">
                            <span class="pp-icon bg-success-subtle text-success"><i
                                    class="ri-checkbox-circle-line"></i></span>
                            <div>
                                <h5 class="pp-title">รายการที่พิมพ์แล้ว</h5>
                                <p class="pp-subtitle">สามารถสั่งพิมพ์ซ้ำได้</p>
                            </div>
                        </div>
                        <span class="badge bg-success-subtle text-success fs-12 px-3 py-2 rounded-pill"
                            id="printedCount">
                            {{ count($tb_caseyet) }} รายการ
                        </span>
                    </div>
                    <div class="card-body">
                        <div class="pp-scroll">
                            <table class="table pp-table" id="tableCaseYet">
                                <thead>
                                    <tr>
                                        <th style="width:60px">#</th>
                                        <th>HN</th>
                                        <th>ชื่อ-นามสกุล</th>
                                        <th>วันที่</th>
                                        <th>แพทย์</th>
                                        <th>สถานะ</th>
                                        <th class="text-end">จัดการ</th>
                                    </tr>
                                </thead>
                                <tbody id="printedBody">
                                    @include('printpdf.table.printed', ['tb_caseyet' => $tb_caseyet])
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="modal fade" id="exportPdfModal" tabindex="-1" aria-labelledby="exportPdfModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0" style="border-radius:14px;overflow:hidden">
                <form action="{{ url('printpdf') }}" method="post" id="exportPdfForm">
                    @csrf
                    <input type="hidden" name="department" value="{{ @$department }}">
                    <input type="hidden" name="event" value="exportpdf">
                    <div class="modal-header border-bottom">
                        <h5 class="modal-title d-flex align-items-center gap-2" id="exportPdfModalLabel">
                            <span class="pp-icon bg-primary-subtle text-primary"><i
                                    class="ri-file-download-line"></i></span>
                            Export PDF
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body p-4">
                        <label for="export_date" class="form-label fw-medium">เลือกวันที่ export</label>
                        <div class="input-group">
                            <span class="input-group-text bg-light"><i class="ri-calendar-2-line"></i></span>
                            <input type="text" class="form-control" name="export_date" id="export_date"
                                value="{{ $search['datefrom'] ?: date('Y-m-d') }}" placeholder="YYYY-MM-DD"
                                autocomplete="off" required>
                        </div>
                        <small class="text-muted d-block mt-2">
                            <i class="ri-information-line align-bottom"></i>
                            ระบบจะรวมไฟล์ PDF ของเคสในวันที่เลือกเป็นไฟล์ ZIP
                        </small>
                    </div>
                    <div class="modal-footer border-top">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">ยกเลิก</button>
                        <button type="submit" class="btn btn-primary">
                            <i class="ri-download-2-line align-bottom me-1"></i> Export
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    {{-- jQuery / bootstrap / bootstrap-datepicker ถูกโหลดจาก layout แล้ว
         ห้ามโหลด jQuery ซ้ำที่นี่ เพราะจะทำให้ plugin datepicker ที่ผูกไว้กับ jQuery เดิมหลุด --}}

    <script>
        $(function() {

            var STORE_KEY = 'printpdf_search';
            var DEPARTMENT = @json($department);
            var suppress = false; // กัน changeDate ยิงซ้อนตอนสั่งล้างค่า
            var searching = false;
            var pending = false; // มีคำค้นใหม่เข้ามาระหว่างรอผลลัพธ์
            var reloadTimer = null;
            var reloadAt = 0;

            // ---------- เก็บ/คืนค่าที่ค้นหาไว้ ----------
            function values() {
                return {
                    search_hn: $.trim($('#search_hn').val()),
                    search_name: $.trim($('#search_name').val()),
                    search_doctor: $.trim($('#search_doctor').val()),
                    search_datefrom: $.trim($('#search_datefrom').val()),
                    search_dateto: $.trim($('#search_dateto').val())
                };
            }

            function save(v) {
                try {
                    sessionStorage.setItem(STORE_KEY, JSON.stringify(v));
                } catch (e) {}
            }

            function restore() {
                var raw;
                try {
                    raw = sessionStorage.getItem(STORE_KEY);
                } catch (e) {}
                if (!raw) return false;

                var data;
                try {
                    data = JSON.parse(raw);
                } catch (e) {
                    return false;
                }

                var any = false;
                $.each(data, function(k, v) {
                    // ค่าที่มากับ URL/server มาก่อนเสมอ
                    if (v && $.trim($('#' + k).val()) === '') {
                        $('#' + k).val(v);
                        any = true;
                    }
                });
                return any;
            }

            // ---------- ค้นหา: ส่งไป query ที่ server แล้วแทนที่ tbody ----------
            function doSearch() {
                // ยิงซ้อนไม่ได้ แต่ห้ามทิ้งคำค้นล่าสุด ให้ค้างไว้แล้วยิงต่อทันทีที่ว่าง
                if (searching) {
                    pending = true;
                    return;
                }
                searching = true;
                $('#ppLoading').removeClass('d-none');

                var v = values();
                save(v);

                var payload = $.extend({
                    event: 'search'
                }, v);
                if (DEPARTMENT !== null && DEPARTMENT !== undefined) {
                    payload.department = DEPARTMENT;
                }

                $.post("{{ url('printpdf') }}", payload)
                    .done(function(res) {
                        $('#waitBody').html(res.wait);
                        $('#printedBody').html(res.printed);
                        $('#waitCount').text(res.wait_count + ' รายการ');
                        $('#printedCount').text(res.printed_count + ' รายการ');
                    })
                    .always(function() {
                        searching = false;
                        $('#ppLoading').addClass('d-none');
                        if (pending) {
                            pending = false;
                            doSearch();
                            return;
                        }
                        scheduleReload();
                    });
            }

            // พิมพ์แล้วหน่วงสักครู่ค่อยยิง กันยิงทุกตัวอักษร
            var typeTimer = null;

            function doSearchDebounced() {
                clearTimeout(typeTimer);
                typeTimer = setTimeout(doSearch, 350);
            }

            // ---------- datepicker: Start-Date / End-Date ----------
            // ค่าเริ่มต้น render มาจาก server แล้ว จึงผูก event หลัง init
            // เพื่อไม่ให้ changeDate ตอน init ยิงค้นหาซ้ำ
            $('.filter-date').datepicker({
                format: 'yyyy-mm-dd',
                autoclose: true,
                todayHighlight: true,
                clearBtn: true,
                orientation: 'bottom auto'
            }).on('changeDate clearDate', function() {
                if (suppress) return;
                doSearch();
            });

            $('#export_date').datepicker({
                format: 'yyyy-mm-dd',
                autoclose: true,
                todayHighlight: true,
                orientation: 'bottom auto',
                container: '#exportPdfModal'
            });

            $('.search-input').on('keyup change', doSearchDebounced);

            $('#searchReset').on('click', function() {
                suppress = true;
                $('.search-input').val('');
                $('.filter-date').datepicker('update', '');
                suppress = false;
                doSearch();
            });

            // ---------- รีเฟรชอัตโนมัติทุก 20 วินาที (ดึงเฉพาะข้อมูล ไม่โหลดหน้าใหม่) ----------
            function scheduleReload() {
                clearTimeout(reloadTimer);
                reloadAt = new Date().getTime() + 20000;
                reloadTimer = setTimeout(function() {
                    if ($('.datepicker').is(':visible') || $('#exportPdfModal').hasClass('show')) {
                        scheduleReload(); // ยังใช้งานอยู่ เลื่อนออกไปก่อน
                        return;
                    }
                    doSearch();
                }, 20000);
            }

            setInterval(function() {
                var sec = Math.max(0, Math.ceil((reloadAt - new Date().getTime()) / 1000));
                $('#ppCountdown').text(sec);
            }, 1000);

            // ---------- เริ่มทำงาน ----------
            if (restore()) {
                $('.filter-date').each(function() {
                    var v = $.trim($(this).val());
                    if (v) {
                        suppress = true;
                        $(this).datepicker('update', v);
                        suppress = false;
                    }
                });
                doSearch();
            } else {
                scheduleReload();
            }

        });
    </script>

@endsection
