@extends('layouts.default')
@php
    /** @var \App\Models\RefugeeFamily[] $refugees */
@endphp

{{-- Page Title --}}
@section('title')
    Refugee Management
    @parent
@stop

{{-- Content --}}
@section('content')
    <div id="search_refugee_page" class="container refugee-page">
        <h1>
            Refugees
            <a class="btn btn-primary float-right" href="{{ route('refugee.create') }}">
                Add Refugee
            </a>
        </h1>
        <hr/>
        <form class="mb-3">
            <div class="input-group">
                <input type="search" name="q" placeholder="Type to search" class="form-control"
                       value="{{ Request::get('q') }}" autofocus autocomplete="off"/>
                <span class="input-group-append">
                    <button class="btn btn-primary" type="submit">
                        <i class="fa fa-search"></i>
                    </button>
                    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#advanced_search"
                            aria-expanded="false" aria-controls="collapseExample">
                        <i class="fa fa-caret-down"></i>
                    </button>
                </span>
            </div>
            <div id="advanced_search"
                 class="collapse card border-top-0 @if(Request::get('phone') != '' || Request::get('dob')) show @endif">
                <div class="card-body">
                    <small>Advanced Search</small>
                    <div class="row">
                        <label for="phone" class="col-4 col-md-2 col-form-label mb-2">Phone No.</label>
                        <div class="col-8 col-md-4">
                            <input type="tel" id="phone" name="phone" class="form-control"
                                   value="{{ Request::get('phone') }}">
                        </div>
                        <label for="dob" class="col-4 col-md-2 col-form-label mb-2">Date of Birth</label>
                        <div class="col-8 col-md-4">
                            <input type="date" id="dob" name="dob" class="form-control"
                                   value="{{ Request::get('dob') }}">
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <input type="hidden" name="page" value="{{ Request::get('page') }}"/>
        <div class="card mb-3">
            <div id="search_result" class="list-group list-group-flush">
                @foreach($refugees as $refugee)
                    <a href="{{ route('refugee.show', $refugee->id) }}"
                       class="list-group-item list-group-item-action d-flex align-items-center text-dark">
                        @if($refugee->gender_id == '0')
                            <i class="fa fa-male mr-3 text-info" aria-hidden="true"></i>
                        @elseif($refugee->gender_id == '1')
                            <i class="fa fa-female mr-3 text-danger" aria-hidden="true"></i>
                        @endif
                        <div class="d-flex flex-row flex-wrap flex-1">
                            <div class="col-sm-5 col-md-2 col-lg-1">
                                <strong class="text-primary badge border border-primary">
                                    {{ $refugee->id }}
                                </strong>
                            </div>
                            <div class="col-sm-7 col-md-4 col-lg-4">
                                {{ $refugee->first_name }}
                                {{ $refugee->last_name }}
                            </div>
                            <div class="col-sm-5 col-md-3 col-lg-4">
                                {{ $refugee->country->name }}
                            </div>
                            <div class="col-sm-7 col-md-3 col-lg-3">
                                @if(!empty($refugee->date_of_birth))
                                    {{ date('m/d/Y', strtotime($refugee->date_of_birth)) }}
                                @endif
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
        <div class="d-flex justify-content-center">
            <div id="pagination"></div>
        </div>
    </div>
@endsection