@extends('layout.base')

@section('action')
    <button type="button" class="btn btn-light-primary btn-sm rounded" data-bs-toggle="modal" data-bs-target="#modalAdd">
        <i class="fas fa-plus"></i> Add
    </button>
@endsection


@section('content')
    <style>
        .select2-container--default .select2-selection--single {
            background-color: #ffffff !important;
            border: 1px solid #ced4da !important;
            color: #212529 !important;
            height: 38px !important;
            border-radius: 4px !important;
        }

        /* Style teks yang ditampilkan */
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #212529 !important;
            background-color: transparent !important;
            line-height: 36px !important;
        }

        /* Panah dropdown */
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px !important;
        }

        /* Style dropdown saat terbuka */
        .select2-container--open .select2-dropdown {
            background-color: #ffffff !important;
            color: #212529 !important;
            border: 1px solid #ced4da !important;
            z-index: 9999 !important;
        }
    </style>
    @if (session('updated'))
        <div id="updateSuccess" data-status="ok" style="display: none;"></div>
    @endif
    <div class="card card-flush">
        <!--begin::Card header-->
        <div class="card-header">
            <!--begin::Card title-->
            <div class="card-title d-flex align-items-center w-100">
                <h3 class="fw-bold mb-0">User List</h3>
                <div class="ms-auto d-flex gap-2">
                    <div class="d-flex gap-2 align-items-center">
                        Role:
                    </div>
                    <select class="form-select" id="filterRole">
                        <option value="">All</option>
                        <option value="superadmin">Superadmin</option>
                        <option value="admin">Admin</option>
                        <option value="admin_nf">Admin NF</option>
                        <option value="admin_loc">Admin LOC</option>
                        <option value="admin_loc_accre">Admin LOC Accre</option>
                        <option value="admin_agu">Admin AGU</option>
                        <option value="admin_fig">Admin FIG</option>
                        <option value="admin_media">Admin Media</option>
                        <option value="admin_fig_family">Admin FIG Family</option>
                        <option value="admin_fig_guest">Admin FIG Guest</option>
                        <option value="admin_observer">Admin Observer</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="card-body">
            <table class="table table-stripped" id="datatablePengguna">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Role</th>
                        <th>Country</th>
                        <th>Phone Number</th>
                        <th class="text-center">Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>

    @include('user-management.elements.modal_add')
    @include('user-management.elements.modal_edit')
@endsection

