@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@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 back --}}
                        <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</button>
                        {{-- check authorize add --}}
                        @if ($authorize->add == '1')
                            {{-- button save --}}
                            <button class="btn btn-primary mb-0"
                                onclick="event.preventDefault(); document.getElementById('{{ $dmenu }}-form').submit();"><i
                                    class="fas fa-floppy-disk me-1"> </i><span class="font-weight-bold">Simpan</button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-10">
                <div class="card">
                    <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Insert {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                {{-- Hidden ID --}}
                                <input type="hidden" name="id_internal_memo" value="{{ old('id_internal_memo') }}">

                                {{-- Left Column --}}
                                <div class="col-md-6">
                                    {{-- From --}}
                                    <div class="mb-4">
                                        <label for="from" class="form-label">Dari</label>
                                        <select class="form-select text-muted" id="from" name="from" required>
                                            <option value="" disabled selected>-- Pilih Dari --</option>
                                            @foreach ($from_list as $from)
                                                <option value="{{ $from->value }}" {{ old('from') == $from->value ? 'selected' : '' }}>
                                                    {{ $from->label }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    {{-- To --}}
                                    <div class="mb-4">
                                        <label for="to" class="form-label">Untuk</label>
                                        <div class="form-check-list d-flex flex-wrap justify-content-start" style="gap: 15px;">
                                            @foreach ($to_list as $to)
                                                <div class="form-check" style="flex: 0 0 calc(25% - 15px); max-width: calc(25% - 15px);">
                                                    <input class="form-check-input" type="checkbox" id="to_{{ $to->value }}" name="to[]" value="{{ $to->label }}"
                                                        {{ is_array(old('to')) && in_array($to->label, old('to')) ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="to_{{ $to->value }}">
                                                        {{ $to->label }}
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>

                                    {{-- Subject --}}
                                    <div class="mb-4">
                                        <label for="subject" class="form-label">Subjek</label>
                                        <input type="text" class="form-control" id="subject" name="subject" value="{{ old('subject') }}" required>
                                    </div>

                                    {{-- Tanggal --}}
                                    <div class="mb-4">
                                        <label for="tanggal" class="form-label">Tanggal</label>
                                        <input type="date" class="form-control" id="tanggal" name="tanggal" value="{{ old('tanggal') }}" required>
                                    </div>

                                    {{-- No Surat --}}
                                    <div class="mb-4">
                                        <label for="no_surat" class="form-label">Nomor Surat</label>
                                        <input type="text" class="form-control" id="no_surat" name="no_surat" value="{{ old('no_surat') }}" required>
                                    </div>

                                    {{-- Urgency --}}
                                    <div class="mb-4">
                                        <label for="urgency" class="form-label">Urgensi</label>
                                        <div class="form-group">
                                            <select class="form-select text-muted" id="urgency" name="urgency[]" multiple style="width: 100%;">
                                                @foreach ($urgency_list as $urgency)
                                                    <option value="{{ $urgency->value }}" {{ is_array(old('urgency')) && in_array($urgency->value, old('urgency')) ? 'selected' : '' }}>
                                                        {{ $urgency->label }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                {{-- Right Column --}}
                                <div class="col-md-6">
                                    {{-- Move Deskripsi to the bottom --}}
                                </div>

                                {{-- Deskripsi --}}
                                <div class="col-12">
                                    <div class="mb-4">
                                        <label for="deskripsi" class="form-label">Deskripsi</label>
                                        <textarea class="form-control" id="deskripsi" name="deskripsi" rows="5" maxlength="65535" required style="width: 100%;">{{ old('deskripsi') }}</textarea>
                                        <small class="text-muted">Maksimal 65,535 karakter.</small>
                                    </div>
                                </div>
                            </div>
                            <hr class="horizontal dark">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection
@push('css')
<style>
    /* Remove any custom dropdown arrow styling */
    select.form-control {
        appearance: auto; /* Ensure the browser's default dropdown arrow is used */
    }

    .urgency-tag {
        background-color: #28a745;
        color: white;
        padding: 5px 10px;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
    }
    .urgency-tag .remove-btn {
        margin-left: 10px;
        cursor: pointer;
        color: white;
        font-weight: bold;
    }
</style>
@endpush
@push('js')
<script>
    $(document).ready(function() {
        // Initialize the select2 plugin for the urgency dropdown
        $('#urgency').select2({
            placeholder: "Pilih Urgensi",
            allowClear: true,
            width: '100%'
        });

        // Handle the selection of urgency options
        $('#urgency').on('select2:select', function(e) {
            const selectedValue = e.params.data.id;
            const selectedText = e.params.data.text;

            // Check if the option is already selected
            if (document.getElementById(`urgency-item-${selectedValue}`)) {
                return;
            }

            // Create a new urgency tag
            const urgencyList = document.getElementById('selected-urgency-list');
            const urgencyItem = document.createElement('div');
            urgencyItem.id = `urgency-item-${selectedValue}`;
            urgencyItem.className = 'urgency-tag';

            // Add the label
            const labelSpan = document.createElement('span');
            labelSpan.textContent = selectedText;

            // Add the remove button
            const removeButton = document.createElement('span');
            removeButton.className = 'remove-btn';
            removeButton.textContent = 'x';
            removeButton.onclick = function () {
                urgencyItem.remove();
                // Remove the option from the select2 dropdown
                const option = $(`#urgency option[value="${selectedValue}"]`);
                option.prop('selected', false).trigger('change');
            };

            // Append the label and button to the tag
            urgencyItem.appendChild(labelSpan);
            urgencyItem.appendChild(removeButton);

            // Append the tag to the list
            urgencyList.appendChild(urgencyItem);
        });
    });
</script>
@endpush