@extends('layouts/base_view')
@section('title')
{!! $variables['header_routes'] !!}
@endsection
@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-md-2 mr-1">
                                <button type="button" class="btn btn-outline-success btn-block" data-toggle="modal" data-target="#importModal">
                                    <i class="fas fa-file-import"></i> Import Excel
                                </button>
                            </div>
                            <div class="col-md-2">
                                <select id="filter-status" class="form-control">
                                    <option value="">All Status</option>
                                    <option value="valid">Valid</option>
                                    <option value="invalid">Invalid</option>
                                    <option value="pending">Pending</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <select id="filter-batch" class="form-control">
                                    <option value="">All Batches</option>
                                    @foreach($batches as $batch)
                                        <option value="{{ $batch }}">{{ $batch }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="import-result" class="mb-3" style="display:none;"></div>
                        <table id="id_data_table" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th width="5%">No</th>
                                    <th>IMEI</th>
                                    <th>Outlet ID (MCS)</th>
                                    <th>Device Model</th>
                                    <th>Activation Date</th>
                                    <th>Batch ID</th>
                                    <th>Status</th>
                                    <th>Uploaded At</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Import Modal --}}
<div class="modal fade" id="importModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form id="importForm" enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-file-import"></i> Import Principal Data (IMEI)</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info">
                        <strong>Format file:</strong> Excel (.xlsx, .xls) atau CSV.<br>
                        Kolom yang diperlukan: <code>imei</code>, <code>outlet_id</code>, <code>device_model</code>, <code>activation_date</code><br>
                        <code>outlet_id</code> = MCS Customer ID outlet (opsional).<br>
                        Format IMEI: 15 digit angka. Format tanggal: YYYY-MM-DD atau DD/MM/YYYY.
                    </div>
                    <div class="form-group">
                        <label>Batch ID <small class="text-muted">(opsional, akan digenerate otomatis jika kosong)</small></label>
                        <input type="text" name="batch_id" id="batch_id_input" class="form-control" placeholder="Contoh: BATCH-JAN-2024" maxlength="100">
                    </div>
                    <div class="form-group">
                        <label>File Excel <span class="text-danger">*</span></label>
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" id="importFile" name="file" accept=".xlsx,.xls,.csv">
                            <label class="custom-file-label" for="importFile">Pilih file...</label>
                        </div>
                        <small class="text-muted">Format: .xlsx, .xls, .csv | Maks. 5MB</small>
                    </div>
                    <a href="{{ route('principal-data.download-template') }}" class="btn btn-link btn-sm p-0" data="download">
                        <i class="fas fa-download"></i> Download Template
                    </a>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
                    <button type="submit" id="importBtn" class="btn btn-success">
                        <i class="fas fa-upload"></i> Import
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
$(function() {
    // File input label update
    $('#importFile').on('change', function() {
        var fileName = $(this).val().split('\\').pop();
        $(this).next('.custom-file-label').text(fileName || 'Pilih file...');
    });

    // DataTable
    var table = $('#id_data_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("principal-data.index") }}',
            data: function(d) {
                d.status   = $('#filter-status').val();
                d.batch_id = $('#filter-batch').val();
            }
        },
        columns: [
            { data: 0, name: 'no', orderable: false, searchable: false },
            { data: 1, name: 'imei' },
            { data: 2, name: 'outlet_id' },
            { data: 3, name: 'device_model' },
            { data: 4, name: 'activation_date' },
            { data: 5, name: 'batch_id' },
            { data: 6, name: 'validation_status', orderable: false },
            { data: 7, name: 'created_at' },
        ],
        responsive: true,
        lengthChange: true,
        autoWidth: false,
        buttons: ["copy", "csv", "excel", "pdf", "print", "colvis"],
    });

    table.buttons().container().appendTo('#id_data_table_wrapper .col-md-6:eq(0)');

    $('#filter-status, #filter-batch').change(function() {
        table.draw();
    });

    // Import form AJAX submit
    $('#importForm').on('submit', function(e) {
        e.preventDefault();
        e.stopPropagation();

        var fileInput = $('#importFile')[0];
        if (!fileInput.files.length) {
            Swal.fire({ icon: 'warning', title: 'Perhatian', text: 'Pilih file Excel terlebih dahulu.' });
            return;
        }

        var formData = new FormData();
        formData.append('file', fileInput.files[0]);
        formData.append('batch_id', $('#batch_id_input').val());
        formData.append('_token', $('meta[name="csrf-token"]').attr('content'));

        var $btn = $('#importBtn');
        $btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Memproses...');
        $('#loaderaditdinda').hide();

        $.ajax({
            url: '{{ route("principal-data.import") }}',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(res) {
                $btn.prop('disabled', false).html('<i class="fas fa-upload"></i> Import');
                fileInput.value = '';
                $('#importFile').next('.custom-file-label').text('Pilih file...');

                if (res.success) {
                    var hasErrors = res.error_count > 0;
                    var icon  = hasErrors ? 'warning' : 'success';
                    var title = hasErrors ? 'Import Selesai' : 'Berhasil!';
                    var html  = res.message;
                    if (res.error_file_url) {
                        html += '<br><br><a href="' + res.error_file_url + '" class="btn btn-sm btn-warning" data="download">'
                              + '<i class="fas fa-download"></i> Download Data Error (' + res.error_count + ' baris)</a>';
                    }
                    Swal.fire({ icon: icon, title: title, html: html, confirmButtonText: 'OK' }).then(function() {
                        $('#importModal').modal('hide');
                        table.draw();
                    });
                } else {
                    Swal.fire({ icon: 'error', title: 'Gagal', text: res.message });
                }
            },
            error: function(xhr) {
                $btn.prop('disabled', false).html('<i class="fas fa-upload"></i> Import');
                var msg = 'Terjadi kesalahan.';
                if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                    msg = Object.values(xhr.responseJSON.errors).map(function(e){ return e[0]; }).join('\n');
                } else if (xhr.responseJSON && xhr.responseJSON.message) {
                    msg = xhr.responseJSON.message;
                }
                Swal.fire({ icon: 'error', title: 'Gagal', text: msg });
            }
        });
    });

    // Reset modal saat ditutup
    $('#importModal').on('hidden.bs.modal', function() {
        $('#importFile').val('').next('.custom-file-label').text('Pilih file...');
        $('#batch_id_input').val('');
        $('#importBtn').prop('disabled', false).html('<i class="fas fa-upload"></i> Import');
    });
});
</script>
@endsection