@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('member::table.table')
    <!-- table -->

    <!-- filter -->
    @includeIf('member::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</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>

    <!-- Export Modal -->
    <div class="modal fade" id="exportModal" tabindex="-1" role="dialog" aria-labelledby="exportModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exportModalLabel">
                        <i class="mdi mdi-file-export-outline me-1"></i>
                        ส่งออกข้อมูล Timeline
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info mb-3">
                        <i class="mdi mdi-information-outline me-1"></i>
                        <strong>เลือกรูปแบบไฟล์ที่ต้องการส่งออก</strong>
                    </div>
                    <div class="row">
                        <div class="col-12 mb-3">
                            <div class="dropdown w-100">
                                <button class="btn btn-outline-primary w-100 dropdown-toggle text-start d-flex align-items-center" type="button" id="exportFormatDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                                    <span id="selectedExportIcon" class="me-2">
                                        <i class="mdi mdi-file-excel-outline"></i>
                                    </span>
                                    <span id="selectedExportLabel">รูปแบบไฟล์ที่ต้องการส่งออก</span>
                                </button>
                                <ul class="dropdown-menu w-100" aria-labelledby="exportFormatDropdown">
                                    <li>
                                        <a class="dropdown-item d-flex align-items-center export-dropdown-option" href="javascript:void(0);" onclick="selectExportFormat('excel')">
                                            <i class="mdi mdi-file-excel-outline me-2" style="font-size: 24px; color: #217346;"></i>
                                            <span>ข้อมูลทั้งหมด</span>
                                        </a>
                                    </li>

                                    <li>
                                        <a class="dropdown-item d-flex align-items-center export-dropdown-option" href="javascript:void(0);" onclick="selectExportFormat('excel_time')">
                                            <i class="mdi mdi-file-excel-outline me-2" style="font-size: 24px; color: #217346;"></i>
                                            <span>เวลางาน</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item d-flex align-items-center export-dropdown-option" href="javascript:void(0);" onclick="selectExportFormat('pdf')">
                                            <i class="mdi mdi-file-pdf-box me-2" style="font-size: 24px; color: #d32f2f;"></i>
                                            <span>ข้อมูลทั้งหมด</span>
                                        </a>
                                    </li>
                                    {{-- <li>
                                        <a class="dropdown-item d-flex align-items-center export-dropdown-option" href="javascript:void(0);" onclick="selectExportFormat('pdf')">
                                            <i class="mdi mdi-file-pdf-box me-2" style="font-size: 24px; color: #d32f2f;"></i>
                                            <span>เวลางาน</span>
                                        </a>
                                    </li> --}}
                                </ul>
                            </div>
                        </div>
                        <script>
                            // Keep track of selected label/icon for dropdown visual sync
                            function selectExportFormat(format) {
                                let label = '';
                                let icon = '';
                                switch(format) {
                                    case 'excel_all':
                                        label = 'ข้อมูลทั้งหมด (.xlsx)';
                                        icon = '<i class="mdi mdi-file-excel-outline" style="font-size: 24px; color: #217346;"></i>';
                                        break;
                                    case 'excel_time':
                                        label = 'เวลางาน (.xlsx)';
                                        icon = '<i class="mdi mdi-file-excel-outline" style="font-size: 24px; color: #217346;"></i>';
                                        break;
                                    case 'pdf':
                                        label = 'ข้อมูลทั้งหมด (.pdf)';
                                        icon = '<i class="mdi mdi-file-pdf-box" style="font-size: 24px; color: #d32f2f;"></i>';
                                        break;
                                    // case 'pdf_landscape':
                                    //     label = 'เวลางาน (.pdf)';
                                    //     icon = '<i class="mdi mdi-file-pdf-box" style="font-size: 24px; color: #d32f2f;"></i>';
                                    //     break;
                                }
                                $('#selectedExportLabel').html(label);
                                $('#selectedExportIcon').html(icon);

                                // Optionally highlight the chosen card (if cards below are kept)
                                $('.export-option').css('border-color', 'transparent');
                                if(format === 'excel') {
                                    $('.export-option').eq(0).css('border-color', '#217346');
                                } else if(format === 'csv') {
                                    $('.export-option').eq(0).css('border-color', '#217346');
                                } else if(format === 'pdf') {
                                    $('.export-option').eq(1).css('border-color', '#d32f2f');
                                } else if(format === 'pdf_landscape') {
                                    $('.export-option').eq(1).css('border-color', '#d32f2f');
                                }

                                // Store selected format for use in export logic
                                window.selectedExportFormat = format;
                            }
                            // Initialize default value
                            $(function() {
                                window.selectedExportFormat = 'excel';
                            });
                        </script>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">ยกเลิก</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <!-- Jquery UI-->
    <script src="{{ asset('assets/libs/jquery-ui/jquery-ui.min.js') }}"></script>
    <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_export = '{{ route("admin.{$type}.{$method}.export") }}';
        const $_link_import = '{{ route("admin.{$type}.{$method}.import") }}';
        const $_link_download_template = '{{ route("admin.{$type}.{$method}.download_template") }}';
    </script>

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