{{-- case schedule--}}
@push('style-after-global')
<style>
    .case-schedule-table {
        margin: 1em 0;
        min-width: 100%;
    }

    .case-schedule-table tr {
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }

    .case-schedule-table th {
        display: none;
    }

    .case-schedule-table td {
        display: block;
    }

    .case-schedule-table td:first-child {
        padding-top: 0.5em;
    }

    .case-schedule-table td:last-child {
        padding-bottom: 0.5em;
    }

    .case-schedule-table td:before {
        content: attr(data-th) ": ";
        font-weight: bold;
        width: 6.5em;
        display: inline-block;
    }

    @media (min-width: 480px) {
        .case-schedule-table td:before {
            display: none;
        }
    }

    .case-schedule-table th,
    .case-schedule-table td {
        text-align: left;
    }

    @media (min-width: 480px) {

        .case-schedule-table th,
        .case-schedule-table td {
            display: table-cell;
            padding: 0.25em 0.5em;
        }

        .case-schedule-table th:first-child,
        .case-schedule-table td:first-child {
            padding-left: 0;
        }

        .case-schedule-table th:last-child,
        .case-schedule-table td:last-child {
            padding-right: 0;
        }
    }

    .case-schedule-table {
        background: #079f72;
        color: #fff;
        border-radius: 0.4em;
        overflow: hidden;
    }

    .case-schedule-table tr {
        border-color: #46637f;
    }

    .case-schedule-table th,
    .case-schedule-table td {
        margin: 0.5em 1em;
    }

    @media (min-width: 480px) {

        .case-schedule-table th,
        .case-schedule-table td {
            padding: 1em !important;
        }
    }

    .case-schedule-table th,
    .case-schedule-table td:before {
        color: #FF9900;
    }
</style>
@endpush
<div class="card-header" style="margin: 0rem 0rem 1rem 0rem; padding: 1rem 1rem 1rem 1rem;">
    <div class="card-body">

        <div class="text-center mb-1" style="color: #FFFFFF; fonts-size: 15px;">
            <strong>@lang('widget.JadwalSidang') {{ $times }}</strong>
        </div>

        <div class="card-content" style="width:100%;">
            <div class="app-content content">

                    @if ($case_schedules)

                        <table class="case-schedule-table">
                            <tr>
                                <th>@lang('widget.NomorPerkara')</th>
                                <th style="text-align: center;">@lang('widget.Agenda')</th>
                                <th style="text-align: right;">@lang('widget.Ruang')</th>
                                <th style="text-align: center;">@lang('widget.Perkara')</th>
                            </tr>
                        </table>

                        <marquee
                            direction="up"
                            width="100%" height="200"
                            scrollamount="3"
                            >

                            <table class="case-schedule-table">
                            @foreach($case_schedules as $case_schedule)
                                <tr>
                                    <td data-th="No. Pekara">{{ $case_schedule['nomor_perkara'] }}</td>
                                    <td data-th="@lang('widget.Agenda')">{{ $case_schedule['agenda'] }}</td>
                                    <td data-th="@lang('widget.Ruang')">{{ $case_schedule['ruangan'] }}</td>
                                    <td data-th="@lang('widget.Perkara')">{{ $case_schedule['jenis_perkara'] }}</td>
                                </tr>
                            @endforeach

                            </table>

                        </marquee>
                    @else
                        <div class="text-center" style="color: #FFFFFF; text-bold: #FFFFFF;">
                            <small>
                                @lang('widget.TidakDitemukan')
                            </small>
                        </div>
                    @endif

            </div>
        </div>

    </div>
</div>