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

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

    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <button class="btn btn-secondary mb-0" onclick="history.back()">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </button>
                        @if ($authorize->edit == '1')
                            <button type="button" class="btn btn-primary mb-0" id="btn-simpan">
                                <i class="fas fa-floppy-disk me-1"></i>
                                <span class="font-weight-bold">Simpan</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <p class="text-uppercase text-sm mb-2">Form Movement Asset</p>
                        <hr class="horizontal dark mt-0">

                        <form role="form" method="POST" id="movement-form" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" id="movement_id" name="movement_id" value="{{ encrypt($movement->id) }}">
                            <input type="hidden" name="kategori" value="{{ $movement->kategori }}">

                            <div class="row g-3">
                                <div class="col-lg-12">
                                    <div class="row g-2 align-items-center">
                                        <div class="col-md-4">
                                            <label class="form-label mb-0">ID</label>
                                            <input type="text" class="form-control form-control-sm" 
                                                value="{{ $movement->id }}" disabled>
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label mb-0">Date <code>*</code></label>
                                            <input type="date" class="form-control form-control-sm" id="date"
                                                name="date" value="{{ $movement->date }}" required>
                                        </div>

                                        <div class="col-md-4">
                                            <label class="form-label mb-0">Move Type <code>*</code></label>
                                            <select class="form-select form-select-sm" name="move_type" id="move_type" required>
                                                <option value="">Choose One</option>
                                                <option value="TF" {{ $movement->move_type == 'TF' ? 'selected' : '' }}>Transfer</option>
                                                <option value="DF" {{ $movement->move_type == 'DF' ?  'selected' : '' }}>Defect</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="row g-2 align-items-end mt-1">
                                        <div class="col-md-4">
                                            <label class="form-label mb-0">Kategori</label>
                                            <input type="text" class="form-control form-control-sm" 
                                                value="{{ $movement->kategori }}" disabled>
                                        </div>

                                        <div class="col-md-8">
                                            <label class="form-label mb-0">Code</label>
                                            <input type="text" class="form-control form-control-sm" 
                                                value="{{ $movement->code }}" disabled>
                                        </div>

                                    </div>

                                    <div class="row g-2 mt-2">
                                        <div class="col-md-6" id="from-user-container">
                                            <label class="form-label mb-0">
                                                <span id="label-from">User Sebelumnya</span>
                                            </label>
                                            <input type="hidden" name="fromuser" value="{{ $movement->from_user_id }}">
                                            <input type="hidden" name="fromloc" value="{{ $movement->from_location_id }}">
                                            <input class="form-control form-control-sm" type="text" id="input-from"
                                                value="{{ $movement->from_user_name ?: $movement->from_location_name }}" disabled>
                                        </div>

                                        <div class="col-md-6" id="to-user-container">
                                            <label class="form-label mb-0">
                                                <span id="label-to">User Saat Ini</span>
                                                <code>*</code>
                                            </label>
                                            
                                            {{-- Modal untuk User --}}
                                            <div class="input-group input-group-sm" id="input-group-user">
                                                <input type="hidden" id="to_user" name="to_user" value="{{ $movement->to_user_id }}">
                                                <input id="to_user_id" name="to_user_id" class="form-control" 
                                                    value="{{ $movement->to_user_name }}" readonly required>
                                                <button type="button" class="input-group-text bg-primary text-light"
                                                    style="cursor: pointer" data-bs-toggle="modal"
                                                    data-bs-target="#modalUser">
                                                    <i class="fas fa-search"></i>
                                                </button>
                                            </div>
                                            
                                            {{-- Modal untuk Location --}}
                                            <div class="input-group input-group-sm d-none" id="input-group-location">
                                                <input type="hidden" id="to_loc" name="to_loc" value="{{ $movement->to_location_id }}">
                                                <input id="to_location_id" name="to_location_id" class="form-control"
                                                    value="{{ $movement->to_location_name }}" readonly required>
                                                <button type="button" class="input-group-text bg-primary text-light"
                                                    style="cursor:  pointer" data-bs-toggle="modal"
                                                    data-bs-target="#modalLoc">
                                                    <i class="fas fa-search"></i>
                                                </button>
                                            </div>
                                            <div class="d-none" id="input-group-location-text">
                                                <input type="text" id="to_location_text" name="to_location_text" 
                                                    class="form-control form-control-sm"
                                                    value="{{ $movement->to_location_name }}">
                                            </div>
                                        </div>

                                        {{-- DEPARTMENT --}}
                                        <div class="col-md-6" id="from-dept-container">
                                            <label class="form-label mb-0"><span id="label-from-dept">Dept Sebelumnya</span></label>
                                            <input class="form-control form-control-sm" type="text"
                                                value="{{ $movement->deptname }}" disabled>
                                        </div>

                                        <div class="col-md-6" id="to-dept-container">
                                            <label class="form-label mb-0">Departemen Saat Ini <code>*</code></label>
                                            <select class="form-select form-select-sm" name="to_dept_id"
                                                id="to_dept_id" required>
                                                @foreach ($dept as $de)
                                                    <option value="{{ $de->value }}" 
                                                        {{ $de->name == $movement->deprnamee ? 'selected' : '' }}>
                                                        {{ $de->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        {{-- AREA --}}
                                        <div class="col-md-6" id="from-area-container">
                                            <label class="form-label mb-0"><span id="label-from-area">Area Sebelumnya</span></label>
                                            <input class="form-control form-control-sm" type="text"
                                                value="{{ $movement->from_area }}" disabled>
                                        </div>

                                        <div class="col-md-6" id="to-area-container">
                                            <label class="form-label mb-0">Area Saat Ini <code>*</code></label>
                                            <select class="form-select form-select-sm" name="to_area_id" id="to_area_id" required>
                                                @foreach ($area as $a)
                                                    <option value="{{ $a->value }}" 
                                                        {{ $a->name == $movement->to_area ? 'selected' :  '' }}>
                                                        {{ $a->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    
                                    <p></p>
                                    <hr class="horizontal dark mt-0">
                                    
                                    {{-- Catatan --}}
                                    <div class="mt-2">
                                        <label class="form-label mb-0">Catatan</label>
                                        <textarea name="remark" id="remark" rows="2" class="form-control form-control-sm"
                                            placeholder="Catatan singkat…">{{ $movement->remark }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                {{-- FROM ASSET --}}
                <div class="card">
                    <div class="card-body">
                        <p class="text-uppercase text-xs text-muted mb-2">From Asset</p>
                        <hr class="horizontal dark mt-0">

                        <div class="d-md-flex justify-content-between align-items-center mb-3">
                            <div>
                                <div class="text-xs text-muted mb-1">
                                    {{ $movement->from_user_name ? 'User' : 'Location' }}
                                </div>
                                <h4 class="mb-1">{{ $movement->from_user_name ?: $movement->from_location_name }}</h4>
                                <span class="badge bg-gradient-info rounded-pill">{{ $movement->deptname }}</span>
                            </div>

                            <div class="mt-3 mt-md-0 text-md-end">
                                <div class="text-xs text-muted mb-1">Area</div>
                                <h4 class="mb-1">{{ $movement->from_area }}</h4>
                                <span class="badge bg-light text-dark border rounded-pill">
                                    <i class="fas fa-tag me-1"></i> {{ $movement->kategori }}
                                </span>
                            </div>
                        </div>

                        <hr class="horizontal dark my-3">

                        <div class="row g-3 text-sm">
                            <div class="col-md-6">
                                <small class="text-muted text-uppercase">Code</small>
                                <div class="fw-semibold">{{ $movement->code }}</div>
                            </div>

                            <div class="col-md-6">
                                <small class="text-muted text-uppercase">Detail Info</small>
                                <div class="fw-semibold">{{ $movement->from_detail }}</div>
                            </div>

                            <div class="col-md-6">
                                <small class="text-muted text-uppercase">Kode SAP</small>
                                <div class="fw-semibold">{{ $movement->kode_sap ?: '-' }}</div>
                            </div>

                            <div class="col-md-6">
                                <small class="text-muted text-uppercase">Tanggal GR</small>
                                <div class="fw-semibold">{{ $movement->date_gr }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <br>
                
                {{-- TO ASSET --}}
                <div class="card" id="move-to-card">
                    <div class="card-body">
                        <p class="text-uppercase text-xs text-muted mb-2">Move To: </p>
                        <hr class="horizontal dark mt-0">

                        <div class="d-md-flex justify-content-between align-items-center mb-3">
                            <div>
                                <div class="text-xs text-muted mb-1">
                                    {{ $movement->to_user_name ? 'User' : 'Location' }}
                                </div>
                                <h4 class="mb-1" id="info_to_user">{{ $movement->to_user_name ?: $movement->to_location_name }}</h4>
                                <span class="badge bg-gradient-info rounded-pill" id="info_to_dept_name">{{ $movement->deprnamee }}</span>
                            </div>

                            <div class="mt-3 mt-md-0 text-md-end">
                                <div class="text-xs text-muted mb-1">Area</div>
                                <h4 class="mb-1" id="info_to_area">{{ $movement->to_area }}</h4>
                                <span class="badge bg-light text-dark border rounded-pill">
                                    <i class="fas fa-tag me-1"></i> {{ $movement->kategori }}
                                </span>
                            </div>
                        </div>

                        <hr class="horizontal dark my-3">

                        <div class="row g-3 text-sm">
                            <div class="col-md-6">
                                <small class="text-muted text-uppercase">New Code</small>
                                <div class="fw-semibold">{{ $movement->new_code }}</div>
                            </div>

                            <div class="col-md-6">
                                <small class="text-muted text-uppercase">Detail Info</small>
                                <div class="fw-semibold">{{ $movement->to_detail }}</div>
                            </div>

                            <div class="col-md-6">
                                <small class="text-muted text-uppercase">Kode SAP</small>
                                <div class="fw-semibold">{{ $movement->kode_sap ?: '-' }}</div>
                            </div>

                            <div class="col-md-6">
                                <small class="text-muted text-uppercase">Tanggal GR</small>
                                <div class="fw-semibold">{{ $movement->date_gr }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal User MIS --}}
    <div class="modal fade bd-example-modal-lg" id="modalUser" tabindex="-1"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">List User</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table id="tableReqby" class="table table-bordered table-striped">
                            <thead style="background-color: #daecff;">
                                <tr>
                                    <th>Action</th>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Departemen</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($user as $req)
                                    <tr>
                                        <td>
                                            <span class="btn badge bg-primary"
                                                onclick="select_user('{{ $req->id }}', '{{ $req->user }}', '{{ $req->dept }}', '{{ $req->deptname }}')">
                                                <i class="bi bi-check-circle me-1"></i> Select
                                            </span>
                                        </td>
                                        <td>{{ $req->id }}</td>
                                        <td>{{ $req->user }}</td>
                                        <td>{{ $req->deptname }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Location --}}
    <div class="modal fade bd-example-modal-lg" id="modalLoc" tabindex="-1"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">List Location</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table id="tableLoc" class="table table-bordered table-striped">
                            <thead style="background-color: #daecff;">
                                <tr>
                                    <th>Action</th>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Departemen</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($location as $loc)
                                    <tr>
                                        <td>
                                            <span class="btn badge bg-primary"
                                                onclick="select_loc('{{ $loc->id }}', '{{ $loc->name }}', '{{ $loc->dept ??  '' }}', '{{ $loc->deptname ?? '' }}')">
                                                <i class="bi bi-check-circle me-1"></i> Select
                                            </span>
                                        </td>
                                        <td>{{ $loc->id }}</td>
                                        <td>{{ $loc->name }}</td>
                                        <td>{{ $loc->dept }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script>
    $(document).ready(function() {
        $('#tableReqby').DataTable({
            "language": {
                "search": "Cari :",
                "lengthMenu":  "Tampilkan _MENU_ baris",
                "zeroRecords": "Maaf - Data tidak ada",
                "info": "Halaman _PAGE_ dari _PAGES_",
                "infoEmpty": "Tidak ada data",
                "infoFiltered": "(pencarian dari _MAX_ data)"
            },
            "destroy": true,
            "ordering": false,
            responsive: true,
        });

        $('#tableLoc').DataTable({
            "language": {
                "search": "Cari :",
                "lengthMenu": "Tampilkan _MENU_ baris",
                "zeroRecords": "Maaf - Data tidak ada",
                "info": "Halaman _PAGE_ dari _PAGES_",
                "infoEmpty": "Tidak ada data",
                "infoFiltered": "(pencarian dari _MAX_ data)"
            },
            "destroy": true,
            "ordering": false,
            responsive: true,
        });

        // Fungsi utama untuk toggle tampilan berdasarkan move type dan kategori
        function toggleFieldsByMoveTypeAndCategory() {
            const moveType = '{{ strtoupper($movement->move_type) }}';
            const kategori = '{{ strtoupper($movement->kategori) }}';
            const userCategories = ['CPU', 'LCD'];
            const locationCategories = ['PRN', 'SCN', 'SWT'];

            const $fromUserContainer = $('#from-user-container');
            const $toUserContainer = $('#to-user-container');
            const $fromDeptContainer = $('#from-dept-container');
            const $toDeptContainer = $('#to-dept-container');
            const $fromAreaContainer = $('#from-area-container');
            const $toAreaContainer = $('#to-area-container');
            const $moveToCard = $('#move-to-card');

            console.log('Move Type:', moveType, 'Kategori:', kategori); // Debug

            if (moveType === 'DF') {
                // DEFECT:  Sembunyikan field "Saat Ini" dan card "Move To"
                $toUserContainer.addClass('d-none');
                $toDeptContainer.addClass('d-none');
                $toAreaContainer.addClass('d-none');
                $moveToCard.addClass('d-none');

                // Ubah field "Sebelumnya" jadi col-md-12
                $fromUserContainer.removeClass('col-md-6').addClass('col-md-12');
                $fromDeptContainer.removeClass('col-md-6').addClass('col-md-12');
                $fromAreaContainer.removeClass('col-md-6').addClass('col-md-12');

                $('#label-from').text(userCategories.includes(kategori) ? 'User' : 'Lokasi');
                $('#label-from-dept').text('Dept');
                $('#label-from-area').text('Area');

                // Set label dan value sesuai kategori
                if (userCategories.includes(kategori)) {
                    // $('#label-from').text('User Sebelumnya');
                    $('#input-from').val('{{ $movement->from_user_name }}');
                } else {
                    // $('#label-from').text('Lokasi Sebelumnya');
                    $('#input-from').val('{{ $movement->from_location_name }}');
                }
            } else {
                // TRANSFER: Tampilkan semua field dan kembalikan ke col-md-6
                $toUserContainer.removeClass('d-none');
                $toDeptContainer. removeClass('d-none');
                $toAreaContainer.removeClass('d-none');
                $moveToCard.removeClass('d-none');

                $fromUserContainer.removeClass('col-md-12').addClass('col-md-6');
                $fromDeptContainer.removeClass('col-md-12').addClass('col-md-6');
                $fromAreaContainer.removeClass('col-md-12').addClass('col-md-6');

                $('#label-from').text(userCategories.includes(kategori) ? 'User Sebelumnya' : 'Lokasi Sebelumnya');
                $('#label-from-dept').text('Dept Sebelumnya');
                $('#label-from-area').text('Area Sebelumnya');

                // Tampilkan field input yang sesuai dengan kategori
                if (userCategories.includes(kategori)) {
                    $('#label-from').text('User Sebelumnya');
                    $('#label-to').text('User Saat Ini');
                    $('#input-group-user').removeClass('d-none');
                    $('#input-group-location').addClass('d-none');
                    $('#input-group-location-text').addClass('d-none');
                    
                    $('#input-from').val('{{ $movement->from_user_name }}');
                    $('#info_to_user').text('{{ $movement->to_user_name }}');
                    setDeptReadonly(true);
                    
                } else if (locationCategories.includes(kategori)) {
                    $('#label-from').text('Lokasi Sebelumnya');
                    $('#label-to').text('Lokasi Saat Ini');
                    $('#input-group-user').addClass('d-none');
                    $('#input-group-location').removeClass('d-none');
                    $('#input-group-location-text').addClass('d-none');
                    
                    $('#input-from').val('{{ $movement->from_location_name }}');
                    $('#info_to_user').text('{{ $movement->to_location_name }}');
                    setDeptReadonly(true);
                    
                } else if (kategori === 'OTH') {
                    $('#label-from').text('Lokasi Sebelumnya');
                    $('#label-to').text('Lokasi Saat Ini');
                    $('#input-group-user').addClass('d-none');
                    $('#input-group-location').addClass('d-none');
                    $('#input-group-location-text').removeClass('d-none');
                    
                    $('#input-from').val('{{ $movement->from_location_name }}');
                    $('#info_to_user').text('{{ $movement->to_location_name }}');
                    setDeptReadonly(false);
                }
            }
        }

        function setDeptReadonly(readonly) {
            if (readonly) {
                $('#to_dept_id').prop('disabled', true);
                
                if ($('#to_dept_id_hidden').length === 0) {
                    const currentDeptValue = $('#to_dept_id').val();
                    $('#to_dept_id').after(
                        '<input type="hidden" id="to_dept_id_hidden" name="to_dept_id" value="' + currentDeptValue + '">'
                    );
                }
            } else {
                $('#to_dept_id').prop('disabled', false);
                $('#to_dept_id_hidden').remove();
            }
        }

        // Jalankan saat halaman dimuat
        toggleFieldsByMoveTypeAndCategory();
    });

    function select_user(id, name, deptValue, deptName) {
        const kategori = '{{ strtoupper($movement->kategori) }}';
        
        document.getElementById('to_user').value = id;
        document.getElementById('to_user_id').value = name;
        
        if (kategori === 'CPU' || kategori === 'LCD') {
            $('#to_dept_id').val(deptValue);
        }
        
        $('#modalUser').modal('hide');
        $('#info_to_user').text(name);
        $('#info_to_dept_name').text(deptName);
    }

    function select_loc(id, name, deptValue, deptName) {
        const kategori = '{{ strtoupper($movement->kategori) }}';
        
        document.getElementById('to_loc').value = id;
        document.getElementById('to_location_id').value = name;
        
        if (['PRN', 'SCN', 'SWT'].includes(kategori)) {
            $('#to_dept_id').val(deptValue);
            $('#info_to_dept_name').text(deptName);
        }
        
        $('#modalLoc').modal('hide');
        $('#info_to_user').text(name);
    }

    $('#to_location_text').on('input', function() {
        const locationText = $(this).val();
        $('#info_to_user').text(locationText || '-');
    });

    // Button Simpan
    $('#btn-simpan').click(function(e) {
        e.preventDefault();

        const $btn = $(this);
        const kategori = '{{ strtoupper($movement->kategori) }}';
        const moveType = '{{ strtoupper($movement->move_type) }}';

        var id = $('#movement_id').val();
        var date = $('#date').val();
        var move_type = $('#move_type').val();
        var fromuser = $('input[name="fromuser"]').val();
        var fromloc = $('input[name="fromloc"]').val();
        var remark = $('#remark').val();

        var to_dept_id = null;
        var to_area_id = null;
        var touser = null;
        var toloc = null;

        if (moveType === 'DF') {
            // Defect: hanya kirim data "from", to = null
            to_dept_id = null;
            to_area_id = null;
            touser = null;
            toloc = null;
        } else {
            // Transfer: ambil data "to"
            to_dept_id = $('#to_dept_id_hidden').val() || $('#to_dept_id').val();
            to_area_id = $('#to_area_id').val();

            if (kategori === 'CPU' || kategori === 'LCD') {
                touser = $('#to_user').val() || fromuser;
                toloc = null;
            } else if (kategori === 'OTH') {
                touser = null;
                toloc = $('#to_location_text').val();
            } else {
                touser = null;
                toloc = $('#to_loc').val() || fromloc;
            }
        }

        // Validasi
        if (!date) {
            Swal. fire({
                icon: 'error',
                title: 'Gagal! ',
                text: 'Harap lengkapi tanggal! ',
            });
            return;
        }

        if (moveType === 'TF' && kategori === 'OTH' && ! toloc) {
            Swal.fire({
                icon: 'error',
                title:  'Gagal!',
                text: 'Lokasi harus diisi!',
            });
            return;
        }

        var params = {
            'id': id,
            'date':  date,
            'move_type': move_type,
            'fromuser': fromuser,
            'touser': touser,
            'fromloc': fromloc,
            'toloc':  toloc,
            'dept':  to_dept_id,
            'area': to_area_id,
            'remark': remark
        };

        console. log('Params:', params);

        Swal.fire({
            title: 'Konfirmasi',
            text: 'Apakah Anda yakin ingin mengupdate data ini?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Ya, update!',
            cancelButtonText: 'Batal',
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33'
        }).then((result) => {
            if (result.isConfirmed) {
                $btn.append(
                    ' <span class="spinner-border spinner-border-sm icon-load" role="status" aria-hidden="true"></span>'
                );
                $btn.prop('disabled', true);

                $.ajax({
                    url: "{{ URL::to('/') }}/trmove/update/" + id,
                    type: "POST",
                    dataType: "JSON",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    },
                    data: {
                        params:  params
                    },
                    success:  function(data) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil!',
                            text: 'Data berhasil diupdate.',
                            confirmButtonText: 'OK',
                        }).then((result) => {
                            if (result.isConfirmed) {
                                window.location.href = "{{ URL::to('/') }}/trmove";
                            }
                        });
                    },
                    error: function(xhr, status, error) {
                        const msg = xhr.responseJSON?. message || 'Terjadi kesalahan saat mengupdate data! ';
                        Swal. fire({
                            icon: 'error',
                            title:  'Gagal!',
                            text: msg,
                        });
                    },
                    complete: function() {
                        $btn.find('.icon-load').remove();
                        $btn.prop('disabled', false);
                    }
                });
            }
        });
    });

    // Update info saat dept atau area berubah
    $('#to_dept_id').change(function() {
        var deptText = $(this).find('option:selected').text();
        $('#info_to_dept_name').text(deptText);
        
        // Update hidden input jika ada
        if ($('#to_dept_id_hidden').length > 0) {
            $('#to_dept_id_hidden').val($(this).val());
        }
    });

    $('#to_area_id').change(function() {
        var areaText = $(this).find('option:selected').text();
        $('#info_to_area').text(areaText);
    });
</script>
@endsection