@extends('dashboard.base')

@section('title', 'Manajemen Ijin')

@section('content')
<div class="content-wrapper">
    <div class="row">
        <div class="col-md-12 grid-margin">
            <div class="row">
                <div class="col-12 col-xl-8 mb-4 mb-xl-0">
                    <h3 class="font-weight-bold">Manajemen Ijin</h3>
                    <h6 class="font-weight-normal mb-0">Kelola permohonan ijin karyawan</h6>
                </div>
                <div class="col-12 col-xl-4">
                    <button type="button" class="btn btn-info btn-sm float-right" onclick="showStatistics()">
                        <i class="mdi mdi-chart-line"></i> Statistik
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="row" id="statisticsCards" style="display: none;">
        <div class="col-md-3 grid-margin stretch-card">
            <div class="card card-tale">
                <div class="card-body">
                    <p class="mb-4">Total Ijin</p>
                    <p class="fs-30 mb-2" id="totalPermissions">0</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 grid-margin stretch-card">
            <div class="card card-dark-blue">
                <div class="card-body">
                    <p class="mb-4">Menunggu Persetujuan</p>
                    <p class="fs-30 mb-2" id="pendingPermissions">0</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 grid-margin stretch-card">
            <div class="card card-light-blue">
                <div class="card-body">
                    <p class="mb-4">Disetujui</p>
                    <p class="fs-30 mb-2" id="approvedPermissions">0</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 grid-margin stretch-card">
            <div class="card card-light-danger">
                <div class="card-body">
                    <p class="mb-4">Ditolak</p>
                    <p class="fs-30 mb-2" id="rejectedPermissions">0</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Filter Status:</label>
                                <select class="form-control" id="statusFilter">
                                    <option value="">Semua Status</option>
                                    <option value="pending">Menunggu</option>
                                    <option value="accepted">Disetujui</option>
                                    <option value="rejected">Ditolak</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Filter Kategori:</label>
                                <select class="form-control" id="categoryFilter">
                                    <option value="">Semua Kategori</option>
                                    <option value="sakit">Sakit</option>
                                    <option value="cuti">Cuti</option>
                                    <option value="keperluan_pribadi">Keperluan Pribadi</option>
                                    <option value="dinas_luar">Dinas Luar</option>
                                    <option value="lainnya">Lainnya</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Tanggal Mulai:</label>
                                <input type="date" class="form-control" id="startDateFilter">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Tanggal Selesai:</label>
                                <input type="date" class="form-control" id="endDateFilter">
                            </div>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-striped" id="permissionsTable">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Nama Karyawan</th>
                                    <th>NIP</th>
                                    <th>Kategori</th>
                                    <th>Tanggal Mulai</th>
                                    <th>Tanggal Selesai</th>
                                    <th>Alasan</th>
                                    <th>Status</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="detailPermissionModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Detail Permohonan Ijin</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label><strong>Nama Karyawan:</strong></label>
                            <p id="detailEmployeeName">-</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label><strong>NIP:</strong></label>
                            <p id="detailEmployeeNip">-</p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label><strong>Kategori:</strong></label>
                            <p id="detailCategory">-</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label><strong>Status:</strong></label>
                            <p id="detailStatus">-</p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label><strong>Tanggal Mulai:</strong></label>
                            <p id="detailStartDate">-</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label><strong>Tanggal Selesai:</strong></label>
                            <p id="detailEndDate">-</p>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label><strong>Alasan:</strong></label>
                    <p id="detailReason">-</p>
                </div>
                <div class="form-group">
                    <label><strong>Bukti Foto:</strong></label>
                    <div id="detailPhotoWrapper" class="mt-2"></div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label><strong>Tanggal Pengajuan:</strong></label>
                            <p id="detailCreatedAt">-</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label><strong>Ditindaklanjuti Oleh:</strong></label>
                            <p id="detailApprover">-</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="approvePermissionModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Persetujuan Ijin</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="approvePermissionForm">
                <input type="hidden" name="permission_id" id="approvePermissionId">
                <div class="modal-body">
                    <div class="form-group">
                        <label>Nama Karyawan:</label>
                        <p id="approveEmployeeName" class="font-weight-bold">-</p>
                    </div>
                    <div class="form-group">
                        <label>Kategori Ijin:</label>
                        <p id="approveCategory" class="font-weight-bold">-</p>
                    </div>
                    <div class="form-group">
                        <label>Periode Ijin:</label>
                        <p id="approvePeriod" class="font-weight-bold">-</p>
                    </div>
                    <div class="form-group">
                        <label>Keputusan <span class="text-danger">*</span></label>
                        <select class="form-control" name="status" required>
                            <option value="">Pilih Keputusan</option>
                            <option value="accepted">Setujui</option>
                            <option value="rejected">Tolak</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan Keputusan</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('script')
