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

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

{{-- Content --}}
@section('content')
    <div class="container checkin-page refugee-page">
        <h1>
            Check-In
            @if (url()->previous() == route('refugee.show', $refugee->id))
                <button class="btn btn-dark float-right" onclick="window.history.back()">Cancel</button>
            @else
                <a href="{{ route('refugee.show', $refugee->id) }}" class="btn btn-dark float-right">Cancel</a>
            @endif
        </h1>
        <hr/>
        <h2 class="mb-3 d-flex align-items-center">
            <strong class="text-primary badge border border-primary mr-2">
                {{ $refugee->id }}
            </strong>
            {{ $refugee->full_name }}
        </h2>
        <div class="row">
            <div class="col-md-12">
                <div class="members-template d-none">
                    @include('refugee.checkin_member_list', ['member' => new \App\Models\RefugeeMember(), 'i' => '', 'mode' => 'add'])
                </div>

                {{--Delete Member Modal--}}
                @include('components.remove_confirmation')

                <form method="POST" action="{{ route('refugee.checkin-store', $refugee->id) }}" class="needs-validation"
                      novalidate>
                    @csrf
                    <div class="card mb-3">
                        <h3 class="card-header d-flex align-items-center justify-content-between">
                            Confirm your family members' diaper sizes.
                            {{--Add Member--}}
                            <a href="#add_member_modal" class="btn btn-primary" data-toggle="modal"
                               data-target="#add_member_modal">
                                <i class="fa fa-plus mr-1"></i> Add
                            </a>
                        </h3>
                        <ul id="members" class="list-group list-group-flush">
                            @foreach ($refugee->members as $i => $member)
                                @include('refugee.checkin_member_list')
                            @endforeach
                        </ul>
                    </div>

                    {{--Last Additional Notes--}}
                    @php($last_checkin_record_note = $refugee->last_checkin_record->note ?? '')
                    @php($refugee_note = $refugee->note ?? '')
                    @if (!empty($last_checkin_record_note) || !empty($refugee_note))
                        <div class="mb-3">
                            <h4>
                                Last Additional Notes
                            </h4>
                            @if (!empty($last_checkin_record_note))
                                <span id="last_note">{!! nl2br(e($last_checkin_record_note)) !!}</span>
                            @elseif (!empty($refugee_note))
                                <span id="last_note">{!! nl2br(e($refugee_note)) !!}</span>
                            @endif
                            <button id="copy" type="button" class="btn btn-primary btn-sm">
                                <i class="fa fa-copy"></i>
                                Copy
                            </button>
                        </div>
                    @endif

                    {{--Additional Notes--}}
                    <h4>Additional Notes</h4>
                    @include('components.form.textarea_row', [
                        'name' => 'note',
                        'label' => '',
                        'label_class' => 'col-md-0 d-none',
                        'input_class' => 'col-md-12',
                        'optional' => true,
                        'rows' => 3,
                    ])

                    {{--Submit--}}
                    <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">
                                Check-in
                            </button>
                        </div>
                    </div>
                </form>

                {{--Add Member Modal--}}
                <div id="add_member_modal" class="modal fade" tabindex="-1" role="dialog"
                     aria-labelledby="add_member_modal" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <form id="checkin_add_member_form" method="" action="#" class="needs-validation" novalidate>
                                <div class="modal-header bg-primary text-white">
                                    <h5 class="modal-title" id="add_member_modal">Add Member</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <div class="row">
                                        <div class="col-12 col-md-6">
                                            <small class="form-text text-muted">
                                                Gender <span class="text-danger">*</span>
                                            </small>
                                            <div class="btn-group btn-group-toggle flex-wrap"
                                                 data-toggle="buttons">
                                                <label class="btn btn-light">
                                                    <input type="radio" name="gender_id" value="0"
                                                           required> Male
                                                </label>
                                                <label class="btn btn-light">
                                                    <input type="radio" name="gender_id" value="1"
                                                           required> Female
                                                </label>
                                            </div>
                                            <span class="invalid-feedback"></span>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <small class="form-text text-muted">
                                                Relationship <span class="text-danger">*</span>
                                            </small>
                                            <select name="relationship_id" class="form-control"
                                                    required>
                                                <option value="" disabled selected>Please select...</option>
                                                <option value="1">Child</option>
                                                <option value="2">Spouse</option>
                                                <option value="3">Sibling</option>
                                                <option value="4">Parent</option>
                                                <option value="5">Grandparent</option>
                                                <option value="6">Grandchild</option>
                                                <option value="0">Other</option>
                                            </select>
                                            <span class="invalid-feedback"></span>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <small class="form-text text-muted">First Name</small>
                                            <input name="first_name" type="text"
                                                   class="form-control">
                                            <span class="invalid-feedback"></span>
                                        </div>
                                        <div class="col-12 col-md-6">
                                            <small class="form-text text-muted">Last Name</small>
                                            <input name="last_name" type="text" class="form-control">
                                            <span class="invalid-feedback"></span>
                                        </div>
                                        <div class="col-md-6">
                                            <small class="form-text text-muted">
                                                Date of Birth
                                                <span class="text-danger">*</span>
                                            </small>
                                            <input name="date_of_birth" class=" form-control" type="date"
                                                   max="{{ date('Y-m-d') }}" value="" required/>

                                            <span class="invalid-feedback"></span>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="d-flex justify-content-between">
                                                <div class="d-flex align-items-end pr-4">
                                                    -or-
                                                </div>
                                                <div class="flex-1">
                                                    <small class="form-text text-muted">
                                                        Age
                                                    </small>
                                                    <input name="age" class=" form-control" type="number" min="0"
                                                           max="99" value="" required/>
                                                    <span class="invalid-feedback"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-dark" data-dismiss="modal">Cancel</button>
                                    <button id="checkin_add_member_submit" type="submit" class="btn btn-primary"
                                            data-confirm="modal">Save
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection