@extends('layouts/base_view')
@section('title')
<li class="breadcrumb-item">Master</li>
<li class="breadcrumb-item active">Product Operator</li>
@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">
                                <a href="{{ route('operator-products.create') }}" class="btn btn-outline-primary btn-block">
                                    <i class="fa-solid fa-plus"></i> Tambah
                                </a>
                            </div>
                            <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
                                </button>
                            </div>
                            <div class="col-md-2 mr-1">
                                <select id="filter-operator" class="form-control">
                                    <option value="">Semua Operator</option>
                                    @foreach($operators as $op)
                                        <option value="{{ $op->id }}">{{ $op->operator_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-2">
                                <select id="filter-status" class="form-control">
                                    <option value="">Semua Status</option>
                                    <option value="active">Aktif</option>
                                    <option value="inactive">Tidak Aktif</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>Kode Produk</th>
                                    <th>Nama Produk</th>
                                    <th>Operator</th>
                                    <th class="text-right">Harga</th>
                                    <th>Status</th>
                                    <th>Dibuat</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 action="{{ route('operator-products.upload') }}" method="POST" enctype="multipart/form-data" id="importForm">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Import Product Operator</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" class="form-control-file" accept=".xlsx,.xls" required>
                        <small class="text-muted">Format: .xlsx, .xls | Maks. 5MB</small>
                    </div>
                    <a href="{{ route('operator-products.download-template') }}" 
                       class="btn btn-link btn-sm p-0 download-template-link" 
                       data="download">
                        <i class="fas fa-download"></i> <span class="download-text">Download Template</span>
                    </a>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-success btn-import">
                        <i class="fas fa-file-import"></i> <span class="import-text">Import</span>
                    </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("operator-products.index") }}',
            data: function(d) {
                d.operator_id = $('#filter-operator').val();
                d.status = $('#filter-status').val();
            }
        },
        columns: [
            { data: 0, name: 'no', orderable: false, searchable: false },
            { data: 1, name: 'product_code' },
            { data: 2, name: 'product_name' },
            { data: 3, name: 'operator_name' },
            { data: 4, name: 'price', className: 'text-right' },
            { data: 5, name: 'is_active', orderable: false },
            { 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"],
    });

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

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

    // Handle download template with loading state
    $('.download-template-link').on('click', function(e) {
        var $link = $(this);
        var $icon = $link.find('i');
        var $text = $link.find('.download-text');
        
        // Disable link and show loading
        $link.css('pointer-events', 'none').css('opacity', '0.6');
        $icon.removeClass('fa-download').addClass('fa-spinner fa-spin');
        $text.text('Menyiapkan template...');
        
        // Re-enable after 3 seconds (enough time for download to start)
        setTimeout(function() {
            $link.css('pointer-events', '').css('opacity', '1');
            $icon.removeClass('fa-spinner fa-spin').addClass('fa-download');
            $text.text('Download Template');
        }, 3000);
    });

    // Handle import form submission with loading state
    $('#importForm').on('submit', function(e) {
        var $form = $(this);
        var $btn = $form.find('.btn-import');
        var $icon = $btn.find('i');
        var $text = $btn.find('.import-text');
        var $closeBtn = $form.find('[data-dismiss="modal"]');
        
        // Validate file selected
        var fileInput = $form.find('input[type="file"]')[0];
        if (!fileInput.files.length) {
            return true; // Let browser validation handle it
        }
        
        // Disable button and show loading
        $btn.prop('disabled', true);
        $closeBtn.prop('disabled', true);
        $icon.removeClass('fa-file-import').addClass('fa-spinner fa-spin');
        $text.text('Memproses...');
    });

    // Reset form when modal is closed
    $('#importModal').on('hidden.bs.modal', function() {
        var $form = $('#importForm');
        var $btn = $form.find('.btn-import');
        var $icon = $btn.find('i');
        var $text = $btn.find('.import-text');
        var $closeBtn = $form.find('[data-dismiss="modal"]');
        
        // Reset form
        $form[0].reset();
        
        // Re-enable button
        $btn.prop('disabled', false);
        $closeBtn.prop('disabled', false);
        $icon.removeClass('fa-spinner fa-spin').addClass('fa-file-import');
        $text.text('Import');
    });
});
</script>
@endsection