@php
    /* @var $teacher \App\Core\Entities\User */
@endphp
@extends('admin.layouts.app')

@section('content')
    @include('admin.layouts.headers.page')
    <div class="container-fluid mt--7">
        <div class="row">
            <div class="col-md-12">
                <div class="card shadow">
                    <div class="card-header">
                        <h1>Professores</h1>
                        @if (session('success'))
                            <div class="alert alert-success">{{ session('success') }}</div>
                        @endif
                        @if (session('error'))
                            <div class="alert alert-danger">{{ session('error') }}</div>
                        @endif
                    </div>

                    <div class="card-body pb-3">
                        <form action="#" method="get" class="mb-4">
                            <small>Filtros</small>
                            <div class="row mt-2 align-items-center">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="name" class="form-control-label">Nome</label>
                                        <input class="form-control" type="text"
                                            value="{{ isset($_GET['name']) ? $_GET['name'] : '' }}" placeholder="Nome"
                                            name="name" id="name">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="status" class="form-control-label">Status</label>
                                        <select class="form-control" name="status" id="status">
                                            <option value="">
                                                Selecione
                                            </option>
                                            @foreach (\App\Core\Constants\UserStatus::format() as $st)
                                                <option value="{{ $st['value'] }}"
                                                    {{ isset($_GET['status']) && $_GET['status'] == $st['value'] ? 'selected' : '' }}>
                                                    {{ $st['label'] }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="phone" class="form-control-label">Telefone</label>
                                        <input class="form-control" type="text" placeholder="Telefone"
                                            value="{{ isset($_GET['phone']) ? $_GET['phone'] : '' }}" name="phone"
                                            id="phone">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="email" class="form-control-label">E-mail</label>
                                        <input class="form-control" type="text" placeholder="E-mail"
                                            value="{{ isset($_GET['email']) ? $_GET['email'] : '' }}" name="email"
                                            id="email">
                                    </div>
                                </div>
                                {{-- <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="birth_date" class="form-control-label">Nascimento</label>
                                        <input class="form-control" type="date" placeholder="Nascimento"
                                               value="{{ isset($_GET['birth_date']) ? $_GET['birth_date'] : '' }}"
                                               name="birth_date" id="birth_date">
                                    </div>
                                </div> --}}
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="state" class="form-control-label">Estado</label>
                                        <select name="state" id="state" class="form-control">
                                            <option value="">Selecione</option>
                                            @foreach ($states as $state)
                                                <option value="{{ $state->code }}"
                                                    {{ isset($_GET['state']) && $_GET['state'] == $state->code ? 'selected' : '' }}>
                                                    {{ $state->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="city" class="form-control-label">Cidade</label>
                                        <select name="city" id="city" class="form-control"
                                            data-cities='@JSON($cities)'>
                                            <option value="">Selecione</option>
                                            @if (isset($_GET['state']) && $_GET['state'])
                                                @foreach ($cities->{$_GET['state']} as $city)
                                                    <option value="{{ $city }}"
                                                        {{ isset($_GET['city']) && $_GET['city'] == $city ? 'selected' : '' }}>
                                                        {{ $city }}
                                                    </option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="min_birth_date" class="form-control-label">Data inicial
                                            (Nascimento)</label>
                                        <input class="form-control" type="date"
                                            value="{{ isset($_GET['min_birth_date']) ? $_GET['min_birth_date'] : '' }}"
                                            placeholder="Data" name="min_birth_date" id="min_birth_date">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="max_birth_date" class="form-control-label">Data final
                                            (Nascimento)</label>
                                        <input class="form-control" type="date"
                                            value="{{ isset($_GET['max_birth_date']) ? $_GET['max_birth_date'] : '' }}"
                                            placeholder="Data" name="max_birth_date" id="max_birth_date">
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label for="status" class="form-control-label">Ordenar por</label>
                                        <select class="form-control" name="order" id="order">
                                            <option value="">
                                                ID
                                            </option>
                                            <option value="created_at desc"
                                                @if (isset($_GET['order']) && $_GET['order'] == 'created_at desc') selected @endif>
                                                Cadastro mais recente
                                            </option>
                                            <option value="created_at asc"
                                                @if (isset($_GET['order']) && $_GET['order'] == 'created_at asc') selected @endif>
                                                Cadastro mais antigo
                                            </option>
                                            <option value="birth_date desc"
                                                @if (isset($_GET['order']) && $_GET['order'] == 'birth_date desc') selected @endif>
                                                Data de nascimento mais recente
                                            </option>
                                            <option value="birth_date asc"
                                                @if (isset($_GET['order']) && $_GET['order'] == 'birth_date asc') selected @endif>
                                                Data de nascimento mais antiga
                                            </option>
                                            <option value="name asc" @if (isset($_GET['order']) && $_GET['order'] == 'name asc') selected @endif>
                                                Nome
                                            </option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col">
                                    <button type="submit" class="btn btn-outline-primary">Filtrar</button>
                                    <a href="{{ url()->current() }}" class="btn btn-outline-warning">Limpar</a>
                                </div>
                            </div>
                        </form>
                        <div class="alert" style="display: none" id="remove-feedback"></div>
                        <div class="row mt-2">

                            <div class="col">
                                <div class="table-responsive">
                                    <div>
                                        <table class="table align-items-center table-bordered">
                                            <thead class="thead-light">
                                                <tr>
                                                    <th scope="col">ID</th>
                                                    <th scope="col">Nome</th>
                                                    <th scope="col">Status</th>
                                                    <th scope="col">Nº Alu</th>
                                                    <th scope="col">Telefone</th>
                                                    <th scope="col">Email</th>
                                                    <th scope="col">Nascimento</th>
                                                    <th scope="col">Cidade</th>
                                                    <th scope="col">Estado</th>
                                                    <th scope="col">Ações</th>
                                                </tr>
                                            </thead>
                                            <tbody class="list">
                                                @foreach ($teachers as $teacher)
                                                    <tr>
                                                        <td>
                                                            <a href="{{ route('admin.teachers.view', $teacher->id) }}">
                                                                {{ $teacher->id }}
                                                            </a>
                                                        </td>
                                                        <td>
                                                            <a href="{{ route('admin.teachers.view', $teacher->id) }}">
                                                                {{ $teacher->profile ? $teacher->profile->name : 'Perfil incompleto' }}
                                                            </a>
                                                        </td>
                                                        <td>{{ \App\Core\Constants\UserStatus::label($teacher->status) }}
                                                        </td>
                                                        <td>
                                                            {{ $teacher->student_count }}
                                                        </td>
                                                        <td>{{ $teacher->profile ? $teacher->profile->phone : 'Perfil incompleto' }}
                                                        </td>
                                                        <td>{{ $teacher->email }}</td>
                                                        <td>{{ $teacher->profile && $teacher->profile->birth_date ? $teacher->profile->birth_date->format('d/m/Y') : 'Perfil incompleto' }}
                                                        </td>
                                                        <td>{{ $teacher->profile ? $teacher->profile->city : 'Perfil incompleto' }}
                                                        </td>
                                                        <td>{{ $teacher->profile ? $teacher->profile->state : 'Perfil incompleto' }}
                                                        </td>
                                                        <td>
                                                            <a href="{{ route('admin.teachers.view', $teacher->id) }}"
                                                                class="btn btn-sm btn-info">
                                                                Ver
                                                            </a>
                                                            <a href="{{ route('admin.teachers.schedule', $teacher->id) }}"
                                                                class="btn btn-sm btn-primary">
                                                                Horários
                                                            </a>
                                                            <a href="{{ route('admin.teachers.edit', $teacher->id) }}"
                                                                class="btn btn-sm btn-warning">
                                                                Editar
                                                            </a>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>

                                        <div class="d-flex justify-content-center align-items-center pt-5">
                                            {{ $teachers->links() }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('admin.layouts.footers.auth')
    </div>
    <script>
        document.querySelector('#state').addEventListener('change', function(e) {
            const cities = JSON.parse(
                document.querySelector('#city').getAttribute('data-cities')
            );
            const state = e.target.value;
            document.querySelector('#city').innerHTML = '<option value="">Selecione</option>';
            document.querySelector('#city').innerHTML += cities[state].map(city =>
                `<option value="${city}">${city}</option>`);
        });
    </script>
@endsection