@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Tambah'])

    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <button class="btn btn-secondary mb-0" onclick="history.back()">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </button>
                        <button type="button" class="btn btn-primary mb-0" data-shortcut="save" onclick="submitForm()"><i
                                class="fas fa-floppy-disk me-1"></i> Simpan</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-start">
                <h5 class="mb-0">Tambah {{ $title_menu }}</h5>

                {{-- Alert messages --}}
                <div class="ms-auto">
                    @if (session('success'))
                        <div class="alert alert-success alert-dismissible fade show mb-0 px-3 py-2 d-flex align-items-center text-white fw-bold"
                            role="alert" style="min-width: 280px; font-size: 0.95rem;">
                            <i class="fas fa-thumbs-up me-2"></i>
                            <span class="alert-text flex-grow-1">{{ session('success') }}</span>
                            <button type="button" class="btn-close btn-close-white ms-2 p-1" data-bs-dismiss="alert"
                                aria-label="Close"></button>
                        </div>
                    @endif

                    @if (session('error'))
                        <div class="alert alert-danger alert-dismissible fade show mb-0 px-3 py-2 d-flex align-items-center text-white fw-bold"
                            role="alert" style="min-width: 280px; font-size: 0.95rem;">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            <span class="alert-text flex-grow-1">{{ session('error') }}</span>
                            <button type="button" class="btn-close btn-close-white ms-2 p-1" data-bs-dismiss="alert"
                                aria-label="Close"></button>
                        </div>
                    @endif
                </div>
            </div>
            <hr class="horizontal dark mt-0">
            <form method="POST" action="{{ route('mstagr.store') }}" id="my-form">
                @csrf
                <div class="card-body">
                    <div class="row mb-3">
                        {{-- Customer --}}
                        <div class="col-md-6">
                            <label for="customer_display" class="form-label">Customer</label>
                            {{-- Hidden inputs untuk backend --}}
                            <input type="hidden" name="customer_code" id="customer_code">
                            <input type="hidden" name="customer_agreement" id="customer_agreement">
                            <input type="hidden" name="customer_coa" id="customer_coa">

                            <div class="input-group">
                                {{-- Display input --}}
                                <input type="text" id="customer_display" class="form-control required-input" readonly
                                    placeholder="Kode - Nama Customer">

                                <span class="input-group-text bg-primary text-light" data-bs-toggle="modal"
                                    data-bs-target="#customerModal" style="cursor: pointer;">
                                    <i class="fas fa-search"></i>
                                </span>
                            </div>
                        </div>

                        {{-- Material --}}
                        <div class="col-md-6">
                            <label for="material" class="form-label">Material</label>
                            <div class="input-group">
                                <input type="text" name="material" id="material" class="form-control required-input"
                                    readonly placeholder="Pilih Material">

                                <span class="input-group-text bg-primary text-light" data-bs-toggle="modal"
                                    data-bs-target="#materialModal" style="cursor: pointer;">
                                    <i class="fas fa-search"></i>
                                </span>
                            </div>
                        </div>
                    </div>

                    <hr class="horizontal dark mt-0">
                    <div class="table-responsive">
                        <table class="table table-bordered table-sm excel-table" style="background-color: #FBFBFB;">
                            <thead class="thead-light">
                                <tr class="fw-bold">
                                    <th style="width: 25%;">MIC Name</th>
                                    <th style="width: 15%;">Unit</th>
                                    <th style="width: 20%;">Standard</th>
                                    <th style="width: 12%;">Target</th>
                                    <th style="width: 12%;">Upper</th>
                                    <th style="width: 12%;">Lower</th>
                                    <th style="width: 4%;" class="text-center">Aksi</th>
                                </tr>
                            </thead>
                            <tbody id="mic-rows">
                                @php $micCounter = count($defaultMicList); @endphp
                                @foreach ($defaultMicList as $i => $mic)
                                    <tr class="mic-row">
                                        <td>
                                            <div class="input-group">
                                                <input placeholder="MIC Name" type="text" name="mic_name[]"
                                                    id="mic_name_{{ $i }}" class="form-control required-input" readonly
                                                    value="{{ $mic->mic_name }}">
                                                <span class="input-group-text bg-secondary text-light"
                                                    onclick="openMicModal('mic_name_{{ $i }}')"
                                                    style="cursor: pointer;">
                                                    <i class="fas fa-search"></i>
                                                </span>
                                            </div>
                                        </td>
                                        <td>
                                            <input type="text" name="unit[]" class="form-control required-input"
                                                placeholder="Unit" value="{{ $mic->unit }}">
                                        </td>
                                        <td>
                                            <input type="text" name="standard[]" class="form-control" placeholder="Standard"
                                                value="{{ $mic->standard ?? '' }}">
                                        </td>
                                        <td>
                                            <input type="text" name="target[]" class="form-control symbol-input"
                                                placeholder="Target">
                                        </td>
                                        <td>
                                            <input type="text" name="upper[]" class="form-control symbol-input"
                                                placeholder="Upper">
                                        </td>
                                        <td>
                                            <input type="text" name="lower[]" class="form-control symbol-input"
                                                placeholder="Lower">
                                        </td>
                                        <td class="text-center">
                                            <button type="button" class="btn btn-danger btn-sm mb-0" onclick="removeRow(this)">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <button type="button" class="btn btn-sm btn-primary mb-3" onclick="addMicRow()">
                        <i class="fas fa-plus"></i> Tambah MIC
                    </button>

                    <div class="text-end">
                        <button type="button" class="btn btn-primary" onclick="submitForm()">
                            <i class="fas fa-save"></i> Simpan
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="customerModal" tabindex="-1" aria-labelledby="customerModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Pilih Customer</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                </div>
                <div class="modal-body">
                    <table id="customerTable" class="table table-bordered table-striped">
                        <thead style="background-color: #00b7bd4f;">
                            <tr>
                                <th>Aksi</th>
                                <th>Kode</th>
                                <th>Kode SAP</th>
                                <th>Nama Customer</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($customers as $cust)
                                <tr>
                                    <td class="text-center">
                                        <button class="btn btn-sm btn-primary"
                                            onclick="selectCustomer('{{ $cust->kode_sap }}', '{{ $cust->customer }}')">
                                            Pilih
                                        </button>
                                    </td>
                                    <td>{{ $cust->kode }}</td>
                                    <td>{{ $cust->kode_sap }}</td>
                                    <td>{{ $cust->customer }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal MIC Name -->
    <div class="modal fade" id="micModal" tabindex="-1" aria-labelledby="micModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="micModalLabel">Pilih MIC Name</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered table-striped" id="micTable">
                        <thead style="background-color: #00b7bd4f;">
                            <tr>
                                <th width="10%">Pilih</th>
                                <th>MIC Name</th>
                                <th>Unit</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($micList as $mic)
                                <tr>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-sm btn-primary"
                                            onclick="selectMic('{{ addslashes($mic->mic_name) }}', '{{ addslashes($mic->unit) }}')">
                                            <i class="fas fa-check"></i>
                                        </button>
                                    </td>
                                    <td>{{ $mic->mic_name }}</td>
                                    <td>{{ $mic->unit }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Pilih Material -->
    <div class="modal fade" id="materialModal" tabindex="-1" aria-labelledby="materialModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="materialModalLabel">Pilih Material</h5>
                    <button type="button" class="btn-close text-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table id="materialTable" class="table table-bordered table-striped">
                            <thead style="background-color: #00b7bd4f;">
                                <tr>
                                    <th>Aksi</th>
                                    <th>Material</th>
                                </tr>
                            </thead>
                            <tbody id="materialTableBody">
                                <!-- Data akan diisi melalui AJAX -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        function replaceSymbols(text) {
            return text
                .replace(/>=/g, '≥')
                .replace(/<=/g, '≤')
                .replace(/\+\-/g, '±');
        }

        function attachSymbolAutoReplace() {
            const inputs = document.querySelectorAll('.symbol-input');
            inputs.forEach(input => {
                input.removeEventListener('input', autoReplaceHandler); // Cegah duplikat
                input.addEventListener('input', autoReplaceHandler);
            });
        }

        function autoReplaceHandler(e) {
            const input = e.target;
            const original = input.value;
            const cursorPos = input.selectionStart;
            const replaced = replaceSymbols(original);

            if (original !== replaced) {
                input.value = replaced;
                input.setSelectionRange(cursorPos, cursorPos);
            }
        }
        // Jalankan saat halaman selesai dimuat
        document.addEventListener('DOMContentLoaded', function() {
            attachSymbolAutoReplace();
            if (typeof initExcelTableNavigation === 'function') {
                initExcelTableNavigation();
            }
        });

        let micCounter = {{ $micCounter }};

        function addMicRow() {
            const row = `
        <tr class="mic-row">
            <td>
                <div class="input-group">
                    <input type="text" id="mic_name_${micCounter}" name="mic_name[]" class="form-control required-input" placeholder="MIC Name" readonly>
                    <span class="input-group-text bg-secondary text-light" onclick="openMicModal('mic_name_${micCounter}')" style="cursor: pointer;">
                        <i class="fas fa-search"></i>
                    </span>
                </div>
            </td>
            <td>
                <input type="text" id="unit_${micCounter}" name="unit[]" class="form-control required-input" placeholder="Unit">
            </td>
            <td>
                <input type="text" name="standard[]" class="form-control" placeholder="Standard">
            </td>
            <td>
                <input type="text" name="target[]" class="form-control symbol-input" placeholder="Target">
            </td>
            <td>
                <input type="text" name="upper[]" class="form-control symbol-input" placeholder="Upper">
            </td>
            <td>
                <input type="text" name="lower[]" class="form-control symbol-input" placeholder="Lower">
            </td>
            <td class="text-center">
                <button type="button" class="btn btn-danger btn-sm mb-0" onclick="removeRow(this)">
                    <i class="fas fa-trash"></i>
                </button>
            </td>
        </tr>`;
            $('#mic-rows').append(row);
            micCounter++;
            attachSymbolAutoReplace();
            if (typeof initExcelTableNavigation === 'function') {
                initExcelTableNavigation();
            }
        }

        function submitForm() {
            const form = document.getElementById('my-form');
            const requiredFields = form.querySelectorAll('.required-input');
            let isValid = true;
            let firstInvalid = null;

            requiredFields.forEach(field => {
                if (!field.value.trim()) {
                    isValid = false;
                    field.classList.add('is-invalid');

                    if (!firstInvalid) {
                        firstInvalid = field;
                    }
                } else {
                    field.classList.remove('is-invalid');
                }
            });

            if (!isValid) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Form tidak lengkap!',
                    text: 'Mohon lengkapi semua kolom yang wajib diisi.',
                }).then(() => {
                    if (firstInvalid) {
                        const id = firstInvalid.getAttribute('id');

                        if (id === 'customer_code') {
                            $('#customerModal').modal('show');
                        } else if (firstInvalid.name === 'mic_name[]') {
                            selectedMicInput = id;
                            $('#micModal').modal('show');
                        }

                        firstInvalid.focus();
                    }
                });

                return;
            }

            Swal.fire({
                title: 'Simpan Data?',
                text: "Pastikan data sudah benar.",
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#198754',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, Simpan',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    console.log('Form is being submitted!');
                    form.submit();
                }
            });
        }

        function updateMicIndexes() {
            // Reset micCounter
            micCounter = 0;

            // Update semua ID dan atribut
            document.querySelectorAll('.mic-row').forEach((row, index) => {
                const micNameInput = row.querySelector('input[name="mic_name[]"]');
                const unitInput = row.querySelector('input[name="unit[]"]');
                const modalButton = row.querySelector('.input-group-text');

                if (micNameInput && unitInput) {
                    // Perbarui ID untuk MIC Name
                    micNameInput.id = `mic_name_${micCounter}`;

                    // Perbarui ID untuk Unit
                    unitInput.id = `unit_${micCounter}`;

                    // Perbarui onclick untuk modal
                    if (modalButton) {
                        modalButton.setAttribute('onclick', `openMicModal('mic_name_${micCounter}')`);
                    }

                    // Tambahkan ke micCounter
                    micCounter++;
                }
            });
        }

        function removeRow(el) {
            Swal.fire({
                title: 'Yakin ingin menghapus baris ini?',
                text: 'Data MIC ini akan dihapus dari form.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, Hapus',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Hapus baris yang dipilih
                    $(el).closest('.mic-row').remove();

                    // Perbarui indeks setelah baris dihapus
                    updateMicIndexes();
                }
            });
        }

        $(document).ready(function() {
            // Inisialisasi DataTable
            const customerTable = $('#customerTable').DataTable({
                paging: true,
                searching: true,
                responsive: true,
                language: {
                    search: "Cari:",
                    lengthMenu: "Tampilkan _MENU_ data",
                    zeroRecords: "Data tidak ditemukan",
                    info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                    infoEmpty: "Tidak ada data",
                    infoFiltered: "(disaring dari _MAX_ total data)"
                }
            });

            // Saat modal dibuka
            $('#customerModal').on('shown.bs.modal', function() {
                setTimeout(function() {
                    const searchInput = $('#customerTable_filter input');
                    if (searchInput.length) {
                        searchInput.focus(); // Fokus ke input search
                    }
                }, 100); // Delay 100ms supaya pastikan modal & tabel sudah siap
            });

            // Saat modal ditutup
            $('#customerModal').on('hidden.bs.modal', function() {
                // Kosongkan input search
                const searchInput = $('#customerTable_filter input');
                if (searchInput.length) {
                    searchInput.val('');
                }

                // Reset pencarian DataTable (kosongkan filter)
                customerTable.search('').draw();
            });
        });

        function selectCustomer(kode_sap, customerName) {
            const customerDisplay = `${kode_sap} - ${customerName}`;
            $('#customer_display').val(customerDisplay);
            $('#customer_code').val(kode_sap);
            $('#customer_coa').val(customerName);
            $('#customer_agreement').val(customerName);
            $('#customerModal').modal('hide');
        }

        const materialUrl = "{{ url('materials') }}";
        $(document).ready(function() {
            // Inisialisasi DataTable untuk Material
            const materialTable = $('#materialTable').DataTable({
                paging: true,
                searching: true,
                responsive: true,
                language: {
                    search: "Cari:",
                    lengthMenu: "Tampilkan _MENU_ data",
                    zeroRecords: "Data tidak ditemukan",
                    info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                    infoEmpty: "Tidak ada data",
                    infoFiltered: "(disaring dari _MAX_ total data)"
                }
            });

            // Saat modal material dibuka
            $('#materialModal').on('shown.bs.modal', function() {
                const customerCode = $('#customer_code').val().split(" - ")[0].trim();

                if (!customerCode) {
                    alert("Pilih customer terlebih dahulu!");
                    $('#materialModal').modal('hide');
                    return;
                }

                // Ambil material berdasarkan customer_code
                fetch(`${materialUrl}/${customerCode}`)
                    .then(response => response.json())
                    .then(data => {
                        const materialTableBody = $('#materialTableBody');
                        materialTableBody.empty();

                        if (data.status === "success" && data.data.length > 0) {
                            data.data.forEach(material => {
                                materialTableBody.append(`
                                <tr>
                                    <td class="text-center">
                                        <button class="btn btn-sm btn-primary" onclick="selectMaterial('${material.material}')">
                                            Pilih
                                        </button>
                                    </td>
                                    <td>${material.material}</td>
                                </tr>
                            `);
                            });

                            // Refresh DataTable untuk material
                            materialTable.clear().rows.add($('#materialTableBody tr')).draw();
                        } else {
                            materialTableBody.append(`
                            <tr>
                                <td colspan="2" class="text-center">Tidak ada data material untuk customer ini</td>
                            </tr>
                        `);
                        }
                    })
                    .catch(error => console.error("Error:", error));
            });

            // Saat modal material ditutup
            $('#materialModal').on('hidden.bs.modal', function() {
                // Kosongkan input search
                const searchInput = $('#materialTable_filter input');
                if (searchInput.length) {
                    searchInput.val('');
                }

                // Reset pencarian DataTable (kosongkan filter)
                materialTable.search('').draw();
            });
        });

        // Fungsi untuk memilih material
        function selectMaterial(material) {
            $('#material').val(material);
            $('#materialModal').modal('hide');
        }

        $(document).ready(function() {
            // Inisialisasi DataTable
            const micTable = $('#micTable').DataTable({
                paging: true,
                searching: true,
                responsive: true,
                language: {
                    search: "Cari:",
                    lengthMenu: "Tampilkan _MENU_ data",
                    zeroRecords: "Data tidak ditemukan",
                    info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                    infoEmpty: "Tidak ada data",
                    infoFiltered: "(disaring dari _MAX_ total data)"
                }
            });

            // Saat modal dibuka
            $('#micModal').on('shown.bs.modal', function() {
                setTimeout(function() {
                    const searchInput = $('#micTable_filter input');
                    if (searchInput.length) {
                        searchInput.focus(); // Fokus ke kolom search
                    }
                }, 100); // Delay kecil supaya modal dan datatable sudah siap
            });

            // Saat modal ditutup
            $('#micModal').on('hidden.bs.modal', function() {
                // Kosongkan input search
                const searchInput = $('#micTable_filter input');
                if (searchInput.length) {
                    searchInput.val(''); // Kosongkan isinya
                }

                // Reset filter DataTable
                micTable.search('').draw();
            });
        });

        let selectedMicInput = '';

        function openMicModal(targetInputId) {
            selectedMicInput = targetInputId;
            $('#micModal').modal('show');
        }

        function selectMic(micName, unitValue) {
            let exists = false;

            document.querySelectorAll('input[name="mic_name[]"]').forEach(function(input) {
                if (input.value.trim().toLowerCase() === micName.trim().toLowerCase()) {
                    exists = true;
                }
            });

            if (exists) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Duplikat MIC',
                    text: 'MIC Name tersebut sudah ditambahkan.',
                    confirmButtonColor: '#3085d6',
                });
                return;
            }

            if (selectedMicInput) {
                const input = document.getElementById(selectedMicInput);
                input.value = micName;

                // Ambil index dari input ID: mic_name_0, mic_name_1, ...
                const index = selectedMicInput.split('_')[2];

                const unitInputs = document.querySelectorAll('input[name="unit[]"]');
                if (unitInputs[index]) {
                    unitInputs[index].value = unitValue;
                }

                $('#micModal').modal('hide');
            }
        }

        document.addEventListener('keydown', function(e) {
            const key = e.key;
            const arrowKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];

            // 🔁 ENTER di input MIC NAME membuka modal
            const isMicNameInput = e.target.name === 'mic_name[]';
            if (key === 'Enter' && isMicNameInput) {
                e.preventDefault();
                selectedMicInput = e.target.id;
                $('#micModal').modal('show');
                return;
            }

            // ⬅➡⬆⬇ Navigasi antar input
            if (!arrowKeys.includes(key)) return;

            const inputs = Array.from(document.querySelectorAll('#mic-rows input.form-control'));
            const currentIndex = inputs.indexOf(document.activeElement);
            if (currentIndex === -1) return;

            const currentInput = inputs[currentIndex];
            const currentRect = currentInput.getBoundingClientRect();

            let targetInput = null;

            if (key === 'ArrowRight') {
                targetInput = inputs[currentIndex + 1];
            } else if (key === 'ArrowLeft') {
                targetInput = inputs[currentIndex - 1];
            } else {
                const currentCenterX = currentRect.left + currentRect.width / 2;
                const currentCenterY = currentRect.top + currentRect.height / 2;

                let minDiff = Infinity;
                inputs.forEach((input, i) => {
                    if (i === currentIndex) return;
                    const rect = input.getBoundingClientRect();
                    const inputCenterX = rect.left + rect.width / 2;
                    const inputCenterY = rect.top + rect.height / 2;

                    const xDiff = Math.abs(currentCenterX - inputCenterX);
                    const yDiff = inputCenterY - currentCenterY;

                    if (key === 'ArrowDown' && yDiff > 5 && xDiff < 100 && yDiff < minDiff) {
                        minDiff = yDiff;
                        targetInput = input;
                    } else if (key === 'ArrowUp' && yDiff < -5 && xDiff < 100 && -yDiff < minDiff) {
                        minDiff = -yDiff;
                        targetInput = input;
                    }
                });
            }

            if (targetInput) {
                e.preventDefault();
                targetInput.focus();
                targetInput.select();
            }
        });
    </script>
@endpush