@extends('layouts.admin')

@section('title', 'System Settings')
@section('header_title', 'Configuration & Meta Management')

@section('content')
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
        <!-- Sport Types -->
        <div class="data-card">
            <div class="card-header">
                <h2>Sport Category Directory</h2>
            </div>
            <div style="padding: 1.5rem 2.2rem; border-bottom: 1px solid var(--border);">
                <form action="{{ route('admin.sports.store') }}" method="POST" style="display: flex; gap: 1rem;">
                    @csrf
                    <input type="text" name="name" placeholder="Deploy New Category..."
                        style="flex: 1; background: rgba(255,255,255,0.03); border: 1px solid var(--border); padding: 0.8rem 1.2rem; border-radius: 12px; color: #fff; font-weight: 600;"
                        required>
                    <button type="submit" class="btn btn-primary"><i class="fas fa-plus"></i></button>
                </form>
            </div>
            <div class="table-wrap">
                <table class="admin-table">
                    <thead>
                        <tr>
                            <th>Category Identity</th>
                            <th>Identifier</th>
                            <th style="text-align: right;">Operations</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($sports as $sport)
                            <tr>
                                <td>
                                    <div style="display: flex; gap: 0.75rem; align-items: center;">
                                        <div
                                            style="width: 32px; height: 32px; background: rgba(255,255,255,0.05); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: var(--accent);">
                                            <i class="fas {{ $sport->icon ?? 'fa-square' }}"></i>
                                        </div>
                                        <div style="font-weight: 700; color: #fff;">{{ $sport->name }}</div>
                                    </div>
                                </td>
                                <td>{{ $sport->slug }}</td>
                                <td style="text-align: right;">
                                    <button class="btn btn-sm btn-outline"><i class="fas fa-edit"></i></button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Amenities -->
        <div class="data-card">
            <div class="card-header">
                <h2>Meta Amenity Directory</h2>
            </div>
            <div style="padding: 1.5rem 2.2rem; border-bottom: 1px solid var(--border);">
                <form action="{{ route('admin.amenities.store') }}" method="POST" style="display: flex; gap: 1rem;">
                    @csrf
                    <input type="text" name="name" placeholder="Register New Amenity..."
                        style="flex: 1; background: rgba(255,255,255,0.03); border: 1px solid var(--border); padding: 0.8rem 1.2rem; border-radius: 12px; color: #fff; font-weight: 600;"
                        required>
                    <button type="submit" class="btn btn-primary"><i class="fas fa-plus"></i></button>
                </form>
            </div>
            <div class="table-wrap">
                <table class="admin-table">
                    <thead>
                        <tr>
                            <th>Amenity Identity</th>
                            <th>Identifier</th>
                            <th style="text-align: right;">Operations</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($amenities as $amenity)
                            <tr>
                                <td>
                                    <div style="display: flex; gap: 0.75rem; align-items: center;">
                                        <div
                                            style="width: 32px; height: 32px; background: rgba(255,255,255,0.05); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: var(--primary);">
                                            <i class="fas {{ $amenity->icon ?? 'fa-square' }}"></i>
                                        </div>
                                        <div style="font-weight: 700; color: #fff;">{{ $amenity->name }}</div>
                                    </div>
                                </td>
                                <td>{{ $amenity->slug }}</td>
                                <td style="text-align: right;">
                                    <button class="btn btn-sm btn-outline"><i class="fas fa-edit"></i></button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="data-card" style="margin-top: 2rem;">
        <div class="card-header">
            <h2>Platform System Globals</h2>
        </div>
        <div style="padding: 2.5rem;">
            <form action="{{ route('admin.settings.update') }}" method="POST">
                @csrf
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2.5rem;">
                    <div>
                        <label
                            style="display: block; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.75rem;">Platform
                            Title</label>
                        <input type="text" value="INDOOR PLAYS Booking System"
                            style="width: 100%; padding: 1.1rem; border-radius: 14px; border: 1px solid var(--border); background: rgba(255,255,255,0.03); color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 700;"
                            disabled>
                    </div>
                    <div>
                        <label
                            style="display: block; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.75rem;">Global
                            Booking Fee (%)</label>
                        <input type="number" value="10"
                            style="width: 100%; padding: 1.1rem; border-radius: 14px; border: 1px solid var(--border); background: rgba(255,255,255,0.03); color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 700;">
                    </div>
                </div>
                <button type="submit" class="btn btn-primary" style="padding: 1.2rem 2.8rem;">INITIALIZE CONFIGURATION
                    UPDATE</button>
            </form>
        </div>
    </div>
@endsection