@extends('master')
@section('content')
    <div class="page-view active">
        <div class="add-page-container">
            <div class="add-page-header">
                <h1 class="add-page-title">Tambah Data Pengguna</h1>
            </div>

            <div class="add-page-card">
                <form id="form-add-user" method="POST" action="{{route('user.store')}}">
                    @csrf

                    <div class="c-field">
                        <div class="c-label">Nama Lengkap <span class="required">*</span></div>
                        <input
                            class="c-input @error('name') is-error @enderror"
                            id="inp-nama"
                            name="name"
                            placeholder="Masukkan nama lengkap"
                            value="{{ old('name') }}"
                            required
                        />
                        @error('name')
                            <span class="c-error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="c-field">
                        <div class="c-label">Email <span class="required">*</span></div>
                        <input
                            class="c-input @error('email') is-error @enderror"
                            id="inp-email"
                            name="email"
                            type="email"
                            placeholder="Masukkan alamat email"
                            value="{{ old('email') }}"
                            required
                        />
                        @error('email')
                            <span class="c-error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="c-field">
                        <div class="c-label">Jabatan <span class="required">*</span></div>
                        <select
                            class="c-input @error('role_id') is-error @enderror"
                            id="inp-role"
                            name="role_id"
                            onchange="onRoleChange()"
                            required
                        >
                            <option value="">— Pilih jabatan —</option>
                            @foreach($roles as $role)
                                <option value="{{ $role->id }}" {{ old('role_id') == $role->id ? 'selected' : '' }}>{{ $role->name }}</option>
                            @endforeach
                        </select>
                        @error('role_id')
                            <span class="c-error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div id="sec-fa" style="display:none">
                        <div class="assign-section" onclick="openAssignModal('fa')">
                            <div class="assign-section-label">Assign ke Agronomis <span class="required">*</span></div>
                            <div id="rows-fa" class="assign-rows">
                                <div class="assign-placeholder">Klik untuk memilih Agronomis</div>
                            </div>
                        </div>
                    </div>
                    <div id="sec-agro" style="display:none">
                        <div class="assign-section" onclick="openAssignModal('agro')">
                            <div class="assign-section-label">Assign ke Marketing Manager <span class="required">*</span></div>
                            <div id="rows-agro" class="assign-rows">
                                <div class="assign-placeholder">Klik untuk memilih Marketing Manager</div>
                            </div>
                        </div>
                    </div>

                    <input type="hidden" id="hidden-assign" name="assign_to" value="{{ old('assign_to') }}">
                    @error('assign_to')
                    <span class="c-error">{{ $message }}</span>
                    @enderror
                    <div class="form-actions">
                        <button type="submit" class="btn-primary" onclick="prepareFormSubmit(event)">Simpan Data</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="assign-modal-backdrop" id="assign-modal">
        <div class="assign-modal">
            <div class="assign-modal-head">
                <span class="assign-modal-title" id="assign-modal-title">Pilih Agronomis</span>
                <button class="assign-modal-close" onclick="closeAssignModal()">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
                        <path d="M3 3l10 10M13 3L3 13"/>
                    </svg>
                </button>
            </div>

            <div class="assign-modal-body">
                <div class="assign-search">
                    <input
                        type="text"
                        class="assign-search-input"
                        id="assign-search"
                        placeholder="Cari nama..."
                        onkeyup="filterAssignUsers()"
                    />
                    <svg class="assign-search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="11" cy="11" r="8"/>
                        <path d="M21 21l-4.35-4.35"/>
                    </svg>
                </div>

                <div class="assign-list" id="assign-list">
                    <!-- Users will be populated by JavaScript -->
                </div>
            </div>

            <div class="assign-modal-footer">
                <button type="button" class="btn-secondary" onclick="closeAssignModal()">Batal</button>
                <button type="button" class="btn-primary" onclick="saveAssignSelection()">Pilih</button>
            </div>
        </div>
    </div>

    <script>
        window.agronomisData = @json($agronomis);
        window.marketingManagersData = @json($marketingManagers);
    </script>

@endsection

@push('scripts')
    @vite(['resources/js/user-management/user-add.js'])
@endpush