@extends('layouts.app')
@section('title', __('medemergency::lang.er_board'))

@section('css')
<style>
.mder-metrics { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.mder-metric { flex:1 1 160px; background:#fff; border:1px solid #e2e8f0; border-radius:8px; padding:10px 14px; }
.mder-metric .m-label { font-size:11px; text-transform:uppercase; color:#64748b; letter-spacing:.5px; }
.mder-metric .m-value { font-size:22px; font-weight:800; color:#0f172a; }
.mder-metric.m-lwbs .m-value { color:#b91c1c; }
.mder-board { display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; align-items:flex-start; }
.mder-col { flex:0 0 230px; background:#f1f5f9; border-radius:8px; }
.mder-col-head { padding:8px 10px; font-weight:700; font-size:12px; text-transform:uppercase; color:#334155; border-bottom:2px solid #cbd5e1; display:flex; justify-content:space-between; align-items:center; }
.mder-count { background:#334155; color:#fff; border-radius:10px; padding:1px 8px; font-size:11px; }
.mder-col-body { padding:8px; min-height:60px; }
.mder-card { background:#fff; border-radius:6px; box-shadow:0 1px 2px rgba(0,0,0,.08); padding:8px 10px; margin-bottom:8px; }
.mder-card-top { display:flex; justify-content:space-between; align-items:center; }
.mder-tid { font-size:11px; color:#64748b; white-space:nowrap; }
.mder-card-sub { display:flex; justify-content:space-between; align-items:center; margin-top:3px; }
.mder-visit-no { font-size:10px; color:#94a3b8; }
.mder-triage-badge { color:#fff; font-size:9px; font-weight:700; padding:1px 6px; border-radius:8px; text-transform:uppercase; }
.mder-cc { font-size:11px; color:#475569; margin-top:4px; }
.mder-card-actions { margin-top:6px; display:flex; gap:4px; flex-wrap:wrap; }
.mder-empty { text-align:center; font-size:11px; padding:10px 0; }
.mder-refresh-note { font-size:11px; color:#94a3b8; }
</style>
@endsection

@section('content')
<section class="content-header">
    <h1 style="display:inline-block;"><i class="fa fas fa-truck-medical"></i> @lang('medemergency::lang.er_board')</h1>
    <a href="{{ route('mder.arrivals.create') }}" class="btn btn-primary pull-right" style="margin-top:8px;">
        <i class="fa fa-plus"></i> @lang('medemergency::lang.new_arrival')
    </a>
    <p>@lang('medemergency::lang.board_help')
        <span class="mder-refresh-note">· <i class="fa fa-sync"></i> @lang('medemergency::lang.refreshing') ({{ $refreshSeconds }}s)</span>
    </p>
</section>
<section class="content">
    {{-- Today metrics strip --}}
    <div class="mder-metrics">
        <div class="mder-metric">
            <div class="m-label">@lang('medemergency::lang.arrivals_count') · @lang('medemergency::lang.metrics_today')</div>
            <div class="m-value">{{ $metrics['arrivals_count'] }}</div>
        </div>
        <div class="mder-metric">
            <div class="m-label">@lang('medemergency::lang.door_to_triage')</div>
            <div class="m-value">{{ $metrics['door_to_triage'] !== null ? __('medemergency::lang.minutes_short', ['n' => $metrics['door_to_triage']]) : __('medemergency::lang.no_data') }}</div>
        </div>
        <div class="mder-metric">
            <div class="m-label">@lang('medemergency::lang.door_to_doctor')</div>
            <div class="m-value">{{ $metrics['door_to_doctor'] !== null ? __('medemergency::lang.minutes_short', ['n' => $metrics['door_to_doctor']]) : __('medemergency::lang.no_data') }}</div>
        </div>
        <div class="mder-metric m-lwbs">
            <div class="m-label">@lang('medemergency::lang.lwbs_count') · @lang('medemergency::lang.metrics_today')</div>
            <div class="m-value">{{ $metrics['lwbs_count'] }}</div>
        </div>
    </div>

    {{-- Board columns (also swapped in by the auto-refresh poll) --}}
    <div id="mder_board_wrap">
        @include('medemergency::board.columns')
    </div>

    <div class="modal fade mder_modal" tabindex="-1" role="dialog"></div>
</section>
@endsection

@section('javascript')
<script>
$(function () {
    var refreshMs = {{ (int) $refreshSeconds * 1000 }};
    var CSRF = '{{ csrf_token() }}';

    // Ticking time-in-department (recompute from data-arrival every 30s tick too).
    function tickTimers() {
        $('.mder-tid').each(function () {
            var iso = $(this).data('arrival');
            if (!iso) return;
            var mins = Math.max(0, Math.round((Date.now() - new Date(iso).getTime()) / 60000));
            $(this).find('.mder-tid-val').text(mins + 'm');
        });
    }
    setInterval(tickTimers, 30000);

    // Auto-refresh the board body.
    function refreshBoard() {
        $.get('{{ route('mder.board.refresh') }}', function (html) {
            $('#mder_board_wrap').html(html);
            tickTimers();
        });
    }
    setInterval(refreshBoard, refreshMs);

    // Detail drawer.
    $(document).on('click', '.mder-view-btn', function () {
        var id = $(this).data('id');
        $.get('{{ url('med-emergency/board/visit') }}/' + id, function (html) {
            $('.mder_modal').html(html).modal('show');
        });
    });

    // Advance board status.
    $(document).on('click', '.mder-move-btn', function () {
        var $b = $(this).prop('disabled', true);
        $.ajax({
            url: '{{ url('med-emergency/board/visit') }}/' + $b.data('id') + '/move',
            method: 'POST',
            data: { board_status: $b.data('to'), _token: CSRF },
            success: function (r) {
                if (r.success) { toastr.success(r.msg); refreshBoard(); }
                else { toastr.error(r.msg); $b.prop('disabled', false); }
            },
            error: function () { toastr.error('Something went wrong.'); $b.prop('disabled', false); }
        });
    });

    // LWBS quick action.
    $(document).on('click', '.mder-lwbs-btn', function () {
        if (!confirm('{{ __('medemergency::lang.lwbs_confirm') }}')) return;
        var $b = $(this).prop('disabled', true);
        $.ajax({
            url: '{{ url('med-emergency/board/visit') }}/' + $b.data('id') + '/lwbs',
            method: 'POST',
            data: { _token: CSRF },
            success: function (r) {
                if (r.success) { toastr.success(r.msg); refreshBoard(); }
                else { toastr.error(r.msg); $b.prop('disabled', false); }
            },
            error: function () { toastr.error('Something went wrong.'); $b.prop('disabled', false); }
        });
    });

    // Disposition submit (from inside the drawer).
    $(document).on('submit', '#mder_disposition_form', function (e) {
        e.preventDefault();
        var $f = $(this);
        $.ajax({
            url: $f.attr('action'),
            method: 'POST',
            data: $f.serialize(),
            success: function (r) {
                if (r.success) {
                    toastr.success(r.msg);
                    if (r.admit_url) { window.open(r.admit_url, '_blank'); }
                    $('.mder_modal').modal('hide');
                    refreshBoard();
                } else { toastr.error(r.msg); }
            },
            error: function () { toastr.error('Something went wrong.'); }
        });
    });
});
</script>
@endsection
