@extends('layouts.admin')
@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>Image</th>
                                <th>Type</th>
                                <th>Condition</th>
                                <th>Validity</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            @forelse($achievements as $achievement)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $achievement->name }}</td>
                                    <td>
                                        @if($achievement->image && file_exists(public_path($achievement->image)))
                                            <img src="{{ asset($achievement->image) }}" alt="{{ $achievement->name }}"
                                                 width="50" height="50" style="object-fit: cover; border-radius: 5px;">
                                        @else
                                            <div class="bg-light d-flex align-items-center justify-content-center"
                                                 style="width: 50px; height: 50px; border-radius: 5px;">
                                                <i class="fas fa-trophy text-muted"></i>
                                            </div>
                                        @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)
                                            Level {{ $achievement->level->level_number }}
                                            ({{ 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-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>

                                <!-- 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="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>

                                                        <div class="col-md-6 mb-3">
                                                            <label>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>

                                                        <!-- 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->level_number }}
                                                                            - {{ $level->name }}
                                                                        </option>
                                                                    @endforeach
                                                                @else
                                                                    @foreach($sending_levels as $level)
                                                                        <option value="{{ $level->id }}"
                                                                            {{ $achievement->level_id == $level->id ? 'selected' : '' }}>
                                                                            Level {{ $level->level_number }}
                                                                            - {{ $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-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>
                                                    <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="8" 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>

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

                            <!-- 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->level_number }} - {{ $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-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>
        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, prefix = '') {
                // Hide all conditional fields
                document.querySelectorAll(`.${prefix}vip-field, .${prefix}svip-field, .${prefix}level-type-field, .${prefix}level-field, .${prefix}amount-field`)
                    .forEach(field => field.style.display = 'none');

                // Clear required fields
                document.querySelectorAll(`.${prefix}vip-field select, .${prefix}svip-field select, .${prefix}level-field select, .${prefix}amount-field input`)
                    .forEach(input => input.required = false);

                // Show selected field and make required
                if (type) {
                    const selectedField = document.querySelector(`.${prefix}${type}-field`);
                    if (selectedField) {
                        selectedField.style.display = 'block';
                        const input = selectedField.querySelector('select, input');
                        if (input) input.required = true;
                    }

                    // Special handling for level type
                    if (type === 'level') {
                        document.querySelector(`.${prefix}level-type-field`).style.display = 'block';
                        document.querySelector(`.${prefix}level-type-field select`).required = true;
                    }
                }
            }

            // Handle type change in create modal
            if (typeSelect) {
                typeSelect.addEventListener('change', function () {
                    toggleConditionalFields(this.value);

                    // 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 () {
                    updateLevelOptions(this.value);
                });
            }

            // Update level options based on level type
            function updateLevelOptions(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.level_number} - ${level.name}`;
                            levelIdSelect.appendChild(option);
                        });
                    })
                    .catch(error => console.error('Error:', error));
            }

            // Handle edit modals
            document.querySelectorAll('[id^="edit_type_"]').forEach(select => {
                const id = select.id.replace('edit_type_', '');

                select.addEventListener('change', function () {
                    toggleConditionalFields(this.value, `edit_`);

                    // Special handling for edit modals
                    const editPrefix = `edit_`;
                    if (this.value === 'level') {
                        const levelTypeSelect = document.getElementById(`edit_level_type_${id}`);
                        const levelIdSelect = document.getElementById(`edit_level_id_${id}`);

                        if (levelTypeSelect) {
                            updateLevelOptionsForEdit(levelTypeSelect.value, id);
                        }

                        document.querySelector(`.${editPrefix}level-type-field`).style.display = 'block';
                        document.querySelector(`.${editPrefix}level-type-field select`).required = true;
                    }
                });
            });

            // Handle level type change in edit modals
            document.querySelectorAll('[id^="edit_level_type_"]').forEach(select => {
                select.addEventListener('change', function () {
                    const id = this.id.replace('edit_level_type_', '');
                    updateLevelOptionsForEdit(this.value, id);
                });
            });

            // Update level options for edit modal
            function updateLevelOptionsForEdit(levelType, id) {
                const levelIdSelect = document.getElementById(`edit_level_id_${id}`);

                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.level_number} - ${level.name}`;
                            levelIdSelect.appendChild(option);
                        });
                    })
                    .catch(error => console.error('Error:', error));
            }

            // Initialize edit modals
            document.querySelectorAll('[id^="edit_type_"]').forEach(select => {
                const currentValue = select.value;
                const id = select.id.replace('edit_type_', '');
                toggleConditionalFields(currentValue, `edit_`);
            });
        });
    </script>
@endsection