@extends('layouts.default')

@section('title', 'Laporan Pengajuan Pemeliharaan')

@push('css')
<link href="{{ asset('assets/plugins/datatables/css/dataTables.bootstrap4.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/datatables/css/responsive/responsive.bootstrap4.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/select2/dist/css/select2.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<ol class="breadcrumb pull-right">
    <li class="breadcrumb-item"><a href="javascript:;">Home</a></li>
    <li class="breadcrumb-item"><a href="javascript:;">Pemeliharaan</a></li>
    <li class="breadcrumb-item active">Laporan Pengajuan</li>
</ol>

<h1 class="page-header">Laporan Pengajuan Pemeliharaan <small>Filter berdasarkan periode</small></h1>

<div class="row">
    <div class="col-lg-12">
        <!-- Panel Filter -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <h4 class="panel-title"><i class="fa fa-filter"></i> Filter Periode Laporan</h4>
            </div>
            <div class="panel-body">
                <form id="filterForm">
                    <!-- Filter Bulan & Tahun -->
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <label class="control-label">Bulan</label>
                            <select class="form-control select2" id="filter_month" name="month">
                                <option value="">-- Semua Bulan --</option>
                                <option value="1">Januari</option>
                                <option value="2">Februari</option>
                                <option value="3">Maret</option>
                                <option value="4">April</option>
                                <option value="5">Mei</option>
                                <option value="6">Juni</option>
                                <option value="7">Juli</option>
                                <option value="8">Agustus</option>
                                <option value="9">September</option>
                                <option value="10">Oktober</option>
                                <option value="11">November</option>
                                <option value="12">Desember</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="control-label">Tahun</label>
                            <select class="form-control select2" id="filter_year" name="year">
                                <option value="">-- Semua Tahun --</option>
                                @for($year = date('Y'); $year >= 2020; $year--)
                                    <option value="{{ $year }}">{{ $year }}</option>
                                @endfor
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="control-label">Tanggal Mulai</label>
                            <input type="text" class="form-control datepicker" id="filter_start_date" name="start_date" placeholder="dd/mm/yyyy" readonly>
                        </div>
                        <div class="col-md-3">
                            <label class="control-label">Tanggal Akhir</label>
                            <input type="text" class="form-control datepicker" id="filter_end_date" name="end_date" placeholder="dd/mm/yyyy" readonly>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="btn-group mr-2">
                                <button type="button" id="btnFilter" class="btn btn-primary btn-sm">
                                    <i class="fa fa-search"></i> Tampilkan Laporan
                                </button>
                                <button type="button" id="btnReset" class="btn btn-white btn-sm">
                                    <i class="fa fa-redo"></i> Reset
                                </button>
                            </div>
                            <div class="btn-group">
                                <button type="button" id="btnExportPdf" class="btn btn-danger btn-sm" disabled>
                                    <i class="fa fa-file-pdf"></i> Export PDF
                                </button>
                                <button type="button" id="btnExportExcel" class="btn btn-success btn-sm" disabled>
                                    <i class="fa fa-file-excel"></i> Export Excel
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Panel Data Table -->
        <div class="panel panel-inverse">
            <div class="panel-heading">
                <div class="panel-heading-btn">
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-redo"></i></a>
                    <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                </div>
                <h4 class="panel-title"><i class="fa fa-table"></i> Data Laporan Pengajuan</h4>
            </div>
            <div class="panel-body">
                <div id="info-message" class="alert alert-info alert-dismissible fade show">
                    <button type="button" class="close" data-dismiss="alert">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h5><i class="fa fa-info-circle"></i> Informasi</h5>
                    Silakan pilih filter periode (bulan/tahun atau rentang tanggal) kemudian klik <strong>"Tampilkan Laporan"</strong> untuk menampilkan data.
                </div>
                <table id="data-table-report" class="table table-striped table-bordered table-td-valign-middle" style="display:none;">
                    <thead>
                        <tr>
                            <th width="3%" class="text-center">No</th>
                            <th width="12%">Nomor Pengajuan</th>
                            <th width="15%">Produk</th>
                            <th width="12%">Ruangan</th>
                            <th width="8%" class="text-center">Tanggal</th>
                            <th width="10%" class="text-center">Status</th>
                            <th width="12%">Penanggung Jawab</th>
                            <th width="10%">Dibuat Oleh</th>
                            <th width="10%">Diperbarui Oleh</th>
                            <th width="8%" class="text-center">Durasi</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/locale/id.min.js"></script>
<script src="{{ asset('assets/plugins/datatables/js/jquery.dataTables.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/dataTables.bootstrap4.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/responsive/dataTables.responsive.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables/js/responsive/responsive.bootstrap4.js') }}"></script>
<script src="{{ asset('assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('assets/plugins/select2/dist/js/select2.min.js') }}"></script>
<script src="{{ asset('assets/plugins/sweetalert/sweetalert.min.js') }}"></script>

