@extends('layouts.admin')
@section('css')
    <!-- Select2 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"/>
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css"/>
    <style>
        /* Make Select2 match Bootstrap form-control style */
        .select2-container .select2-selection--single {
            height: 38px;
            padding: 5px 12px;
            font-size: 1rem;
            line-height: 1.5;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
        }

        /* Match focus state */
        .select2-container--focus .select2-selection--single {
            border-color: #86b7fe;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }
    </style>
@endsection
@section('admin')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0 font-size-18">Achievement Management</h4>
                <div class="page-title-right">
                    <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#createModal">
                        <i class="fas fa-plus"></i> Create Achievement
                    </button>
                </div>
            </div>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>Name</th>
                                <th>Description</th>
                                <th>Image</th>
                                <th>Type</th>
                                <th>Condition</th>
                                <th>Validity</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($achievements as $achievement)
                                @php
                                    $file = $achievement->image;
                                @endphp
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $achievement->name }}</td>
                                    <td>
                                        @if($achievement->description)
                                            <span title="{{ $achievement->description }}">
                                                {{ Str::limit($achievement->description, 50) }}
                                            </span>
                                        @else
                                            <span class="text-muted">No description</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if(!empty($achievement->image) && file_exists($achievement->image))
                                            @php
                                                $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
                                            @endphp
                                            @if($ext === 'svga')
                                                <div id="svga-player-{{ $achievement->id }}"
                                                     style="width:50px; height:50px;"></div>
                                                <script>
                                                    document.addEventListener("DOMContentLoaded", function () {
                                                        const player{{ $achievement->id }} = new SVGA.Player('#svga-player-{{ $achievement->id }}');
                                                        const parser{{ $achievement->id }} = new SVGA.Parser('#svga-player-{{ $achievement->id }}');

                                                        parser{{ $achievement->id }}.load('{{ asset($achievement->image) }}', function (videoItem) {
                                                            player{{ $achievement->id }}.setVideoItem(videoItem);
                                                            player{{ $achievement->id }}.startAnimation();
                                                        });
                                                    });
                                                </script>
                                            @else
                                                <img src="{{ asset($file) }}" alt="image" width="50" height="50"
                                                     style="object-fit:cover" loading="lazy">
                                            @endif
                                        @else
                                            <img
                                                src="https://coffective.com/wp-content/uploads/2018/06/default-featured-image.png.jpg"
                                                alt="image" width="50" height="50" loading="lazy">
                                        @endif
                                    </td>
                                    <td>
                                        <span class="badge bg-{{
                                            $achievement->type == 'vip' ? 'primary' :
                                            ($achievement->type == 'svip' ? 'warning' :
                                            ($achievement->type == 'level' ? 'info' : 'success'))
                                        }}">
                                            {{ strtoupper($achievement->type) }}
                                        </span>
                                    </td>
                                    <td>
                                        @if($achievement->type == 'vip' && $achievement->vip)
                                            VIP: {{ $achievement->vip->name ?? 'VIP ' . $achievement->vip_id }}
                                        @elseif($achievement->type == 'svip' && $achievement->svip)
                                            SVIP: {{ $achievement->svip->name ?? 'SVIP ' . $achievement->svip_id }}
                                        @elseif($achievement->type == 'level' && $achievement->level)
                                            {{ $achievement->level->level_name }}
                                            ({{ ucfirst($achievement->level_type) }})
                                        @elseif($achievement->type == 'amount')
                                            Amount: {{ number_format($achievement->amount, 2) }}
                                        @else
                                            <span class="text-muted">Not set</span>
                                        @endif
                                    </td>
                                    <td>{{ $achievement->validity_days }} days</td>
                                    <td>
                                        <span class="badge bg-{{ $achievement->is_active ? 'success' : 'danger' }}">
                                            {{ $achievement->is_active ? 'Active' : 'Inactive' }}
                                        </span>
                                    </td>
                                    <td>
                                        <button class="btn btn-info btn-sm" data-bs-toggle="modal"
                                                data-bs-target="#sendUserModal{{$achievement->id}}">Send
                                        </button>
                                        <button class="btn btn-sm btn-primary" data-bs-toggle="modal"
                                                data-bs-target="#editModal{{ $achievement->id }}">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="btn btn-sm btn-danger" data-bs-toggle="modal"
                                                data-bs-target="#deleteModal{{ $achievement->id }}">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>

                                <!-- Send User Modal -->
                                <div class="modal fade" id="sendUserModal{{$achievement->id}}" tabindex="-1"
                                     aria-labelledby="exampleModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h1 class="modal-title fs-5" id="exampleModalLabel">Send to User </h1>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close"></button>
                                            </div>
                                            <form action="{{route('admin.achievement.send.to.user')}}" method="post"
                                                  enctype="multipart/form-data">
                                                @csrf
                                                <div class="modal-body">
                                                    <div class="row">
                                                        <div class="col-md-12" style="margin-top: 10px;">
                                                            <label>User</label>
                                                            <select class="form-control select2-users" name="user_id" style="width: 100%;" required>
                                                                <option value="">Select User</option>
                                                                @foreach($users as $user)
                                                                    <option value="{{$user->user_id}}">{{$user->name}} ({{$user->user_id}})</option>
                                                                @endforeach
                                                            </select>
                                                            <input type="hidden" class="form-control"
                                                                   name="gift_id" value="{{$achievement->id}}"
                                                                   required>
                                                        </div>

                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary"
                                                            data-bs-dismiss="modal">Close
                                                    </button>
                                                    <button type="submit" class="btn btn-primary">Save</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>

                                <!-- Edit Modal -->
                                <div class="modal fade" id="editModal{{ $achievement->id }}" tabindex="-1">
                                    <div class="modal-dialog modal-lg">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title">Edit Achievement</h5>
                                                <button type="button" class="btn-close"
                                                        data-bs-dismiss="modal"></button>
                                            </div>
                                            <form action="{{ route('admin.achievement.update') }}" method="POST"
                                                  enctype="multipart/form-data">
                                                @csrf
                                                <div class="modal-body">
                                                    <input type="hidden" name="id" value="{{ $achievement->id }}">

                                                    <div class="row">
                                                        <div class="col-md-6 mb-3">
                                                            <label>Name *</label>
                                                            <input type="text" class="form-control" name="name"
                                                                   value="{{ $achievement->name }}" required>
                                                        </div>

                                                        <div class="col-md-6 mb-3">
                                                            <label>Type *</label>
                                                            <select class="form-control" name="type"
                                                                    id="edit_type_{{ $achievement->id }}">
                                                                <option value="">Select Type</option>
                                                                <option
                                                                    value="vip" {{ $achievement->type == 'vip' ? 'selected' : '' }}>
                                                                    VIP
                                                                </option>
                                                                <option
                                                                    value="svip" {{ $achievement->type == 'svip' ? 'selected' : '' }}>
                                                                    SVIP
                                                                </option>
                                                                <option
                                                                    value="level" {{ $achievement->type == 'level' ? 'selected' : '' }}>
                                                                    Level
                                                                </option>
                                                                <option
                                                                    value="amount" {{ $achievement->type == 'amount' ? 'selected' : '' }}>
                                                                    Amount
                                                                </option>
                                                            </select>
                                                        </div>

                                                        <!-- Conditional Fields -->
                                                        <div class="col-md-6 mb-3 vip-field"
                                                             style="display: {{ $achievement->type == 'vip' ? 'block' : 'none' }}">
                                                            <label>Select VIP *</label>
                                                            <select class="form-control" name="vip_id">
                                                                <option value="">Select VIP</option>
                                                                @foreach($vips as $vip)
                                                                    <option value="{{ $vip->id }}"
                                                                        {{ $achievement->vip_id == $vip->id ? 'selected' : '' }}>
                                                                        {{ $vip->name ?? 'VIP ' . $vip->id }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>

                                                        <div class="col-md-6 mb-3 svip-field"
                                                             style="display: {{ $achievement->type == 'svip' ? 'block' : 'none' }}">
                                                            <label>Select SVIP *</label>
                                                            <select class="form-control" name="svip_id">
                                                                <option value="">Select SVIP</option>
                                                                @foreach($svips as $svip)
                                                                    <option value="{{ $svip->id }}"
                                                                        {{ $achievement->svip_id == $svip->id ? 'selected' : '' }}>
                                                                        {{ $svip->name ?? 'SVIP ' . $svip->id }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>

                                                        <div class="col-md-6 mb-3 level-type-field"
                                                             style="display: {{ $achievement->type == 'level' ? 'block' : 'none' }}">
                                                            <label>Level Type *</label>
                                                            <select class="form-control" name="level_type"
                                                                    id="edit_level_type_{{ $achievement->id }}">
                                                                <option
                                                                    value="receiving" {{ $achievement->level_type == 'receiving' ? 'selected' : '' }}>
                                                                    Receiving
                                                                </option>
                                                                <option
                                                                    value="sending" {{ $achievement->level_type == 'sending' ? 'selected' : '' }}>
                                                                    Sending
                                                                </option>
                                                            </select>
                                                        </div>

                                                        <div class="col-md-6 mb-3 level-field"
                                                             style="display: {{ $achievement->type == 'level' ? 'block' : 'none' }}">
                                                            <label>Select Level *</label>
                                                            <select class="form-control" name="level_id"
                                                                    id="edit_level_id_{{ $achievement->id }}">
                                                                <option value="">Select Level</option>
                                                                @if($achievement->level_type == 'receiving')
                                                                    @foreach($receving_levels as $level)
                                                                        <option value="{{ $level->id }}"
                                                                            {{ $achievement->level_id == $level->id ? 'selected' : '' }}>
                                                                            {{ $level->level_name }}
                                                                        </option>
                                                                    @endforeach
                                                                @else
                                                                    @foreach($sending_levels as $level)
                                                                        <option value="{{ $level->id }}"
                                                                            {{ $achievement->level_id == $level->id ? 'selected' : '' }}>
                                                                            {{ $level->level_name }}
                                                                        </option>
                                                                    @endforeach
                                                                @endif
                                                            </select>
                                                        </div>

                                                        <div class="col-md-6 mb-3 amount-field"
                                                             style="display: {{ $achievement->type == 'amount' ? 'block' : 'none' }}">
                                                            <label>Amount *</label>
                                                            <input type="number" class="form-control" name="amount"
                                                                   value="{{ $achievement->amount }}" min="0"
                                                                   step="0.01">
                                                        </div>

                                                        <div class="col-md-12 mb-3">
                                                            <label>Description</label>
                                                            <textarea class="form-control" name="description" rows="3"
                                                                      placeholder="Enter achievement description (optional)">{{ $achievement->description }}</textarea>
                                                            <small class="text-muted">Describe what this achievement
                                                                represents</small>
                                                        </div>

                                                        <div class="col-md-6 mb-3">
                                                            <label>Achievement Current Image</label><br>
                                                            @if($achievement->image && file_exists(public_path($achievement->image)))
                                                                <img src="{{ asset($achievement->image) }}"
                                                                     alt="Current"
                                                                     width="80" height="80" class="mb-2"
                                                                     style="object-fit: cover;">
                                                            @endif
                                                            <input type="file" class="form-control" name="image">
                                                            <small class="text-muted">Leave empty to keep current
                                                                image</small>
                                                        </div>

                                                        <div class="col-md-6 mb-3">
                                                            <label>Validity Days *</label>
                                                            <input type="number" class="form-control"
                                                                   name="validity_days"
                                                                   value="{{ $achievement->validity_days }}" min="1"
                                                                   required>
                                                        </div>


                                                        <div class="col-md-6 mb-3">
                                                            <label>Animation Type</label>
                                                            <select class="form-control" name="animation_type">
                                                                <option
                                                                    value="full" {{ $achievement->animation_type == 'full' ? 'selected' : '' }}>
                                                                    Full
                                                                </option>
                                                                <option
                                                                    value="profile" {{ $achievement->animation_type == 'profile' ? 'selected' : '' }}>
                                                                    Profile
                                                                </option>
                                                            </select>
                                                        </div>

                                                        <div class="col-md-6 mb-3">
                                                            <label>Status</label>
                                                            <select class="form-control" name="is_active">
                                                                <option
                                                                    value="1" {{ $achievement->is_active ? 'selected' : '' }}>
                                                                    Active
                                                                </option>
                                                                <option
                                                                    value="0" {{ !$achievement->is_active ? 'selected' : '' }}>
                                                                    Inactive
                                                                </option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary"
                                                            data-bs-dismiss="modal">Cancel
                                                    </button>
                                                    <button type="submit" class="btn btn-primary">Update</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>

                                <!-- Delete Modal -->
                                <div class="modal fade" id="deleteModal{{ $achievement->id }}" tabindex="-1">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title">Confirm Delete</h5>
                                                <button type="button" class="btn-close"
                                                        data-bs-dismiss="modal"></button>
                                            </div>
                                            <form action="{{ route('admin.achievement.destroy') }}" method="POST">
                                                @csrf
                                                <div class="modal-body">
                                                    <input type="hidden" name="id" value="{{ $achievement->id }}">
                                                    <p>Are you sure you want to delete the achievement
                                                        "<strong>{{ $achievement->name }}</strong>"?</p>
                                                    @if($achievement->description)
                                                        <p><strong>Description:</strong> {{ $achievement->description }}
                                                        </p>
                                                    @endif
                                                    <p class="text-danger">This action cannot be undone.</p>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary"
                                                            data-bs-dismiss="modal">Cancel
                                                    </button>
                                                    <button type="submit" class="btn btn-danger">Delete</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <tr>
                                    <td colspan="9" class="text-center py-4">
                                        <i class="fas fa-trophy fa-2x text-muted mb-3"></i>
                                        <p>No achievements found. Create your first achievement!</p>
                                    </td>
                                </tr>
                            @endforelse
                            </tbody>
                        </table>
                    </div>

                    @if($achievements->hasPages())
                        <div class="mt-3">
                            {{ $achievements->links() }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Create Modal -->
    <div class="modal fade" id="createModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Create New Achievement</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form action="{{ route('admin.achievement.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label>Name *</label>
                                <input type="text" class="form-control" name="name" required>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label>Type *</label>
                                <select class="form-control" name="type" id="type">
                                    <option value="">Select Type</option>
                                    <option value="vip">VIP</option>
                                    <option value="svip">SVIP</option>
                                    <option value="level">Level</option>
                                    <option value="amount">Amount</option>
                                </select>
                            </div>

                            <!-- Conditional Fields (hidden by default) -->
                            <div class="col-md-6 mb-3 vip-field" style="display: none;">
                                <label>Select VIP *</label>
                                <select class="form-control" name="vip_id">
                                    <option value="">Select VIP</option>
                                    @foreach($vips as $vip)
                                        <option value="{{ $vip->id }}">{{ $vip->name ?? 'VIP ' . $vip->id }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6 mb-3 svip-field" style="display: none;">
                                <label>Select SVIP *</label>
                                <select class="form-control" name="svip_id">
                                    <option value="">Select SVIP</option>
                                    @foreach($svips as $svip)
                                        <option
                                            value="{{ $svip->id }}">{{ $svip->name ?? 'SVIP ' . $svip->id }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6 mb-3 level-type-field" style="display: none;">
                                <label>Level Type *</label>
                                <select class="form-control" name="level_type" id="level_type">
                                    <option value="receiving">Receiving</option>
                                    <option value="sending">Sending</option>
                                </select>
                            </div>

                            <div class="col-md-6 mb-3 level-field" style="display: none;">
                                <label>Select Level *</label>
                                <select class="form-control" name="level_id" id="level_id">
                                    <option value="">Select Level</option>
                                    @foreach($receving_levels as $level)
                                        <option value="{{ $level->id }}">
                                            {{ $level->level_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6 mb-3 amount-field" style="display: none;">
                                <label>Amount *</label>
                                <input type="number" class="form-control" name="amount" min="0" step="0.01">
                            </div>

                            <div class="col-md-12 mb-3">
                                <label>Description</label>
                                <textarea class="form-control" name="description" rows="3"
                                          placeholder="Enter achievement description (optional)"></textarea>
                                <small class="text-muted">Describe what this achievement represents</small>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label>Achievement Image *</label>
                                <input type="file" class="form-control" name="image" required>
                                <small class="text-muted">Upload achievement image (jpg, png, gif, svg,svga)</small>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label>Validity Days *</label>
                                <input type="number" class="form-control" name="validity_days" min="1" required>
                            </div>


                            <div class="col-md-6 mb-3">
                                <label>Animation Type</label>
                                <select class="form-control" name="animation_type">
                                    <option value="full">Full</option>
                                    <option value="profile">Profile</option>
                                </select>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label>Status</label>
                                <select class="form-control" name="is_active">
                                    <option value="1">Active</option>
                                    <option value="0">Inactive</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Create</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://unpkg.com/svgaplayerweb@latest/build/svga.min.js"></script>
    <script>
        $(document).ready(function () {
            // Initialize Select2 for all user dropdowns
            $('.select2-users').each(function () {
                $(this).select2({
                    theme: 'bootstrap-5',
                    width: '100%',
                    placeholder: "Select user",
                    allowClear: true,
                    dropdownParent: $(this).closest('.modal') // Set dropdown parent to the specific modal
                });
            });

            // Reinitialize Select2 when modal is shown (for dynamic modals)
            $('.modal').on('shown.bs.modal', function () {
                $(this).find('.select2-users').select2({
                    theme: 'bootstrap-5',
                    width: '100%',
                    placeholder: "Select user",
                    allowClear: true,
                    dropdownParent: $(this) // Set dropdown parent to the current modal
                });
            });
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // For Create Modal
            const typeSelect = document.getElementById('type');
            const levelTypeSelect = document.getElementById('level_type');
            const levelIdSelect = document.getElementById('level_id');

            // Function to show/hide conditional fields
            function toggleConditionalFields(type, container) {
                console.log('Toggle fields for type:', type, 'in container:', container);

                // Hide all conditional fields first in this container
                const allFields = container.querySelectorAll('.vip-field, .svip-field, .level-type-field, .level-field, .amount-field');
                allFields.forEach(field => {
                    field.style.display = 'none';
                });

                // Remove required attribute from all conditional fields in this container
                const allInputs = container.querySelectorAll('.vip-field select, .svip-field select, .level-field select, .amount-field input, .level-type-field select');
                allInputs.forEach(input => {
                    input.removeAttribute('required');
                });

                // Show the selected field
                if (type) {
                    const selectedField = container.querySelector(`.${type}-field`);
                    if (selectedField) {
                        selectedField.style.display = 'block';
                        const input = selectedField.querySelector('select, input');
                        if (input) {
                            input.setAttribute('required', 'required');
                        }
                    }

                    // Special handling for level type
                    if (type === 'level') {
                        const levelTypeField = container.querySelector('.level-type-field');
                        const levelField = container.querySelector('.level-field');

                        if (levelTypeField) {
                            levelTypeField.style.display = 'block';
                            const levelTypeInput = levelTypeField.querySelector('select');
                            if (levelTypeInput) {
                                levelTypeInput.setAttribute('required', 'required');
                            }
                        }

                        if (levelField) {
                            levelField.style.display = 'block';
                            const levelInput = levelField.querySelector('select');
                            if (levelInput) {
                                levelInput.setAttribute('required', 'required');
                            }
                        }
                    }
                }
            }

            // Handle type change in create modal
            if (typeSelect) {
                const createModal = document.getElementById('createModal');
                typeSelect.addEventListener('change', function () {
                    console.log('Create modal type changed to:', this.value);
                    toggleConditionalFields(this.value, createModal);

                    // If level type changed, update level options
                    if (this.value === 'level') {
                        updateLevelOptions('receiving');
                    }
                });
            }

            // Handle level type change in create modal
            if (levelTypeSelect) {
                levelTypeSelect.addEventListener('change', function () {
                    console.log('Level type changed to:', this.value);
                    updateLevelOptions(this.value);
                });
            }

            // Update level options based on level type
            function updateLevelOptions(levelType) {
                console.log('Updating level options for:', levelType);

                fetch(`/admin/get-levels/${levelType}`)
                    .then(response => response.json())
                    .then(data => {
                        levelIdSelect.innerHTML = '<option value="">Select Level</option>';
                        data.forEach(level => {
                            const option = document.createElement('option');
                            option.value = level.id;
                            option.textContent = level.level_name;
                            levelIdSelect.appendChild(option);
                        });
                    })
                    .catch(error => console.error('Error:', error));
            }

            // Handle edit modals - attach event listeners when modals are shown
            document.addEventListener('show.bs.modal', function (event) {
                const modal = event.target;
                const typeSelect = modal.querySelector('[id^="edit_type_"]');

                if (typeSelect) {
                    const id = typeSelect.id.replace('edit_type_', '');
                    const currentValue = typeSelect.value;

                    console.log('Edit modal shown, type:', currentValue, 'id:', id);

                    // Initialize the modal with correct fields
                    toggleConditionalFields(currentValue, modal);

                    // Attach change event if not already attached
                    if (!typeSelect.hasAttribute('data-change-bound')) {
                        typeSelect.setAttribute('data-change-bound', 'true');

                        typeSelect.addEventListener('change', function () {
                            console.log('Edit modal type changed to:', this.value, 'id:', id);
                            toggleConditionalFields(this.value, modal);

                            // If level type changed, update level options
                            if (this.value === 'level') {
                                const levelTypeSelect = modal.querySelector(`#edit_level_type_${id}`);
                                if (levelTypeSelect) {
                                    updateLevelOptionsForEdit(levelTypeSelect.value, id);
                                }
                            }
                        });
                    }

                    // Handle level type change in edit modal
                    const levelTypeSelect = modal.querySelector(`#edit_level_type_${id}`);
                    if (levelTypeSelect && !levelTypeSelect.hasAttribute('data-change-bound')) {
                        levelTypeSelect.setAttribute('data-change-bound', 'true');

                        levelTypeSelect.addEventListener('change', function () {
                            console.log('Edit modal level type changed to:', this.value, 'id:', id);
                            updateLevelOptionsForEdit(this.value, id);
                        });
                    }
                }
            });

            // Update level options for edit modal
            function updateLevelOptionsForEdit(levelType, id) {
                console.log('Updating edit level options for:', levelType, 'id:', id);

                const levelIdSelect = document.getElementById(`edit_level_id_${id}`);
                if (!levelIdSelect) return;

                fetch(`/admin/get-levels/${levelType}`)
                    .then(response => response.json())
                    .then(data => {
                        levelIdSelect.innerHTML = '<option value="">Select Level</option>';
                        data.forEach(level => {
                            const option = document.createElement('option');
                            option.value = level.id;
                            option.textContent = level.level_name;
                            levelIdSelect.appendChild(option);
                        });
                    })
                    .catch(error => console.error('Error:', error));
            }

            // Form validation for conditional fields
            document.querySelectorAll('form').forEach(form => {
                form.addEventListener('submit', function (e) {
                    const typeField = this.querySelector('[name="type"]');
                    if (typeField && typeField.value) {
                        const type = typeField.value;
                        let isValid = true;

                        switch (type) {
                            case 'vip':
                                const vipField = this.querySelector('[name="vip_id"]');
                                if (vipField && (!vipField.value || vipField.value === "")) {
                                    alert('Please select a VIP');
                                    vipField.focus();
                                    isValid = false;
                                }
                                break;
                            case 'svip':
                                const svipField = this.querySelector('[name="svip_id"]');
                                if (svipField && (!svipField.value || svipField.value === "")) {
                                    alert('Please select a SVIP');
                                    svipField.focus();
                                    isValid = false;
                                }
                                break;
                            case 'level':
                                const levelTypeField = this.querySelector('[name="level_type"]');
                                const levelField = this.querySelector('[name="level_id"]');
                                if (levelTypeField && (!levelTypeField.value || levelTypeField.value === "")) {
                                    alert('Please select a level type');
                                    levelTypeField.focus();
                                    isValid = false;
                                } else if (levelField && (!levelField.value || levelField.value === "")) {
                                    alert('Please select a level');
                                    levelField.focus();
                                    isValid = false;
                                }
                                break;
                            case 'amount':
                                const amountField = this.querySelector('[name="amount"]');
                                if (amountField && (!amountField.value || parseFloat(amountField.value) <= 0)) {
                                    alert('Please enter a valid amount');
                                    amountField.focus();
                                    isValid = false;
                                }
                                break;
                        }

                        if (!isValid) {
                            e.preventDefault();
                        }
                    }
                });
            });

            // Initialize the page
            console.log('Achievement management page loaded');
        });
    </script>

    <script>
        // Add this script to pass PHP data to JavaScript
        // This should be placed before the main JavaScript code
        window.receivingLevels = @json($receving_levels);
        window.sendingLevels = @json($sending_levels);
    </script>
@endsection