@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
@include('layouts.navbars.auth.topnav', ['title' => ''])
@php($isHrdAdmin = in_array('hrdadm', array_map('trim', explode(',', auth()->user()->idroles ?? '')), true))

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            {{-- Kembali Button --}}
            <div class="card mb-4" style="border-radius: 15px; overflow: hidden;">
                <div class="card-body">
                    <button type="button" class="btn btn-secondary btn-sm px-4 me-2" onclick="location.href='{{ url($url_menu) }}'">
                        <i class="fas fa-arrow-left me-1"></i> Back
                    </button>
                </div>
            </div>

            {{-- Approval TRN Section --}}
            <div class="card mb-4" style="border-radius: 15px; overflow: hidden;">
                <div class="card-header pb-0">
                    <h6 class="mb-2">Approval TRN</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        {{-- Left Column - Detail TRN --}}
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tbody>
                                    <tr>
                                        <td class="text-sm" style="width: 150px;">Training Name</td>
                                        <td class="text-sm">: {{ $trn->nama_trn }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-sm">Provider</td>
                                        <td class="text-sm">: {{ $trn->provider ?? '-' }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-sm">Place</td>
                                        <td class="text-sm">: {{ $trn->ruangan ?? '-' }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-sm">Known</td>
                                        <td class="text-sm">: {{ $trn->diketahui_nama ?? '-' }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-sm">Approved</td>
                                        <td class="text-sm">: {{ $trn->disetujui_nama ?? '-' }}</td>
                                    </tr>
                                    <tr>
                                        <td class="text-sm">Approval Known</td>
                                        <td class="text-sm">:
                                            @if($trn->approval_diketahui == 'A')
                                            <span class="badge badge-sm bg-success"><i class="fas fa-check me-1"></i> Approved</span>
                                            @elseif($trn->approval_diketahui == 'R')
                                            <span class="badge badge-sm bg-danger"><i class="fas fa-times me-1"></i> Rejected</span>
                                            @else
                                            <span class="badge badge-sm bg-warning"><i class="fas fa-clock me-1"></i> Pending</span>
                                            @endif
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-sm">Approval Approved</td>
                                        <td class="text-sm">:
                                            @if($trn->approval_disetujui == 'A')
                                            <span class="badge badge-sm bg-success"><i class="fas fa-check me-1"></i> Approved</span>
                                            @elseif($trn->approval_disetujui == 'R')
                                            <span class="badge badge-sm bg-danger"><i class="fas fa-times me-1"></i> Rejected</span>
                                            @else
                                            <span class="badge badge-sm bg-warning"><i class="fas fa-clock me-1"></i> Pending</span>
                                            @endif
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        {{-- Right Column - Data TNA --}}
                        <div class="col-md-6">
                            <div class="card" style="background-color: #f8f9fa; border: 1px solid #dee2e6;">
                                <div class="card-body">
                                    <h6 class="mb-3">Data TNA</h6>
                                    <table class="table table-borderless">
                                        <tbody>
                                            <tr>
                                                <td class="text-sm">Departement</td>
                                                <td class="text-sm">: {{ $trn->department ?? '-' }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-sm">Section</td>
                                                <td class="text-sm">: {{ $trn->section ?? '-' }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-sm">Superior</td>
                                                <td class="text-sm">: {{ $trn->superior_name ?? '-' }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-sm">Training Type</td>
                                                <td class="text-sm">: {{ $trn->type_training ?? '-' }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-sm">With Score</td>
                                                <td class="text-sm">: {{ $trn->with_score ? 'Yes' : 'No' }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Schedule Table --}}
                    <div class="row mt-3">
                        <div class="col-12">
                            <div class="table-responsive">
                                <table class="table align-items-center mb-0">
                                    <thead style="background-color: #008B8B; color: white;">
                                        <tr>
                                            <th class="text-uppercase text-white text-xs font-weight-bolder">Date</th>
                                            <th class="text-uppercase text-white text-xs font-weight-bolder">Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($schedules as $schedule)
                                        <tr>
                                            <td class="text-sm">{{ date('l, d F Y', strtotime($schedule->jadwal_trn)) }}</td>
                                            <td>
                                                @if($schedule->isactive == '1')
                                                <span class="badge badge-sm" style="background-color: #008B8B;">Active</span>
                                                @else
                                                <span class="badge badge-sm" style="background-color: #008B8B;">Finished</span>
                                                @endif
                                            </td>
                                        </tr>
                                        @empty
                                        <tr>
                                            <td colspan="2" class="text-center">No schedule available</td>
                                        </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>

                            {{-- Pagination --}}
                            @if($schedules->hasPages())
                            <div class="row mt-3">
                                <div class="col-12">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <small class="text-muted">
                                                Showing {{ $schedules->firstItem() ?? 0 }} to {{ $schedules->lastItem() ?? 0 }} of {{ $schedules->total() }} entries
                                            </small>
                                        </div>
                                        <div>
                                            {{ $schedules->links('pagination::bootstrap-4') }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endif

                            {{-- Approval Buttons --}}
                            <div class="row mb-4">
                                <div class="col-12">
                                    <div style="
                                        display: grid;
                                        grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
                                        gap: 12px;
                                        align-items: stretch;
                                        justify-content: end;
                                        width: 100%;"
                                    ">
                                        {{-- Super Admin Approval Box --}}
                                        @if($isHrdAdmin)
                                        @if($trn->approval_diketahui == 'P' || $trn->approval_disetujui == 'P')
                                        <div class="card border border-primary" style="border-radius: 10px;">
                                            <div class="card-header bg-primary text-white text-center" style="border-radius: 10px 10px 0 0;">
                                                <h6 class="mb-0" style="color:#fff;">
                                                    <i class="fas fa-user-shield me-2" style="color:#ffd700;"></i>Approval All
                                                </h6>
                                            </div>
                                            <div class="card-body p-2 d-flex gap-2 justify-content-center">
                                                <button type="button" class="btn btn-success btn-sm px-3" onclick="updateSuperAdminApproval('A')">
                                                    <i class="fas fa-check me-1"></i> Approve All
                                                </button>
                                                <button type="button" class="btn btn-danger btn-sm px-3" onclick="updateSuperAdminApproval('R')">
                                                    <i class="fas fa-times me-1"></i> Reject All
                                                </button>
                                            </div>
                                        </div>
                                        @endif
                                        @endif

                                        {{-- Approval Diketahui --}}
                                        @if($trn->approval_diketahui == 'P')
                                        @if($isHrdAdmin || trim(auth()->user()->username ?? auth()->user()->nik) == trim($trn->diketahui))
                                        <div class="card border border-primary" style="border-radius: 10px;">
                                            <div class="card-header bg-primary text-white text-center" style="border-radius: 10px 10px 0 0;">
                                                <h6 class="mb-0" style="color:#fff;">
                                                    <i class="fas fa-check-circle me-2" style="color:#06f461;"></i>Approval Diketahui
                                                </h6>
                                            </div>
                                            <div class="card-body p-2 d-flex gap-2 justify-content-center">
                                                <button type="button" class="btn btn-success btn-sm px-3" onclick="updateApproval('A', 'diketahui')">
                                                    <i class="fas fa-check me-1"></i> Approve
                                                </button>
                                                <button type="button" class="btn btn-danger btn-sm px-3" onclick="updateApproval('R', 'diketahui')">
                                                    <i class="fas fa-times me-1"></i> Reject
                                                </button>
                                            </div>
                                        </div>
                                        @else
                                        <div class="card border border-primary" style="border-radius: 10px; background-color: #f0f9f0;">
                                            <div class="card-header bg-primary text-white text-center" style="border-radius: 10px 10px 0 0;">
                                                <h6 class="mb-0" style="color:#fff;">
                                                    <i class="fas fa-clock me-2" style="color:#ff9800;"></i>Approval Diketahui
                                                </h6>
                                            </div>
                                            <div class="card-body p-2 text-center">
                                                <p class="mb-0" style="color:#ff9800;"><i class="fas fa-clock me-1"></i>Pending</p>
                                            </div>
                                        </div>
                                        @endif
                                        @elseif($trn->approval_diketahui == 'A')
                                        <div class="card border border-primary" style="border-radius: 10px; background-color: #f0f9f0;">
                                            <div class="card-header bg-primary text-white text-center" style="border-radius: 10px 10px 0 0;">
                                                <h6 class="mb-0" style="color:#fff;">
                                                    <i class="fas fa-check-circle me-2" style="color:#06f461;"></i>Approval Diketahui
                                                </h6>
                                            </div>
                                            <div class="card-body p-2 text-center">
                                                <p class="mb-0 text-success"><i class="fas fa-check me-1"></i>Approved</p>
                                            </div>
                                        </div>
                                        @else
                                        <div class="card border border-primary" style="border-radius: 10px; background-color: #ffe9ed;">
                                            <div class="card-header bg-primary text-white text-center" style="border-radius: 10px 10px 0 0;">
                                                <h6 class="mb-0" style="color:#fff;">
                                                    <i class="fas fa-times-circle me-2" style="color:#ff0000;"></i>Approval Diketahui
                                                </h6>
                                            </div>
                                            <div class="card-body p-2 text-center">
                                                <p class="mb-0 text-danger"><i class="fas fa-times me-1"></i>Rejected</p>
                                            </div>
                                        </div>
                                        @endif

                                        {{-- Approval Disetujui --}}
                                        @if($trn->approval_disetujui == 'P')
                                        @if($isHrdAdmin || trim(auth()->user()->username ?? auth()->user()->nik) == trim($trn->disetujui))
                                        <div class="card border border-primary" style="border-radius: 10px;">
                                            <div class="card-header bg-primary text-white text-center" style="border-radius: 10px 10px 0 0;">
                                                <h6 class="mb-0" style="color:#fff;">
                                                    <i class="fas fa-check-circle me-2" style="color:#06f461;"></i>Approval Disetujui
                                                </h6>
                                            </div>
                                            <div class="card-body p-2 d-flex gap-2 justify-content-center">
                                                <button type="button" class="btn btn-success btn-sm px-3" onclick="updateApproval('A', 'disetujui')">
                                                    <i class="fas fa-check me-1"></i> Approve
                                                </button>
                                                <button type="button" class="btn btn-danger btn-sm px-3" onclick="updateApproval('R', 'disetujui')">
                                                    <i class="fas fa-times me-1"></i> Reject
                                                </button>
                                            </div>
                                        </div>
                                        @else
                                        <div class="card border border-primary" style="border-radius: 10px; background-color: #f0f9f0;">
                                            <div class="card-header bg-primary text-white text-center" style="border-radius: 10px 10px 0 0;">
                                                <h6 class="mb-0" style="color:#fff;">
                                                    <i class="fas fa-clock me-2" style="color:#ff9800;"></i>Approval Disetujui
                                                </h6>
                                            </div>
                                            <div class="card-body p-2 text-center">
                                                <p class="mb-0" style="color:#ff9800;"><i class="fas fa-clock me-1"></i>Pending</p>
                                            </div>
                                        </div>
                                        @endif
                                        @elseif($trn->approval_disetujui == 'A')
                                        <div class="card border border-primary" style="border-radius: 10px; background-color: #f0f9f0;">
                                            <div class="card-header bg-primary text-white text-center" style="border-radius: 10px 10px 0 0;">
                                                <h6 class="mb-0" style="color:#fff;">
                                                    <i class="fas fa-check-circle me-2" style="color:#06f461;"></i>Approval Disetujui
                                                </h6>
                                            </div>
                                            <div class="card-body p-2 text-center">
                                                <p class="mb-0 text-success"><i class="fas fa-check me-1"></i>Approved</p>
                                            </div>
                                        </div>
                                        @else
                                        <div class="card border border-primary" style="border-radius: 10px; background-color: #ffe9ed;">
                                            <div class="card-header bg-primary text-white text-center" style="border-radius: 10px 10px 0 0;">
                                                <h6 class="mb-0" style="color:#fff;">
                                                    <i class="fas fa-times-circle me-2" style="color:#ff0000;"></i>Approval Disetujui
                                                </h6>
                                            </div>
                                            <div class="card-body p-2 text-center">
                                                <p class="mb-0 text-danger"><i class="fas fa-times me-1"></i>Rejected</p>
                                            </div>
                                        </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection



@push('css')
<style>
</style>
@endpush

@push('js')
<script>
    var currentApprovalType = 'diketahui';

    function updateApproval(status, approvalType) {
        currentApprovalType = approvalType;

        if (status === 'A') {
            Swal.fire({
                title: 'Approve TRN',
                text: 'Are you sure you want to approve this TRN?',
                icon: 'success',
                showCancelButton: true,
                confirmButtonColor: '#4CAF50',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Yes, Approve',
                cancelButtonText: 'Cancel'
            }).then((result) => {
                if (result.isConfirmed) {
                    confirmApproval('A');
                }
            });
        } else {
            Swal.fire({
                title: 'Reject TRN',
                text: 'Are you sure you want to reject this TRN?',
                icon: 'warning',
                input: 'textarea',
                inputPlaceholder: 'Enter rejection reason...',
                inputAttributes: {
                    required: true,
                    style: 'border-radius: 8px;'
                },
                showCancelButton: true,
                confirmButtonColor: '#DC3545',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Yes, Reject',
                cancelButtonText: 'Cancel',
                inputValidator: (value) => {
                    if (!value || !value.trim()) {
                        return 'Rejection reason is required!';
                    }
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    // Store reason in a temp variable
                    window.rejectionReason = result.value;
                    confirmApproval('R');
                }
            });
        }
    }

    function confirmApproval(status) {
        console.log(`=== Updating ${currentApprovalType} approval to ${status} ===`);

        let rejectionReason = '';
        if (status === 'R') {
            rejectionReason = window.rejectionReason || '';
        }

        let requestData = {};

        if (currentApprovalType === 'diketahui') {
            requestData.approval_diketahui = status;
        } else if (currentApprovalType === 'disetujui') {
            requestData.approval_disetujui = status;
        }

        if (status === 'R') {
            requestData.alasan_penolakan = rejectionReason;
        }

        $.ajax({
            url: '{{ url($url_menu . "/approval/" . $trn->id) }}',
            type: 'POST',
            data: JSON.stringify(requestData),
            contentType: 'application/json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                console.log('Approval response:', response);
                if (response.success) {
                    const approvalName = currentApprovalType === 'diketahui' ? 'Diketahui' : 'Disetujui';
                    const titleText = status === 'A' ? `Approval ${approvalName} berhasil di-Approve` : `Approval ${approvalName} berhasil di-Reject`;
                    const iconType = status === 'A' ? 'success' : 'info';

                    Swal.fire({
                        title: 'Success',
                        text: titleText,
                        icon: iconType,
                        confirmButtonColor: '#4CAF50',
                        allowOutsideClick: false,
                        allowEscapeKey: false
                    }).then(() => {
                        window.location.reload();
                    });
                } else {
                    Swal.fire({
                        title: 'Failed',
                        text: 'Gagal update approval: ' + (response.message || 'Unknown error'),
                        icon: 'error',
                        confirmButtonColor: '#DC3545'
                    });
                }
            },
            error: function(xhr) {
                console.log('Error response:', xhr);
                console.log('Status:', xhr.status);
                console.log('Response text:', xhr.responseText);
                console.log('Response JSON:', xhr.responseJSON);

                let message = 'Terjadi kesalahan saat update approval';

                if (xhr.status === 404) {
                    message = 'Route tidak ditemukan. Silakan hubungi administrator.';
                } else if (xhr.status === 422) {
                    if (xhr.responseJSON && xhr.responseJSON.errors) {
                        message = 'Validasi gagal:\n';
                        Object.keys(xhr.responseJSON.errors).forEach(function(key) {
                            message += '- ' + xhr.responseJSON.errors[key].join(', ') + '\n';
                        });
                    } else if (xhr.responseJSON && xhr.responseJSON.message) {
                        message = xhr.responseJSON.message;
                    }
                } else if (xhr.responseJSON && xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                } else if (xhr.responseText) {
                    message = 'Error: ' + xhr.responseText.substring(0, 200);
                }

                Swal.fire({
                    title: 'Error',
                    text: message,
                    icon: 'error',
                    confirmButtonColor: '#DC3545'
                });
            }
        });
    }

    function updateSuperAdminApproval(status) {
        console.log(`=== Super Admin Approval: ${status} ===`);

        if (status === 'A') {
            Swal.fire({
                title: 'Super Admin Approval',
                text: 'Are you sure you want to approve Diketahui and Disetujui?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#4CAF50',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Yes, Approve All',
                cancelButtonText: 'Cancel'
            }).then((result) => {
                if (result.isConfirmed) {
                    confirmSuperAdminApproval('A');
                }
            });
        } else {
            Swal.fire({
                title: 'Super Admin Rejection',
                text: 'Are you sure you want to reject Diketahui and Disetujui?',
                icon: 'warning',
                input: 'textarea',
                inputPlaceholder: 'Enter rejection reason...',
                inputAttributes: {
                    required: true,
                    style: 'border-radius: 8px;'
                },
                showCancelButton: true,
                confirmButtonColor: '#DC3545',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Yes, Reject All',
                cancelButtonText: 'Cancel',
                inputValidator: (value) => {
                    if (!value || !value.trim()) {
                        return 'Rejection reason is required!';
                    }
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    window.superAdminRejectionReason = result.value;
                    confirmSuperAdminApproval('R');
                }
            });
        }
    }

    function confirmSuperAdminApproval(status) {
        let rejectionReason = '';
        if (status === 'R') {
            rejectionReason = window.superAdminRejectionReason || '';
        }

        let requestData = {
            approval_diketahui: status,
            approval_disetujui: status,
            is_super_admin: true
        };

        if (status === 'R') {
            requestData.alasan_penolakan = rejectionReason;
        }

        $.ajax({
            url: '{{ url($url_menu . "/approval/" . $trn->id) }}',
            type: 'POST',
            data: JSON.stringify(requestData),
            contentType: 'application/json',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                console.log('Super Admin Approval response:', response);
                if (response.success) {
                    const titleText = status === 'A' ? 'Diketahui & Disetujui Approved' : 'Diketahui & Disetujui Rejected';
                    const iconType = status === 'A' ? 'success' : 'info';

                    Swal.fire({
                        title: 'Success',
                        text: titleText,
                        icon: iconType,
                        confirmButtonColor: '#4CAF50',
                        allowOutsideClick: false,
                        allowEscapeKey: false
                    }).then(() => {
                        window.location.reload();
                    });
                } else {
                    Swal.fire({
                        title: 'Failed',
                        text: 'Gagal update approval: ' + (response.message || 'Unknown error'),
                        icon: 'error',
                        confirmButtonColor: '#DC3545'
                    });
                }
            },
            error: function(xhr) {
                console.log('Error response:', xhr);

                let message = 'Terjadi kesalahan saat update approval';

                if (xhr.status === 404) {
                    message = 'Route tidak ditemukan. Silakan hubungi administrator.';
                } else if (xhr.status === 422) {
                    if (xhr.responseJSON && xhr.responseJSON.errors) {
                        message = 'Validasi gagal:\n';
                        Object.keys(xhr.responseJSON.errors).forEach(function(key) {
                            message += '- ' + xhr.responseJSON.errors[key].join(', ') + '\n';
                        });
                    } else if (xhr.responseJSON && xhr.responseJSON.message) {
                        message = xhr.responseJSON.message;
                    }
                } else if (xhr.responseJSON && xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                } else if (xhr.responseText) {
                    message = 'Error: ' + xhr.responseText.substring(0, 200);
                }

                Swal.fire({
                    title: 'Error',
                    text: message,
                    icon: 'error',
                    confirmButtonColor: '#DC3545'
                });
            }
        });
    }
</script>
@endpush