@extends(!empty($publicView) ? 'layouts.public' : 'layouts.adminlte')

@section('title', 'Detail Perhitungan Jam')
@section('page_title', 'Detail Perhitungan Jam')

@push('styles')
    <style>
        .detail-table {
            table-layout: auto;
        }
        .detail-table th,
        .detail-table td {
            vertical-align: middle;
            white-space: normal;
        }
        .detail-table .col-index,
        .detail-table .col-time,
        .detail-table .col-ot {
            white-space: nowrap;
        }
        .detail-table th.col-plan-detail,
        .detail-table th.col-actual-detail,
        .detail-table th.col-overtime-head,
        .detail-table th.col-overtime-time-head,
        .detail-table th.col-status {
            white-space: normal !important;
            line-height: 1.2;
        }
        .detail-table .col-date {
            min-width: 170px;
            white-space: normal;
        }
        .detail-table .col-plan-detail {
            min-width: 120px;
            white-space: normal;
        }
        .detail-table .col-actual-detail {
            min-width: 170px;
            white-space: normal;
        }
        .detail-table .col-status {
            min-width: 90px;
            white-space: normal;
        }
        .detail-table .col-overtime-head {
            min-width: 96px;
        }
        .detail-table .col-overtime-time-head {
            min-width: 72px;
        }
        .col-reason {
            min-width: 220px;
            max-width: 420px;
            white-space: pre-line;
            overflow-wrap: anywhere;
            word-break: break-word;
            line-height: 1.35;
        }
        .detail-table td.col-reason,
        .detail-table th.col-reason {
            white-space: pre-line !important;
            overflow-wrap: anywhere;
            word-break: break-word;
        }
        .detail-table .col-ot { min-width: 64px; text-align: center; }
        .detail-table .col-time { min-width: 78px; text-align: center; }
        .detail-table .col-num { min-width: 82px; text-align: center; white-space: nowrap; }
        .day-tag {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            line-height: 1.2;
        }
        .day-tag.workday { background: #dcfce7; color: #166534; }
        .day-tag.weekend { background: #dbeafe; color: #1d4ed8; }
        .day-tag.holiday { background: #fee2e2; color: #b91c1c; }
        .day-tag.holiday_special { background: #ffedd5; color: #c2410c; }
        .row-weekend { background: #f8fbff; }
        .row-holiday { background: #fff7f7; }
        .row-holiday-special { background: #fff7ed; }
        .summary-row td {
            background: #f8fafc;
            font-weight: 600;
        }
        .summary-row td.label {
            text-align: left;
        }
        .summary-row td.value {
            text-align: center;
            min-width: 82px;
        }
        .summary-divider td {
            border-top: 2px solid #111;
        }
        .audit-row-heavy td {
            background: #fff1f2;
        }
        .audit-row-light td {
            background: #fff7ed;
        }
    </style>
@endpush

@section('content')
    <div class="card">
        <div class="card-header">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                <h3 class="card-title m-0">
                    {{ $assignment->karyawan?->employee_code }} - {{ $assignment->karyawan?->full_name }}
                </h3>
                @if (!empty($publicView))
                    <a class="btn btn-sm btn-outline-secondary" href="{{ $publicBackUrl ?? route('public.attendance_check') }}">
                        <i class="fas fa-arrow-left me-1"></i>Kembali
                    </a>
                @endif
            </div>
        </div>
        <div class="card-body">
            <div class="mb-2 text-muted">
                Profil Bulan: <strong>{{ $profil->code }} - {{ $profil->name }}</strong> |
                Periode: <strong>{{ $dateFrom }} s/d {{ $dateTo }}</strong>
            </div>
            <div class="mb-2">
                @if ((int) ($pendingCount ?? 0) > 0)
                    <span class="badge text-bg-warning">Pending Draft: {{ (int) $pendingCount }}</span>
                @else
                    <span class="badge text-bg-success">Semua baris sudah Approved</span>
                @endif
            </div>
            @if (empty($publicView))
                @php
                    $detailRoutePrefix = request()->routeIs('attendance_review_v2.*') ? 'attendance_review_v2' : 'attendance_review';
                @endphp
                <div class="mb-3 d-flex gap-2 flex-wrap">
                    <div class="btn-group">
                        <button type="button" class="btn btn-sm btn-outline-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fas fa-file-export me-1"></i>Export Rincian
                        </button>
                        <ul class="dropdown-menu">
                            <li>
                                <a
                                    class="dropdown-item"
                                    href="{{ route($detailRoutePrefix . '.calculations.sheet', ['profil_bulan_id' => $profilId, 'karyawan_id' => $karyawanId, 'date_from' => $dateFrom, 'date_to' => $dateTo]) }}"
                                    target="_blank"
                                >
                                    Dinamis Berulang
                                </a>
                            </li>
                        </ul>
                    </div>
                    <button
                        class="btn btn-sm btn-outline-success"
                        id="btnApproveDetailAll"
                        @if ((int) ($pendingCount ?? 0) <= 0) disabled @endif
                    >
                        <i class="fas fa-check-double me-1"></i>Approve Semua Draft
                    </button>
                    <button class="btn btn-sm btn-outline-primary" id="btnSendDetailEmail" type="button" disabled title="Fungsi kirim email sementara dinonaktifkan">
                        <i class="fas fa-envelope me-1"></i>Kirim Email
                    </button>
                    <button class="btn btn-sm btn-outline-success" id="btnSendDetailWa" type="button" disabled title="Fungsi kirim WA sementara dinonaktifkan">
                        <i class="fab fa-whatsapp me-1"></i>Kirim WA
                    </button>
                </div>
            @endif
            @include('attendancereview::partials.calculation_detail_shared', [
                'detailRows' => $rows,
                'detailOtColumns' => $otColumns,
                'detailProfil' => $profil,
            ])
        </div>
    </div>
@endsection

@if (empty($publicView))
    @push('scripts')
        <script>
            $(function () {
                const payloadBase = {
                    _token: '{{ csrf_token() }}',
                    profil_bulan_id: '{{ $profilId }}',
                    karyawan_id: '{{ $karyawanId }}',
                    date_from: '{{ $dateFrom }}',
                    date_to: '{{ $dateTo }}',
                };
                const pendingCount = Number('{{ (int) ($pendingCount ?? 0) }}' || '0');

                $('#btnApproveDetailAll').on('click', async function () {
                    if (pendingCount <= 0) {
                        Swal.fire('Info', 'Tidak ada data draft untuk di-approve.', 'info');
                        return;
                    }
                    const confirm = await Swal.fire({
                        title: 'Approve semua draft?',
                        text: `Draft tersisa: ${pendingCount} baris`,
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonText: 'Approve',
                        cancelButtonText: 'Batal',
                    });
                    if (!confirm.isConfirmed) return;

                    $.post('{{ route('attendance_review.calculations.detail.approve_all') }}', payloadBase)
                        .done((resp) => {
                            Swal.fire('Success', resp?.message || 'Approve selesai', 'success')
                                .then(() => window.location.reload());
                        })
                        .fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Approve gagal', 'error'));
                });

                /*
                 * Fitur kirim detail via Email/WA sementara dimatikan dari UI.
                 * Handler disisakan nonaktif agar route backend tidak terpanggil tanpa sengaja.
                 */
                $('#btnSendDetailEmail').on('click', async function () {
                    return;
                    const input = await Swal.fire({
                        title: 'Kirim Detail ke Email',
                        text: 'Isi email tujuan (boleh lebih dari satu, pisah koma).',
                        input: 'text',
                        inputPlaceholder: 'hrd@company.com, manager@company.com',
                        showCancelButton: true,
                        confirmButtonText: 'Kirim',
                        cancelButtonText: 'Batal',
                    });
                    if (!input.isConfirmed) return;

                    const recipient = String(input.value || '').trim();
                    if (!recipient) {
                        Swal.fire('Warning', 'Email tujuan wajib diisi', 'warning');
                        return;
                    }

                    $.post('{{ route('attendance_review.calculations.detail.send') }}', {
                        ...payloadBase,
                        channel: 'email',
                        recipient,
                    }).done((resp) => {
                        Swal.fire('Success', resp?.message || 'Detail berhasil dikirim ke email', 'success');
                    }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal kirim email', 'error'));
                });

                $('#btnSendDetailWa').on('click', async function () {
                    return;
                    const input = await Swal.fire({
                        title: 'Kirim Detail ke WA',
                        text: 'Masukkan nomor format internasional, contoh 62812xxxxxxx',
                        input: 'text',
                        inputPlaceholder: '62812xxxxxxx',
                        showCancelButton: true,
                        confirmButtonText: 'Kirim',
                        cancelButtonText: 'Batal',
                    });
                    if (!input.isConfirmed) return;

                    const recipient = String(input.value || '').trim();
                    if (!recipient) {
                        Swal.fire('Warning', 'Nomor WA tujuan wajib diisi', 'warning');
                        return;
                    }

                    $.post('{{ route('attendance_review.calculations.detail.send') }}', {
                        ...payloadBase,
                        channel: 'wa',
                        recipient,
                    }).done((resp) => {
                        Swal.fire('Success', resp?.message || 'Detail berhasil dikirim ke WA', 'success');
                    }).fail((xhr) => Swal.fire('Error', xhr.responseJSON?.message || 'Gagal kirim WA', 'error'));
                });
            });
        </script>
    @endpush
@endif