@section('scripts')
    <script>
        const CompactUrls = {
            _datatable: "{{ route('user-management.datatable') }}",
            _edit: "{{ route('user-management.update', ':id') }}",
            _destroy: "{{ route('user-management.destroy', ':id') }}",
        }
    </script>
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('#filterRole').on('change', function() {
            let role = $('#filterRole').val();
            table.ajax.reload();
        });

        $('#resetFilter').on('click', function() {
            $('#filterRole').val('').trigger('change');
            table.ajax.reload();
        });

        let table = $("#datatablePengguna").DataTable({
            serverSide: true,
            processing: true,
            ajax: {
                url: CompactUrls._datatable,
                data: function(d) {
                    d.role = $('#filterRole').val() || '';
                }
            },
            order: [
                [1, 'asc']
            ],
            columns: [{
                    data: "DT_RowIndex",
                    orderable: false,
                    searchable: false
                },
                {
                    data: "name"
                },
                {
                    data: "email"
                },
                {
                    data: "label_role",
                    orderable: false,
                    searchable: false
                },
                {
                    data: "country",
                    orderable: false,
                    searchable: false
                },
                {
                    data: "phone_number",
                    orderable: false,
                    searchable: false
                },
                {
                    data: "id",
                    orderable: false,
                    searchable: false
                },
            ]
        })

        $(document).ready(function() {
            // Init select2
            $('#id_country').select2({
                dropdownParent: $('#modalAdd') // penting untuk modal
            });

            // Toggle visibility based on role
            $('select[name="role"]').on('change', function() {
                let selectedRole = $(this).val();
                if (selectedRole == 'admin_nf' || selectedRole == 'admin_observer' || selectedRole == 'admin_media') {
                    $('#countryGroup').slideDown();
                } else {
                    $('#countryGroup').slideUp();
                    $('#id_country').val(null).trigger('change'); // reset if hidden
                }
            });
        });

        $(document).ready(function() {
            $('#formAddPengguna').on('submit', function(e) {
                e.preventDefault();

                let formData = {
                    _token: $('input[name="_token"]').val(),
                    name: $('input[name="name"]').val(),
                    email: $('input[name="email"]').val(),
                    password: $('input[name="password"]').val(),
                    role: $('select[name="role"]').val(),
                    id_country: $('select[name="id_country"]').val()
                };

                $.ajax({
                    url: "{{ route('user-management.store') }}",
                    type: "POST",
                    data: formData,
                    success: function(response) {
                        $('#modalAdd').modal('hide');

                        Swal.fire({
                            icon: 'success',
                            title: 'Success',
                            text: 'User has been successfully added!',
                            confirmButtonText: 'OK'
                        }).then(() => {
                            // Optional: reload datatable if you're using one
                            $('#datatablePengguna').DataTable().ajax.reload();
                        });
                    },
                    error: function(xhr) {
                        if (xhr.status === 422) {
                            let errors = xhr.responseJSON.errors;
                            let errorText = '';
                            $.each(errors, function(key, value) {
                                errorText += value[0] + '<br>';
                            });

                            Swal.fire({
                                icon: 'error',
                                title: 'Validation Error',
                                html: errorText,
                                confirmButtonText: 'OK'
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'Something went wrong. Please try again.',
                                confirmButtonText: 'OK'
                            });
                        }
                    }
                });
            });
        });


        $(document).ready(function() {
            // Init Select2 for country dropdown in edit modal
            $('#edit_id_country').select2({
                dropdownParent: $('#modalEdit')
            });

            // Toggle country field based on selected role
            $('select[name="role"]').on('change', function() {
                let selectedRole = $(this).val();
                if (selectedRole == 'admin_nf' || selectedRole == 'admin_observer' || selectedRole == 'admin_media') {
                    $('#editCountryGroup').slideDown();
                } else {
                    $('#editCountryGroup').slideUp();
                    $('#edit_id_country').val(null).trigger('change');
                }
            });

            // Handle edit button click (open modal & populate data)
            $(document).on('click', '.edit-data', function() {
                let id = $(this).data('id');

                $.get("{{ route('user-management.edit', ':id') }}".replace(':id', id), function(res) {
                    $('#editUserId').val(res.id);
                    $('input[name="name"]').val(res.name);
                    $('input[name="email"]').val(res.email);
                    $('input[name="password"]').val('');
                    $('select[name="role"]').val(res.role).trigger('change');

                    if (res.role === 'admin_nf') {
                        $('#editCountryGroup').show();
                        $('#edit_id_country').val(res.id_country).trigger('change');
                    } else {
                        $('#editCountryGroup').hide();
                        $('#edit_id_country').val(null).trigger('change');
                    }

                    $('#modalEdit').modal('show');
                });
            });

            $(document).ready(function() {
                if ($('#updateSuccess').data('status') === 'ok') {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        text: 'User updated successfully!',
                        confirmButtonText: 'OK'
                    });
                }
            });

        });


        $(function() {


            $(document).on('click', '.delete-data', function() {
                let id = $(this).data('id');

                Swal.fire({
                    title: 'Are you sure?',
                    text: 'This user will be permanently deleted.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Yes, delete it!',
                    cancelButtonText: 'Cancel'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.post("{{ route('user-management.destroy') }}", {
                                _token: "{{ csrf_token() }}",
                                id: id
                            })
                            .done(function() {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Deleted!',
                                    text: 'User has been deleted.',
                                    confirmButtonText: 'OK'
                                }).then(() => {
                                    $('#datatablePengguna').DataTable().ajax.reload();
                                });
                            })
                            .fail(function() {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Failed!',
                                    text: 'Unable to delete user. Please try again.',
                                    confirmButtonText: 'OK'
                                });
                            });
                    }
                });
            });

        });
    </script>
@endsection