@extends('layouts.app')

@section('content')
<div id="fifa" class="container-fluid">
    @include('service.navTabs')

    <h5>FIFA 종합 순위</h5>
    <hr/>

    <dl>
        <dd>FIFA 국제축구연맹에서 제공하는 축구 순위 정보입니다.</dd>
        <dd>남성, 여성 축구 순위를 조회할 수 있습니다.</dd>
        <dd>세계 축구 대회 순으로도 조회가 가능합니다.</dd>
    </dl>

    <form name="f_service_fifa_rank" id="fServiceFifaRank" action="{{ route('service.fifa') }}" method="get" accept-charset="UTF-8">
        <input type="hidden" name="tab" value="{{ $params->tab }}"/>
        <div class="row g-2">
            <div class="col-auto col-form-label">
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="type" id="typeMen" value="men" @if($params->type == 'men') checked @endif/>
                    <label class="form-check-label" for="typeMen">남자</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="type" id="typeWomen" value="women" @if($params->type == 'women') checked @endif/>
                    <label class="form-check-label" for="typeWomen">여자</label>
                </div>
            </div>
            <label for="date" class="col-auto col-form-label">날짜</label>
            <div class="col-auto">
                <select name="date" id="date" class="form-select">
                    @foreach($dates as $id => $date)
                        <option value="{{ $id }}" @if($id == $params->date) selected @endif>{{ $date }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-dark">검색</button>
            </div>
        </div>
    </form>

    <br/>

    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a href="{{ route('service.fifa') }}" class="nav-link @if(!$params->tab) active @endif">ALL</a>
        </li>
        <li class="nav-item">
            <a href="{{ route('service.fifa') }}?date={{ $params->date }}&tab=afc" class="nav-link @if($params->tab == 'afc') active @endif">AFC</a>
        </li>
        <li class="nav-item">
            <a href="{{ route('service.fifa') }}?date={{ $params->date }}&tab=caf" class="nav-link @if($params->tab == 'caf') active @endif">CAF</a>
        </li>
        <li class="nav-item">
            <a href="{{ route('service.fifa') }}?date={{ $params->date }}&tab=concacaf" class="nav-link @if($params->tab == 'concacaf') active @endif">CONCACAF</a>
        </li>
        <li class="nav-item">
            <a href="{{ route('service.fifa') }}?date={{ $params->date }}&tab=conmebol" class="nav-link @if($params->tab == 'conmebol') active @endif">CONMEBOL</a>
        </li>
        <li class="nav-item">
            <a href="{{ route('service.fifa') }}?date={{ $params->date }}&tab=ofc" class="nav-link @if($params->tab == 'ofc') active @endif">OFC</a>
        </li>
        <li class="nav-item">
            <a href="{{ route('service.fifa') }}?date={{ $params->date }}&tab=uefa" class="nav-link @if($params->tab == 'uefa') active @endif">UEFA</a>
        </li>
    </ul>

    <br/>
    <p>총 국가 : {{ $total }}</p>
    <div class="table-responsive">
        <table class="table table-hover table-bordered table-nowrap w-auto">
            <thead>
            <tr>
                <th>순위</th>
                <th colspan="2">국가</th>
                <th>총점</th>
                <th>이전 순위</th>
                <th>변동</th>
            </tr>
            </thead>
            <tbody>
            @if($total > 0)
                @foreach($rankings as $row)
                    @php
                        $diff = ($row['rankingItem']['rank'] - $row['rankingItem']['previousRank'])
                    @endphp
                    <tr>
                        <td>{{ $loop->iteration }}</td>
                        <td>
                            <img src="{{ $row['rankingItem']['flag']['src'] }}" width="{{ $row['rankingItem']['flag']['width'] }}" height="{{ $row['rankingItem']['flag']['height'] }}" alt="{{ $row['rankingItem']['flag']['alt'] }}"/>
                        </td>
                        <td>{{ $row['rankingItem']['name'] }}</td>
                        <td>{{ $row['rankingItem']['totalPoints'] }}</td>
                        <td>{{ $row['rankingItem']['previousRank'] }}</td>
                        <td>
                            {{ abs($diff) }}
                            @if($diff > 0)
                                <i class="fa fa-caret-up txt-red"></i>
                            @else
                                <i class="fa fa-caret-down txt-blue"></i>
                            @endif
                        </td>
                    </tr>
                @endforeach
            @else
                <tr>
                    <td colspan="6">
                        No data.
                    </td>
                </tr>
            @endif
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/desktop/service/index.css') }}"/>
@endpush

@push('scripts')
    <script src="{{ asset('js/service/fifa.js') }}" defer></script>
@endpush