@extends('layouts.app')

@section('content')

<link rel="stylesheet" href="{{asset('css/form-backend.css')}}">

<div class="submission">
    <div class="container-fluid">
        <section class="title">
            <div class="row">
                <div class="col-12">
                    <p class="title">Submission List</p>
                    <hr>
                </div>
            </div>
        </section>
        <div class="row">
            <div class="col-12">
                <div class="table-responsive">
                    <table border="1" id="submissionTable" class="table">
                        <thead>
                            <tr class="datepicker">
                                <td colspan="2">
                                    <p id="date_filter">
                                        <span id="date-label-from" class="date-label">Date From: </span>
                                        <input class="date_range_filter date" type="text" id="datepicker_from" />
                                    </p>
                                </td>
                                <td colspan="2">
                                    <p id="date_filter">
                                        <span id="date-label-to" class="date-label">Date To:</span>
                                        <input class="date_range_filter date" type="text" id="datepicker_to" />
                                    </p>
                                </td>
                            </tr>
                            <tr class="non-actual-header">
                                <th></th>
                                <th class="d-none">Id</th>
                                <th class="d-none">Actual Submission Date</th>
                                <th>Submission Date</th>
                                <th>City</th>
                                <th>Dealer Name</th>
                                <th>Promo</th>
                                <th>Name</th>
                                <th>Address</th>
                                <th>Phone Number</th>
                                <th>Email</th>
                                <th>Product</th>
                                <th>Bundle</th>
                                <th>Gift</th>
                                <th>Serial Number</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                            <tr class="actual-header">
                                <th style="width: 10px;text-align: center;">
                                    <input type="checkbox" id="checkAll">
                                </th>
                                <th class="d-none">Id</th>
                                <th class="d-none">Actual Submission Date</th>
                                <th>Submission Date</th>
                                <th>City</th>
                                <th>Dealer Name</th>
                                <th>Promo</th>
                                <th>Name</th>
                                <th>Address</th>
                                <th>Phone Number</th>
                                <th>Email</th>
                                <th>Product</th>
                                <th>Bundle</th>
                                <th>Gift</th>
                                <th>Serial Number</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        @if(count($subs) > 0)
                            @foreach($subs as $sub)
                                <tr>
                                    <td align="center" style="width: 10px;">
                                        <input type="checkbox" class="sub_chk" data-id="{{ $sub->id }}">
                                    </td>
                                    <td class="d-none">{{$sub->id}}</td>
                                    <td class="d-none">{{$sub->created_at}}</td>
                                    <td><span class="d-none">{{$sub->created_at}}</span> {{date_format(date_create($sub->created_at), 'd M Y')}}</td>
                                    <td>{{$sub->nearest_city}}</td>
                                    <td>{{$sub->dealer_name}}</td>
                                    <td>{{$sub->gift->promo->name}}</td>
                                    <td>{{$sub->name}}</td>
                                    <td>{{$sub->address}}</td>
                                    <td>{{$sub->phone}}</td>
                                    <td>{{$sub->email}}</td>
                                    <td>{{$sub->gift->product_type->name}}</td>
                                    <td>{{$sub->gift->product}}</td>
                                    <td>{{$sub->gift->gift}}</td>
                                    <td>{{$sub->no_warranty}}</td>
                                    <td>{{$sub->getStatusName()}}</td>
                                    <td>
                                        <a href="/backend/submission/{{$sub->id}}" class="btn btn-action">View</a>
                                        <!-- <a class="btn btn-action delete" data-toggle="modal" data-target="#test">Delete</a> -->
                                        <a href="/backend/submission/delete/{{$sub->id}}" class="btn btn-action delete" onclick="return confirm('Are you sure you want to delete this item?');">Delete</a>
                                    </td>
                                </tr>
                            @endforeach
                        @else
                            <tr><td colspan="10" align="center">No Data Found</td></tr>
                        @endif
                        </tbody>
                    </table>
                </div>
                <div class="mt-3">
                    {{-- <button type="button" class="btn btn-primary" id="btnBulkEmail" data-target="#modalTemplateEmail" data-toggle="modal"> --}}
                    <button type="button" class="btn btn-primary" id="btnBulkEmail">
                        <i class="fas fa-envelope"></i> Kirim Email ke Terpilih (<span id="countSelected">0</span>)
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalTemplateEmail" tabindex="-1" role="dialog" style="z-index: 1050;">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Bulk Email Action</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>Pilih Template</label>
                    <select id="selectTemplate" class="form-control">
                        <option value="">-- Pilih Template --</option>
                        @foreach($templates as $template)
                        <option value="{{$template->id}}">{{$template->name}}</option>
                        @endforeach
                    </select>
                </div>
                <hr>
                {{-- <button type="button" class="btn btn-outline-primary btn-block" id="btnOpenEditor" data-target="#modalEditorTemplate" data-toggle="modal">
                    <i class="fas fa-plus"></i> Buat / Edit Template Baru
                </button> --}}
                <div class="row">
                    <div class="col-4">
                        <button type="button" class="btn btn-outline-primary btn-block" id="btnCreateTemplate">
                            <i class="fas fa-plus"></i> Create
                        </button>
                    </div>
                    <div class="col-4">
                        <button type="button" class="btn btn-outline-secondary btn-block" id="btnEditTemplate">
                            <i class="fas fa-edit"></i> Edit
                        </button>
                    </div>
                    <div class="col-4">
                        <button type="button" class="btn btn-outline-danger btn-block" id="btnDeleteTemplate">
                            <i class="fas fa-trash"></i> Delete
                        </button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">

                        <div class="card mt-4">
                            <div class="card-header bg-light"><strong>History Bulk Email</strong></div>
                            <div class="card-body">
                                <table class="table table-sm table-hover">
                                    <thead>
                                        <tr>
                                            <th>Date</th>
                                            <th>Template</th>
                                            <th>Total</th>
                                            <th class="text-center">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="historyBody">
                                        @foreach($historyBulkEmails as $historyBulkEmail)
                                        <tr>
                                            <td>{{ $historyBulkEmail->created_at->format('d M Y H:i') }}</td>
                                            <td>{{ $historyBulkEmail->emailtemplate->name }}</td>
                                            <td>{{ count($historyBulkEmail->historybulkemaildetail) }} Emails</td>
                                            <td class="text-center">
                                                <button class="btn btn-info btn-sm btn-view-detail" data-id="{{ $historyBulkEmail->id }}">
                                                    <i class="fas fa-eye"></i> View
                                                </button>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                                {{ $historyBulkEmails->links() }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" id="confirmSendBulk">Kirim Ke Terpilih</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalEditorTemplate" tabindex="-1" role="dialog" style="z-index: 1060;">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-light">
                <h5 class="modal-title">Editor Template</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="formSaveTemplate">
                    <input type="hidden" name="template_id" id="template_id_hidden">
                    <div class="form-group">
                        <label>Nama Template</label>
                        <input type="text" name="name" class="form-control" id="name" required>
                    </div>
                    <div class="form-group">
                        <label>Subject Email</label>
                        <input type="text" name="subject" class="form-control" id="subject" required>
                    </div>
                    <div class="form-group">
                        <label>Isi Email</label>
                        <small class="text-muted d-block mb-2">Gunakan variabel: {name}, {gift}, {promo}, {phone}, {email}</small>
                        <textarea id="summernote" name="content" class="content"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary" id="btnSaveToDB">Simpan ke Database</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalDetailHistory" tabindex="-1" role="dialog" style="z-index: 1070;">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Log Pengiriman Detail</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-striped table-sm w-100" id="tableDetailHistory">
                        <thead>
                            <tr>
                                <th>Email</th>
                                <th>Status</th>
                                <th>Sent At</th>
                                <th>Error</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Utama -->
<div class="modal fade" id="modalImportHistory" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header bg-dark text-white">
                <h5 class="modal-title">Bulk Import & Notification History</h5>
                <button type="button" class="close text-white" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <div class="modal-body">

                <!-- Section 1: Input File & Progress Info -->
                <div class="card border-primary mb-4">
                    <div class="card-body">
                        <h6 class="card-title text-primary"><i class="fas fa-upload"></i> New Bulk Import</h6>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-12">
                                        <input type="file" id="inputExcel" class="form-control" accept=".xlsx, .xls">
                                        <small class="text-muted">Format: .xlsx (Sesuai Template Export)</small>
                                    </div>
                                     <div class="col-md-12 mt-2">
                                        <select name="inputType" id="inputType" class="form-control">
                                            <option value="new">New</option>
                                            <option value="update">Update</option>
                                        </select>
                                    </div>
                                    <div class="col-md-12 mt-2">
                                        <button type="button" id="btnStartImport" class="btn btn-primary btn-block">
                                            <i class="fas fa-play"></i> Start Process (Queue)
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">

                            </div>
                        </div>
                    </div>
                </div>

                <!-- Section 2: List History (Tampilan Awal) -->
                <div id="wrapperHistoryList">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h6><i class="fas fa-history"></i> Recent Import Logs</h6>
                        <button class="btn btn-sm btn-outline-secondary" onclick="reloadHistoryTable()">
                            <i class="fas fa-sync"></i> Refresh
                        </button>
                    </div>
                    <table id="tableHistory" class="table table-bordered table-hover w-100">
                        <thead class="bg-light">
                            <tr>
                                <th>Date</th>
                                <th>Type</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>

                <!-- Section 3: Detail History (Hidden by Default) -->
                <div id="wrapperHistoryDetail" style="display: none;">
                    <button class="btn btn-link btn-sm p-0 mb-2" onclick="showHistoryList()">
                        <i class="fas fa-arrow-left"></i> Back to History List
                    </button>
                    {{-- <h6 id="titleDetailFilename" class="text-info font-weight-bold">Detail: Filename.xlsx</h6> --}}
                    <table id="tableHistoryDetail" class="table table-sm table-striped w-100">
                        <thead>
                            <tr>
                                <th>Submission id</th>
                                <th>Email</th>
                                <th>Status</th>
                                <th>Log / Reason</th>
                            </tr>
                        </thead>
                    </table>
                </div>

                <!-- Section 3: Detail temp (Hidden by Default) -->
                <div id="wrapperTempsubList" style="display: none;">
                    <button class="btn btn-link btn-sm p-0 mb-2" onclick="showHistoryList()">
                        <i class="fas fa-arrow-left"></i> Back to History List
                    </button>
                    {{-- <h6 id="titleDetailFilename" class="text-info font-weight-bold">Detail: Filename.xlsx</h6> --}}
                    <table id="tablePreviewNew" class="table table-sm table-striped w-100">
                        <thead>
                            <tr>
                                <th>SN</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                    </table>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" id="btnFinalImport" class="btn btn-success">
                        <i class="fas fa-check-double"></i> Konfirmasi & Import Semua
                    </button>
                </div>

            </div>
        </div>
    </div>
</div>

<input type="file" id="inputExcel" class="d-none" accept=".xlsx, .xls, .csv">

<!-- Modal Edit Row Staging -->
<div class="modal fade" id="modalEditTemp" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Staging Data</h5>
                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
            </div>
            <form id="formEditTemp">
                <div class="modal-body">
                    <input type="hidden" id="edit-id">
                    <input type="hidden" id="history-id">
                    {{-- <div class="form-group">
                        <label>Name</label>
                        <input name="name" type="text" id="name-temp" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Email</label>
                        <input name="email" type="text" id="email" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Phone</label>
                        <input name="phone" type="text" id="phone" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Address</label>
                        <textarea name="address" id="address" cols="30" rows="10" class="form-control"></textarea>
                    </div>
                    <div class="form-group">
                        <label>No Ktp</label>
                        <input name="no_ktp" type="text" id="no_ktp" class="form-control" required>
                    </div> --}}
                    <div class="form-group">
                        <label>No Warranty</label>
                        <input name="no_warranty" type="text" id="no_warranty" class="form-control" required>
                    </div>
                    {{-- <div class="form-group">
                        <label>City</label>
                        <input name="nearest_city" type="text" id="nearest_city" class="form-control" required>
                    </div>
                     <div class="form-group">
                        <label>Dealer Name</label>
                        <input name="dealer_name" type="text" id="dealer_name" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label>Gift Id</label>
                        <input name="gift_id" type="text" id="gift_id" class="form-control" required>
                    </div> --}}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('after-style')
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
@endpush

@section('javascript-datatables')

    <!-- datatables -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.1.1/jszip-2.5.0/dt-1.10.18/af-2.3.3/b-1.5.6/b-html5-1.5.6/fh-3.1.4/r-2.2.2/datatables.min.js"></script>

    <script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script>
    <!-- <script src="https://code.jquery.com/jquery-3.3.1.js"></script> -->
    <!-- <link href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables_themeroller.css" rel="stylesheet" data-semver="1.9.4" data-require="datatables@*" /> -->
    <!-- <link href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables.css" rel="stylesheet" data-semver="1.9.4" data-require="datatables@*" /> -->
    <!-- <link href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/demo_table_jui.css" rel="stylesheet" data-semver="1.9.4" data-require="datatables@*" /> -->
    <!-- <link href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/demo_page.css" rel="stylesheet" data-semver="1.9.4" data-require="datatables@*" /> -->
    <!-- <link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" /> -->
    <!-- <script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script> -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.js" data-semver="1.9.4" data-require="datatables@*"></script>
    <!--momentjs-->
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
    <script src="//cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js"></script>
    <script type="text/javascript">


        $(document).ready(function() {
                $.fn.dataTable.moment( 'dd, m, YYYY' );

                // Setup - add a text input to each footer cell
                $('#submissionTable thead tr.actual-header').clone(true);
                $('#submissionTable thead tr.actual-header th:gt(0)').each( function (i) {
                    var title = $(this).text();
                    $(this).html( '<input type="text" placeholder="Search '+title+'" />' );

                    $( 'input', this ).on( 'keyup change', function () {
                        if ( oTable.column(i+1).search() !== this.value ) {
                            oTable
                                .column(i+1)
                                .search( this.value )
                                .draw();
                        }
                    } );
                } );

                        var oTable = $('#submissionTable').DataTable({
                            "oLanguage": {
                            "sSearch": "Filter Data"
                            },
                            "iDisplayLength": -1,
                            "sPaginationType": "full_numbers",
                            dom: 'Bfrtip',
                            orderCellsTop: true,
                            fixedHeader: true,
                            buttons: [
                            {
                                extend: 'copyHtml5',
                                exportOptions: {
                                    columns: [ 2,3,4,5,6,7,8,9,10,11,12,13,14,15 ]
                                }
                            },
                            {
                                extend: 'excelHtml5',
                                autoFilter: true,
                                exportOptions: {
                                    columns: [ 2,3,4,5,6,7,8,9,10,11,12,13,14,15 ]
                                }
                            },
                            {
                                extend: 'pdfHtml5',
                                orientation: 'landscape',
                                pageSize: 'LEGAL',
                                exportOptions: {
                                    columns: [ 2,3,4,5,6,7,8,9,10,11,12,13,14,15 ]
                                }
                            },
                            {
                                extend: 'excelHtml5',
                                text : 'Template',
                                autoFilter: true,
                                exportOptions: {
                                    columns: [ 1,2,3,4,5,6,7,8,9,10,11,12,13,14 ],
                                    rows: function (idx, data, node) {
                                        // Hanya export jika kolom index ke-5 bernilai '1' atau 'Verified'
                                        return data[15] === '1' || data[15] === 'Verified' ? true : false;
                                    }
                                },
                                customizeData: function (data) {
                                    // 1. Tambahkan Header Baru
                                    data.header.push("giftname[0]");
                                    data.header.push("Resi[0]");
                                    data.header.push("Expedition[0]");
                                    data.header.push("giftname[1]");
                                    data.header.push("Resi[1]");
                                    data.header.push("Expedition[1]");
                                    data.header.push("is_full");
                                    data.header.push("is_full_qty");
                                    data.header.push("id_history");

                                    // 2. Tambahkan Sel Kosong di setiap baris body
                                    for (var i = 0; i < data.body.length; i++) {
                                        data.body[i].push(""); // Kolom giftname[0]
                                        data.body[i].push(""); // Kolom Resi[0]
                                        data.body[i].push(""); // Kolom Expedition[0]
                                        data.body[i].push(""); // Kolom giftname[1]
                                        data.body[i].push(""); // Kolom Resi[1]
                                        data.body[i].push(""); // Kolom Expedition[1]
                                        data.body[i].push(1); // Kolom is_full
                                        data.body[i].push(1); // Kolom is_full_qty
                                        data.body[i].push(""); // Kolom Expedition[1]
                                    }
                                }
                            },
                            {
                                text: '<i class="fas fa-tasks"></i> Manage Import & History',
                                className: 'btn-dark',
                                action: function (e, dt, node, config) {
                                    $('#modalImportHistory').modal('show');
                                    reloadHistoryTable(); // Muat data history saat modal dibuka
                                }
                            }
                            ],
                            "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                            "pageLength": 25,
                            'order': [[0, 'desc']],
                            "columnDefs": [
                                { "width": "10%", "targets": 0 }
                            ],
                        });
                $(function() {



            $("#datepicker_from").datepicker({
                // dateFormat: 'dd-mm-yyyy',
                showOn: "button",
                buttonImage: "{{asset('img/calendar.png')}}",
                buttonImageOnly: false,
                "onSelect": function(date) {
                minDateFilter = new Date(date).getTime();
                oTable.draw();
                }
            }).keyup(function() {
                minDateFilter = new Date(this.value).getTime();
                oTable.draw();
            });

            $("#datepicker_to").datepicker({
                // dateFormat: 'dd-mm-yyyy',
                showOn: "button",
                buttonImage: "{{asset('img/calendar.png')}}",
                buttonImageOnly: false,
                "onSelect": function(date) {
                maxDateFilter = new Date(date).getTime();
                oTable.draw();
                }
            }).keyup(function() {
                maxDateFilter = new Date(this.value).getTime();
                oTable.draw();
            });

            });

            // Date range filter
            minDateFilter = "";
            maxDateFilter = "";

            $.fn.dataTableExt.afnFiltering.push(
            function(oSettings, aData, iDataIndex) {
                if (typeof aData._date == 'undefined') {
                aData._date = new Date(aData[0]).getTime();
                }

                if (minDateFilter && !isNaN(minDateFilter)) {
                if (aData._date < minDateFilter) {
                    return false;
                }
                }

                if (maxDateFilter && !isNaN(maxDateFilter)) {
                if (aData._date > maxDateFilter) {
                    return false;
                }
                }

                return true;
            }
            );


                $('#promoTable').DataTable({
                    buttons: [
                        'copy', 'csv', 'excel', 'pdf', 'print'
                    ],
                    "order": [[ 2, "desc" ]]
                });
                $('#giftTable').DataTable({
                    buttons: [
                        'copy', 'csv', 'excel', 'pdf', 'print'
                    ]


            });
        });
    </script>
@endsection

@push('after-script')
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>


<script>
    $(document).ready(function () {
        // 1. Fungsi Check All (Menggunakan event delegation)
        $(document).on('click', '#checkAll', function() {
            // Cek apakah master checkbox dicentang
            var isChecked = $(this).is(':checked');

            // Cari semua .sub_chk yang tampak dan set statusnya sama dengan #checkAll
            $('.sub_chk').prop('checked', isChecked);

            // Update counter (opsional jika Anda pakai counter angka)
            updateCounter();
        });

        // 2. Fungsi kebalikannya: Jika salah satu .sub_chk dimatikan, #checkAll harus ikut mati
        $(document).on('click', '.sub_chk', function() {
            if ($('.sub_chk:checked').length == $('.sub_chk').length) {
                $('#checkAll').prop('checked', true);
            } else {
                $('#checkAll').prop('checked', false);
            }

            updateCounter();
        });

        function updateCounter() {
            var count = $(".sub_chk:checked").length;
            $('#countSelected').text(count);
        }

        $('#btnBulkEmail').on('click', function() {
            $('#modalTemplateEmail').modal('show');
        });

        // Inisialisasi Summernote
        $('#summernote').summernote({
            height: 300,
            toolbar: []
        });

        function loadTemplates() {
            $.get("/backend/template", function(data) {
                var options = '<option value="">-- Pilih Template --</option>';
                data.forEach(function(item) {
                    options += `<option value="${item.id}">${item.name}</option>`;
                });
                $('#selectTemplate').html(options);
            });
        }

        $('#confirmSendBulk').on('click', function() {
            // 1. Ambil semua ID submission yang dicentang di tabel utama
            var selectedIds = [];
            $(".sub_chk:checked").each(function() {
                selectedIds.push($(this).attr('data-id'));
            });

            // 2. Ambil ID Template yang dipilih di dropdown Modal 1
            var templateId = $('#selectTemplate').val();

            // 3. Validasi sederhana
            if (selectedIds.length <= 0) {
                alert("Silahkan pilih minimal satu submission.");
                return;
            }
            if (!templateId) {
                alert("Silahkan pilih template email terlebih dahulu.");
                return;
            }

            // 4. Kirim AJAX ke Backend
            $.ajax({
                url: "/backend/submission/bulk-send-email", // Sesuaikan dengan route Anda
                type: "POST",
                data: {
                    _token: '{{ csrf_token() }}',
                    selected_ids: selectedIds.join(","),
                    template_id: templateId,
                    promo_id: window.location.href.split('/').pop(),

                },
                beforeSend: function() {
                    // Beri loading status pada tombol
                    $('#confirmSendBulk').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Processing...');
                },
                success: function(response) {
                    $('#modalTemplateEmail').modal('hide');

                    // Beri feedback ke user
                    alert("Berhasil! Email telah masuk antrean pengiriman (Queue).");

                    // Reset checkbox dan counter
                    $(".sub_chk, #checkAll").prop('checked', false);
                    $('#countSelected').text('0');

                    // Refresh tabel history di bawah (jika ada fungsi loadHistory)
                    if (typeof loadHistoryHeader === "function") {
                        loadHistoryHeader();
                    } else {
                        location.reload(); // Fallback jika belum buat fungsi refresh partial
                    }
                },
                error: function(xhr) {
                    alert("Terjadi kesalahan saat memproses antrean email.");
                    console.log(xhr.responseText);
                },
                complete: function() {
                    // Kembalikan tombol ke status semula
                    $('#confirmSendBulk').prop('disabled', false).text('Kirim Ke Terpilih');
                }
            });
        });

        // AJAX Simpan Template ke Database
        $('#btnSaveToDB').on('click', function() {
            var formData = {
                name: $('input[name="name"]').val(),
                template_id: $('input[name="template_id"]').val(),
                subject: $('input[name="subject"]').val(),
                content: $('#summernote').summernote('code'),
                _token: '{{ csrf_token() }}'
            };

            if(!formData.name || !formData.subject || $('#summernote').summernote('isEmpty')) {
                alert("Nama dan isi template tidak boleh kosong!");
                return;
            }

            $.ajax({
                url: "/backend/template/store", // Sesuaikan route simpan template
                type: "POST",
                data: formData,
                success: function(response) {
                    alert("Template berhasil disimpan!");
                    $('#modalEditorTemplate').modal('hide');

                    // Refresh dropdown di Modal 1 agar template baru muncul
                    loadTemplates();
                },
                error: function() {
                    alert("Gagal menyimpan template.");
                }
            });
        });

         // --- 1. Tombol CREATE ---
        $('#btnCreateTemplate').on('click', function() {
            // Reset form Modal 2
            $('#formSaveTemplate')[0].reset();

            // Pastikan input hidden ID kosong agar Controller melakukan 'Create'
            if ($('#template_id_hidden').length) {
                $('#template_id_hidden').val('');
            }
            $('#modalEditorTemplate').modal('show');
        });

        // --- 2. Tombol EDIT ---
        $('#btnEditTemplate').on('click', function() {
            var id = $('#selectTemplate').val();

            if (!id) {
                alert("Pilih template yang ingin diedit di dropdown terlebih dahulu!");
                return;
            }

            // Ambil data detail dari server
            $.get("/backend/template/" + id, function(res) {
                // Isi form di Modal 2
                $('input[name="name"]').val(res.name);
                $('input[name="subject"]').val(res.subject);
                $('#summernote').summernote('code', res.content);

                // Masukkan ID ke dalam input hidden agar Controller melakukan 'Update'
                if ($('#template_id_hidden').length == 0) {
                    $('#formSaveTemplate').append(`<input type="hidden" name="template_id" id="template_id_hidden" value="${res.id}">`);
                } else {
                    $('#template_id_hidden').val(res.id);
                }

                $('#modalEditorTemplate').modal('show');
            });
        });

        // --- 3. Tombol DELETE ---
        $('#btnDeleteTemplate').on('click', function() {
            var id = $('#selectTemplate').val();

            if (!id) {
                alert("Pilih template yang ingin dihapus!");
                return;
            }

            if (confirm("Apakah Anda yakin ingin menghapus template ini secara permanen?")) {
                $.ajax({
                    url: "/backend/template/" + id,
                    type: "DELETE",
                    data: { _token: '{{ csrf_token() }}' },
                    success: function() {
                        alert("Template berhasil dihapus!");
                        loadTemplates(); // Refresh dropdown
                    },
                    error: function() {
                        alert("Gagal menghapus template.");
                    }
                });
            }
        });

        $(document).on('click', '.btn-view-detail', function() {
            var headerId = $(this).data('id');
            $('#modalTemplateEmail').modal('hide');
            $('#modalDetailHistory').modal('show');


            // Hancurkan DataTable jika sudah ada sebelumnya agar bisa re-inisialisasi
            if ($.fn.DataTable.isDataTable('#tableDetailHistory')) {
                $('#tableDetailHistory').DataTable().destroy();
            }

            // Inisialisasi DataTables
            $('#tableDetailHistory').DataTable({
                processing: true,
                serverSide: false, // Set true jika data per header mencapai ribuan
                ajax: {
                    url: "/backend/submission/history-detail/" + headerId,
                    dataSrc: "" // Karena Laravel mengembalikan array JSON langsung
                },
                columns: [
                    { data: 'submission.email' },
                    {
                        data: 'status',
                        render: function(data) {
                            if(data == 'sent') return '<span class="badge badge-success">Sent</span>';
                            if(data == 'failed') return '<span class="badge badge-danger">Failed</span>';
                            return '<span class="badge badge-secondary">Pending</span>';
                        }
                    },
                    { data: 'sent_at', defaultContent: '-' },
                    {
                        data: 'error_message',
                        render: function(data) {
                            return data ? `<small class="text-danger">${data}</small>` : '-';
                        }
                    }
                ],
                pageLength: 10,
                lengthMenu: [5, 10, 25, 50],
                language: {
                    // Opsional: Mengganti bahasa ke Indonesia
                    url: "//cdn.datatables.net/plug-ins/1.10.24/i18n/Indonesian.json"
                }
            });
        });


    });

    $(document).ready(function () {

        // 1. Inisialisasi DataTable History (Log Parent)
        let tableHistory = $('#tableHistory').DataTable({
            processing: true,
            serverSide: false,
            destroy: true,
            ajax:
            {
                url: "/backend/import/submission/" + window.location.href.split('/').pop(), // Sesuaikan route Anda
                dataSrc: "" // Karena Laravel mengembalikan array JSON langsung
            },
            order: [[0, 'desc']], // KRUSIAL: Urutkan Status (Fail akan muncul di atas)
            columns: [
                { data: 'created_at', name: 'created_at' },
                { data: 'type', name: 'type' },
                {
                    data: 'status',
                    render: function(data) {
                        let color = (data == 'completed') ? 'success' : 'warning';
                        return `<span class="badge badge-${color}">${data.toUpperCase()}</span>`;
                    }
                },
                {
                    data: null,
                    orderable: false,
                    render: function(data) {
                        let buttons = `<button class="btn btn-xs btn-primary" onclick="viewDetail(${data.id})">History</button>`;
                        // Jika tipe 'new', tambahkan tombol preview staging
                        if(data.type === 'new') {
                            buttons += ` <button class="btn btn-xs btn-info" onclick="openPreviewModal(${data.id})">Submission</button>`;
                        }
                        if(data.status === 'processing') {
                            buttons += ` <button class="btn btn-xs btn-info" onclick="deleteTemp(${data.id})">Delete</button>`;
                        }
                        return buttons;
                    }
                }
            ],
            pageLength: 10,
            lengthMenu: [5, 10, 25, 50]
        });


        // 2. Event Start Import (Submit)
        $('#btnStartImport').on('click', function() {
            let fileInput = $('#inputExcel')[0];
            if (fileInput.files.length === 0) return alert('Pilih file excel terlebih dahulu!');

            let file = fileInput.files[0];
            let reader = new FileReader();

            let type_import = $('#inputType').val();
            console.log(type_import);
            let url = '';
            if(type_import == 'new'){
                url = '/backend/import/submission/tempsubmission';
            }else{
                url = '/backend/import/submission/process-update';
            }

            reader.onload = function(e) {
                let data = new Uint8Array(e.target.result);
                let workbook = XLSX.read(data, {type: 'array'});
                let jsonData = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]], {header: 1, defval: ""});

                $('#btnStartImport').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Processing...');

                $.ajax({
                    url: url, // Route Controller Direct Process
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        promo_id : window.location.href.split('/').pop(),
                        type : type_import,
                        payload: jsonData,
                        filename: file.name
                    },
                    success: function(res) {
                        alert(res.message);
                        $('#inputExcel').val('');
                        $('#btnStartImport').prop('disabled', false).html('<i class="fas fa-play"></i> Start Process (Queue)');
                        tableHistory.ajax.reload();
                    },
                    error: function() {
                        alert('Gagal mengirim data ke server.');
                        $('#btnStartImport').prop('disabled', false).html('<i class="fas fa-play"></i> Start Process (Queue)');
                    }
                });
            };
            reader.readAsArrayBuffer(file);
        });
    });


    function deleteTemp(id) {
        if (confirm('Apakah Anda yakin ingin menghapus baris ini dari staging?')) {
            $.ajax({
                url: `/backend/import/submission/delete/tempsubmission/${id}`,
                type: 'DELETE',
                data: { _token: "{{ csrf_token() }}" },
                success: function(res) {
                    alert(res.message);
                    $('#tableHistory').DataTable().ajax.reload(null, false);
                }
            });
        }
    }

    // 3. Fungsi View Detail (Sort by Fail)
    function viewDetail(id) {
        $('#wrapperHistoryList').hide();
        $('#wrapperHistoryDetail').show();

        // Hancurkan table lama jika ada
        if ($.fn.DataTable.isDataTable('#tableHistoryDetail')) {
            $('#tableHistoryDetail').DataTable().destroy();
        }

        $('#tableHistoryDetail').DataTable({
            processing: true,
            serverSide: false,
            ajax: {
                url: '/backend/import/submission/detail/'+id, // Sesuaikan route Anda
                dataSrc: "" // Karena Laravel mengembalikan array JSON langsung
            },
            order: [[1, 'asc']], // KRUSIAL: Urutkan Status (Fail akan muncul di atas)
            columns: [
                { data: 'submission_id', name: 'Id' },
                { data: 'submission.email', name: 'Email' },
                {
                    data: 'status',
                    render: function(data) {
                        let badge = (data == 'fail') ? 'danger' : (data == 'success' ? 'success' : 'secondary');
                        return `<span class="badge badge-${badge}">${data.toUpperCase()}</span>`;
                    }
                },
                { data: 'reason', name: 'reason' }
            ],
            pageLength: 10,
            lengthMenu: [5, 10, 25, 50]
        });
    }

    function showHistoryList() {
        $('#wrapperHistoryDetail').hide();
        $('#wrapperTempsubList').hide();
        $('#wrapperHistoryList').show();
    }

    function reloadHistoryTable() {
        $('#tableHistory').DataTable().ajax.reload();
    }

    function openPreviewModal(historyId) {
        $('#wrapperHistoryList').hide();
        $('#wrapperTempsubList').show();

        // Inisialisasi DataTable Staging
        let tablePreview = $('#tablePreviewNew').DataTable({
            processing: true,
            serverSide: false,
            destroy: true,
            ajax:{
                url: `/backend/import/submission/tempsubmission/${historyId}`,
                dataSrc: ""
            },
            columns: [
                { data: 'no_warranty', name: 'no_warranty' },
                { data: 'name', name: 'name' },
                { data: 'email', name: 'email' },
                {
                    data: 'status_temp',
                    render: function(data, type, row) {
                        let badge = (data === 'error') ? 'danger' : 'success';
                        let label = (data === 'error') ? row.error_message : 'Ready';
                        return `<span class="badge badge-${badge}">${label}</span>`;
                    }
                },
                {
                    data: 'id',
                    render: function(id) {
                        return `<button class="btn btn-xs btn-warning" onclick="editRow(${id})">Edit</button>
                                <button class="btn btn-xs btn-danger" onclick="deleteRow(${id})">Delete</button>`;
                    }
                }
            ],
            // Opsi tambahan untuk mempercantik tampilan client-side
            pageLength: 10,
            responsive: true
        });

        // Button Final Submit (Pindahkan dari Temp ke Real Table)
        $('#btnFinalImport').off('click').on('click', function() {
            $.post('/backend/import/submission/import/tempsubmission', {
                _token: "{{ csrf_token() }}",
                history_id: historyId
            }, function(res) {
                alert(res.message);
                $('#modalPreviewNew').modal('hide');
                tableHistory.ajax.reload();
            });
        });
    }

    // 1. Fungsi untuk Membuka Modal Edit dan Load Data
    function editRow(id) {
        // Ambil data spesifik dari row ini
        $.get(`/backend/import/submission/tempsubmission/detail/${id}`, function(res) {
            $('#edit-id').val(res.id);
            $('#name-temp').val(res.name);
            $('#email').val(res.email);
            $('#phone').val(res.phone);
            $('#address').val(res.address);
            $('#no_ktp').val(res.no_ktp);
            $('#no_warranty').val(res.no_warranty);
            $('#nearest_city').val(res.nearest_city);
            $('#dealer_name').val(res.dealer_name);
            $('#gift_id').val(res.gift_id);

            $('#modalEditTemp').modal('show');
        });
    }

    // Fungsi Delete Baris di Staging
    function deleteRow(id) {
        if (confirm('Apakah Anda yakin ingin menghapus baris ini dari staging?')) {
            $.ajax({
                url: `/backend/import/submission/delete/tempsubmission/detail/${id}`,
                type: 'DELETE',
                data: { _token: "{{ csrf_token() }}" },
                success: function(res) {
                    alert(res.message);
                    $('#tablePreviewNew').DataTable().ajax.reload(null, false);
                }
            });
        }
    }

    // Fungsi Edit (Bisa menggunakan prompt simple atau modal lain)
    $('#formEditTemp').on('submit', function(e) {
        e.preventDefault();
        let id = $('#edit-id').val();
        console.log(id);

        $.post(`/backend/import/submission/update/tempsubmission/detail/${id}`, {
            _token: "{{ csrf_token() }}",
            name: $('#name-temp').val(),
            email: $('#email').val(),
            phone: $('#phone').val(),
            address: $('#address').val(),
            no_ktp: $('#no_ktp').val(),
            no_warranty: $('#no_warranty').val(),
            nearest_city: $('#nearest_city').val(),
            dealer_name: $('#dealer_name').val(),
            gift_id: $('#gift_id').val(),

        }, function(res) {
            alert(res.message);
            $('#modalEditTemp').modal('hide');
            // Reload table preview (table staging)
            $('#tablePreviewNew').DataTable().ajax.reload(null, false);
        }).fail(function(err) {
            alert('Gagal mengupdate data.');
        });
    })

</script>
@endpush
@push('after-style')
<style>
.dataTables_filter input {
    width: 200px !important; /* Atur lebar sesuai keinginan */
    display: inline-block;
    margin-left: 0.5em;
}

/* Memastikan wrapper search bar memiliki ruang yang cukup */
.dataTables_filter {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

</style>
@endpush