@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>Country</th>
                        <th>Quantity</th>
                        <th>Amount</th>
                        <th>Invoice</th>
                    </tr>
                </thead>
            </table>

        </div>
    </div>
    <!-- Sticker Modal -->
    <div class="modal fade" id="stickerModal" tabindex="-1" aria-labelledby="stickerModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content rounded-4">
                <div class="modal-body" id="stickerModalContent">
                    <!-- Sticker content loaded here -->
                </div>
            </div>
        </div>
    </div>

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

@section('scripts')
    <script>
        const CompactUrls = {
            _datatable: "{{ route('farewell.datatable') }}",
            _detail: '{{ route('farewell.details', ['id' => ':id']) }}',
            _sticker: '{{ route('farewell.sticker', ['code' => ':code']) }}'
        }
    </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: 'country',
                        defaultContent: '-'
                    },
                    {
                        data: 'quantity',
                        defaultContent: '-'
                    },
                    {
                        data: 'amount',
                        defaultContent: '-'
                    },
                    {
                        data: 'invoice'
                    }
                ]
            });

            $('#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();

                    // AJAX to get child details
                    $.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'
                                    ? `<button class="btn btn-sm btn-primary ms-3 btn-sticker" data-code="${encodeURIComponent(item.farewell_code)}">View Sticker</button>`
                                    : ''}           
                            </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; margin-right:20px">${childHtml}</div>`
                        ).show();
                        tr.addClass('shown');
                    });
                }
            });
            $(document).on('click', '.btn-sticker', function() {
                const code = $(this).data('code');

                $.get(CompactUrls._sticker.replace(':code', code), function(html) {
                    $('#stickerModalContent').html(html);
                    $('#stickerModal').modal('show');
                });
            });
        });
        $('#farewellForm').on('submit', function(e) {
            e.preventDefault(); // cegah submit default

            const form = this;
            const formData = new FormData(form);

            $.ajax({
                type: 'POST',
                url: form.action,
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: 'Farewell created successfully.',
                        confirmButtonText: 'OK'
                    }).then(() => {
                        window.location.href = response.redirect;
                    });
                },
                error: function(xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops!',
                        text: 'Something went wrong.'
                    });
                }
            });
        });
    </script>
@endsection