<script>
let permissionsTable;

$(document).ready(function() {
    initDataTable();
    loadStatistics();

    $('#statusFilter, #categoryFilter').change(function() {
        permissionsTable.ajax.reload();
    });

    $('#startDateFilter, #endDateFilter').change(function() {
        permissionsTable.ajax.reload();
    });
});

function initDataTable() {
    permissionsTable = $('#permissionsTable').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        ajax: {
            url: '/api/admin/permissions',
            headers: {
                'Authorization': getAuthorizationHeader(),
                'Accept': 'application/json'
            },
            data: function(d) {
                d.status = $('#statusFilter').val();
                d.category = $('#categoryFilter').val();
                d.start_date = $('#startDateFilter').val();
                d.end_date = $('#endDateFilter').val();
            }
        },
        columns: [
            {
                data: null,
                orderable: false,
                searchable: false,
                render: function(data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            {data: 'user.name', name: 'user.name'},
            {data: 'user.profile.nip', name: 'user.profile.nip'},
            {
                data: 'category',
                name: 'category',
                render: function(data) {
                    const categories = {
                        'sakit': 'Sakit',
                        'cuti': 'Cuti',
                        'keperluan_pribadi': 'Keperluan Pribadi',
                        'dinas_luar': 'Dinas Luar',
                        'lainnya': 'Lainnya'
                    };
                    return categories[data] || data;
                }
            },
            {
                data: 'start_date',
                name: 'start_date',
                render: function(data) {
                    return new Date(data).toLocaleDateString('id-ID');
                }
            },
            {
                data: 'end_date',
                name: 'end_date',
                render: function(data) {
                    return new Date(data).toLocaleDateString('id-ID');
                }
            },
            {
                data: 'reason',
                name: 'reason',
                render: function(data) {
                    return data.length > 50 ? data.substring(0, 50) + '...' : data;
                }
            },
            {
                data: 'status',
                name: 'status',
                render: function(data) {
                    if (data === 'pending') {
                        return '<span class="badge badge-warning">Menunggu</span>';
                    } else if (data === 'accepted') {
                        return '<span class="badge badge-success">Disetujui</span>';
                    } else if (data === 'rejected') {
                        return '<span class="badge badge-danger">Ditolak</span>';
                    }
                    return '<span class="badge badge-secondary">' + data + '</span>';
                }
            },
            {
                data: 'id',
                name: 'id',
                orderable: false,
                searchable: false,
                render: function(data, type, row) {
                    let buttons = `
                        <button class="btn btn-sm btn-info" onclick="viewPermission(${data})" title="Lihat Detail">
                            <i class="ti ti-eye"></i>
                        </button>
                    `;

                    if (row.status === 'pending') {
                        buttons += `
                            <button class="btn btn-sm btn-success" onclick="approvePermission(${data})" title="Persetujuan">
                                <i class="ti ti-check"></i>
                            </button>
                        `;
                    }

                    return buttons;
                }
            }
        ]
    });
}

function loadStatistics() {
    $.ajax({
        url: '/api/admin/permissions/data/statistics',
        type: 'GET',
        headers: {
            'Authorization': getAuthorizationHeader(),
            'Accept': 'application/json'
        },
        success: function(response) {
            const stats = response.data;
            $('#totalPermissions').text(stats.total);
            $('#pendingPermissions').text(stats.pending);
            $('#approvedPermissions').text(stats.approved);
            $('#rejectedPermissions').text(stats.rejected);
        },
        error: function(xhr) {
            console.error('Failed to load statistics');
        }
    });
}

function showStatistics() {
    $('#statisticsCards').toggle();
    loadStatistics();
}

