@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') || session('message'))
                        <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') ?? session('message') }}</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('msoutp.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>
                            <input type="hidden" name="customer_code" id="customer_code" value="">
                            <input type="hidden" name="customer_name" id="customer_name" value="">

                            <div class="input-group">
                                <input type="text" name="customer_display" id="customer_display" class="form-control required-input"
                                    placeholder="Pilih Customer atau ketik 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">Kode Material</label>
                            <div class="input-group">
                                <input type="text" name="material" id="material" class="form-control required-input"
                                    placeholder="Pilih Material atau ketik kode material (awalan 8)...">

                                <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" id="unit_{{ $i }}" 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 Customer -->
    <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 style="width: 15%;" class="text-center">Aksi</th>
                                <th style="width: 25%;">Kode SAP</th>
                                <th style="width: 60%;">Nama Customer</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($customers as $cust)
                                <tr>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-sm btn-primary mb-0"
                                            onclick="selectCustomer('{{ $cust->kode_sap ?? ($cust->kode ?? '') }}', '{{ addslashes($cust->customer ?? '') }}')">
                                            Pilih
                                        </button>
                                    </td>
                                    <td>{{ $cust->kode_sap ?? ($cust->kode ?? '') }}</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%" class="text-center">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 mb-0"
                                            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" 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 style="width: 15%;" class="text-center">Aksi</th>
                                    <th>Material</th>
                                </tr>
                            </thead>
                            <tbody id="materialTableBody">
                                @foreach ($materials as $mat)
                                    <tr>
                                        <td class="text-center">
                                            <button type="button" class="btn btn-sm btn-primary mb-0"
                                                onclick="selectMaterial('{{ addslashes($mat->material ?? '') }}')">
                                                Pilih
                                            </button>
                                        </td>
                                        <td>{{ $mat->material }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        let selectedMicInput = null;

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

        function selectMic(micName, unit) {
            if (selectedMicInput) {
                document.getElementById(selectedMicInput).value = micName;
                const index = selectedMicInput.replace('mic_name_', '');
                const unitField = document.getElementById(`unit_${index}`);
                if (unitField && !unitField.value) {
                    unitField.value = unit || '';
                }
                $('#micModal').modal('hide');
            }
        }

        function selectCustomer(code, name) {
            document.getElementById('customer_code').value = code;
            document.getElementById('customer_name').value = name;
            document.getElementById('customer_display').value = `${code} - ${name}`;
            $('#customerModal').modal('hide');
        }

        function selectMaterial(material) {
            document.getElementById('material').value = material;
            $('#materialModal').modal('hide');
        }

        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);
                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);
            }
        }

        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 updateMicIndexes() {
            micCounter = 0;
            document.querySelectorAll('.mic-row').forEach((row) => {
                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) {
                    micNameInput.id = `mic_name_${micCounter}`;
                    unitInput.id = `unit_${micCounter}`;
                    if (modalButton) {
                        modalButton.setAttribute('onclick', `openMicModal('mic_name_${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) {
                    $(el).closest('.mic-row').remove();
                    updateMicIndexes();
                }
            });
        }

        function submitForm() {
            const form = document.getElementById('my-form');

            // Handle free-text customer
            const customerDisplay = document.getElementById('customer_display');
            const customerName = document.getElementById('customer_name');
            const customerCode = document.getElementById('customer_code');
            if (!customerName.value && customerDisplay.value) {
                customerName.value = customerDisplay.value.trim();
                customerCode.value = customerDisplay.value.trim();
            }

            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) firstInvalid.focus();
                });
                return;
            }

            Swal.fire({
                title: 'Simpan Data Standar?',
                text: 'Pastikan spesifikasi dan target sudah sesuai.',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#198754',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, Simpan',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    form.submit();
                }
            });
        }

        $(document).ready(function() {
            attachSymbolAutoReplace();
            if (typeof initExcelTableNavigation === 'function') {
                initExcelTableNavigation();
            }

            $('#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",
                }
            });

            $('#micTable').DataTable({
                paging: true,
                searching: true,
                responsive: true,
                language: {
                    search: "Cari:",
                    lengthMenu: "Tampilkan _MENU_ data",
                    zeroRecords: "Data tidak ditemukan",
                }
            });

            $('#materialTable').DataTable({
                paging: true,
                searching: true,
                responsive: true,
                language: {
                    search: "Cari:",
                    lengthMenu: "Tampilkan _MENU_ data",
                    zeroRecords: "Data tidak ditemukan",
                }
            });
        });
    </script>
@endpush