@extends('layouts.default')

@section('title', 'Laporan Master Produk')

@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/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:;">Master Data</a></li>
    <li class="breadcrumb-item active">Laporan Produk</li>
</ol>

<h1 class="page-header">Laporan Master Produk <small>Filter berdasarkan kategori</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 Laporan</h4>
            </div>
            <div class="panel-body">
                <form id="filterForm">
                    <div class="row mb-3">
                        <!-- Filter Kategori -->
                        <div class="col-md-6">
                            <label class="control-label">Kategori Produk</label>
                            <select class="form-control select2" id="filter_tipe" name="tipe">
                                <option value="" selected>-- Semua Kategori --</option>
                                @foreach($kategori as $kat)
                                    <option value="{{ $kat->id_tipe_produk }}">{{ $kat->nama_tipe }}</option>
                                @endforeach
                            </select>
                        </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 Master Produk</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 kategori 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="5%" class="text-center">No</th>
                            <th width="10%">Gambar</th>
                            <th width="20%">Nama Produk</th>
                            <th width="15%">Merek</th>
                            <th width="15%">Kategori</th>
                            <th width="10%" class="text-center">Tahun</th>
                            <th width="10%">Dibuat Oleh</th>
                            <th width="15%" class="text-center">Tanggal Buat</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/select2/dist/js/select2.min.js') }}"></script>
<script src="{{ asset('assets/plugins/sweetalert/sweetalert.min.js') }}"></script>

<script>
$(document).ready(function() {
    $('.select2').select2({ width: '100%' });

    let table = null;
    let currentFilters = {};
    const IMG_BASE = "{{ asset('assets/images/gambar_produk') }}";

    // Filter button click
    $('#btnFilter').on('click', function() {
        const tipe = $('#filter_tipe').val();
        currentFilters = { tipe: tipe };
        loadReportData();
    });

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

    function loadReportData() {
        $.ajax({
            url: "{{ route('produk.report-data') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                ...currentFilters
            },
            success: function(response) {
                if (response.status === 200) {
                    renderTable(response.data);
                    const hasData = Array.isArray(response.data) && response.data.length > 0;
                    $('#btnExportPdf, #btnExportExcel').prop('disabled', !hasData);
                } else {
                    Swal.fire('Error', response.error || 'Gagal memuat data', 'error');
                }
            },
            error: function(xhr) {
                Swal.fire('Error', 'Terjadi kesalahan server', 'error');
            }
        });
    }

    function renderTable(data) {
        $('#info-message').hide();
        $('#data-table-report').show();

        if (table) {
            table.clear().rows.add(data).draw();
        } else {
            table = $('#data-table-report').DataTable({
                data: data,
                responsive: true,
                columns: [
                    { 
                        data: null, 
                        className: 'text-center',
                        render: function (data, type, row, meta) {
                            return meta.row + 1;
                        }
                    },
                    { 
                        data: 'gambar_produk',
                        className: 'text-center',
                        render: function(data) {
                            if (!data) return '<img src="{{ asset("assets/images/default.png") }}" height="40" />';
                            return `<img src="${IMG_BASE}/${data}" height="40" style="object-fit:cover" />`;
                        }
                    },
                    { data: 'nama_produk', defaultContent: '-' },
                    { data: 'merek', defaultContent: '-' },
                    { data: 'tipe_produk.nama_tipe', defaultContent: '-' },
                    { data: 'tahun_produk', className: 'text-center', defaultContent: '-' },
                    { data: 'nama_created_by', defaultContent: '-' },
                    { 
                        data: 'created_at',
                        className: 'text-center',
                        render: function(data) {
                            return data ? moment(data).format('DD/MM/YYYY') : '-';
                        }
                    }
                ],
                language: {
                    url: "//cdn.datatables.net/plug-ins/1.10.21/i18n/Indonesian.json"
                }
            });
        }
    }

    // Export handlers
    function submitExport(actionUrl) {
        const form = $('<form>', {
            method: 'POST',
            action: actionUrl,
            target: '_blank'
        });
        form.append($('<input>', { type: 'hidden', name: '_token', value: "{{ csrf_token() }}" }));
        if (currentFilters.tipe) form.append($('<input>', { type: 'hidden', name: 'tipe', value: currentFilters.tipe }));
        $('body').append(form);
        form.submit();
        form.remove();
    }

    $('#btnExportExcel').on('click', function() {
        submitExport("{{ route('produk.laporan.excel') }}");
    });

    $('#btnExportPdf').on('click', function() {
        submitExport("{{ route('produk.laporan.pdf') }}");
    });
});
</script>
@endpush