@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <style>
        /* Untuk memastikan catatan (notes) sejajar dan ada sedikit ruang antara input dan catatan */
        .form-text {
            font-size: 0.875rem;
            /* Ukuran font sedikit lebih kecil */
            color: #6c757d;
            /* Warna abu-abu yang lebih terang */
            margin-top: 0.25rem;
            /* Jarak antara input dan catatan */
        }

        /* Menambahkan sedikit margin bawah agar lebih terpisah */
        .card-body {
            margin-bottom: 1rem;
        }
    </style>

    <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 --}}
                            @if ($authorize->dmenu !== 'usersx')
                                <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
                        @endif

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <form role="form" method="POST" action="{{ route('permohonan.users.store') }}"
                        enctype="multipart/form-data">
                        @csrf
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul class="mb-0">
                                    @foreach ($errors->all() as $err)
                                        <li>{{ $err }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        @error('server')
                            <div class="alert alert-danger">{{ $message }}</div>
                        @enderror
                        <div class="card-body">
                            <p><strong>Silahkan pilih role akun yang ingin dibuat terlebih dahulu</strong></p>
                            <p class="text-danger">
                                <span class="text-danger">(*)</span>
                                wajib diisi.
                            </p>
                            {{-- Role --}}
                            {{-- <div class="mb-3">
                                <label for="idroles">Role<span class="text-danger">*</span></label>
                                <select name="idroles" id="idroles" class="form-select" required>
                                    <option value="">Pilih Role</option>
                                    @foreach ($roles as $item)
                                        <option value="{{ $item->idroles }}"
                                            {{ old('idroles') == $item->idroles ? 'selected' : '' }}>
                                            {{ $item->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div> --}}

                            {{-- Role (Multiple) --}}
                            <div class="role-chip-scope">
                                <div class="mb-3">
                                    <label for="roles">Role<span class="text-danger">*</span></label>
                                    <select name="roles[]" id="roles" class="form-select" multiple required>
                                        @foreach ($roles as $item)
                                            <option value="{{ $item->idroles }}"
                                                @if (collect(old('roles', []))->contains($item->idroles)) selected @endif>
                                                {{ $item->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('roles')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>
                            </div>

                            {{-- Username --}}
                            <div class="mb-3" id="username-field" style="display: none;">
                                <label for="username">Username<span class="text-danger">*</span></label>
                                <input type="text" name="username" id="username"
                                    class="form-control @error('username') is-invalid @enderror"
                                    value="{{ old('username') }}" placeholder="Masukkan Username">
                                @error('username')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            {{-- First Name --}}
                            <div class="mb-3" id="firstname-field" style="display: none;">
                                <label for="first-name">First Name<span class="text-danger">*</span></label>
                                <input type="text" name="firstname" id="first-name" class="form-control"
                                    value="{{ old('firstname') }}">
                            </div>

                            {{-- Last Name --}}
                            <div class="mb-3" id="lastname-field" style="display: none;">
                                <label for="last-name">Last Name</label>
                                <input type="text" name="lastname" id="last-name" class="form-control"
                                    value="{{ old('lastname') }}">
                            </div>

                            {{-- Email --}}
                            <div class="mb-3" id="email-field" style="display: none;">
                                <label for="email">Email<span class="text-danger">*</span></label>
                                <input type="email" name="email" id="email"
                                    class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}"
                                    placeholder="Masukkan Alamat Email" required>
                                @error('email')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            {{-- Password --}}
                            <div class="mb-3" id="password-field" style="display: none;">
                                <label for="password">Password</label>
                                <input type="hidden" id="password" name="password" value="MSJpermit123!">
                                <!-- <code>
                                    Minimal Password 8 Karakter, terdapat 1 simbol, 1 angka dan huruf kapital
                                </code> -->
                                <br>
                                <small class="text-primary text-xs pt-1">Default Password:
                                    <strong>MSJpermit123!</strong></small>
                            </div>

                            {{-- TTD (semua role) --}}
                            <div class="col-sm-auto mb-3" id="ttd-field" style="display:none;">
                                <label for="ttd">Tanda Tangan</label>
                                <div class="position-relative">
                                    {{-- input file disembunyikan, dipicu lewat label-pena --}}
                                    <input type="file" name="ttd" id="ttd-input" class="d-none"
                                        accept=".png,.jpg,.jpeg">
                                    <label for="ttd-input"
                                        class="btn btn-xxl btn-icon-only bg-gradient-primary position-absolute bottom-0 mb-n2"
                                        style="left:-5px !important;">
                                        <i class="fa fa-pen top-0" data-bs-toggle="tooltip" data-bs-placement="top"
                                            title="Edit Image" aria-hidden="true"></i>
                                        <span class="sr-only">Edit Image</span>
                                    </label>

                                    <span class="h-12 w-12 rounded-full overflow-hidden bg-gray-100">
                                        <img src="{{ asset('/storage/noimage.png') }}" id="ttd-preview" alt="image"
                                            class="w-30 border-radius-lg shadow-sm">
                                    </span>
                                </div>
                                <p class='text-primary text-xs pt-3 mb-0'>Maksimal Size :
                                    <b>2048 KB</b>
                                <p class='text-primary text-xs pt-1'>Upload tanda tangan berupa
                                    <b>PNG</b>
                                </p>
                                @error('ttd')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>


                            {{-- Additional Role Fields --}}
                            <div id="additional-fields"></div>

                            {{-- Tombol Simpan --}}
                            <div class="text-center mt-4">
                                <button type="submit" class="btn btn-primary">Simpan</button>
                            </div>
                        </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('js')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // ==== INIT SELECT2 MULTIPLE ====
            $('#roles').select2({
                placeholder: 'Pilih satu atau lebih role',
                width: '100%',
                allowClear: false
            });

            const baseIds = ['username-field', 'firstname-field', 'lastname-field', 'email-field', 'password-field',
                'ttd-field'
            ];
            const baseEls = baseIds.map(id => document.getElementById(id));
            const additional = document.getElementById('additional-fields');
            const usernameInput = document.getElementById('username');

            const NEED_DEPT = ['picare', 'picker', 'venint'];
            const VEN_EKS = ['veneks'];

            function reset() {
                additional.innerHTML = '';
                additional.style.display = 'none';
                baseEls.forEach(el => el.style.display = 'none');
            }

            function showBase() {
                baseEls.forEach(el => el.style.display = 'block');
            }
            const includesAny = (vals, keys) => (vals || []).some(v => keys.map(String).includes(String(v)));

            function renderByRoles(roleVals) {
                reset();
                if (!roleVals.length) return;

                showBase();

                // Departement
                if (includesAny(roleVals, NEED_DEPT)) {
                    const el = document.createElement('div');
                    el.className = 'mb-3';
                    el.innerHTML = `
            <label for="departement">Departement<span class="text-danger">*</span></label>
            <select name="id_departement" id="departement" class="form-select">
              <option value="">Pilih Departement</option>
              @foreach ($departement as $dp)
                <option value="{{ $dp->id }}" {{ old('id_departement') == $dp->id ? 'selected' : '' }}>
                  {{ $dp->nama_departement }}
                </option>
              @endforeach
            </select>`;
                    additional.appendChild(el);
                }

                // Vendor + Induction Card
                if (includesAny(roleVals, VEN_EKS)) {
                    const v = document.createElement('div');
                    v.className = 'mb-3';
                    v.innerHTML = `
            <label for="vendor">Vendor<span class="text-danger">*</span></label>
            <select name="id_vendor" id="vendor" class="form-select"
                    data-url="{{ route('induction.cards', ['idVendor' => ':id']) }}">
              <option value="">Pilih Vendor</option>
              @foreach ($vendors as $vendor)
                <option value="{{ $vendor->idvendor }}" {{ old('id_vendor') == $vendor->idvendor ? 'selected' : '' }}>
                  {{ $vendor->nama }}
                </option>
              @endforeach
            </select>`;
                    additional.appendChild(v);

                    const ic = document.createElement('div');
                    ic.className = 'mb-3';
                    ic.innerHTML = `
            <label for="induction-card">Induction-Card<span class="text-danger">*</span></label>
            <select name="id_induction_card" id="induction-card" class="form-select">
              <option value="">Pilih Induction-Card</option>
            </select>`;
                    additional.appendChild(ic);
                }

                if (additional.innerHTML.trim() !== '') additional.style.display = 'block';

                // Placeholder username
                const firstText = $('#roles option:selected').first().text().toLowerCase();
                if (firstText.includes('admin mis')) usernameInput.placeholder = 'Masukkan Username Admin MIS';
                else if (firstText.includes('admin k3')) usernameInput.placeholder = 'Masukkan Username Admin K3';
                else if (firstText.includes('picare')) usernameInput.placeholder = 'Masukkan Username PIC Area';
                else if (firstText.includes('picker')) usernameInput.placeholder = 'Masukkan Username PIC Kerja';
                else if (firstText.includes('vendor internal') || firstText.includes('venint')) usernameInput
                    .placeholder = 'Masukkan Username Vendor Internal';
                else if (firstText.includes('vendor eksternal') || firstText.includes('veneks')) usernameInput
                    .placeholder = 'Masukkan Username';
                else usernameInput.placeholder = 'Masukkan Username';
            }

            // Event: perubahan role multiple
            $('#roles').on('change', function() {
                renderByRoles($(this).val() || []);
            });

            // Trigger awal (saat reload karena validation error)
            renderByRoles($('#roles').val() || []);

            // Event: vendor → load induction-card
            document.body.addEventListener('change', async function(e) {
                if (e.target && e.target.id === 'vendor') {
                    const vendorId = e.target.value;
                    const selectIC = document.getElementById('induction-card');
                    selectIC.innerHTML = '<option value="">Pilih Induction-Card</option>';
                    selectIC.disabled = true;
                    if (!vendorId) return;

                    const urlTpl = e.target.dataset.url;
                    const url = urlTpl.replace(':id', encodeURIComponent(vendorId));

                    try {
                        const resp = await fetch(url, {
                            headers: {
                                'Accept': 'application/json'
                            }
                        });
                        if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
                        const data = await resp.json();
                        const list = Array.isArray(data) ? data : (data.data || []);
                        if (list.length) {
                            list.forEach(ind => {
                                const opt = document.createElement('option');
                                opt.value = ind.id;
                                opt.textContent = `${ind.nama} (ID: ${ind.id})`;
                                if ("{{ old('id_induction_card') }}" == ind.id) opt.selected =
                                    true;
                                selectIC.appendChild(opt);
                            });
                            selectIC.disabled = false;
                        } else {
                            selectIC.innerHTML =
                                '<option value="">Tidak ada Induction-Card tersedia</option>';
                        }
                    } catch (err) {
                        console.error(err);
                        selectIC.innerHTML = '<option value="">Gagal memuat Induction-Card</option>';
                    }
                }
            });

            // Preview TTD
            const ttdInput = document.getElementById('ttd-input');
            const ttdPrev = document.getElementById('ttd-preview');
            if (ttdInput && ttdPrev) {
                ttdInput.addEventListener('change', (e) => {
                    const f = e.target.files?.[0];
                    if (!f) return;
                    if (!/image\/(png|jpe?g)/i.test(f.type)) {
                        alert('Format harus PNG/JPG');
                        e.target.value = '';
                        return;
                    }
                    if (f.size > 2 * 1024 * 1024) {
                        alert('Maksimal 2MB');
                        e.target.value = '';
                        return;
                    }
                    ttdPrev.src = URL.createObjectURL(f);
                });
            }
        });
    </script>

    <style>
        .role-chip-scope .select2-container {
            width: 100% !important;
        }

        /* selection: ukuran pas + style bootstrap-ish */
        .role-chip-scope .select2-container--default .select2-selection--multiple {
            display: flex !important;
            align-items: center !important;
            min-height: 36px !important;
            padding: 4px 10px !important;
            border-radius: .5rem !important;
            background: #fff !important;
            border: 1px solid var(--bs-border-color, #ced4da) !important;
            line-height: 1.2 !important;
        }

        .role-chip-scope .select2-container--default.select2-container--focus .select2-selection--multiple {
            border-color: var(--bs-primary, #0ea5a5) !important;
            box-shadow: 0 0 0 .15rem rgba(14, 165, 165, .15) !important;
            /* teal glow */
        }

        /* area render: bikin placeholder/search & chip center */
        .role-chip-scope .select2-container--default .select2-selection--multiple .select2-selection__rendered {
            display: flex !important;
            align-items: center !important;
            flex-wrap: wrap !important;
            gap: 6px !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        .role-chip-scope .select2-container--default .select2-selection--multiple .select2-selection__rendered>li {
            margin: 0 !important;
        }

        /* search field = tempat placeholder → center & compact */
        .role-chip-scope .select2-container--default .select2-search--inline {
            flex: 1 1 140px !important;
            min-width: 100px !important;
        }

        .role-chip-scope .select2-container--default .select2-search--inline .select2-search__field {
            height: 26px !important;
            line-height: 26px !important;
            padding: 0 4px !important;
            margin: 0 !important;
            font-size: .95rem !important;
        }

        /* CHIP: model “× | label” (pendek & rapi) */
        .role-chip-scope .select2-container--default .select2-selection--multiple .select2-selection__choice {
            display: inline-flex !important;
            align-items: center !important;
            height: 26px !important;
            padding: 0 10px !important;
            margin: 0 !important;
            background: var(--chip-bg, var(--bs-primary, #0ea5a5)) !important;
            color: #fff !important;
            border: 0 !important;
            border-radius: .5rem !important;
            box-shadow: 0 1px 0 rgba(0, 0, 0, .06) !important;
            font-size: .9rem !important;
        }

        /* ikon hapus di kiri + garis pemisah */
        .role-chip-scope .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
            float: none !important;
            position: static !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            height: 100% !important;
            min-width: 14px !important;
            margin: 0 8px 0 0 !important;
            padding: 0 8px 0 0 !important;
            border: 0 !important;
            border-right: 1px solid rgba(255, 255, 255, .6) !important;
            /* “|” */
            color: #fff !important;
            line-height: 1 !important;
            background: transparent !important;
            transform: translateY(.5px);
            /* micro adjust supaya benar-benar center */
        }

        /* dropdown highlight seragam */
        .role-chip-scope .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background: var(--chip-bg, var(--bs-primary, #0ea5a5)) !important;
            color: #fff !important;
        }

        /* matikan X clear-all di kanan (bukan chip) */
        .role-chip-scope .select2-selection__clear {
            display: none !important;
        }
    </style>
@endpush