@extends('layouts.app')

@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

    <style>
        .select2-container--default .select2-selection--multiple {
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            min-height: 48px;
            padding: 8px;
            background-color: #fff;
        }

        .select2-container--default.select2-container--focus .select2-selection--multiple {
            border-color: #26a69a;
            box-shadow: 0 0 0 2px rgba(38, 166, 154, 0.1);
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            background-color: #f8f9fa;
            border: none;
            border-radius: 4px;
            padding: 6px 12px 5px 20px;
            margin: 4px;
            color: #424242;
            font-size: 13px;
            font-weight: 500;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
            color: #9e9e9e;
            margin-right: 4px;
            font-size: 16px;
            font-weight: bold;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
            color: #f44336;
            background: none;
        }

        .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: #26a69a;
        }

        .select2-dropdown {
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            margin-top: 4px;
        }

        .select2-container--default .select2-search--dropdown .select2-search__field {
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            padding: 8px 12px;
            font-size: 13px;
        }

        .select2-container--default .select2-search--dropdown .select2-search__field:focus {
            border-color: #26a69a;
            outline: none;
        }

        .select2-container--default .select2-results__option {
            padding: 8px 12px;
            font-size: 13px;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__rendered {
            padding: 0;
            margin: 0;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
            color: #9e9e9e;
            font-size: 13px;
        }

        .error-message {
            color: #f44336;
            font-size: 12px;
            margin-top: 5px;
        }

        .invalid {
            border-bottom: 1px solid #f44336 !important;
            box-shadow: 0 1px 0 0 #f44336 !important;
        }

        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid transparent;
            border-radius: 4px;
        }

        .alert-danger {
            color: #721c24;
            background-color: #f8d7da;
            border-color: #f5c6cb;
        }

        .alert-success {
            color: #155724;
            background-color: #d4edda;
            border-color: #c3e6cb;
        }
    </style>
@endsection

