@extends('backend.template-admin')
@section('content')
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
    <script src="{{ asset('assets/js/tailwind.datatable.js') }}"></script>
    <link rel="stylesheet" href="{{ asset('assets/css/datatable.tailwind.css') }}">

    <section>
        <div class="p-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
            <div class="flex items-center justify-end mb-3">
                <button type="button" id="btnCreate"
                    class="text-white bg-orange-500 hover:bg-orange-600 focus:ring-4 focus:ring-orange-300 font-medium rounded-lg text-sm px-5 py-2.5">
                    + Create
                </button>
            </div>

            <table id="example" class="display w-full">
                <thead class="bg-orange-500">
                    <tr>
                        <th class="text-white">No</th>
                        <th class="text-white">Kempen</th>
                        <th class="text-white">Jumlah Sumbangan</th>
                        <th class="text-white">Status</th>
                        <th class="text-white">Tanggal</th>
                        <th class="text-white">Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </section>

    <!-- 🔹 Modal Create/Edit -->
    <div id="modalForm" class="hidden fixed inset-0 bg-gray-800 bg-opacity-50 flex items-center justify-center">
        <div class="bg-white rounded-lg shadow-lg w-full max-w-lg p-6">
            <h2 id="modalTitle" class="text-lg font-semibold mb-4">Create Rekod Anonymous</h2>
            <form id="formRekod">
                @csrf
                <input type="hidden" id="rekodId">

                <!-- Kempen -->
                <div class="mb-3">
                    <label class="block text-sm font-medium">Kempen</label>
                    <select id="kempen_id" name="kempen_id" required class="w-full mt-1 p-2 border rounded-lg">
                        <option value="">-- pilih kempen --</option>
                        @foreach (\App\Models\Kempen::all() as $k)
                            <option value="{{ $k->id }}">{{ $k->judul }}</option>
                        @endforeach
                    </select>
                </div>

                <!-- Jumlah -->
                <div class="mb-3">
                    <label class="block text-sm font-medium">Jumlah Sumbangan</label>
                    <input type="number" id="amount" name="amount" required class="w-full mt-1 p-2 border rounded-lg"
                        placeholder="RM 0.00">
                </div>

                <!-- Status -->
                <div class="mb-3">
                    <label class="block text-sm font-medium">Status</label>
                    <select id="status" name="status" required class="w-full mt-1 p-2 border rounded-lg">
                        <option value="successfully">Successfully</option>
                        <option value="progress">Progress</option>
                        <option value="failed">Failed</option>
                        <option value="cancel">Cancel</option>
                    </select>
                </div>

                <div class="flex justify-end gap-3 mt-5">
                    <button type="button" id="btnCloseModal"
                        class="px-4 py-2 rounded-lg bg-gray-300 hover:bg-gray-400">Cancel</button>
                    <button type="submit"
                        class="px-4 py-2 rounded-lg bg-orange-500 text-white hover:bg-orange-600">Save</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // Init DataTable
            let table = $('#example').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ url('/admin/rekod-transaksi/data/anonymous') }}",
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'kempen_title',
                        name: 'kempen.judul'
                    },
                    {
                        data: 'amount_format',
                        name: 'amount'
                    },
                    {
                        data: 'status_label',
                        name: 'status',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'created_at_format',
                        name: 'created_at_format'
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false
                    }
                ],
                drawCallback: function(settings) {
                    lucide.createIcons(); // render ulang icon lucide
                }
            });

            // 🔹 Open Modal (Create)
            $('#btnCreate').on('click', function() {
                $('#formRekod')[0].reset();
                $('#rekodId').val('');
                $('#modalTitle').text('Create Rekod Anonymous');
                $('#modalForm').removeClass('hidden');
            });

            // 🔹 Close Modal
            $('#btnCloseModal').on('click', function() {
                $('#modalForm').addClass('hidden');
            });

            // 🔹 Submit Form (Create / Update)
            $('#formRekod').on('submit', function(e) {
                e.preventDefault();

                let id = $('#rekodId').val();
                let url = id ?
                    "/admin/rekod-transaksi/update/anonymous/" + id :
                    "/admin/rekod-transaksi/store/anonymous";

                $.ajax({
                    url: url,
                    method: "POST", // Create & Update pakai POST
                    data: {
                        _token: $('input[name="_token"]').val(),
                        kempen_id: $('#kempen_id').val(),
                        amount: $('#amount').val(),
                        status: $('#status').val(),
                    },
                    success: function(res) {
                        if (res.success) {
                            alert(res.message);
                            $('#modalForm').addClass('hidden');
                            $('#formRekod')[0].reset();
                            table.ajax.reload();
                        } else {
                            alert('Failed: ' + res.message);
                        }
                    },
                    error: function(err) {
                        console.log(err);
                        alert('Error occurred, please try again.');
                    }
                });
            });

            // 🔹 Edit Rekod
            window.editAnonymus = function(id) {
                $.ajax({
                    url: "/admin/rekod-transaksi/data/anonymous/" + id,
                    method: "GET",
                    success: function(res) {
                        if (res.success) {
                            let data = res.data;

                            $('#rekodId').val(data.id);
                            $('#kempen_id').val(data.kempen_id);
                            $('#amount').val(data.amount);
                            $('#status').val(data.status);

                            $('#modalTitle').text('Edit Rekod Anonymous');
                            $('#modalForm').removeClass('hidden');
                        } else {
                            alert('Failed: ' + res.message);
                        }
                    },
                    error: function(err) {
                        console.log(err);
                        alert('Error fetching data');
                    }
                });
            }

            // 🔹 Delete Rekod
            window.deleteAnonymus = function(id) {
                if (!confirm("Are you sure you want to delete this record?")) return;

                $.ajax({
                    url: "/admin/rekod-transaksi/delete/anonymous/" + id,
                    method: "DELETE",
                    data: {
                        _token: $('input[name="_token"]').val()
                    },
                    success: function(res) {
                        if (res.success) {
                            alert(res.message);
                            table.ajax.reload();
                        } else {
                            alert('Failed: ' + res.message);
                        }
                    },
                    error: function(err) {
                        console.log(err);
                        alert('Error occurred, please try again.');
                    }
                });
            }
        });
    </script>
@endsection