@extends('Common::admin.layout.page')

@section('page')

{{-- ===== Playground Info Grid ===== --}}
<div class="row">
    <div class="col-12">
        <div class="card card-primary card-outline">
            <div class="card-header">
                <h3 class="card-title d-flex justify-content-between align-items-center w-100">
                    <span><i class="fas fa-futbol mr-2"></i>{{ __('show playground') }}</span>
                    <a href="{{ route('admin.reviews.index', ['type' => 'playground', 'id' => $playground->id]) }}" class="btn btn-info btn-sm">
                        <i class="fa fa-star"></i> {{ __('View Reviews') }}
                    </a>
                </h3>
            </div>
            <div class="card-body">

                @php
                    $fields = [
                        ['icon' => 'fas fa-tag',             'label' => __('Name'),          'value' => $playground->Name,          'color' => ''],
                        ['icon' => 'fas fa-city',            'label' => __('City'),          'value' => $playground->City,          'color' => ''],
                        ['icon' => 'fas fa-user-tie',        'label' => __('Owner'),         'value' => $playground->Owner,         'color' => ''],
                        ['icon' => 'fas fa-th-large',        'label' => __('Category'),      'value' => $playground->category?->name,'color' => ''],
                        ['icon' => 'fas fa-leaf',            'label' => __('Grass Type'),    'value' => $playground->Grass_Type,    'color' => ''],
                        ['icon' => 'fas fa-lock-open',       'label' => __('Accessibility'), 'value' => $playground->Accessibility, 'color' => ''],
                        ['icon' => 'fas fa-phone',           'label' => __('Telephone'),     'value' => $playground->Telephone,     'color' => ''],
                        ['icon' => 'fas fa-envelope',        'label' => __('Email'),         'value' => $playground->Email,         'color' => ''],
                        ['icon' => 'fas fa-map-marker-alt',  'label' => __('Address'),       'value' => $playground->Address,       'color' => ''],
                        ['icon' => 'fas fa-compass',         'label' => __('Latitude'),      'value' => $playground->Latitude,      'color' => ''],
                        ['icon' => 'fas fa-compass',         'label' => __('Longitude'),     'value' => $playground->Longitude,     'color' => ''],
                        ['icon' => 'fas fa-toggle-on',       'label' => __('Status'),        'value' => __($playground->status),    'color' => $playground->status === 'active' ? 'bg-success' : ($playground->status === 'inactive' ? 'bg-danger' : 'bg-warning')],
                    ];
                @endphp

                <div class="row">
                    @foreach($fields as $field)
                    <div class="col-md-3 col-sm-6 mb-3">
                        <div class="info-box mb-0 {{ $field['color'] }}" style="min-height:65px;padding:8px 12px;">
                            <span class="info-box-icon" style="width:44px;height:65px;line-height:65px;font-size:1.2rem;">
                                <i class="{{ $field['icon'] }}"></i>
                            </span>
                            <div class="info-box-content" style="padding:5px 0 5px 8px;">
                                <span class="info-box-text" style="font-size:0.7rem;text-transform:uppercase;{{ $field['color'] ? 'color:#fff;' : 'color:#999;' }}">
                                    {{ $field['label'] }}
                                </span>
                                <span class="info-box-number" style="font-size:0.88rem;font-weight:600;">
                                    {{ $field['value'] ?: '—' }}
                                </span>
                            </div>
                        </div>
                    </div>
                    @endforeach

                    {{-- About - full width --}}
                    @if($playground->About)
                    <div class="col-12 mb-2">
                        <div class="info-box mb-0" style="min-height:60px;padding:8px 12px;">
                            <span class="info-box-icon" style="width:44px;height:60px;line-height:60px;font-size:1.2rem;">
                                <i class="fas fa-align-left"></i>
                            </span>
                            <div class="info-box-content" style="padding:4px 0 4px 8px;">
                                <span class="info-box-text" style="font-size:0.7rem;text-transform:uppercase;color:#999;">{{ __('About') }}</span>
                                <span class="info-box-number" style="font-size:0.88rem;font-weight:400;">{{ $playground->About }}</span>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>

            </div>
        </div>
    </div>
</div>

{{-- ===== Match Tables ===== --}}
<div class="row">
    <div class="col-md-6">
        <div class="card card-info">
            <div class="card-header">
                <h3 class="card-title">{{ __('Match History') }}</h3>
            </div>
            <div class="card-body">
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>{{ __('Match ID') }}</th>
                            <th>{{ __('name') }}</th>
                            <th>{{ __('date') }}</th>
                            <th>{{ __('Status') }}</th>
                            <th>{{ __('Action') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($historyMatches as $match)
                        <tr>
                            <td>{{ $match->id }}</td>
                            <td>{{ $match->name }}</td>
                            <td>{{ $match->date }} {{ $match->Time }}</td>
                            <td>{{ __($match->status) }}</td>
                            <td>
                                <a href="{{ route('admin.matches.show', $match->id) }}" class="btn btn-sm btn-primary">
                                    <i class="fa fa-eye"></i> {{ __('Show') }}
                                </a>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center">{{ __('No history matches found') }}</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card card-success">
            <div class="card-header">
                <h3 class="card-title">{{ __('Upcoming Matches') }}</h3>
            </div>
            <div class="card-body">
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>{{ __('Match ID') }}</th>
                            <th>{{ __('name') }}</th>
                            <th>{{ __('date') }}</th>
                            <th>{{ __('Status') }}</th>
                            <th>{{ __('Action') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($upcomingMatches as $match)
                        <tr>
                            <td>{{ $match->id }}</td>
                            <td>{{ $match->name }}</td>
                            <td>{{ $match->date }} {{ $match->Time }}</td>
                            <td>{{ __($match->status) }}</td>
                            <td>
                                <a href="{{ route('admin.matches.show', $match->id) }}" class="btn btn-sm btn-primary">
                                    <i class="fa fa-eye"></i> {{ __('Show') }}
                                </a>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center">{{ __('No upcoming matches found') }}</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@stop