<script>
$(document).ready(function() {
    // Initialize datepicker
    $('.datepicker').datepicker({
        format: 'yyyy-mm-dd',
        todayHighlight: true,
        autoclose: true
    });

    // Initialize select2
    $('.select2').select2({
        width: '100%'
    });

    let table = null;
    let currentFilters = {};

    // Filter button click
    $('#btnFilter').on('click', function() {
        const month = $('#filter_month').val();
        const year = $('#filter_year').val();
        const startDate = $('#filter_start_date').val();
        const endDate = $('#filter_end_date').val();

        // Validasi: minimal satu filter harus diisi
        if (!month && !year && !startDate && !endDate) {
            Swal.fire({
                icon: 'warning',
                title: 'Filter Kosong',
                text: 'Silakan pilih minimal satu filter (bulan/tahun atau rentang tanggal)',
                timer: 2000,
                showConfirmButton: false
            });
            return;
        }

        // Simpan filter saat ini
        currentFilters = {
            month: month,
            year: year,
            start_date: startDate,
            end_date: endDate
        };

        // Load data
        loadReportData();
    });

    // Reset button click
    $('#btnReset').on('click', function() {
        $('#filterForm')[0].reset();
        $('#filter_month, #filter_year').val('').trigger('change');
        currentFilters = {};
        
        // Hide table and show info message
        $('#data-table-report').hide();
        $('#info-message').show();
        
        // Disable export buttons
        $('#btnExportPdf, #btnExportExcel').prop('disabled', true);
        
        // Destroy table if exists
        if (table) {
            table.destroy();
            table = null;
        }
    });

    // Export PDF button
    $('#btnExportPdf').on('click', function() {
        exportReport('pdf');
    });

    // Export Excel button
    $('#btnExportExcel').on('click', function() {
        exportReport('excel');
    });

    function loadReportData() {
        // Show loading
        Swal.fire({
            title: 'Memuat Data...',
            text: 'Mohon tunggu sebentar',
            allowOutsideClick: false,
            showConfirmButton: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        $.ajax({
            url: '{{ route("pengajuan.laporan.data") }}',
            type: 'GET',
            data: currentFilters,
            dataType: 'json',
            success: function(response) {
                Swal.close();

                if (response.status === 200 && response.data) {
                    // Hide info message and show table
                    $('#info-message').hide();
                    $('#data-table-report').show();

                    // Destroy existing table if any
                    if (table) {
                        table.destroy();
                    }

                    // Initialize DataTable
                    table = $('#data-table-report').DataTable({
                        data: response.data,
                        columns: [
                            { 
                                data: null,
                                render: function(data, type, row, meta) {
                                    return meta.row + 1;
                                }
                            },
                            { data: 'nomor_pengajuan' },
                            { 
                                data: 'produk',
                                render: function(data) {
                                    return data ? data.nama_produk : '-';
                                }
                            },
                            { 
                                data: 'ruangan',
                                render: function(data) {
                                    return data ? data.nama_ruangan : '-';
                                }
                            },
                            { 
                                data: 'tanggal_pengajuan',
                                render: function(data) {
                                    return data ? moment(data).format('DD/MM/YYYY') : '-';
                                }
                            },
                            { 
                                data: 'status_pengajuan',
                                render: function(data) {
                                    return getStatusBadge(data);
                                }
                            },
                            { data: 'nama_user' },
                            { data: 'nama_created_by' },
                            { data: 'nama_updated_by' },
                            { data: 'durasi_formatted' }
                        ],
                        responsive: true,
                        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "Semua"]],
                        pageLength: 25,
                        language: {
                            emptyTable: "Tidak ada data yang sesuai dengan filter"
                        }
                    });

                    // Enable export buttons
                    $('#btnExportPdf, #btnExportExcel').prop('disabled', false);

                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        text: `Ditemukan ${response.data.length} data pengajuan`,
                        timer: 1500,
                        showConfirmButton: false
                    });
                } else {
                    Swal.fire({
                        icon: 'info',
                        title: 'Tidak Ada Data',
                        text: 'Tidak ada data yang sesuai dengan filter yang dipilih',
                        timer: 2000,
                        showConfirmButton: false
                    });
                }
            },
            error: function(xhr) {
                Swal.close();
                let msg = 'Gagal memuat data laporan';
                if (xhr.responseJSON && xhr.responseJSON.error) {
                    msg = xhr.responseJSON.error;
                }
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: msg,
                    timer: 2500,
                    showConfirmButton: false
                });
            }
        });
    }

    function exportReport(type) {
        const url = type === 'pdf' ? '{{ route("pengajuan.laporan.pdf") }}' : '{{ route("pengajuan.laporan.excel") }}';
        
        // Create form and submit
        const form = $('<form>', {
            method: 'POST',
            action: url
        });

        // Add CSRF token
        form.append($('<input>', {
            type: 'hidden',
            name: '_token',
            value: '{{ csrf_token() }}'
        }));

        // Add filter parameters
        $.each(currentFilters, function(key, value) {
            if (value) {
                form.append($('<input>', {
                    type: 'hidden',
                    name: key,
                    value: value
                }));
            }
        });

        // Append to body and submit
        $('body').append(form);
        form.submit();
        form.remove();
    }

    function getStatusBadge(status) {
        let badgeClass = 'badge-secondary';
        let icon = 'fa-question-circle';

        switch(status) {
            case 'Pengajuan Baru':
                badgeClass = 'badge-primary';
                icon = 'fa-paper-plane';
                break;
            case 'Verifikasi TURT':
                badgeClass = 'badge-warning';
                icon = 'fa-search';
                break;
            case 'Verifikasi Pejabat Pengadaan':
                badgeClass = 'badge-info';
                icon = 'fa-check';
                break;
            case 'Verifikasi PPK':
                badgeClass = 'badge-info';
                icon = 'fa-user-check';
                break;
            case 'Pengerjaan':
                badgeClass = 'badge-warning';
                icon = 'fa-cogs';
                break;
            case 'Selesai':
                badgeClass = 'badge-success';
                icon = 'fa-check-circle';
                break;
            case 'Ditolak':
                badgeClass = 'badge-danger';
                icon = 'fa-times-circle';
                break;
        }

        return `<span class="badge ${badgeClass}"><i class="fa ${icon}"></i> ${status || '-'}</span>`;
    }

    // Initialize moment locale
    if (typeof moment !== 'undefined') {
        moment.locale('id');
    }
});
</script>
@endpush