@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 Custom Styling */
        .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 Styling */
        .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">Edit Pengguna</span>

                <form action="{{ route('pengguna.update', ['pengguna' => $user->id]) }}" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="row">
                        <div class="col s6 input-field">
                            <input type="text" id="name" name="name" class="@error('name') invalid @enderror" value="{{ old('name', $user->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', $user->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">
                            <label for="password">Password Baru (kosongkan jika tidak ingin mengubah)</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">
                            <label for="password_confirmation">Konfirmasi Password Baru</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>Pilih Role</option>
                                @foreach($roles as $role)
                                    <option value="{{ $role->id }}" {{ old('role_id', $user->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', $user->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', $user->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', $user->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', $user->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" {{ in_array('D.I Irigasi', old('menu_akses', $user->menuAkses->pluck('menu_name')->toArray())) ? 'selected' : '' }}>D.I Irigasi</option>
                                <option value="D.I Rawa" {{ in_array('D.I Rawa', old('menu_akses', $user->menuAkses->pluck('menu_name')->toArray())) ? 'selected' : '' }}>D.I Rawa</option>
                                <option value="Sungai & Anak Sungai" {{ in_array('Sungai & Anak Sungai', old('menu_akses', $user->menuAkses->pluck('menu_name')->toArray())) ? 'selected' : '' }}>Sungai & Anak Sungai</option>
                                <option value="Drainase" {{ in_array('Drainase', old('menu_akses', $user->menuAkses->pluck('menu_name')->toArray())) ? 'selected' : '' }}>Drainase</option>
                                <option value="E-Proposal" {{ in_array('E-Proposal', old('menu_akses', $user->menuAkses->pluck('menu_name')->toArray())) ? 'selected' : '' }}>E-Proposal</option>
                                <option value="E-Saran" {{ in_array('E-Saran', old('menu_akses', $user->menuAkses->pluck('menu_name')->toArray())) ? 'selected' : '' }}>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">Update</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() {
            // Inisialisasi Select2 untuk menu akses
            $('#menu_akses').select2({
                placeholder: "Pilih Menu Akses",
                allowClear: true,
                width: '100%',
                language: {
                    noResults: function() {
                        return "Tidak ada hasil yang ditemukan";
                    },
                    searching: function() {
                        return "Mencari...";
                    }
                }
            });

            // Fungsi untuk mengecek dan menampilkan/menyembunyikan menu akses
            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');
                }
            }

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

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

            // Event listener untuk checkbox
            $('.akses-checkbox').change(function() {
                validateAksesCheckboxes();
            });

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

            // Panggil fungsi saat halaman dimuat
            toggleMenuAkses();
            validateAksesCheckboxes();

            // Panggil fungsi saat role berubah
            $('#role_id').change(function() {
                toggleMenuAkses();
            });

            // Set nilai menu akses jika ada error
            @if(old('menu_akses'))
                $('#menu_akses').val(@json(old('menu_akses'))).trigger('change');
            @endif
        });
    </script>
@endpush