@extends('layout.base')

@section('action')
    <!-- Button to trigger modal -->
    <a href="#" class="btn btn-light-primary btn-sm rounded" data-bs-toggle="modal" data-bs-target="#modalAdd">
        <i class="fas fa-plus"></i> Add
    </a>
@endsection


@section('content')
    <style>
        .modal-backdrop.show {
            opacity: 0.5 !important;
            background-color: rgba(0, 0, 0, 0.5) !important;
        }

        .modal-content {
            background-color: #fff !important;
            z-index: 1055;
            /* pastikan di atas backdrop */
        }
    </style>
    <!-- Modal Import -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <div class="card card-flush">
        <!--begin::Card header-->
        <div class="card-header">
            <!--begin::Card title-->
            <div class="card-title flex-column">
                <h3 class="fw-bold mb-1">Farewell Banquet List</h3>
            </div>
        </div>
        <div class="card-body">
            <table class="table table-striped" id="datatableFarewell">
                <thead>
                    <tr>
                        <th></th> <!-- Kolom expand -->
                        <th>Created at</th>
                        <th>Quantity</th>
                        <th>Amount</th>
                        <th>Invoice</th>
                    </tr>
                </thead>
            </table>

        </div>
    </div>

    @include('farewell.elements.add')
@endsection

@section('scripts')
    <script>
        const CompactUrls = {
            _datatable: "{{ route('farewell.datatable') }}",
            _detail: '{{ route('farewell.details', ['id' => ':id']) }}'
        }
    </script>
    <script>
        $(function() {
            const table = $('#datatableFarewell').DataTable({
                scrollY: true,
                scrollX: true,
                scrollCollapse: true,
                serverSide: true,
                processing: true,
                ajax: CompactUrls._datatable,
                columns: [{
                        className: 'dt-control',
                        orderable: false,
                        data: null,
                        defaultContent: '',
                    },
                    {
                        data: 'created_at',
                        defaultContent: '-'
                    },
                    {
                        data: 'quantity',
                        defaultContent: '-'
                    },
                    {
                        data: 'amount',
                        defaultContent: '-'
                    },
                    {
                        data: 'invoice'
                    },
                ]
            });

            // Bind click event correctly inside the same $(function) scope
            $('#datatableFarewell tbody').on('click', 'td.dt-control', function() {
                let tr = $(this).closest('tr');
                let row = table.row(tr);

                if (row.child.isShown()) {
                    row.child.hide();
                    tr.removeClass('shown');
                } else {
                    let rowData = row.data();

                    $.get(CompactUrls._detail.replace(':id', rowData.id), function(details) {
                        let childHtml = `
                <table class="table table-sm table-bordered mb-0">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Farewell Code</th>
                        </tr>
                    </thead>
                    <tbody>
            `;

                        if (details.length > 0) {
                            details.forEach((item, index) => {
                                childHtml += `
                        <tr>
                            <td>${index + 1}</td>
                            <td class="d-flex justify-content-between align-items-center">
                                <span>${item.farewell_code}</span>
                                ${item.status === 'approved'
                                    ? `<a href="${CompactUrls._sticker.replace(':code', encodeURIComponent(item.farewell_code))}" target="_blank" class="btn btn-sm btn-primary ms-3">View Sticker</a>`
                                    : ''}
                            </td>
                        </tr>
                    `;
                            });
                        } else {
                            childHtml += `
                    <tr>
                        <td colspan="2" class="text-muted text-center">No details available</td>
                    </tr>
                `;
                        }

                        childHtml += `
                    </tbody>
                </table>
            `;

                        row.child(
                            `<div class="child-container-wrapper" style="margin-left: 80px;">${childHtml}</div>`
                            ).show();
                        tr.addClass('shown');
                    });
                }
            });

        });
    </script>
@endsection