@extends('table.app')

@section('styles')
    <!-- datatable re order -->
    <link href="{{ asset('assets/libs/datatable-reorder/rowReorder.dataTables.min.css') }}" rel="stylesheet" />
@endsection

@section('content')
    <!-- table -->
    @includeIf('oilprice::table.table')
    <!-- table -->

    <!-- filter -->
    @includeIf('oilprice::table.filter')
    <!-- filter -->

    <!-- Import Modal -->
    <div class="modal fade" id="importModal" tabindex="-1" role="dialog" aria-labelledby="importModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="importModalLabel">
                        <i class="mdi mdi-file-import-outline me-1"></i>
                        นำเข้าข้อมูลราคาน้ำมัน
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">เลือกไฟล์ที่ต้องการนำเข้า</label>
                        <input type="file" class="form-control" id="importFile" accept=".xlsx,.xls,.csv">
                        <small class="text-muted">รองรับไฟล์: .xlsx, .xls, .csv (ขนาดไม่เกิน 10MB)</small>
                    </div>
                    <div class="alert alert-info mb-0">
                        <i class="mdi mdi-information-outline me-1"></i>
                        <strong>คำแนะนำ:</strong>
                        <ul class="mb-0 mt-2">
                            <li>ดาวน์โหลดไฟล์ template ด้านล่างเพื่อดูรูปแบบที่ถูกต้อง</li>
                            <li>ไฟล์ต้องมีหัวคอลัมน์: <strong>name, email, department, position, price ,date</strong></li>
                            <li><strong class="text-danger">ชื่อและราคาเป็นข้อมูลที่จำเป็นต้องกรอก</strong></li>
                            <li>ถ้ามี email ซ้ำกับข้อมูลเดิม ระบบจะอัพเดทข้อมูลนั้น</li>
                        </ul>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" onclick="downloadTemplate()">
                        <i class="mdi mdi-download me-1"></i> ดาวน์โหลด Template
                    </button>
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">ยกเลิก</button>
                    <button type="button" class="btn btn-primary" id="importBtn" onclick="handleImportUpload()">
                        <i class="mdi mdi-file-import-outline me-1"></i> นำเข้าข้อมูล
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{ asset('assets/libs/datatable-reorder/dataTables.rowReorder.min.js') }}"></script>

    <script>
        const $_name = '';
        const $_type = '';
        const $_config = $.parseJSON('null');

        // link action
        const $_link_datatable = '{{ route("admin.{$type}.{$method}.datatable_ajax") }}';
        const $_link_sort = '{{ route("admin.{$type}.{$method}.set_sort") }}';
        const $_link_default = '{{ route("admin.{$type}.{$method}.set_default") }}';
        const $_link_status = '{{ route("admin.{$type}.{$method}.set_status") }}';
        const $_link_delete = '{{ route("admin.{$type}.{$method}.set_delete") }}';
        const $_link_download_template = '{{ route("admin.{$type}.{$method}.download_template") }}';
    </script>

    {{ module_vite("build-oilprice", "resources/assets/js/{$method}.js") }}
@endsection