@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 align-items-center">
                            <div class="col-md-1 mr-1">
                                <a href="{{ route('device-models.create') }}" class="btn btn-outline-primary btn-block"><i class="fa-solid fa-plus"></i> Add</a>
                            </div>
                            <div class="col-md-2">
                                <button type="button" class="btn btn-outline-success btn-block" data-toggle="modal" data-target="#importModal">
                                    <i class="fas fa-file-import"></i> Import
                                </button>
                            </div>
                            <div class="col-md-2">
                                <select id="filter-brand" class="form-control">
                                    <option value="">All Brands</option>
                                    @foreach($brands as $brand)
                                        <option value="{{ $brand }}">{{ $brand }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-2">
                                <select id="filter-status" class="form-control">
                                    <option value="">All Status</option>
                                    <option value="active">Active</option>
                                    <option value="inactive">Inactive</option>
                                </select>
                            </div>

                        </div>
                    </div>
                    <div class="card-body">
                        <table id="id_data_table" class="table table-bordered table-striped">
                            <thead>
                                <tr>
                                    <th width="5%">No</th>
                                    <th>Model Name</th>
                                    <th>Brand</th>
                                    <th>Category</th>
                                    <th>RRP Price</th>
                                    <th>Status</th>
                                    <th>Created</th>
                                    <th width="10%" class="text-center">Aksi</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">
        <div class="modal-content">
            <form id="importForm" enctype="multipart/form-data">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Import Device Models</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label>File Excel <span class="text-danger">*</span></label>
                        <input type="file" name="file" id="importFile" class="form-control-file" accept=".xlsx,.xls,.csv" required>
                        <small class="text-muted">Format: .xlsx, .xls, .csv | Maks. 2MB</small>
                    </div>
                    <a href="{{ route('device-models.download-template') }}" class="btn btn-link btn-sm p-0" data="download">
                        <i class="fas fa-download"></i> Download Template
                    </a>
                    <div id="importResult" class="mt-3" style="display:none;"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" id="importBtn" class="btn btn-success">
                        <i class="fas fa-file-import"></i> Import
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<form action="" id="delete-form" method="post">
    @method('delete')
    @csrf
</form>
<script>
$(function() {
    var table = $('#id_data_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("device-models.index") }}',
            data: function(d) {
                d.brand  = $('#filter-brand').val();
                d.status = $('#filter-status').val();
            }
        },
        columns: [
            { data: 0, name: 'no', orderable: false, searchable: false },
            { data: 1, name: 'model_name' },
            { data: 2, name: 'brand' },
            { data: 3, name: 'category' },
            { data: 4, name: 'rrp_price', className: 'text-right' },
            { data: 5, name: 'is_active' },
            { data: 6, name: 'created_at' },
            { data: 7, name: 'action', orderable: false, searchable: false, className: 'text-center' },
        ],
        responsive: true,
        lengthChange: true,
        autoWidth: false,
        buttons: ["copy", "csv", "excel", "pdf", "print", "colvis"],
        drawCallback: function() {
            $('[data-toggle="tooltip"]').tooltip();
        }
    });

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

    $('#filter-brand, #filter-status').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) {
            $('#importResult').html('<div class="alert alert-warning">Pilih file terlebih dahulu.</div>').show();
            return;
        }

        var formData = new FormData();
        formData.append('file', fileInput.files[0]);
        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...');
        $('#importResult').hide();
        $('#loaderaditdinda').hide(); // pastikan global loader tidak ikut muncul

        $.ajax({
            url: '{{ route("device-models.import") }}',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(res) {
                $btn.prop('disabled', false).html('<i class="fas fa-file-import"></i> Import');
                fileInput.value = '';

                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-file-import"></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() {
        $('#importResult').hide().html('');
        $('#importFile').val('');
        $('#importBtn').prop('disabled', false).html('<i class="fas fa-file-import"></i> Import');
    });
});
</script>
@endsection