@extends('layouts.app')
@section('title')
    GENERAL SETTINGS
@endsection
@section('content')
    <div class="row gx-3">
        <div class="col-xxl-12">
            <div class="card">
                <div class="card-body">
                    <!-- Custom tabs start -->
                    <div class="custom-tabs-container">
                        <!-- Nav tabs start -->
                        <ul class="nav nav-tabs" id="customTab2" role="tablist">
                            @php
                                $activeTab = '';
                                if (auth()->user()->can('General Settings MRF Limit')) {
                                    $activeTab = 'oneB';
                                } elseif (auth()->user()->can('General Settings PO Important Note')) {
                                    $activeTab = 'oneA';
                                } elseif (auth()->user()->can('General Settings Spec Break')) {
                                    $activeTab = 'fourA';
                                } elseif (auth()->user()->can('General Settings Initial Ref No')) {
                                    $activeTab = 'fourB';
                                } elseif (auth()->user()->can('General Settings PR Approval')) {
                                    $activeTab = 'fourC';
                                }

                                if ($active) {
                                    if ($active == 1) {
                                        $activeTab = 'oneB';
                                    } elseif ($active == 2) {
                                        $activeTab = 'oneA';
                                    } elseif ($active == 3) {
                                        $activeTab = 'fourA';
                                    } elseif ($active == 4) {
                                        $activeTab = 'fourB';
                                    } elseif ($active == 5) {
                                        $activeTab = 'fourC';
                                    }
                                }
                            @endphp
                            @can('General Settings MRF Limit')
                                <li class="nav-item @if ($activeTab === 'oneB') active @endif" role="presentation">
                                    <a class="nav-link @if ($activeTab === 'oneB') active @endif" id="tab-oneB"
                                        data-bs-toggle="tab" href="#oneB" role="tab" aria-controls="oneB"
                                        aria-selected="true"><i class="bi bi-percent me-2"></i> MRF
                                        Limit</a>
                                </li>
                            @endcan
                            @can('General Settings Spec Break')
                                <li class="nav-item @if ($activeTab === 'fourA') active @endif" role="presentation">
                                    <a class="nav-link @if ($activeTab === 'fourA') active @endif" id="tab-fourA"
                                        data-bs-toggle="tab" href="#fourA" role="tab" aria-controls="fourA"
                                        aria-selected="false"><i class="bi bi-exclamation-triangle me-2"></i>Spec Break</a>
                                </li>
                            @endcan
                            @can('General Settings Initial Ref No')
                                <li class="nav-item @if ($activeTab === 'fourB') active @endif" role="presentation">
                                    <a class="nav-link @if ($activeTab === 'fourB') active @endif" id="tab-fourB"
                                        data-bs-toggle="tab" href="#fourB" role="tab" aria-controls="fourB"
                                        aria-selected="false"><i class="bi bi-file-earmark-code me-2"></i>Initial Ref No</a>
                                </li>
                            @endcan
                            @can('General Settings PR Approval')
                                <li class="nav-item @if ($activeTab === 'fourC') active @endif" role="presentation">
                                    <a class="nav-link @if ($activeTab === 'fourC') active @endif" id="tab-fourC"
                                        data-bs-toggle="tab" href="#fourC" role="tab" aria-controls="fourC"
                                        aria-selected="false"><i class="bi bi-check-circle me-2"></i>PR
                                        Approval</a>
                                </li>
                            @endcan
                        </ul>
                        <!-- Nav tabs end -->

                        <!-- Tab content start -->
                        <div class="tab-content">
                            <!-- SST Percentage Tab Content -->
                            @can('General Settings MRF Limit')
                                <div class="tab-pane fade @if ($activeTab === 'oneB') active show @endif" id="oneB"
                                    role="tabpanel" aria-labelledby="tab-oneB">
                                    <div class="row gx-3">
                                        <div class="col-sm-12 col-12">
                                            <div class="card border mb-3">
                                                <div class="card-body">
                                                    <!-- SST Percentage Form -->
                                                    <form action="{{ route('general_setting.updateSST') }}" method="POST">
                                                        @csrf
                                                        <div class="mb-3 col-md-3">
                                                            <label for="sstPercentage" class="form-label">MRF Limit</label>
                                                            <div class="input-group">
                                                                <input type="number" class="form-control  rounded-4" id="sstPercentage"
                                                                    name="sst_percentage"
                                                                    value="{{ $sstPercentages->sst_percentage }}"
                                                                    placeholder="Enter SST Percentage">
                                                            </div>
                                                        </div>
                                                        <div class="d-flex gap-2 justify-content-end">
                                                            <button type="submit" class="btn btn-primary">Update</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endcan
                            @can('General Settings PO Important Note')
                                <!-- PO Important Note Tab Content -->
                                <div class="tab-pane fade @if ($activeTab === 'oneA') active show @endif" id="oneA"
                                    role="tabpanel" aria-labelledby="tab-oneA">
                                    <div class="row gx-3">
                                        <div class="col-sm-12 col-12">
                                            <div class="card border mb-3">
                                                <div class="card-body">
                                                    <!-- PO Important Note Form -->
                                                    <form action="{{ route('general_setting.updatePO') }}" method="POST">
                                                        @csrf
                                                        <div class="mb-3 col-md-6">
                                                            <label for="poNote" class="form-label">PO Important Note</label>
                                                            <div class="input-group">
                                                                <span class="input-group-text">
                                                                    <i class="bi bi-journal-text"></i>
                                                                </span>
                                                                <textarea class="form-control" id="poNote" name="po_note" placeholder="Enter PO Important Note">{{ $poimportantnotes->po_note }}</textarea>
                                                            </div>
                                                        </div>
                                                        <div class="d-flex gap-2 justify-content-end">
                                                            <button type="submit" class="btn btn-primary">Update</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endcan
                            @can('General Settings Spec Break')
                                <!-- Spec Break Tab Content -->
                                <div class="tab-pane fade @if ($activeTab === 'fourA') active show @endif"
                                    id="fourA" role="tabpanel" aria-labelledby="tab-fourA">
                                    <div class="row gx-3">
                                        <div class="col-sm-12 col-12">
                                            <div class="card border mb-3">
                                                <div class="card-body">
                                                    <!-- Spec Break Form -->
                                                    <form action="{{ route('general_setting.updateSB') }}" method="POST">
                                                        @csrf
                                                        <h3>Spec Break</h3>
                                                        <div class="row">
                                                            <!-- Normal Hour Section -->
                                                            <div class="col-md-4 d-flex flex-column align-items-start">
                                                                <label for="normalHour" class="form-label mb-2">Normal Hour</label> <!-- Label above the input with margin-bottom -->
                                                                <div class="input-group">
                                                                    <span class="input-group-text" style="border-radius: 10px 0 0 10px;"> <!-- Custom border-radius for the icon -->
                                                                        <i class="bi bi-clock"></i> <!-- You can use a different icon for Normal Hour if needed -->
                                                                    </span>
                                                                    <input type="number" class="form-control" id="normalHour" name="normal_hour" placeholder="Enter Normal Hour" value="{{ $specbreaks->normal_hour }}" style="border-radius: 0 10px 10px 0;"> <!-- Custom border-radius for the input -->
                                                                </div>
                                                            </div>

                                                            <!-- OT Hour Section -->
                                                            <div class="col-md-4 d-flex flex-column align-items-start">
                                                                <label for="otHour" class="form-label mb-2">OT Hour</label> <!-- Label above the input with margin-bottom -->
                                                                <div class="input-group">
                                                                    <span class="input-group-text" style="border-radius: 10px 0 0 10px;"> <!-- Custom border-radius for the icon -->
                                                                        <i class="bi bi-clock-history"></i>
                                                                    </span>
                                                                    <input type="number" class="form-control" id="otHour" name="ot_hour" placeholder="Enter OT Hour" value="{{ $specbreaks->ot_hour }}" style="border-radius: 0 10px 10px 0;"> <!-- Custom border-radius for the input -->
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="d-flex gap-2 justify-content-end">
                                                            <button type="submit" class="btn btn-primary">Update</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endcan
                            @can('General Settings Initial Ref No')
                                <!-- Initial Ref No Tab Content -->
                                <div class="tab-pane fade @if ($activeTab === 'fourB') active show @endif"
                                    id="fourB" role="tabpanel" aria-labelledby="tab-fourB">
                                    <div class="row gx-3">
                                        <div class="col-sm-12 col-12">
                                            <div class="card border mb-3">
                                            @if(Auth::user()->id == 1)
                                                <div class="card-header d-flex justify-content-end">
                                                    <button type="button" class="btn btn-primary" id="addRow">+
                                                        Add Row</button>
                                                </div>
                                            @endif
                                                <div class="card-body">
                                                    <!-- Initial Ref No Form -->
                                                    <form id="initialFrom" action="{{ route('general_setting.updateRefNo') }}"
                                                        method="POST">
                                                        @csrf
                                                        <div class="table-responsive">
                                                            <table class="table table-bordered w-100" id="initialRefNoTable">
                                                                <thead>
                                                                    <tr>
                                                                        <th>No.</th>
                                                                        <th>Ref No. (by Module)</th>
                                                                        <th>Running No.</th>
                                                                        <th>Sample</th>
                                                                        @if(Auth::user()->id == 1)
                                                                            <th>Action</th>
                                                                        @endif
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    @foreach ($initialRefNo as $initialRef)
                                                                        <tr>
                                                                            <td>{{ $loop->iteration }}</td>

                                                                            <td><input
                                                                                    name="initial[{{ $loop->iteration }}][screen]"
                                                                                    type="text" class="form-control ref-no screen"
                                                                                    value="{{ $initialRef->screen }}" readonly
                                                                                    onchange="updateSample(this)">
                                                                            </td>
                                                                            <td><input
                                                                                    name="initial[{{ $loop->iteration }}][running_no]"
                                                                                    type="number"
                                                                                    class="form-control running-no"
                                                                                    value="{{ $initialRef->running_no }}"
                                                                                    onchange="updateSample(this)">
                                                                            </td>
                                                                            <td><input type="text"
                                                                                    name="initial[{{ $loop->iteration }}][sample]"
                                                                                    class="form-control sample"
                                                                                    value="{{ $initialRef->sample }}" readonly
                                                                                    placeholder="Sample"></td>
                                                                            @if(Auth::user()->id == 1)
                                                                                <td><button type="button"
                                                                                        class="btn btn-sm btn-danger remove-row"><i
                                                                                            class="bi bi-trash"></i></button>
                                                                                </td>
                                                                            @endif
                                                                        </tr>
                                                                    @endforeach
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                        <div class="d-flex gap-2 justify-content-end mt-3">
                                                            <button type="submit" class="btn btn-primary">Update</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endcan
                            @can('General Settings PR Approval')
                                <!-- PR Approval Tab Content -->
                                <div class="tab-pane fade @if ($activeTab === 'fourC') active show @endif"
                                    id="fourC" role="tabpanel" aria-labelledby="tab-fourC">


                                    <div class="row gx-3">
                                        <div class="col-sm-12 col-12">
                                            <div class="card border mb-3">
                                                @if(Auth::user()->id == 1)
                                                    <div class="card-header d-flex justify-content-end">
                                                        <button type="button" class="btn btn-primary" id="addRowPR">+
                                                            Add Row</button>
                                                    </div>
                                                @endif
                                                <div class="card-body">
                                                    <!-- PR Approval Form -->
                                                    <form id="PRFrom" action="{{ route('general_setting.updatePR') }}"
                                                        method="POST">
                                                        @csrf
                                                        <div class="table-responsive">
                                                            <table class="table table-bordered w-100" id="PRTable">
                                                                <thead>
                                                                    <tr>
                                                                        <th>No.</th>
                                                                        <th>Designation</th>
                                                                        <th>Department</th>
                                                                        <th>Less/more than</th>
                                                                        <th>Amount (RM)</th>
                                                                        <th>Action</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    @foreach ($prapprovals as $prapproval)
                                                                        <tr>
                                                                            <td>{{ $loop->iteration }}</td>
                                                                            <td>
                                                                                <select name="pr[{{ $loop->iteration }}][designation]" class="form-control w-100 designation"
                                                                                    onchange="updateDropdownDesignationOptions();">
                                                                                    @foreach ($designations as $designation)
                                                                                        <option value="{{ $designation->id }}"
                                                                                            @selected($prapproval->designation_id == $designation->id)>
                                                                                            {{ $designation->name }}
                                                                                        </option>
                                                                                    @endforeach
                                                                                </select>
                                                                            </td>

                                                                            <td>
                                                                                <select
                                                                                    name="pr[{{ $loop->iteration }}][department]"
                                                                                    class="form-control w-100 department"
                                                                                    onchange="updateDropdownDepartmentOptions();">
                                                                                    @foreach ($departments as $department)
                                                                                        <option value="{{ $department->id }}"
                                                                                            @selected($prapproval->department_id == $department->id)>
                                                                                            {{ $department->name }}
                                                                                        </option>
                                                                                    @endforeach
                                                                                </select>
                                                                            </td>
                                                                            <td><select
                                                                                    name="pr[{{ $loop->iteration }}][operator]"
                                                                                    class="form-control w-100 operator">
                                                                                    <option value="<"
                                                                                        @selected($prapproval->operator == '<')><</option>
                                                                                    <option value=">"
                                                                                        @selected($prapproval->operator == '>')>></option>
                                                                                    <option value="="
                                                                                        @selected($prapproval->operator == '=')>=</option>
                                                                                </select>
                                                                            </td>
                                                                            <td><input
                                                                                    name="pr[{{ $loop->iteration }}][amount]"
                                                                                    type="number" class="form-control amount"
                                                                                    value="{{ $prapproval->amount }}"><span
                                                                                    class="d-none amount1"></span>
                                                                            <td>
                                                                                @if(Auth::user()->id == 1)
                                                                                    <button type="button" class="btn btn-sm btn-danger remove-row-pr"><i class="bi bi-trash"></i></button>
                                                                                @else
                                                                                    <!-- Placeholder for consistency -->
                                                                                    &nbsp;
                                                                                @endif
                                                                            </td>
                                                                            
                                                                        </tr>
                                                                    @endforeach
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                        <div class="d-flex gap-2 justify-content-end mt-3">
                                                            <button type="submit" class="btn btn-primary">Update</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            @endcan
                        </div>
                        <!-- Tab content end -->
                    </div>
                    <!-- Custom tabs end -->
                </div>
            </div>
        </div>
    </div>
    <script>
        var table;
        var tablePR;
        let options = '';
        let designationOptions = '';
        $(document).ready(function() {




            let desigOptions = @json($designations);
            let departOptions = @json($departments);
            table = $('#initialRefNoTable').DataTable({
                columnDefs: [{
                        width: '10%',
                        targets: 0
                    },
                    {
                        width: '10%',
                        targets: -1
                    }
                ],
                lengthMenu: [ [25, 50, 100], [25, 50, 100] ]
            });

            tablePR = $('#PRTable').DataTable({
                columnDefs: [{
                        width: '10%',
                        targets: 0
                    },
                    {
                        width: '10%',
                        targets: -1
                    }
                ],
                lengthMenu: [ [desigOptions.length], [desigOptions.length] ]
            });

            options = [
                {
                    value: 'Order',
                    text: 'Order'
                },
                {
                    value: 'Purchase Planning',
                    text: 'Purchase Planning'
                },
                {
                    value: 'Purchase Requisition',
                    text: 'Purchase Requisition'
                },
                {
                    value: 'Purchase Order',
                    text: 'Purchase Order'
                },
                {
                    value: 'Daily Production Planning',
                    text: 'Daily Production Planning'
                },
                {
                    value: 'MRF',
                    text: 'MRF'
                },
                {
                    value: 'Material Issue & Receive',
                    text: 'Material Issue & Receive'
                },
                {
                    value: 'Good Receiving',
                    text: 'Good Receiving'
                },
                {
                    value: 'Transfer Request',
                    text: 'Transfer Request'
                },

                {
                    value: 'Stock Relocation',
                    text: 'Stock Relocation'
                },
                {
                    value: 'Electrical Continuity Test',
                    text: 'Electrical Continuity Test'
                },
                {
                    value: 'Final Checking',
                    text: 'Final Checking'
                },

                {
                    value: 'Outgoing',
                    text: 'Outgoing'
                },

            ];

            var availableOptions = options.filter(function(option) {
                    return !isOptionSelected(option.value);
                });

            designationOptions = desigOptions.map(function(value) {
                return {
                    value: value.id,
                    text: value.name
                };
            });

            departmentOptions = departOptions.map(function(value) {
                return {
                    value: value.id,
                    text: value.name
                };
            });

            updateDropdownOptions();
            updateDropdownDesignationOptions();

            // Add row functionality
            $('#addRow').on('click', function() {
                let popUp = false;
                var availableOptions = options.filter(function(option) {
                    return !isOptionSelected(option.value);
                });

                if (availableOptions.length === 0) {
                    popUp = true;
                }

                if (popUp) {
                    $('.tab-pane.active').find('.card-body').prepend(`
                        <div class="alert border-warning alert-dismissible fade show text-warning" role="alert">
                        <b>Warning!</b> Can't add Row (no more screens).
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    `);
                    return;
                }

                if (availableOptions.length === 1) {
                    popUp = true;
                }

                table.row.add([
                    table.rows().data().length + 1,
                    createDropdown(table.rows().data().length + 1),
                    `<input type="number" name="initial[${table.rows().data().length + 1}][running_no]" class="form-control running-no" value="1" placeholder="Running No." onchange="updateSample(this)">`,
                    `<input type="text" name="initial[${table.rows().data().length + 1}][sample]" class="form-control sample" value="" readonly placeholder="Sample">`,
                    '<button type="button" class="btn btn-sm btn-danger remove-row"><i class="bi bi-trash"></i></button>'
                ]).draw(false).node();
                updateDropdownOptions();
            });

            // Add row functionality PR
            $('#addRowPR').on('click', function() {
                let popUpPR = false;
                var availableOptionsPR = designationOptions.filter(function(option1) {
                    return !isOptionSelectedDesignation(option1.value);
                });

                if (availableOptionsPR.length === 0) {
                    popUpPR = true;
                }

                if (popUpPR) {
                    $('.tab-pane.active').find('.card-body').prepend(`
                        <div class="alert border-warning alert-dismissible fade show text-warning" role="alert">
                        <b>Warning!</b> Can't add Row (no more designations).
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    `);
                    return;
                }

                if (availableOptionsPR.length === 1) {
                    popUpPR = true;
                }

                tablePR.row.add([
                    tablePR.rows().data().length + 1,
                    createDropdownDesignation(tablePR.rows().data().length + 1),
                    createDropdownDepartment(tablePR.rows().data().length + 1),
                    `<select name="pr[${tablePR.rows().data().length + 1}][operator]" class="form-control w-100 operator">
                        <option value="<"><</option>
                        <option value=">">></option>
                        <option value="=">=</option>
                    </select>`,
                    `<input type="number" name="pr[${tablePR.rows().data().length + 1}][amount]" class="form-control amount" value="" onchange="updateAmount(this)" placeholder="Amount"><span class="d-none amount1"></span>`,
                    '<button type="button" class="btn btn-sm btn-danger remove-row-pr"><i class="bi bi-trash"></i></button>'
                ]).draw(false).node();
                updateDropdownDesignationOptions();
            });

            // Remove row functionality
            $('#initialRefNoTable tbody').on('click', '.remove-row', function() {
                table.row($(this).parents('tr')).remove().draw(false);
                updateDropdownOptions();
                resetSerialNumbers();
            });

            // Remove PR row functionality
            $('#PRTable tbody').on('click', '.remove-row-pr', function() {
                tablePR.row($(this).parents('tr')).remove().draw(false);
                updateDropdownDesignationOptions();
                resetDesignationSerialNumbers();
            });
        });

        // add update sample functionality
        function updateSample(element) {
            var row = $(element).closest('tr');
            var screenValue = row.find('.screen option:selected').val();
            if (screenValue == undefined) {
                screenValue = row.find('.screen').val();
            }
var refNo = '';

switch (screenValue) {
    case 'Order':
        refNo = 'OR';
        break;
    case 'Purchase Planning':
        refNo = 'PP';
        break;
    case 'Purchase Requisition':
        refNo = 'PR';
        break;
    case 'Purchase Order':
        refNo = 'PO';
        break;
    case 'Daily Production Planning':
        refNo = 'DPP';
        break;
    case 'Production Order':
        refNo = 'PO';
        break;
    case 'MRF':
        refNo = 'MRF';
        break;
    case 'Material Issue & Receive':
        refNo = 'MRFIR';
        break;
    case 'Good Receiving':
        refNo = 'GR';
        break;
    case 'Transfer Request':
        refNo = 'TR';
        break;
    case 'Stock Relocation':
        refNo = 'SR';
        break;
        case 'Electrical Continuity Test':
        refNo = 'ECT';
        break;
        case 'Final Checking':
        refNo = 'FC';
        break;
    case 'Outgoing':
        refNo = 'O';
        break;
    default:
        refNo = '';
        break;
}
            var runningNo = row.find('.running-no').val();
            var currentYear = new Date().getFullYear();
            var currentMonth = (new Date().getMonth() + 1).toString().padStart(2, '0');

            var sample = refNo + '/' + currentYear + '/' + currentMonth + '/' + runningNo ;
            row.find('.sample').val(sample);
            row.find('.sample1').text(sample);
        }

        // add update amount functionality
        function updateAmount(element) {
            var row = $(element).closest('tr');
            var val = $(element).val();
            row.find('.amount1').text(val);
        }

        // add reset serail no functionality
        function resetSerialNumbers() {
            if ($('#initialRefNoTable tbody tr:first').find('td:first').text() != 'No data available in table') {
                $('#initialRefNoTable tbody tr').each(function(index) {
                    $(this).find('td:first').text(index + 1);
                });
            }
        }

        // add designation reset serail no functionality
        function resetDesignationSerialNumbers() {
            $('#PRTable tbody tr').each(function(index) {
                $(this).find('td:first').text(index + 1);
            });
        }

        // add update options functionality
        function createDropdown(loop) {
            var select = $(
                '<select class="form-control screen" name="initial[' + loop +
                '][screen]" onchange="updateSample(this); updateDropdownOptions();"></select>');
            var selectedValues = [];
            // Get all currently selected values
            $('#initialRefNoTable .screen').each(function() {
                selectedValues.push($(this).val());
            });

            // Append options excluding those that are already selected
            options.forEach(function(option) {
                if (!selectedValues.includes(option.value)) {
                    select.append($('<option>', {
                        value: option.value,
                        text: option.text
                    }));
                }
            });
            return select.prop('outerHTML');
        }

        // add create designation options functionality
        function createDropdownDesignation(loop_designation) {
            var select1 = $(
                '<select class="form-control designation" name="pr[' + loop_designation +
                '][designation]" onchange="updateDropdownDesignationOptions();"></select>');
            var selectedValues1 = [];
            // Get all currently selected values
            $('#PRTable .designation').each(function() {
                selectedValues1.push($(this).val());
            });

            // Append options excluding those that are already selected
            designationOptions.forEach(function(option1) {
                if (!selectedValues1.includes(option1.value.toString())) {
                    select1.append($('<option>', {
                        value: option1.value,
                        text: option1.text
                    }));
                }
            });
            return select1.prop('outerHTML');
        }

          // add create designation options functionality
          function createDropdownDepartment(loop_department) {
            var select1 = $(
                '<select class="form-control department" name="pr[' + loop_department +
                '][department]" onchange="updateDropdowndepartmentOptions();"></select>');
            var selectedValues1 = [];
            // Get all currently selected values
            $('#PRTable .department').each(function() {
                selectedValues1.push($(this).val());
            });

            // Append options excluding those that are already selected
            departmentOptions.forEach(function(option1) {
                if (!selectedValues1.includes(option1.value.toString())) {
                    select1.append($('<option>', {
                        value: option1.value,
                        text: option1.text
                    }));
                }
            });
            return select1.prop('outerHTML');
        }



        // add update options functionality
        function updateDropdownOptions() {
            var selectedValues = [];
            $('#initialRefNoTable .screen').each(function() {
                selectedValues.push($(this).val());
            });

            $('#initialRefNoTable .screen').each(function() {
                var currentValue = $(this).val();
                $(this).empty();
                options.forEach(function(option) {
                    if (!selectedValues.includes(option.value) || option.value === currentValue) {
                        $(this).append($('<option>', {
                            value: option.value,
                            text: option.text
                        }));
                    }
                }, this);
                $(this).val(currentValue);
            });
        }

        // add update designation options functionality
        function updateDropdownDesignationOptions() {
            var selectedValues1 = [];
            $('#PRTable .designation').each(function() {
                selectedValues1.push($(this).val());
            });

            $('#PRTable .designation').each(function() {
                var currentValue1 = $(this).val();
                $(this).empty();
                designationOptions.forEach(function(option1) {
                    // Ensure comparison is consistent (both values should be strings)
                    if (!selectedValues1.includes(option1.value.toString()) || option1.value.toString() ===
                        currentValue1) {
                        $(this).append($('<option>', {
                            value: option1.value,
                            text: option1.text
                        }));
                    }
                }, this);
                $(this).val(currentValue1);
            });
        }

        // add selected option functionality
        function isOptionSelected(value) {
            var selected = false;
            $('#initialRefNoTable .screen').each(function() {
                if ($(this).val() === value) {
                    selected = true;
                    return false; // break out of each loop
                }
            });
            return selected;
        }

        // add selected designation option functionality
        function isOptionSelectedDesignation(value) {
            var selected = false;
            $('#PRTable .designation').each(function() {
                if ($(this).val() === value.toString()) {
                    selected = true;
                    return false; // break out of each loop
                }
            });
            return selected;
        }

        // Form submit event
        $('#initialFrom').on('submit', function(event) {
            var isValid = true;
            $('#initialRefNoTable .ref-no, #initialRefNoTable .running-no').each(function() {
                if ($(this).val() === '') {
                    isValid = false;
                    return false; // break out of each loop
                }
            });

            if (!isValid) {
                event.preventDefault();
                $('.tab-pane.active').find('.card-body').prepend(`
                <div class="alert border-warning alert-dismissible fade show text-warning" role="alert">
                    <b>Warning!</b> Please fill in all Ref No. and Running No. fields.
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            `);
            }
        });

        // PR Form submit event
        $('#PRFrom').on('submit', function(event) {
            var isValid = true;
            $('#PRTable .amount, #PRTable .designation').each(function() {
                if ($(this).val() === '') {
                    isValid = false;
                    return false; // break out of each loop
                }
            });

            if (!isValid) {
                event.preventDefault();
                $('.tab-pane.active').find('.card-body').prepend(`
                <div class="alert border-warning alert-dismissible fade show text-warning" role="alert">
                    <b>Warning!</b> Please fill in all Amount (RM) and Designation fields.
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            `);
            }
        });
    </script>
@endsection