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

{{-- Page Title --}}
@section('title')
    Import Refugees
    @parent
@stop

{{-- Content --}}
@section('content')
    <div id="import_page" class="container">
        <h1>
            Import Refugees
        </h1>
        <hr/>

        @foreach($families as $family)
            <div class="card mb-3">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <h4 class="d-flex align-items-center mb-1">
                                <strong class="text-primary badge border border-primary">
                                    {{ $family->id }}
                                </strong>
                                <span class="ml-2">
                                    {{ $family->full_name }}
                                </span>
                            </h4>
                            <ul class="list-unstyled mb-2">
                                <li>
                                    {{ $family->gender }}, {{ $family->country->name }}, {{ $family->race->name }}
                                </li>
                                <li>
                                    <i class="fa fa-birthday-cake" aria-hidden="true"></i>
                                    <time>{{ date('M d, Y', strtotime($family->date_of_birth)) }}</time>
                                    ({{ (new \Carbon\Carbon($family->date_of_birth))->age }}y)
                                </li>
                                @if (!empty($family->pregnant_due_date))
                                    <li>
                                        <i class="fa fa-hands" aria-hidden="true"></i>
                                        <time>{{ date('M d, Y', strtotime($family->pregnant_due_date)) }}</time>
                                    </li>
                                @endif
                                @if (!empty($family->phone_number))
                                    <li>
                                        <i class="fa fa-phone" aria-hidden="true"></i>
                                        <time>{{ $family->phone_number }}</time>
                                    </li>
                                @endif
                                <li>
                                    <i class="fa fa-address-book" aria-hidden="true"></i>
                                    @if (!empty($family->address_line1))
                                        {{ $family->address_line1 }},
                                    @endif
                                    @if (!empty($family->address_line2))
                                        {{ $family->address_line2 }},
                                    @endif
                                    @if (!empty($family->city))
                                        {{ $family->city }},
                                    @endif

                                    {{ $family->state->name }}@if (!empty($family->zip)), {{ $family->zip }} @endif
                                </li>
                            </ul>
                            @if (!empty($family->note))
                                <p>
                                    Note: <br/>
                                    {!! nl2br(e($family->note)) !!}
                                </p>
                            @endif
                        </div>
                        <div class="col-md-6">
                            @if (count($family->members) > 0)
                                <div class="card">
                                    <ul class="list-group list-group-flush">
                                        @foreach ($family->members as $member)
                                            <li class="list-group-item p-0 d-flex">
                                                <div class="p-2 text-center" style="width: 46px;">
                                                    @if($member->gender_id == 0)
                                                        <i class="fa fa-2x fa-male text-info" aria-hidden="true"></i>
                                                    @else
                                                        <i class="fa fa-2x fa-female text-danger"
                                                           aria-hidden="true"></i>
                                                    @endif
                                                </div>
                                                <strong class="d-flex align-items-center">
                                                    {{ $member->relationship }}
                                                </strong>
                                                <div class="flex-1 d-flex align-items-center p-2">
                                                    <div>
                                                        @if(!empty($member->full_name))
                                                            {{ $member->full_name }}
                                                        @endif
                                                        @if(!empty($member->date_of_birth))
                                                            <span class="badge badge-light">
                                                                {{ date_diff(date_create($member->date_of_birth), date_create('now'))->y }}y
                                                            </span>
                                                        @endif
                                                    </div>
                                                </div>
                                                @if(!empty($member->diaper_size))
                                                    <h4 class="bg-primary text-white m-0 p-2 d-flex align-items-center">
                                                        Size {{ $member->diaper_size == 'N' ? '0' : $member->diaper_size }}</h4>
                                                @endif
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
        <hr/>

        <form>
            <div class="form-group row">
                <div class="offset-md-8 col-md-4">
                    <button type="submit" class="btn btn-primary btn-lg btn-block p">
                        Save <i class="fa fa-check ml-1"></i>
                    </button>
                </div>
            </div>
        </form>

    </div>
@endsection