@extends('layouts.master')

@section('css')
    <!-- DataTables Buttons CSS -->
    <link href="{{ URL::asset('plugins/datatables/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    <style>
        .table {
            width: 100%;
            margin-bottom: 1rem;
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 0 15px rgba(0,0,0,0.1);
        }
        .table th,
        .table td {
            padding: 1rem;
            vertical-align: middle;
            border-top: 1px solid #dee2e6;
        }
        .table thead th {
            vertical-align: bottom;
            border-bottom: 2px solid #dee2e6;
            background-color: #fff;
            color: #333;
            font-weight: 500;
        }
        .table tbody tr:hover {
            background-color: rgba(0,0,0,.035);
            transition: all 0.3s ease;
        }
        .search-box {
            position: relative;
            top: 43px; 
            width: 250px;
        }
        .search-box input {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        .search-box input:focus {
            border-color: #556ee6;
            box-shadow: 0 0 5px rgba(85,110,230,0.2);
            outline: none;
        }
        .search-box i {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #74788d;
        }
        .btn-group {
            gap: 0px;
        }
        .btn-sm {
            padding: 0.4rem 0.8rem;
            font-size: 0.875rem;
            border-radius: 4px;
            transition: all 0.3s ease;
        }
        .badge {
            padding: 0.5em 0.8em;
            font-size: 80%;
            font-weight: 500;
            border-radius: 30px;
        }
        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.05);
        }
        .card-body {
            padding: 1.5rem;
        }
        .badge-warning { background-color: #ffc107; color: #212529; }
        .badge-success { background-color: #28a745; color: #fff; }
        .badge-danger { background-color: #dc3545; color: #fff; }
        
        

        .search-box {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: flex-end; /* Pindahkan ke kanan */
    width: 100%; /* Agar tetap responsif */
    padding: 10px;
}

.search-box input {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 200px;
}

.search-box i {
    color: #333;
    font-size: 16px;
}

/* Style untuk modal detail */
.modal-content {
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

.modal-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 1rem;
}

.modal-body {
    padding: 1.5rem;
}

.modal-body .form-group {
    margin-bottom: 1rem;
}

.modal-body label {
    font-weight: 500;
    color: #495057;
}

.modal-body .form-control[readonly] {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
}

.modal-footer {
    border-top: 1px solid #dee2e6;
    padding: 1rem;
}

    </style>
@endsection

@section('breadcrumb')
    <div class="col-sm-6">
        <h4 class="page-title text-left">Pengajuan Cuti</h4>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0);">Home</a></li>
            <li class="breadcrumb-item"><a href="javascript:void(0);">Pengajuan Cuti</a></li>
        </ol>
    </div>
@endsection

@section('content')
@include('includes.flash')

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="table-responsive" >
                    <div class="search-box">
                        <input type="text" id="searchInput" placeholder="Cari data cuti...">
                        <i class="fas fa-search"></i>
                    </div>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Nama</th>
                                <th>Jenis Cuti</th>
                                <th>Keterangan</th>
                                <th>Tanggal Mulai</th>
                                <th>Tanggal Selesai</th>
                                <th>Status</th>
                                <th>File</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($leaves as $leave)
                            <tr>
                                <td>{{ $leave->user->name }}</td>
                                <td>{{ $leave->jenis_cuti }}</td>
                                <td>{{ Str::limit($leave->keterangan, 50) }}</td>
                                <td>{{ \Carbon\Carbon::parse($leave->tanggal_mulai)->format('d M Y') }}</td>
                                <td>{{ \Carbon\Carbon::parse($leave->tanggal_selesai)->format('d M Y') }}</td>
                                <td>
                                    <span class="badge badge-{{ $leave->status == 'Pending' ? 'warning' : ($leave->status == 'Disetujui' ? 'success' : 'danger') }}">
                                        {{ $leave->status }}
                                    </span>
                                </td>
                                <td>
                                    @if($leave->file_pdf)
                                        <a href="{{ Storage::url($leave->file_pdf) }}" target="_blank" class="btn btn-sm btn-info">
                                            <i class="fas fa-file-pdf"></i> Lihat
                                        </a>
                                    @else
                                        <span class="text-muted">Tidak ada file</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="btn-group">
                                        <button type="button" 
                                                class="btn btn-info btn-sm btn-detail" 
                                                data-id="{{ $leave->id }}">
                                            <i class="fas fa-eye"></i> Detail
                                        </button>
                                        @if($leave->status == 'Pending')
                                        <button type="button" class="btn btn-success btn-sm change-status" 
                                                data-id="{{ $leave->id }}" data-status="Disetujui">
                                            <i class="fas fa-check"></i> Setujui
                                        </button>
                                        <button type="button" class="btn btn-danger btn-sm change-status" 
                                                data-id="{{ $leave->id }}" data-status="Ditolak">
                                            <i class="fas fa-times"></i> Tolak
                                        </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="8" class="text-center">Tidak ada data pengajuan cuti</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Detail -->
<div class="modal fade" id="leaveDetailsModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Detail Pengajuan Cuti</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Content will be loaded dynamically -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
    <!-- Required datatable js & export plugins -->
    <script src="{{ URL::asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ URL::asset('plugins/datatables/dataTables.buttons.min.js') }}"></script>
    <script src="{{ URL::asset('plugins/datatables/buttons.bootstrap4.min.js') }}"></script>
    <script src="{{ URL::asset('plugins/datatables/jszip.min.js') }}"></script>
    <script src="{{ URL::asset('plugins/datatables/pdfmake.min.js') }}"></script>
    <script src="{{ URL::asset('plugins/datatables/vfs_fonts.js') }}"></script>
    <script src="{{ URL::asset('plugins/datatables/buttons.html5.min.js') }}"></script>
    <!-- Sweet-Alert  -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    
    <script>
        $(document).ready(function() {
            // Inisialisasi DataTable
            var table = $('.table').DataTable({
                dom: 'Bfrtip',
                buttons: [
                    {
                        extend: 'copy',
                        text: '<i class="fas fa-copy"></i> Copy',
                        className: 'dt-button buttons-copy',
                        exportOptions: {
                            columns: [0,1,2,3,4,5]
                        }
                    },
                    {
                        extend: 'excel',
                        text: '<i class="fas fa-file-excel"></i> Excel',
                        className: 'dt-button buttons-excel',
                        exportOptions: {
                            columns: [0,1,2,3,4,5]
                        },
                        title: 'Daftar Pengajuan Cuti'
                    },
                    {
                        extend: 'pdf',
                        text: '<i class="fas fa-file-pdf"></i> PDF',
                        className: 'dt-button buttons-pdf',
                        exportOptions: {
                            columns: [0,1,2,3,4,5]
                        },
                        title: 'Daftar Pengajuan Cuti',
                        orientation: 'landscape'
                    },
                    {
                        extend: 'colvis',
                        text: '<i class="fas fa-columns"></i> Columns',
                        className: 'dt-button buttons-colvis'
                    }
                ],
                paging: false,
                ordering: false,
                info: false,
                searching: false
            });

            // Pindahkan buttons ke div custom
            table.buttons().container().appendTo('.export-buttons');

            // Fungsi pencarian manual
            $("#searchInput").on("keyup", function() {
                var value = $(this).val().toLowerCase();
                $("table tbody tr").filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
                });
            });

            // Handler untuk perubahan status
            $(document).on('click', '.change-status', function() {
                var button = $(this);
                var leaveId = button.data("id");
                var newStatus = button.data("status");

                Swal.fire({
                    title: 'Konfirmasi',
                    text: `Apakah Anda yakin ingin ${newStatus == 'Disetujui' ? 'menyetujui' : 'menolak'} pengajuan cuti ini?`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: newStatus == 'Disetujui' ? '#28a745' : '#dc3545',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Ya',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: `/leave/${leaveId}/update-status`,
                            type: "POST",
                            data: {
                                _token: "{{ csrf_token() }}",
                                status: newStatus
                            },
                            success: function(response) {
                                if (response.success) {
                                    Swal.fire({
                                        title: 'Berhasil!',
                                        text: 'Status cuti telah diperbarui.',
                                        icon: 'success'
                                    }).then(() => {
                                        window.location.reload();
                                    });
                                }
                            }
                        });
                    }
                });
            });

            // Handler untuk tombol detail
            $(document).on('click', '.btn-detail', function(e) {
                e.preventDefault();
                var leaveId = $(this).data('id');
                
                // Ambil data detail menggunakan AJAX
                $.ajax({
                    url: `/leave/${leaveId}/details`,
                    type: 'GET',
                    success: function(response) {
                        if (response.success) {
                            const data = response.data;
                            // Isi konten modal dengan response
                            $('#leaveDetailsModal .modal-body').html(`
                                <div class="form-group">
                                    <label>Nama</label>
                                    <input type="text" class="form-control" value="${data.nama}" readonly>
                                </div>
                                <div class="form-group">
                                    <label>Keterangan</label>
                                    <input type="text" class="form-control" value="${data.keterangan}" readonly>
                                </div>
                                <div class="form-group">
                                    <label>Jenis Cuti</label>
                                    <input type="text" class="form-control" value="${data.jenis_cuti}" readonly>
                                </div>
                                <div class="form-group">
                                    <label>Status</label>
                                    <input type="text" class="form-control" value="${data.status}" readonly>
                                </div>
                                <div class="form-group">
                                    <label>Tanggal Mulai</label>
                                    <input type="text" class="form-control" value="${data.tanggal_mulai}" readonly>
                                </div>
                                <div class="form-group">
                                    <label>Tanggal Selesai</label>
                                    <input type="text" class="form-control" value="${data.tanggal_selesai}" readonly>
                                </div>
                            `);
                            
                            // Tampilkan modal
                            $('#leaveDetailsModal').modal('show');
                        } else {
                            Swal.fire({
                                title: 'Error!',
                                text: response.message || 'Gagal mengambil data detail.',
                                icon: 'error'
                            });
                        }
                    },
                    error: function(xhr) {
                        Swal.fire({
                            title: 'Error!',
                            text: 'Gagal mengambil data detail.',
                            icon: 'error'
                        });
                    }
                });
            });
        });
    </script>
@endsection