@extends('layout.main')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    
    <div class="row g-6 mb-6">
        <div class="col-sm-6 col-xl-4">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="content-left">
                            <span class="text-heading">Total Pengguna</span>
                            <div class="d-flex align-items-center my-1">
                                <h4 class="mb-0 me-2">{{ number_format($totalUsers ?? 0) }}</h4>
                            </div>
                            <small class="mb-0">Semua Akun Terdaftar</small>
                        </div>
                        <div class="avatar">
                            <span class="avatar-initial rounded bg-label-primary">
                                <i class="icon-base ti tabler-users icon-26px"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-4">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="content-left">
                            <span class="text-heading">Pengguna Aktif</span>
                            <div class="d-flex align-items-center my-1">
                                <h4 class="mb-0 me-2">{{ number_format($activeUsers ?? 0) }}</h4>
                            </div>
                            <small class="mb-0">Email Terverifikasi</small>
                        </div>
                        <div class="avatar">
                            <span class="avatar-initial rounded bg-label-success">
                                <i class="icon-base ti tabler-user-check icon-26px"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-xl-4">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="content-left">
                            <span class="text-heading">Pengguna Tertunda</span>
                            <div class="d-flex align-items-center my-1">
                                <h4 class="mb-0 me-2">{{ number_format($pendingUsers ?? 0) }}</h4>
                            </div>
                            <small class="mb-0">Emails Belum Terverifikasi</small>
                        </div>
                        <div class="avatar">
                            <span class="avatar-initial rounded bg-label-warning">
                                <i class="icon-base ti tabler-user-search icon-26px"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <ul class="nav nav-pills mb-4" role="tablist">
        <li class="nav-item">
            <a class="nav-link {{ $tab == 'active' ? 'active' : '' }}" href="{{ route('users.index', ['tab' => 'active', 'role' => request('role'), 'search' => request('search')]) }}">
                <i class="ti tabler-user-check me-1"></i> Active Users
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link {{ $tab == 'pending' ? 'active' : '' }}" href="{{ route('users.index', ['tab' => 'pending', 'role' => request('role'), 'search' => request('search')]) }}">
                <i class="ti tabler-clock me-1"></i> Pending Verifications
                @if(($pendingUsers ?? 0) > 0)
                    <span class="badge rounded-pill badge-center h-px-20 w-px-20 bg-danger ms-1">{{ $pendingUsers }}</span>
                @endif
            </a>
        </li>
    </ul>

    <div class="card">
        <div class="card-header border-bottom d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">Daftar Pengguna</h5>
            <a class="btn btn-sm btn-primary" href="{{ route('users.create') }}">
                <i class="ti tabler-plus me-1"></i> Tambah User Baru
            </a>
        </div>
        
        <form method="GET" action="{{ route('users.index') }}" id="filterForm">
            <input type="hidden" name="tab" value="{{ $tab }}">
            <div class="card-body border-bottom pt-4">
                <div class="row g-3 align-items-center">
                    <div class="col-md-auto">
                        <div class="d-flex align-items-center">
                            <label class="me-2 text-nowrap">Show</label>
                            <select name="per_page" class="form-select form-select-sm w-auto" onchange="this.form.submit()">
                                <option value="10" {{ request('per_page') == 10 ? 'selected' : '' }}>10</option>
                                <option value="25" {{ request('per_page') == 25 ? 'selected' : '' }}>25</option>
                                <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</option>
                            </select>
                            <label class="ms-2 text-nowrap">entries</label>
                        </div>
                    </div>
                    
                    <div class="col-md-3">
                        <select name="role" class="form-select form-select-sm" onchange="this.form.submit()">
                            <option value="">-- All Roles --</option>
                            @foreach($roles as $roleEnum)
                                <option value="{{ $roleEnum->value }}" {{ request('role') == $roleEnum->value ? 'selected' : '' }}>
                                    {{ $roleEnum->label() }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-auto ms-auto">
                        <div class="input-group input-group-sm">
                            <input type="text" name="search" class="form-control" placeholder="Search name or email..." value="{{ request('search') }}">
                            <button type="submit" class="btn btn-primary"><i class="ti tabler-search"></i></button>
                            @if(request()->anyFilled(['search', 'role']))
                                <a href="{{ route('users.index', ['tab' => $tab]) }}" class="btn btn-label-secondary" title="Reset Filters"><i class="ti tabler-refresh"></i></a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <div class="table-responsive text-nowrap">
            <table class="table table-hover">
                <thead class="border-top">
                    <tr>
                        <th>No</th>
                        <th>User</th>
                        <th>Role</th>
                        <th>Status</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($users as $index => $user)
                        <tr>
                            <td>{{ $users->firstItem() + $index }}</td>
                            <td>
                                <div class="d-flex justify-content-start align-items-center user-name">
                                    <div class="avatar-wrapper me-3">
                                        <div class="avatar avatar-sm">
                                            <span class="avatar-initial rounded-circle bg-label-dark">{{ strtoupper(substr($user->name, 0, 2)) }}</span>
                                        </div>
                                    </div>
                                    <div class="d-flex flex-column">
                                        <span class="fw-medium text-heading">{{ $user->name }}</span>
                                        <small class="text-muted">{{ $user->email }}</small>
                                    </div>
                                </div>
                            </td>
                            <td>
                                @php
                                    $roleKey = ($user->role instanceof \App\Enums\Role) ? $user->role->value : $user->role;
                                    $roleColors = [
                                        'super_admin' => 'bg-label-danger',
                                        'admin'       => 'bg-label-warning',
                                        'koordinator' => 'bg-label-primary',
                                        'enumerator'  => 'bg-label-info',
                                        'fasilitator' => 'bg-label-dark',
                                        'petani'      => 'bg-label-success',
                                    ];
                                    $color = $roleColors[$roleKey] ?? 'bg-label-secondary';
                                    $roleLabel = ($user->role instanceof \App\Enums\Role)
                                        ? $user->role->label()
                                        : ucfirst(str_replace('_', ' ', (string) $roleKey));
                                @endphp
                                <span class="badge {{ $color }}">
                                    {{ $roleLabel }}
                                </span>
                                @if($roleKey === 'koordinator')
                                    <small class="d-block text-muted mt-1">
                                        {{ $user->koordinatorKomoditas->pluck('komoditas.nama')->filter()->join(', ') ?: 'Belum ada komoditas' }}
                                    </small>
                                @endif
                            </td>
                            <td>
                                @if($user->email_verified_at)
                                    <span class="badge bg-label-success">Verified</span>
                                @else
                                    <span class="badge bg-label-warning">Pending</span>
                                    
                                   
                                @endif
                            </td>
                           <td>
                    <div class="d-flex align-items-center">
                        <a href="javascript:;" class="btn btn-icon btn-text-secondary rounded-pill edit-record" title="Edit" data-id="{{ $user->id }}">
                            <i class="ti tabler-edit ti-md"></i>
                        </a>
                        
                        <a href="javascript:;" class="btn btn-icon btn-text-secondary rounded-pill delete-record" data-id="{{ $user->id }}" data-name="{{ $user->name }}" title="Delete">
                            <i class="ti tabler-trash ti-md"></i>
                        </a>

                        @if($roleKey === 'koordinator')
                        <a href="javascript:;" class="btn btn-icon btn-text-secondary rounded-pill btn-komoditas-koordinator"
                            title="Atur Komoditas"
                            data-url="{{ route('users.komoditas.update', $user->id) }}"
                            data-name="{{ $user->name }}"
                            data-selected='@json($user->koordinatorKomoditas->pluck('komoditas_id')->values())'>
                            <i class="ti tabler-plant ti-md"></i>
                        </a>
                        @endif
                        
                        @if(!$user->email_verified_at)
                        <button type="button" 
                                class="btn btn-primary px-9 d-flex align-items-center btn-verify shadow-sm waves-effect waves-light" 
                                style="margin-left: 60px;"
                                data-url="{{ route('users.verify', $user->id) }}">
                                <i class="ti tabler-user-check me-2"></i> Verify
                            </button>
                        @endif
                    </div>
                </td>
                        </tr>
                    @empty
                        <tr><td colspan="5" class="text-center py-4">No users found.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <div class="card-footer d-flex justify-content-center justify-content-md-end border-top">
            {{ $users->appends(request()->query())->links('pagination::bootstrap-5') }}
        </div>
    </div>
    @include('konfigurasi.user.edit')
</div>
@endsection

@push('scripts')
<script>
    'use strict';
    const csrfToken = "{{ csrf_token() }}";

    $(document).ready(function () {
        $(document).on('click', '.btn-verify', function (e) {
            e.preventDefault();
            const url = $(this).data('url');

            Swal.fire({
                title: 'Verifikasi Akun',
                icon: 'info',
                iconColor: '#696cff',
                width: '28em', 
                html: `
                    <p class="text-muted mb-4" style="font-size: 0.95rem;">Tentukan role akses untuk pengguna ini agar dapat masuk ke dalam sistem AgroMonev.</p>
                    
                    <div class="px-2 px-md-4 mb-2">
                        <select id="role-select" class="form-select form-select-md text-start shadow-none" style="cursor: pointer; border-radius: 8px; border-color: #d9dee3;">
                            <option value="" selected disabled>-- Pilih Role Akses --</option>
                            <option value="super_admin">🟣 Super Admin</option>
                            <option value="admin">🟣 Admin</option>
                            <option value="koordinator">🟣 Koordinator</option>
                            <option value="enumerator">🟣 Enumerator</option>
                            <option value="fasilitator">🟣 Fasilitator (Pemateri Workshop)</option>
                            <option value="offtaker">🟣 Offtaker</option>
                        </select>
                    </div>
                `,
                showCancelButton: true,
                confirmButtonText: '<i class="ti tabler-check me-1"></i> Simpan', 
                cancelButtonText: 'Batal',
                customClass: { 
                    popup: 'rounded-4', 
                    confirmButton: 'btn btn-primary me-3 waves-effect waves-light', 
                    cancelButton: 'btn btn-label-secondary waves-effect' 
                },
                buttonsStyling: false,
                preConfirm: () => {
                    const role = Swal.getPopup().querySelector('#role-select').value;
                    if (!role) {
                        Swal.showValidationMessage('Silakan pilih role terlebih dahulu!');
                    }
                    return { role: role };
                }
            }).then(function (result) {
                if (result.isConfirmed) {
                    const payload = {
                        _token: csrfToken,
                        _method: 'PUT',
                        role: result.value.role
                    };

                    $.ajax({
                        url: url,
                        type: 'POST', 
                        data: payload,
                        success: function (res) {
                            if (res.status === 'success') {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Berhasil!',
                                    text: res.message,
                                    showConfirmButton: false,
                                    timer: 1500,
                                    customClass: { popup: 'rounded-4' }
                                }).then(() => {
                                    window.location.reload(); 
                                });
                            } else {
                                Swal.fire({ icon: 'error', title: 'Gagal!', text: res.message, customClass: { popup: 'rounded-4' } });
                            }
                        },
                        error: function (xhr) {
                            let errorMsg = xhr.responseJSON ? xhr.responseJSON.message : 'Terjadi kesalahan pada server.';
                            Swal.fire({ icon: 'error', title: 'Error!', text: errorMsg, customClass: { popup: 'rounded-4' } });
                        }
                    });
                }
            });
        });

        const offcanvasEditEl = document.getElementById('offcanvasEdit');
        let bsOffcanvasEdit;
        if (offcanvasEditEl) {
            bsOffcanvasEdit = new bootstrap.Offcanvas(offcanvasEditEl);
        }

        $(document).on('click', '.edit-record', function (e) {
            e.preventDefault();
            const id = $(this).data('id');
            if (!id) return;

            $(this).html('<span class="spinner-border spinner-border-sm" role="status"></span>');
            const btn = $(this);

            $.ajax({
                url: `/users/${id}`,
                type: 'GET',
                success: function (res) {
                    btn.html('<i class="ti tabler-edit ti-md"></i>');
                    if (res.status === 'success') {
                        const user = res.data;
                        $('#editUserName').text(user.name); 
                        $('#editEmail').text(user.email);
                        $('#formEdit').attr('action', `/users/${user.id}`); 
                        $('#formEdit')[0].reset();

                        const bsOffcanvasEdit = bootstrap.Offcanvas.getOrCreateInstance(offcanvasEditEl);
                        bsOffcanvasEdit.show();
                    }
                },
                error: function () {
                    btn.html('<i class="ti tabler-edit ti-md"></i>');
                    Swal.fire({ icon: 'error', title: 'Error', text: 'Gagal mengambil data user.' });
                }
            });
        });

        $('#formEdit').on('submit', function (e) {
            e.preventDefault();
            const form = $(this);
            const submitBtn = form.find('button[type="submit"]');
            
            submitBtn.prop('disabled', true).text('Menyimpan...');

            $.ajax({
                url: form.attr('action'),
                type: 'POST',
                data: form.serialize(),
                success: function (res) {
                    if (res.status === 'success') {
                        bootstrap.Offcanvas.getInstance(document.getElementById('offcanvasEdit')).hide();
                        Swal.fire({ icon: 'success', title: 'Berhasil!', text: res.message, showConfirmButton: false, timer: 1500 })
                            .then(() => window.location.reload());
                    }
                },
                error: function (xhr) {
                    submitBtn.prop('disabled', false).text('Update Password');
                    let errorMsg = xhr.responseJSON?.message || 'Gagal mengupdate password.';
                    if (xhr.responseJSON?.errors) {
                        errorMsg = Object.values(xhr.responseJSON.errors).map(err => err.join(', ')).join('<br>');
                    }
                    Swal.fire({ icon: 'error', title: 'Gagal!', html: errorMsg });
                }
            });
        });

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

            Swal.fire({
                title: 'Hapus Pengguna?',
                text: `Apakah kamu yakin ingin menghapus ${name}?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, hapus!',
                cancelButtonText: 'Batal',
                customClass: { confirmButton: 'btn btn-danger me-3', cancelButton: 'btn btn-label-secondary' },
                buttonsStyling: false
            }).then(function (result) {
                if (result.value) {
                    $.ajax({
                        url: `/users/${id}`,
                        type: 'DELETE',
                        headers: { 'X-CSRF-TOKEN': csrfToken },
                        success: function (res) {
                            Swal.fire({ icon: 'success', title: 'Berhasil dihapus!', text: res.message, showConfirmButton: false, timer: 1500 })
                                .then(() => window.location.reload());
                        },
                        error: () => Swal.fire({ icon: 'error', title: 'Error!', text: 'Failed to delete data.' })
                    });
                }
            });
        });
    });
</script>
<script>
    // Atur komoditas yang ditangani koordinator
    $(function () {
        const komoditasOptions = @json($komoditasOptions);

        $(document).on('click', '.btn-komoditas-koordinator', function () {
            const url = $(this).data('url');
            const nama = $(this).data('name');
            const selected = ($(this).data('selected') || []).map(Number);

            const checkboxes = komoditasOptions.map(function (k) {
                const checked = selected.includes(k.id) ? 'checked' : '';
                return `<div class="form-check text-start mb-2">
                            <input class="form-check-input komoditas-koordinator-check" type="checkbox" value="${k.id}" id="kk-${k.id}" ${checked}>
                            <label class="form-check-label" for="kk-${k.id}">${$('<div>').text(k.nama).html()}</label>
                        </div>`;
            }).join('');

            Swal.fire({
                title: 'Komoditas Koordinator',
                html: `<p class="text-muted mb-4">Pilih komoditas yang dikoordinasikan oleh <strong>${$('<div>').text(nama).html()}</strong>.</p>
                       <div class="px-4">${checkboxes || '<p class="text-muted">Belum ada komoditas utama.</p>'}</div>`,
                showCancelButton: true,
                confirmButtonText: '<i class="ti tabler-check me-1"></i> Simpan',
                cancelButtonText: 'Batal',
                customClass: {
                    popup: 'rounded-4',
                    confirmButton: 'btn btn-primary me-3',
                    cancelButton: 'btn btn-label-secondary'
                },
                buttonsStyling: false,
                preConfirm: function () {
                    const ids = Array.from(Swal.getPopup().querySelectorAll('.komoditas-koordinator-check:checked')).map(el => el.value);
                    if (ids.length === 0) {
                        Swal.showValidationMessage('Pilih minimal satu komoditas.');
                        return false;
                    }
                    return ids;
                }
            }).then(function (result) {
                if (!result.isConfirmed) {
                    return;
                }

                $.ajax({
                    url: url,
                    type: 'PUT',
                    headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
                    data: { komoditas_ids: result.value },
                    success: function (res) {
                        Swal.fire({ icon: 'success', title: 'Berhasil!', text: res.message, showConfirmButton: false, timer: 1500 })
                            .then(() => location.reload());
                    },
                    error: function (xhr) {
                        const res = xhr.responseJSON || {};
                        const errors = res.errors ? Object.values(res.errors).flat().join('<br>') : null;
                        Swal.fire({ icon: 'error', title: 'Gagal!', html: errors || res.message || 'Gagal menyimpan komoditas.' });
                    }
                });
            });
        });
    });
</script>
@endpush