@section('content')
<div class="row">
    <div class="col s12">
        @if(session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif

        @if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        <div class="card">
            <div class="card-content">
                <span class="card-title">Tambah Pengguna Baru</span>

                <form action="{{ route('pengguna.store') }}" method="POST">
                    @csrf

                    <div class="row">
                        <div class="col s6 input-field">
                            <input type="text" id="name" name="name" class="@error('name') invalid @enderror" value="{{ old('name') }}" required>
                            <label for="name">Nama Pengguna <span class="red-text">*</span></label>
                            @error('name')
                                <span class="error-message">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="col s6 input-field">
                            <input type="email" id="email" name="email" class="@error('email') invalid @enderror" value="{{ old('email') }}" required>
                            <label for="email">Email <span class="red-text">*</span></label>
                            @error('email')
                                <span class="error-message">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="row">
                        <div class="col s6 input-field">
                            <input type="password" id="password" name="password" class="@error('password') invalid @enderror" required>
                            <label for="password">Password <span class="red-text">*</span></label>
                            @error('password')
                                <span class="error-message">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="col s6 input-field">
                            <input type="password" id="password_confirmation" name="password_confirmation" class="@error('password_confirmation') invalid @enderror" required>
                            <label for="password_confirmation">Konfirmasi Password <span class="red-text">*</span></label>
                            @error('password_confirmation')
                                <span class="error-message">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="row">
                        <div class="col s6">
                            <label>Role <span class="red-text">*</span></label>
                            <select name="role_id" id="role_id" class="browser-default @error('role_id') invalid @enderror" required>
                                <option value="" disabled selected>Pilih Role</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="error-message">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="col s6">
                            <label>Hak Akses <span class="red-text">*</span></label>
                            <div class="checkbox-group" style="display: flex; gap: 20px; margin-top: 10px;">
                                <p style="margin: 0;">
                                    <input type="checkbox" class="filled-in akses-checkbox" id="buat_d" name="buat_d" value="1" {{ old('buat_d') ? 'checked' : '' }}>
                                    <label for="buat_d">Buat Data</label>
                                </p>
                                {{-- <p style="margin: 0;">
                                    <input type="checkbox" class="filled-in akses-checkbox" id="baca_d" name="baca_d" value="1" {{ old('baca_d') ? 'checked' : '' }}>
                                    <label for="baca_d">Baca Data</label>
                                </p> --}}
                                <p style="margin: 0;">
                                    <input type="checkbox" class="filled-in akses-checkbox" id="ubah_d" name="ubah_d" value="1" {{ old('ubah_d') ? 'checked' : '' }}>
                                    <label for="ubah_d">Ubah Data</label>
                                </p>
                                <p style="margin: 0;">
                                    <input type="checkbox" class="filled-in akses-checkbox" id="hapus_d" name="hapus_d" value="1" {{ old('hapus_d') ? 'checked' : '' }}>
                                    <label for="hapus_d">Hapus Data</label>
                                </p>
                            </div>
                            @error('buat_d')
                                <span class="error-message">{{ $message }}</span>
                            @enderror
                            {{-- @error('baca_d')
                                <span class="error-message">{{ $message }}</span>
                            @enderror --}}
                            @error('ubah_d')
                                <span class="error-message">{{ $message }}</span>
                            @enderror
                            @error('hapus_d')
                                <span class="error-message">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="row" id="menu_akses_container" style="display: none;">
                        <div class="col s12">
                            <label>Menu Akses <span class="red-text">*</span></label>
                            <select name="menu_akses[]" id="menu_akses" multiple="multiple" style="width:100%" required>
                                <option value="D.I Irigasi">D.I Irigasi</option>
                                <option value="D.I Rawa">D.I Rawa</option>
                                <option value="Sungai & Anak Sungai">Sungai & Anak Sungai</option>
                                <option value="Drainase">Drainase</option>
                                <option value="Peta Sebaran">Peta Sebaran</option>
                                <option value="E-Proposal">E-Proposal</option>
                                <option value="E-Saran">E-Saran</option>
                            </select>
                            @error('menu_akses')
                                <span class="error-message">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="card-action">
                        <a href="{{ route('pengguna.index') }}" class="btn waves-effect waves-light grey">Kembali</a>
                        <button type="submit" class="btn waves-effect waves-light blue">Simpan</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#menu_akses').select2({
                placeholder: "Pilih Menu Akses",
                allowClear: true,
                width: '100%',
                language: {
                    noResults: function() {
                        return "Tidak ada hasil yang ditemukan";
                    },
                    searching: function() {
                        return "Mencari...";
                    }
                }
            });

            function toggleMenuAkses() {
                const roleId = $('#role_id').val();
                const menuAksesContainer = $('#menu_akses_container');

                if (roleId === '3') {
                    menuAksesContainer.show();
                    $('#menu_akses').prop('required', true);
                } else {
                    menuAksesContainer.hide();
                    $('#menu_akses').prop('required', false);
                    $('#menu_akses').val(null).trigger('change');
                }
            }

            function validateAksesCheckboxes() {
                const checkedBoxes = $('.akses-checkbox:checked').length;
                const errorElement = $('#akses-error');

                if (checkedBoxes === 0) {
                    errorElement.show();
                    return false;
                } else {
                    errorElement.hide();
                    return true;
                }
            }

            $('.akses-checkbox').change(function() {
                validateAksesCheckboxes();
            });

            $('form').submit(function(e) {
                if (!validateAksesCheckboxes()) {
                    e.preventDefault();
                    return false;
                }
            });

            toggleMenuAkses();
            validateAksesCheckboxes();

            $('#role_id').change(function() {
                toggleMenuAkses();
            });

            @if(old('menu_akses'))
                $('#menu_akses').val(@json(old('menu_akses'))).trigger('change');
            @endif
        });
    </script>
@endpush