function viewPermission(id) {
    $.ajax({
        url: `/api/admin/permissions/${id}`,
        type: 'GET',
        headers: {
            'Authorization': getAuthorizationHeader(),
            'Accept': 'application/json'
        },
        success: function(response) {
            const permission = response.data;

            $('#detailEmployeeName').text(permission.user.name);
            $('#detailEmployeeNip').text(permission.user.profile.nip);

            const categories = {
                'sakit': 'Sakit',
                'cuti': 'Cuti',
                'keperluan_pribadi': 'Keperluan Pribadi',
                'dinas_luar': 'Dinas Luar',
                'lainnya': 'Lainnya'
            };
            $('#detailCategory').text(categories[permission.category] || permission.category);

            let statusBadge = '';
            if (permission.status === 'pending') {
                statusBadge = '<span class="badge badge-warning">Menunggu</span>';
            } else if (permission.status === 'accepted') {
                statusBadge = '<span class="badge badge-success">Disetujui</span>';
            } else if (permission.status === 'rejected') {
                statusBadge = '<span class="badge badge-danger">Ditolak</span>';
            }
            $('#detailStatus').html(statusBadge);

            $('#detailStartDate').text(new Date(permission.start_date).toLocaleDateString('id-ID'));
            $('#detailEndDate').text(new Date(permission.end_date).toLocaleDateString('id-ID'));
            $('#detailReason').text(permission.reason);
            $('#detailCreatedAt').text(new Date(permission.created_at).toLocaleDateString('id-ID'));
            $('#detailApprover').text(permission.approver ? permission.approver.name : '-');
            if (permission.proof_photo) {
                const photoUrl = `/storage/${permission.proof_photo}`;
                $('#detailPhotoWrapper').html(`
                    <a href="${photoUrl}" target="_blank">
                        <img src="${photoUrl}" alt="Bukti Foto" style="max-width: 100%; max-height: 300px; border-radius: 8px; border: 1px solid #ccc;">
                    </a>
                `);
            } else {
                $('#detailPhotoWrapper').html(`<span class="text-muted">Tidak ada foto</span>`);
            }
            $('#detailPermissionModal').modal('show');
        },
        error: function(xhr) {
            Swal.fire({
                icon: 'error',
                title: 'Gagal!',
                text: 'Gagal mengambil detail ijin'
            });
        }
    });
}

function approvePermission(id) {
    $.ajax({
        url: `/api/admin/permissions/${id}`,
        type: 'GET',
        headers: {
            'Authorization': getAuthorizationHeader(),
            'Accept': 'application/json'
        },
        success: function(response) {
            const permission = response.data;

            $('#approvePermissionId').val(permission.id);
            $('#approveEmployeeName').text(permission.user.name);

            const categories = {
                'sakit': 'Sakit',
                'cuti': 'Cuti',
                'keperluan_pribadi': 'Keperluan Pribadi',
                'dinas_luar': 'Dinas Luar',
                'lainnya': 'Lainnya'
            };
            $('#approveCategory').text(categories[permission.category] || permission.category);

            const startDate = new Date(permission.start_date).toLocaleDateString('id-ID');
            const endDate = new Date(permission.end_date).toLocaleDateString('id-ID');
            $('#approvePeriod').text(`${startDate} - ${endDate}`);

            $('#approvePermissionModal').modal('show');
        },
        error: function(xhr) {
            Swal.fire({
                icon: 'error',
                title: 'Gagal!',
                text: 'Gagal mengambil data ijin'
            });
        }
    });
}

$('#approvePermissionForm').submit(function(e) {
    e.preventDefault();

    const permissionId = $('#approvePermissionId').val();
    const status = $(this).find('select[name="status"]').val();

    $.ajax({
        url: `/api/admin/permissions/${permissionId}/approve`,
        type: 'PUT',
        data: {
            status: status
        },
        headers: {
            'Authorization': getAuthorizationHeader(),
            'Accept': 'application/json'
        },
        success: function(response) {
            $('#approvePermissionModal').modal('hide');
            $('#approvePermissionForm')[0].reset();
            permissionsTable.ajax.reload();
            loadStatistics();

            Swal.fire({
                icon: 'success',
                title: 'Berhasil!',
                text: response.message
            });
        },
        error: function(xhr) {
            Swal.fire({
                icon: 'error',
                title: 'Gagal!',
                text: xhr.responseJSON.message
            });
        }
    });
});
</script>
@endpush