@extends('layouts/base_view')
@section('title')
{!! $variables['header_routes'] !!}
@endsection
@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card card-outline card-warning">
                    <div class="card-header">
                        <h3 class="card-title">{{ $variables['judul'] }}</h3> 
                    </div>
                    <form id="form-dc">
                        @csrf
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="code">Code <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="code" name="code" 
                                               value="{{ $data->code ?? '' }}" required maxlength="50"
                                               placeholder="Contoh: DC-JKT-01">
                                    </div>
                                    <div class="form-group">
                                        <label for="doctype">Doctype <span class="text-danger">*</span></label>
                                        <select class="form-control select2 select2-warning" data-dropdown-css-class="select2-warning" name="doctype" id="doctype" required style="width:100%">
                                            <option value="">Pilih Doctype</option>
                                            @foreach($variables['doctypes'] as $value => $label)
                                            <option value="{{ $value }}" {{ old('doctype', $data->doctype ?? '') == $value ? 'selected' : '' }}>
                                                {{ $label }}
                                            </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="name">Name <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="name" name="name" 
                                               value="{{ $data->name ?? '' }}" required maxlength="100">
                                    </div>
                                    <div class="form-group">
                                        <label for="phone">Phone</label>
                                        <input type="text" class="form-control" id="phone" name="phone" 
                                               value="{{ $data->phone ?? '' }}" maxlength="20">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="address">Address</label>
                                        <textarea class="form-control" id="address" name="address" rows="3">{{ $data->address ?? '' }}</textarea>
                                    </div>
                                    <div class="form-group">
                                        <label for="description">Description</label>
                                        <textarea class="form-control" id="description" name="description" rows="3">{{ $data->description ?? '' }}</textarea>
                                    </div>
                                </div>
                            </div>

                            <!-- Rumus & SPB Holiday Configuration Section -->                             
                            <div class="row mt-4">
                                <div class="col-12">
                                    <h5 class="font-weight-bold">Rumus & SPB Holiday Configuration</h5>
                                    <p class="text-muted text-sm">* Atur rumus kalkulasi dan hari libur untuk pembuatan SPB (Surat Permintaan Barang) berdasarkan tipe dokumen dan periode pemesanan.</p>
                                    <p class="text-muted text-sm">* Jika tidak diisi, sistem akan secara otomatis menggunakan data default.</p>
                                    
                                    <!-- SPB Holiday Configurations Table -->
                                    <div id="spb-holiday-container">
                                        <div class="mb-3">
                                            <button type="button" class="btn btn-sm btn-success" id="add_empty_spb_holiday">
                                                <i class="fas fa-plus mr-1"></i> Tambah Konfigurasi SPB Holiday
                                            </button>
                                            <a href="{{ route('holidays.index') }}" target="_blank" class="btn btn-sm btn-danger button-cek-permission" data-permission="holidays.index">
                                                <i class="fas fa-calendar-alt mr-1"></i></i> Holidays Calendar
                                            </a>
                                        </div>
                                        <div class="table-responsive">
                                            <table class="table table-bordered table-hover table-sm">
                                                <thead class="bg-warning">
                                                    <tr>
                                                        <th width="1%">No</th>
                                                        <th width="6%">Tipe Dokumen</th>
                                                        <th width="8%">Periode Pesanan</th>
                                                        <th width="3%">Status Aktif</th>
                                                        <th width="3%">Rumus Normal</th>
                                                        <th width="3%">Rules</th>
                                                        <th width="39%">Hari Libur SPB</th>
                                                        <th>Deskripsi</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @if($data->id && isset($data->spbHolidays) && $data->spbHolidays->where('delete_flag', false)->count() > 0)
                                                        <!-- Existing Configurations -->
                                                        @php $loopIndex = 0; @endphp
                                                        @foreach($data->spbHolidays->where('delete_flag', false) as $holiday)
                                                        <tr class="main-config-row" data-index="{{ $loopIndex }}">
                                                            <td class="text-center"> {{($loopIndex + 1)}} </td>
                                                            <td>
                                                                {{ $holiday->tipe_dokumen }} 
                                                                <input type="hidden" name="spb_holidays[{{ $loopIndex }}][id]" value="{{ $holiday->id }}">
                                                                <input type="hidden" name="spb_holidays[{{ $loopIndex }}][tipe_dokumen]" value="{{ $holiday->tipe_dokumen }}">
                                                                <input type="hidden" name="spb_holidays[{{ $loopIndex }}][period_id]" value="{{ $holiday->period_id }}">
                                                            </td>
                                                            <td>
                                                                {{ $holiday->period->code }}</span> 
                                                            </td>
                                                            <td class="text-center">
                                                                <div class="form-check">
                                                                    <input class="form-check-input" 
                                                                        type="checkbox" 
                                                                        name="spb_holidays[{{ $loopIndex }}][is_active]" 
                                                                        value="1"
                                                                        id="active_{{ $loopIndex }}"
                                                                        {{ $holiday->is_active ? 'checked' : '' }}> 
                                                                </div>
                                                            </td>
                                                            <td class="text-center">
                                                                <div class="form-check">
                                                                    <input class="form-check-input normal-rumus-toggle" 
                                                                        type="checkbox" 
                                                                        name="spb_holidays[{{ $loopIndex }}][normal_rumus]" 
                                                                        value="1"
                                                                        id="normal_rumus_{{ $loopIndex }}"
                                                                        data-index="{{ $loopIndex }}"
                                                                        {{ ($holiday->normal_rumus ?? true) ? 'checked' : '' }}> 
                                                                </div>
                                                            </td>
                                                            <td class="text-center so-rules-column">
                                                                @if(!($holiday->normal_rumus ?? true))
                                                                <button type="button" class="btn btn-sm btn-info btn-show-so-rules" 
                                                                    data-index="{{ $loopIndex }}" 
                                                                    data-tipe="{{ $holiday->tipe_dokumen }}"
                                                                    data-period="{{ $holiday->period ? $holiday->period->code : 'All' }}"
                                                                    title="Lihat SO Rules">
                                                                    <i class="fas fa-cogs"></i>
                                                                </button>
                                                                @else
                                                                <span class="text-muted">-</span>
                                                                @endif
                                                            </td>
                                                            <td> 
                                                                    @php $allDays = ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu', 'Minggu', 'Holiday']; @endphp
                                                                    @foreach($allDays as $day) 
                                                                        <div class="form-check form-check-inline">
                                                                            <input class="form-check-input" 
                                                                                type="checkbox" 
                                                                                name="spb_holidays[{{ $loopIndex }}][holiday_days][]" 
                                                                                value="{{ $day }}"
                                                                                id="holiday_{{ $loopIndex }}_{{ $day }}"
                                                                                {{ in_array($day, $holiday->holiday_days) ? 'checked' : '' }}>
                                                                            <label class="form-check-label small" for="holiday_{{ $loopIndex }}_{{ $day }}">{{ $day }}</label> 
                                                                        </div>
                                                                    @endforeach 
                                                            </td> 
                                                            <td>
                                                                <textarea class="form-control " 
                                                                    name="spb_holidays[{{ $loopIndex }}][description]" 
                                                                    rows="1" 
                                                                    placeholder="Deskripsi">{{ $holiday->description }}</textarea>
                                                            </td>  
                                                        </tr>
                                                        
                                                        @php $loopIndex++; @endphp
                                                        @endforeach
                                                    @else
                                                        <!-- Empty state row when no configurations exist -->
                                                        <tr>
                                                            <td colspan="8" class="text-center text-muted">
                                                                <i class="fas fa-info-circle mr-2"></i>
                                                                Belum ada konfigurasi SPB Holiday. Gunakan form di atas untuk menambahkan konfigurasi hari libur purchasing.
                                                            </td>
                                                        </tr>
                                                    @endif
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div> 
                        </div>
                        <div class="card-footer">
                            <button type="submit" class="btn btn-sm btn-info">
                                <i class="fas fa-save"></i> Simpan
                            </button>
                            <a href="{{ route('dcs.index') }}" class="btn btn-sm btn-warning" data='back' onclick="return notificationBeforeBack(event, this);">
                                <i class="fa fa-arrow-left"></i> Kembali
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Modal for SO Rules -->
<div class="modal fade" id="soRulesModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header bg-info">
                <h5 class="modal-title text-white">
                    <i class="fas fa-cogs mr-2"></i>Shipment Rules — <span id="soRulesTitle"></span>
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
               <div class="alert alert-info mt-0 mb-3 py-2">
                    <i class="fas fa-info-circle mr-2"></i>
                    <strong>Rumus:</strong> FC_1-FC_7, TSM_1-TSM_7 (+, -, *, /, ()).
                    Perhitungan dimulai dari Hari SO.
                    Contoh: FC_1 dari Senin (Hari SO) = Selasa.
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered table-hover table-sm"> 
                        <thead class="bg-warning">
                            <tr>
                                <th class="text-center" style="width: 10%;">Hari SO</th>
                                <th class="text-center" style="width: 20%;">Cek SPB</th>
                                <th class="text-center" style="width: 80%;">Rumus</th>
                            </tr>
                        </thead>
                        <tbody id="soRulesTableBody">
                            <!-- Will be populated by JavaScript -->
                        </tbody>
                    </table>
                </div> 
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">
                    <i class="fas fa-times mr-1"></i>Tutup
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    $(function() {
        // console.log('Document ready - jQuery loaded');
        
        try {
            // console.log('Found normal-rumus-toggle elements:', $('.normal-rumus-toggle').length);
            
            // Debug: Log HTML structure
            // $('.normal-rumus-toggle').each(function(index) {
            //     console.log('Checkbox ' + index + ':', {
            //         id: $(this).attr('id'),
            //         name: $(this).attr('name'),
            //         checked: $(this).is(':checked'),
            //         hasClass: $(this).hasClass('normal-rumus-toggle'),
            //         outerHTML: this.outerHTML
            //     });
            // });
            
            // Debug: Check if checkboxes are inside form
            // console.log('Checkboxes inside form:', $('#form-dc .normal-rumus-toggle').length);
            
            // Debug: Monitor checkbox changes with MutationObserver
            $('.normal-rumus-toggle').each(function() {
                var checkbox = this;
                var observer = new MutationObserver(function(mutations) {
                    mutations.forEach(function(mutation) {
                        if (mutation.type === 'attributes' && mutation.attributeName === 'checked') {
                            // console.log('Checkbox checked attribute changed by external script:', checkbox.name, 'checked:', checkbox.checked);
                        }
                    });
                });
                observer.observe(checkbox, { attributes: true, attributeFilter: ['checked'] });
            });
            
        } catch (error) {
            console.error('Error in checkbox detection:', error);
        }
        
        $('#form-dc').on('submit', function(e) {
            e.preventDefault();
            
            // Show loading
            $('#loaderkdnknz').show();

            // Alert untuk memastikan form submission berjalan
            // console.log('Form submission started');
            
            // Debug: Log form data before submission
            var formData = $(this).serialize();
            // console.log('Form data being submitted:', formData);
            
            // Validasi semua input rumus sebelum submit
            var hasInvalidRumus = false;
            var invalidInputs = [];
            
            $('input[name*="[rumus]"]').each(function() {
                var value = $(this).val();
                if (value && !validateRumusInput(value)) {
                    hasInvalidRumus = true;
                    invalidInputs.push($(this).attr('name'));
                    $(this).addClass('is-invalid');
                }
            });
            
            if (hasInvalidRumus) {
                Swal.fire({
                    icon: 'error',
                    title: 'Format Rumus Tidak Valid',
                    html: 'Terdapat format rumus yang tidak valid.<br><br>' +
                          '<strong>Format yang benar:</strong><br>' +
                          '• FC_1 sampai FC_7<br>' +
                          '• TSM_1 sampai TSM_7<br>' +
                          '• Operator: +, -, *, /, ( )<br><br>' +
                          '<strong>Contoh:</strong> FC_1 + FC_2 - TSM_1',
                    confirmButtonColor: '#d33'
                });
                // console.log('Invalid rumus inputs:', invalidInputs);
                return;
            }
            
            // Debug: Check for duplicate checkboxes
            var normalRumusCheckboxes = $('input[name*="[normal_rumus]"]');
            // console.log('Found normal_rumus checkboxes:', normalRumusCheckboxes.length);
            // normalRumusCheckboxes.each(function(index) {
            //     console.log('Checkbox ' + index + ':', {
            //         name: $(this).attr('name'),
            //         value: $(this).val(),
            //         checked: $(this).is(':checked'),
            //         type: $(this).attr('type'),
            //         id: $(this).attr('id')
            //     });
            // });
            
            // Debug: Check checkbox states before submission
            var checkboxStates = {};
            $('input[name*="[normal_rumus]"]').each(function() {
                var name = $(this).attr('name');
                var checked = $(this).is(':checked');
                var value = $(this).val();
                checkboxStates[name] = {
                    checked: checked,
                    value: value,
                    willSend: checked ? value : 'not sent'
                };
            });
            
            // console.log('Checkbox states before submission:', checkboxStates);
            
            // Debug: Check if rules data exists in form
            var hasRulesData = false;
            var rulesCount = 0;
            $('input[name*="[rules]"]').each(function() {
                if ($(this).val()) {
                    hasRulesData = true;
                    rulesCount++;
                }
            });
            
            // console.log('Rules data check:', {
            //     hasRulesData: hasRulesData,
            //     rulesCount: rulesCount,
            //     totalRulesInputs: $('input[name*="[rules]"]').length
            // });
            
            // Alert for debugging
            if (hasRulesData) {
                // console.log('Form has rules data, proceeding with submission');
            } else {
                // console.log('Form has no rules data');
            }
            
            var formData = $(this).serialize();
            var url = '{{ route("dcs.store", $data->id ?? 0) }}';
            
            // console.log('About to make AJAX call to:', url);
            
            // Debug: Parse and log form data in readable format
            var formDataArray = $(this).serializeArray();
            var formDataObject = {};
            $.each(formDataArray, function(i, field) {
                if (formDataObject[field.name]) {
                    // Handle multiple values (like checkboxes with same name)
                    if (!Array.isArray(formDataObject[field.name])) {
                        formDataObject[field.name] = [formDataObject[field.name]];
                    }
                    formDataObject[field.name].push(field.value);
                } else {
                    formDataObject[field.name] = field.value;
                }
            });
            // console.log('Parsed form data:', formDataObject);
            
            // Debug: Force check checkbox states and modify form data if needed
            var modifiedFormData = formData;
            $('input[name*="[normal_rumus]"]').each(function() {
                var name = $(this).attr('name');
                var isChecked = $(this).is(':checked');
                // console.log('Processing checkbox:', name, 'checked:', isChecked);
                
                if (!isChecked) {
                    // Remove the field from form data if checkbox is unchecked
                    var regex = new RegExp('&?' + name.replace(/[\[\]]/g, '\\$&') + '=[^&]*', 'g');
                    modifiedFormData = modifiedFormData.replace(regex, '');
                    // console.log('Removed', name, 'from form data because checkbox is unchecked');
                }
            });
            
            // console.log('Modified form data:', modifiedFormData);
            
            $.ajax({
                url: url,
                type: 'POST',
                data: modifiedFormData,
                success: function(data) {
                    // Check response format [status, message]
                    Swal.fire({
                        icon: data[0],
                        text: data[1],
                        showCancelButton: false,
                        confirmButtonColor: '#6c757d',
                        confirmButtonText: 'OK',
                        allowOutsideClick: false
                    }).then((result) => {
                        if (result.isConfirmed && data[0] == 'success') {
                            const dataId = parseInt("{{ $data->id }}");
                            if (dataId > 0) {
                                window.location.href = "{{ route('dcs.show', $data->id) }}";
                            } else {
                                window.location.href = "{{ route('dcs.index') }}";
                            }
                        }
                    });
                },
                error: function(xhr) {
                    let errorText = "Please contact the relevant team or try again.";

                    if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                        const errors = xhr.responseJSON.errors;
                        errorText = '';
                        for (const key in errors) {
                            if (errors.hasOwnProperty(key)) {
                                errorText += `<strong>${key}</strong> : ${errors[key].join(', ')}<br>`;
                            }
                        }
                    } else if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorText = xhr.responseJSON.message;
                    }

                    Swal.fire({
                        icon: "error",
                        title: "Validasi Gagal",
                        html: errorText,
                        confirmButtonColor: '#6c757d',
                        confirmButtonText: 'OK'
                    });
                },
                complete: function() {
                    $('#loaderkdnknz').hide();
                }
            });
        });

        // SPB Holiday Management - Calculate index based on existing rows
        function getNextIndex() {
            // Count main config rows (exclude custom rules rows and empty state rows)
            var mainRows = $('#spb-holiday-container tbody tr.main-config-row').length;
            return mainRows;
        }

        // Function to reindex all rows after removal
        function reindexAllRows() {
            var mainRows = $('#spb-holiday-container tbody tr.main-config-row');
            
            mainRows.each(function(newIndex) {
                var row = $(this);
                var oldIndex = row.data('index');
                
                // Update data-index attribute
                row.attr('data-index', newIndex);
                
                // Update all form field names and IDs in this row
                row.find('input, select, textarea').each(function() {
                    var element = $(this);
                    var name = element.attr('name');
                    var id = element.attr('id');
                    
                    if (name && name.includes('spb_holidays[')) {
                        // Replace old index with new index in name
                        var newName = name.replace(/spb_holidays\[\d+\]/, `spb_holidays[${newIndex}]`);
                        element.attr('name', newName);
                    }
                    
                    if (id) {
                        // Replace old index with new index in ID
                        var newId = id.replace(/_\d+(_|$)/, `_${newIndex}$1`);
                        element.attr('id', newId);
                        
                        // Update corresponding label if exists
                        var label = row.find(`label[for="${id}"]`);
                        if (label.length) {
                            label.attr('for', newId);
                        }
                    }
                    
                    // Update data-index for normal-rumus-toggle
                    if (element.hasClass('normal-rumus-toggle')) {
                        element.attr('data-index', newIndex);
                    }
                });
                
                // Update SO Rules button data-index
                row.find('.btn-show-so-rules').attr('data-index', newIndex);
            });
            
            // Update global index counter
            spbHolidayIndex = getNextIndex();
            
            // console.log('Reindexed all rows. New spbHolidayIndex:', spbHolidayIndex);
        }

        // Initialize index based on existing data
        let spbHolidayIndex = getNextIndex();

        // Toggle custom rules section for new configuration (not needed anymore)
        // Removed old new form handlers

        // Toggle custom rules for existing configurations - SIMPLIFIED WITH MODAL
        $(document).on('change', '#spb-holiday-container .normal-rumus-toggle', function() {
            var index = $(this).data('index');
            var detailButtonCell = $(this).closest('tr').find('.so-rules-column');
            
            if ($(this).is(':checked')) {
                // Normal rumus - hide button
                detailButtonCell.html('<span class="text-muted">-</span>');
            } else {
                // Custom rules - show button
                var tipeDoc = $(this).closest('tr').find('select[name*="[tipe_dokumen]"]').val() || 
                              $(this).closest('tr').find('input[name*="[tipe_dokumen]"]').val() || 'New';
                var periodSelect = $(this).closest('tr').find('select[name*="[period_id]"]');
                var periodText = periodSelect.find('option:selected').text() || 'All';
                
                detailButtonCell.html(`
                    <button type="button" class="btn btn-sm btn-info btn-show-so-rules" 
                        data-index="${index}" 
                        data-tipe="${tipeDoc}"
                        data-period="${periodText}"
                        title="Lihat SO Rules">
                        <i class="fas fa-cogs"></i>
                    </button>
                `);
            }
        });

        // Show SO Rules in Modal
        $(document).on('click', '.btn-show-so-rules', function() {
            var index  = $(this).data('index');
            var tipe   = $(this).data('tipe');
            var period = $(this).data('period');

            $('#soRulesTitle').text(tipe + ' — ' + period);
            // Build SO Rules table body
            var tbody = $('#soRulesTableBody');
            tbody.empty();
            
            var days = ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu', 'Minggu'];
            days.forEach(function(day) {
                // Get existing values from hidden inputs or create them
                var cekShipmentName = 'spb_holidays[' + index + '][rules][' + day + '][cek_shipment]';
                var rumusName = 'spb_holidays[' + index + '][rules][' + day + '][rumus]';
                
                var cekShipmentInput = $('input[name="' + cekShipmentName + '"]');
                var rumusInput = $('input[name="' + rumusName + '"]');
                
                var cekShipmentVal = cekShipmentInput.length ? cekShipmentInput.val() : '0';
                var rumusVal = rumusInput.length ? rumusInput.val() : '';
                
                // Create row
                var tr = $('<tr>');
                
                // Day column
                tr.append($('<td>').addClass('text-center align-middle').html(day));
                
                // Cek Shipment column
                var cekShipmentTd = $('<td>').addClass('text-center');
                var cekShipmentInputEl = $('<input>')
                    .attr('type', 'number')
                    .addClass('form-control text-center so-rule-input')
                    .attr('data-index', index)
                    .attr('data-day', day)
                    .attr('data-field', 'cek_shipment')
                    .attr('placeholder', '0')
                    .attr('min', '0')
                    .attr('max', '7') 
                    .val(cekShipmentVal);
                
                var arrivalLabel = $('<small>')
                    .addClass('cek-shipment-arrival d-block');
                
                if (cekShipmentVal && parseInt(cekShipmentVal) > 0) {
                    arrivalLabel.html('Kedatangan hari <b>' + getArrivalDayName(day, parseInt(cekShipmentVal))+'<b>');
                }else{
                    arrivalLabel.html('<b>PPIC Libur</b>');

                }
                
                cekShipmentTd.append(cekShipmentInputEl);
                cekShipmentTd.append(arrivalLabel);
                tr.append(cekShipmentTd);
                
                // Rumus column
                var rumusTd = $('<td>');
                var rumusInputEl = $('<input>')
                    .attr('type', 'text')
                    .addClass('form-control so-rule-input')
                    .attr('data-index', index)
                    .attr('data-day', day)
                    .attr('data-field', 'rumus')
                    .attr('placeholder', 'FC_1 + FC_2 - TSM_1')
                    .val(rumusVal);
                rumusTd.append(rumusInputEl);
                tr.append(rumusTd);
                
                tbody.append(tr);
            });
            
            $('#soRulesModal').modal('show');
        });
        
        // Update hidden inputs when modal inputs change
        $(document).on('input', '.so-rule-input', function() {
            var input = $(this);
            var index = input.data('index');
            var day = input.data('day');
            var field = input.data('field');
            var value = input.val();
            
            // Update arrival day label for cek_shipment field
            if (field === 'cek_shipment') {
                var offset = parseInt(value);
                if (!isNaN(offset)) {
                    if (offset < 0) { offset = 0; input.val(0); }
                    if (offset > 7) { offset = 7; input.val(7); }
                }
                var arrivalLabel = input.siblings('.cek-shipment-arrival');
                if (!isNaN(offset) && offset > 0) {
                    arrivalLabel.html('Kedatangan hari <b>' + getArrivalDayName(day, offset)+'</b>');
                } else {
                    arrivalLabel.html('');
                }
            }
            
            // Validasi khusus untuk field rumus
            if (field === 'rumus' && value) {
                if (!validateRumusInput(value)) {
                    input.addClass('is-invalid');
                    
                    // Remove existing error message
                    input.next('.invalid-feedback').remove();
                    
                    // Add error message
                    input.after('<div class="invalid-feedback d-block">Format tidak valid. Gunakan FC_1 sampai FC_7, TSM_1 sampai TSM_7, dan operator +, -, *, /</div>');
                    return; // Don't save invalid value
                } else {
                    input.removeClass('is-invalid');
                    input.next('.invalid-feedback').remove();
                }
            }
            
            // Find or create hidden input in the main form
            var inputName = 'spb_holidays[' + index + '][rules][' + day + '][' + field + ']';
            var existingInput = $('input[name="' + inputName + '"]');
            
            if (existingInput.length) {
                existingInput.val(value);
            } else {
                // Create hidden input in form
                $('#form-dc').append(
                    $('<input>')
                        .attr('type', 'hidden')
                        .attr('name', inputName)
                        .val(value)
                );
            }
            
            // console.log('Updated SO Rule:', inputName, '=', value);
        });

        // Hanya izinkan angka di cek_shipment (blokir +, -, e, E, ., dll)
        $(document).on('keydown', '.so-rule-input[data-field="cek_shipment"]', function(e) {
            var allowed = [8, 9, 37, 38, 39, 40, 46]; // backspace, tab, arrows, delete
            if (allowed.indexOf(e.which) !== -1) return;
            if (e.which >= 48 && e.which <= 57) return;  // angka baris atas
            if (e.which >= 96 && e.which <= 105) return; // numpad
            e.preventDefault();
        });

        $(document).on('paste', '.so-rule-input[data-field="cek_shipment"]', function(e) {
            var pasted = (e.originalEvent.clipboardData || window.clipboardData).getData('text');
            if (!/^\d+$/.test(pasted)) {
                e.preventDefault();
            }
        });
        
        // Prevent paste yang tidak valid di modal
        $(document).on('paste', '.so-rule-input[data-field="rumus"]', function(e) {
            var input = $(this);
            
            setTimeout(function() {
                var value = input.val();
                if (value && !validateRumusInput(value)) {
                    input.val('');
                    input.addClass('is-invalid');
                    Swal.fire('Error', 'Format rumus tidak valid. Gunakan FC_1 sampai FC_7, TSM_1 sampai TSM_7, dan operator +, -, *, /', 'error');
                }
            }, 10);
        });

        // Add empty SPB Holiday configuration row
        $('#add_empty_spb_holiday').on('click', function() {
            // Remove empty state row if exists
            $('#spb-holiday-container tbody tr').each(function() {
                if ($(this).find('td[colspan="7"]').length > 0 && $(this).find('.text-muted').length > 0) {
                    $(this).remove();
                }
            });
            
            // Get current index based on existing rows
            var currentIndex = getNextIndex();
            
            // Build periods options
            var periodsOptions = '<option value="">- Pilih -</option>';
            @foreach($variables['periods'] as $period)
            periodsOptions += '<option value="{{ $period->id }}">{{ $period->code }}</option>';
            @endforeach
            
            // Build days checkboxes
            var daysCheckboxes = '';
            var allDays = ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu', 'Minggu', 'Holiday'];
            for (var i = 0; i < allDays.length; i++) {
                var day = allDays[i];
                daysCheckboxes +=  
                    '<div class="form-check form-check-inline">' +
                        '<input class="form-check-input" type="checkbox" ' +
                            'name="spb_holidays[' + currentIndex + '][holiday_days][]" ' +
                            'value="' + day + '" ' +
                            'id="holiday_' + currentIndex + '_' + day + '">' +
                        '<label class="form-check-label small" for="holiday_' + currentIndex + '_' + day + '">' +
                            day +
                        '</label>' + 
                    '</div>';
            }
            
            // Create new empty row using jQuery - safer approach
            var newRow = $('<tr>', {
                'class': 'main-config-row',
                'data-index': currentIndex
            });
            
            // Add cells to row
            newRow.append(
                $('<td>', {'class': 'text-center'}).html(
                    '<button type="button" class="btn btn-sm btn-danger remove-spb-holiday" title="Hapus">' +
                        '<i class="fas fa-trash"></i>' +
                    '</button>'
                )
            ); 

            newRow.append(
                $('<td>').html(
                    '<select class="form-control " name="spb_holidays[' + currentIndex + '][tipe_dokumen]" required>' +
                        '<option value="">- Pilih -</option>' +
                        '<option value="PR">PR</option>' +
                        '<option value="DO">DO</option>' +
                    '</select>'
                )
            );
            
            newRow.append(
                $('<td>').html(
                    '<select class="form-control " name="spb_holidays[' + currentIndex + '][period_id]" required>' +
                        periodsOptions +
                    '</select>'
                )
            );

            newRow.append(
                $('<td>', {'class': 'text-center'}).html(
                    '<div class="form-check">' +
                        '<input class="form-check-input" type="checkbox" ' +
                            'name="spb_holidays[' + currentIndex + '][is_active]" value="1" ' +
                            'id="active_' + currentIndex + '" checked>' +
                    '</div>'
                )
            );
            
            newRow.append(
                $('<td>', {'class': 'text-center'}).html(
                    '<div class="form-check">' +
                        '<input class="form-check-input normal-rumus-toggle" type="checkbox" ' +
                            'name="spb_holidays[' + currentIndex + '][normal_rumus]" value="1" ' +
                            'id="normal_rumus_' + currentIndex + '" data-index="' + currentIndex + '" checked>' +
                    '</div>'
                )
            );

            newRow.append(
                $('<td>', {'class': 'text-center so-rules-column'}).html('<span class="text-muted">-</span>')
            );
            
            newRow.append(
                $('<td>').html(daysCheckboxes)
            );
             
            newRow.append(
                $('<td>').html(
                    '<textarea class="form-control " ' +
                        'name="spb_holidays[' + currentIndex + '][description]" ' +
                        'rows="1" placeholder="Deskripsi"></textarea>'
                )
            ); 
            
            // Insert new row at the end of tbody
            $('#spb-holiday-container tbody').append(newRow);
            
            // console.log('Added new empty configuration row with index:', currentIndex);
            
            // Update spbHolidayIndex for next addition
            spbHolidayIndex = getNextIndex();
            
            // Swal.fire('Success', 'Row konfigurasi baru telah ditambahkan. Silakan isi data yang diperlukan.', 'success');
        });

        // Validasi duplikasi kombinasi tipe_dokumen + period_id
        function checkDuplicateSpbHoliday(changedRow) {
            var changedTipe = changedRow.find('select[name*="[tipe_dokumen]"]').val();
            var changedPeriod = changedRow.find('select[name*="[period_id]"]').val();

            // Belum lengkap, skip
            if (!changedTipe || !changedPeriod) return;

            var isDuplicate = false;
            $('#spb-holiday-container tbody tr.main-config-row').each(function() {
                if ($(this).is(changedRow)) return; // skip row sendiri

                // Baca dari select (row baru) atau hidden input (row existing)
                var tipe = $(this).find('select[name*="[tipe_dokumen]"]').val()
                        || $(this).find('input[name*="[tipe_dokumen]"]').val();
                var period = $(this).find('select[name*="[period_id]"]').val()
                          || $(this).find('input[name*="[period_id]"]').val();

                if (tipe === changedTipe && period === changedPeriod) {
                    isDuplicate = true;
                    return false; // break
                }
            });

            if (isDuplicate) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Kombinasi Sudah Ada',
                    text: 'Kombinasi Tipe Dokumen "' + changedTipe + '" dan Periode yang dipilih sudah ada. Silakan pilih kombinasi yang berbeda.',
                    confirmButtonColor: '#d33'
                });

                // Reset field yang baru diubah
                changedRow.find('select[name*="[tipe_dokumen]"]').val('');
                changedRow.find('select[name*="[period_id]"]').val('');
            }
        }

        $(document).on('change', '.main-config-row select[name*="[tipe_dokumen]"], .main-config-row select[name*="[period_id]"]', function() {
            checkDuplicateSpbHoliday($(this).closest('tr'));
        });

        // Remove SPB Holiday configuration
        $(document).on('click', '.remove-spb-holiday', function() {
            var row = $(this).closest('tr');
            var tipeDoc = row.find('input[name*="[tipe_dokumen]"]').val();
            var periodText = row.find('.badge-info').text();
            
            Swal.fire({
                title: 'Konfirmasi Hapus',
                text: `Apakah Anda yakin ingin menghapus konfigurasi "${tipeDoc} - ${periodText}"?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, Hapus',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    // console.log('Removing configuration row');
                    row.remove();
                    
                    // Reindex all remaining rows to maintain sequential indexing
                    reindexAllRows();
                    
                    // Add empty state row if no configurations left
                    var remainingRows = $('#spb-holiday-container tbody tr:not([id*="custom_rules"])').length;
                    // console.log('Remaining rows after removal:', remainingRows);
                    
                    if (remainingRows === 0) {
                        $('#spb-holiday-container tbody').append(`
                            <tr>
                                <td colspan="7" class="text-center text-muted">
                                    <i class="fas fa-info-circle mr-2"></i>
                                    Belum ada konfigurasi SPB Holiday. Gunakan tombol di atas untuk menambahkan konfigurasi hari libur purchasing.
                                </td>
                            </tr>
                        `);
                    }
                    
                    Swal.fire('Terhapus!', 'Konfigurasi berhasil dihapus', 'success');
                }
            });
        });

        // Hitung nama hari kedatangan berdasarkan hari SO dan offset cek_shipment
        function getArrivalDayName(soDay, offset) {
            var days = ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu', 'Minggu'];
            var soIndex = days.indexOf(soDay);
            if (soIndex === -1) return '';
            var arrivalIndex = (soIndex + offset) % 7;
            return days[arrivalIndex];
        }

        // Validasi input rumus - hanya allow FC_1-FC_7, TSM_1-TSM_7, dan operator matematika
        function validateRumusInput(input) {
            // Pattern yang diizinkan: FC_1 sampai FC_7, TSM_1 sampai TSM_7, operator +, -, *, /, spasi, dan tanda kurung
            var allowedPattern = /^[FC_1-9TSM_0-9\+\-\*\/\(\)\s]*$/;
            
            // Cek apakah input mengandung karakter yang tidak diizinkan
            if (!allowedPattern.test(input)) {
                return false;
            }
            
            // Validasi lebih detail untuk format FC_X dan TSM_X
            var tokens = input.replace(/[\+\-\*\/\(\)\s]/g, ' ').split(/\s+/).filter(token => token.length > 0);
            
            for (var i = 0; i < tokens.length; i++) {
                var token = tokens[i];
                
                // Skip jika token kosong
                if (!token) continue;
                
                // Cek format FC_X (X = 1-7)
                if (token.startsWith('FC_')) {
                    var fcNumber = parseInt(token.substring(3));
                    if (isNaN(fcNumber) || fcNumber < 1 || fcNumber > 7) {
                        return false;
                    }
                }
                // Cek format TSM_X (X = 1-7)
                else if (token.startsWith('TSM_')) {
                    var tsmNumber = parseInt(token.substring(4));
                    if (isNaN(tsmNumber) || tsmNumber < 1 || tsmNumber > 7) {
                        return false;
                    }
                }
                // Jika bukan FC_ atau TSM_, maka tidak valid
                else {
                    return false;
                }
            }
            
            return true;
        }

        // Apply validasi ke semua input rumus - termasuk yang di modal
        $(document).on('input', '.so-rule-input[data-field="rumus"]', function() {
            var input = $(this);
            var value = input.val();
            
            // Jika kosong, allow
            if (!value) {
                input.removeClass('is-invalid');
                input.siblings('.invalid-feedback').remove();
                return;
            }
            
            // Validasi format
            if (!validateRumusInput(value)) {
                input.addClass('is-invalid');
                
                // Remove existing error message
                input.siblings('.invalid-feedback').remove();
                
                // Add error message after input
                input.parent().append('<div class="invalid-feedback d-block mt-1"><i class="fas fa-exclamation-circle mr-1"></i>Format tidak valid. Gunakan FC_1 sampai FC_7, TSM_1 sampai TSM_7, dan operator +, -, *, /</div>');
            } else {
                input.removeClass('is-invalid');
                input.siblings('.invalid-feedback').remove();
            }
        });

        // Prevent paste yang tidak valid di modal
        $(document).on('paste', '.so-rule-input[data-field="rumus"]', function(e) {
            var input = $(this);
            
            setTimeout(function() {
                var value = input.val();
                if (value && !validateRumusInput(value)) {
                    input.val('');
                    Swal.fire({
                        icon: 'error',
                        title: 'Format Tidak Valid',
                        text: 'Format rumus tidak valid. Gunakan FC_1 sampai FC_7, TSM_1 sampai TSM_7, dan operator +, -, *, /',
                        confirmButtonColor: '#d33'
                    });
                }
            }, 10);
        });

        // Initialize existing configurations on page load
        $(document).ready(function() {
            // Debug: Check existing rules data
            @if($data->id && isset($data->spbHolidays))
                @php $debugIndex = 0; @endphp
                @foreach($data->spbHolidays->where('delete_flag', false) as $holiday)
                    @if($holiday->rules && $holiday->rules->count() > 0)
                        // console.log('Holiday {{ $debugIndex }} has {{ $holiday->rules->count() }} rules');
                        
                        // Create hidden inputs for existing rules data
                        @foreach($holiday->rules as $rule)
                            // console.log('  Creating hidden inputs for: day={{ $rule->day_name }}, cek_shipment={{ $rule->cek_shipment }}, rumus={{ $rule->rumus }}');
                            
                            // Create hidden input for cek_shipment
                            $('#form-dc').append(
                                '<input type="hidden" name="spb_holidays[{{ $debugIndex }}][rules][{{ $rule->day_name }}][cek_shipment]" value="{{ $rule->cek_shipment }}">'
                            );
                            
                            // Create hidden input for rumus (only if not null)
                            @if($rule->rumus)
                                $('#form-dc').append(
                                    '<input type="hidden" name="spb_holidays[{{ $debugIndex }}][rules][{{ $rule->day_name }}][rumus]" value="{{ $rule->rumus }}">'
                                );
                            @endif
                        @endforeach
                    @endif
                    @php $debugIndex++; @endphp
                @endforeach
            @endif
            
            $('.normal-rumus-toggle').each(function() {
                var index = $(this).data('index');
                var detailButtonCell = $(this).closest('tr').find('.so-rules-column');

                if (!$(this).is(':checked')) {
                    // Button sudah di-render Blade dengan data-period yang benar — jangan replace
                    // Hanya pastikan button ada, kalau belum ada (row baru) baru buat
                    if (!detailButtonCell.find('.btn-show-so-rules').length) {
                        var tipeDoc = $(this).closest('tr').find('input[name*="[tipe_dokumen]"]').val() || 'New';
                        var periodText = $(this).closest('tr').find('td:eq(1)').text().trim() || 'All';
                        detailButtonCell.html(`
                            <button type="button" class="btn btn-sm btn-info btn-show-so-rules"
                                data-index="${index}"
                                data-tipe="${tipeDoc}"
                                data-period="${periodText}"
                                title="Lihat SO Rules">
                                <i class="fas fa-cogs"></i>
                            </button>
                        `);
                    }
                } else {
                    detailButtonCell.html('<span class="text-muted">-</span>');
                }
            });
        });
    });
</script>
@endsection