{{-- Extends layout --}}
@extends(getThemeBasePath())

@section('page_title')
{{ $page_title }}
@endsection

{{-- Content --}}
@section('content')

<!--begin::Card-->
<div class="card shadow-sm mb-6">
    <!--begin::Card Header-->
    <div class="card-header border-0 pt-6">
        <div class="card-title">
            <h3 class="card-label">Shift Summary</h3>
        </div>
        <div class="card-toolbar">
            <a href="{{ route('shift_case_note_reconciliation.index') }}" class="btn btn-sm btn-light btn-active-light-primary">
                <i class="bi bi-arrow-left"></i> Back to Report
            </a>
        </div>
    </div>
    <!--end::Card Header-->

    <!--begin::Card Body-->
    <div class="card-body py-4">
        <!--begin::Details-->
        <div class="row g-5 mb-4">
            <div class="col-md-3 col-sm-6">
                <div class="fs-6 text-gray-500 fw-bold">Shift ID</div>
                <div class="fs-5 text-gray-800 fw-bolder">
                    <a href="{{ route('team_roster.report', $allocation->roster_shift_master_id) }}" target="_blank" title="Open Roster Record">#{{ $allocation->id }} <i class="bi bi-box-arrow-up-right fs-7 text-primary"></i>
                    </a>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="fs-6 text-gray-500 fw-bold">Shift Info</div>
                <div class="fs-5 text-gray-800 fw-bolder">
                    {{ date('d-m-Y', strtotime($allocation->shift_date)) }} | {{ date('l', strtotime($allocation->shift_date)) }} | {{ $allocation->shift_type }}
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="fs-6 text-gray-500 fw-bold">Shift Time</div>
                <div class="fs-5 text-gray-800 fw-bolder">{{ date('H:i', strtotime($displayStartTime)) }} - {{ date('H:i', strtotime($displayEndTime)) }}</div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="fs-6 text-gray-500 fw-bold">House / Location</div>
                <div class="fs-5 text-gray-800 fw-bolder">{{ $allocation->house_name }}</div>
            </div>
        </div>
        <div class="row g-5">
            <div class="col-md-3 col-sm-6">
                <div class="fs-6 text-gray-500 fw-bold">Totals (Expected | Submitted | Missing)</div>
                <div class="fs-5 text-gray-800 fw-bolder">
                    {{ $totalExpected }} Expected | {{ $totalSubmitted }} Submitted | 
                    @if($totalMissing > 0)
                        <span class="text-danger">{{ $totalMissing }} Missing</span>
                    @else
                        {{ $totalMissing }} Missing
                    @endif
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="fs-6 text-gray-500 fw-bold">Compliance %</div>
                <div class="fs-5 text-gray-800 fw-bolder">
                    <span class="badge badge-light-primary fs-6">{{ $compliancePct }}%</span>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="fs-6 text-gray-500 fw-bold">Joint Accountability</div>
                <div class="fs-5 text-gray-800 fw-bolder">
                    @if($isJointAccountability)
                        <span class="badge badge-light-success fs-6">Yes</span>
                    @else
                        <span class="badge badge-light-secondary fs-6">No</span>
                    @endif
                </div>
            </div>
        </div>
        <!--end::Details-->
    </div>
    <!--end::Card Body-->
</div>
<!--end::Card-->

<!--begin::Card-->
<div class="card shadow-sm">
    <!--begin::Card Header-->
    <div class="card-header border-0 pt-6">
        <div class="card-title">
            <h3 class="card-label">Participants Detail Table</h3>
        </div>
    </div>
    <!--end::Card Header-->

    <!--begin::Card Body-->
    <div class="card-body">
        <!--begin::Table-->
        <div class="table-responsive">
            {!! $html->table() !!}
        </div>
        <!--end::Table-->
    </div>
    <!--end::Card Body-->
</div>
<!--end::Card-->

@endsection

@section('scripts')
{!! $html->scripts() !!}
<script>
    function sendParticipantReminder(allocationId, clientId, staffName, date) {
        Swal.fire({
            title: 'Are you sure?',
            text: "Send a case note reminder to " + staffName + " for the shift on " + date + "?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, send it!',
            cancelButtonText: 'No, cancel',
            customClass: {
                confirmButton: 'btn btn-primary',
                cancelButton: 'btn btn-active-light'
            }
        }).then(function(result) {
            if (result.value) {
                $.ajax({
                    type: 'POST',
                    url: "{{ route('shift_case_note_reconciliation.send_reminder') }}",
                    data: {
                        allocation_id: allocationId,
                        client_id: clientId,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(res) {
                        if (res.success) {
                            Swal.fire({
                                text: res.message,
                                icon: 'success',
                                buttonsStyling: false,
                                confirmButtonText: 'Ok, got it!',
                                customClass: {
                                    confirmButton: 'btn btn-primary'
                                }
                            });
                            if (window.LaravelDataTables["dataTableBuilder"]) {
                                window.LaravelDataTables["dataTableBuilder"].ajax.reload(null, false);
                            }
                        } else {
                            Swal.fire({
                                text: res.message,
                                icon: 'error',
                                buttonsStyling: false,
                                confirmButtonText: 'Ok, got it!',
                                customClass: {
                                    confirmButton: 'btn btn-primary'
                                }
                            });
                        }
                    },
                    error: function(err) {
                        Swal.fire({
                            text: 'An error occurred while sending the reminder.',
                            icon: 'error',
                            buttonsStyling: false,
                            confirmButtonText: 'Ok, got it!',
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            }
                        });
                    }
                });
            }
        });
    }
</script>
@endsection