@extends('layouts.admin')

@section('header')
    Ranks
@endsection

@section('content')
    <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
        <div class="p-6 text-gray-900">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-lg font-medium leading-6 text-gray-900">Manage Ranks</h3>
                <a href="{{ route('ranks.create') }}" class="inline-flex items-center px-4 py-2 bg-indigo-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-indigo-700 focus:bg-indigo-700 active:bg-indigo-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150">
                    Add Rank
                </a>
            </div>

            @if(session('success'))
                <div class="mb-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
                    <span class="block sm:inline">{{ session('success') }}</span>
                </div>
            @endif

            @if($ranks->count() > 0)
                <div class="mb-4 p-4 bg-blue-50 border border-blue-200 rounded-md">
                    <p class="text-sm text-blue-800">
                        <strong>Tip:</strong> Drag and drop ranks to reorder them. Most senior at the top.
                    </p>
                </div>

                <div id="ranks-list" class="space-y-3">
                    @foreach($ranks as $rank)
                        <div class="rank-item bg-white border border-gray-200 rounded-lg p-4 cursor-move hover:shadow-md transition-shadow duration-200" data-id="{{ $rank->id }}">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-4 flex-1">
                                    <!-- Drag Handle -->
                                    <div class="text-gray-400">
                                        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16" />
                                        </svg>
                                    </div>

                                    <!-- Rank Preview -->
                                    <div class="w-10 h-10 rounded-md border-2 border-gray-300 flex items-center justify-center" 
                                         style="@if($rank->css)background:{{ $rank->css }}@else background-color: {{ $rank->color ?? '#cccccc' }};@endif">
                                    </div>

                                    <!-- Rank Info -->
                                    <div>
                                        <h4 class="text-lg font-semibold text-gray-900 mb-0">{{ $rank->name }}</h4>
                                        @if($rank->css)
                                            <p class="text-xs text-gray-500">Custom CSS</p>
                                        @elseif($rank->color)
                                            <p class="text-xs text-gray-500">Color: {{ $rank->color }}</p>
                                        @endif
                                    </div>
                                </div>

                                <!-- Actions -->
                                <div class="flex gap-2">
                                    <a href="{{ route('ranks.edit', $rank) }}" class="text-blue-600 hover:text-blue-900 px-3 py-1 text-sm font-medium">
                                        Edit
                                    </a>
                                    <form method="POST" action="{{ route('ranks.destroy', $rank) }}" onsubmit="return confirm('Are you sure you want to delete this rank?');" class="inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="text-red-600 hover:text-red-900 px-3 py-1 text-sm font-medium">
                                            Delete
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="text-center py-12">
                    <p class="text-gray-500">No ranks found. Create your first rank to get started.</p>
                </div>
            @endif
        </div>
    </div>

    @if($ranks->count() > 0)
        <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const el = document.getElementById('ranks-list');
                const sortable = Sortable.create(el, {
                    animation: 150,
                    handle: '.rank-item',
                    onEnd: function(evt) {
                        const ranks = Array.from(el.querySelectorAll('.rank-item')).map(item => item.dataset.id);
                        
                        fetch('{{ route('ranks.reorder') }}', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify({ ranks: ranks })
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                console.log('Ranks reordered successfully');
                            }
                        })
                        .catch(error => console.error('Error:', error));
                    }
                });
            });
        </script>
    @endif
@endsection