@extends('layouts.default')
@php
    /** @var \App\Models\Country[] $countries */

    $step = 1;
    $progress = 33.33;

    $step1_error = false;
    $step1_fields = ['id', 'gender_id', 'first_name', 'last_name', 'country_id', 'race_id', 'date_of_birth',
                     'phone_number', 'address_line1', 'address_line2', 'city', 'state_id', 'zip', 'is_pregnant', 'pregnant_due_date', 'note'];

    if ($errors->any()) {
        foreach ($step1_fields as $name) {
          if ($errors->has($name)) {
                $step1_error = true;
            }
        }

        if ($step1_error) {

        } else if ($errors->has('members.*')) {
            $step = 2;
            $progress = 66.66;
        } else if ($errors->has('avatar_file')) {
            $step = 3;
            $progress = 99.99;
        }
    }
@endphp

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

{{-- Content --}}
@section('content')
    <div class="container refugee-page">
        <div class="row">
            <div class="col-md-12">
                <h1>
                    Add Refugee
                    <a class="btn btn-dark float-right" href="{{ route('refugee.index') }}">Cancel</a>
                </h1>
                <hr/>
                <div class="row text-center">
                    <div class="col-4">Basic Information</div>
                    <div class="col-4">Family Members</div>
                    <div class="col-4">Avatar</div>
                </div>
                <div class="progress mb-4">
                    <div class="progress-bar progress-bar-striped bg-primary" role="progressbar"
                         style="width: {{ $progress }}%"
                         aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                </div>

                <div class="members-template d-none">
                    @include('refugee.step_create.member_card', ['member' => new \App\Models\RefugeeMember(), 'i' => ''])
                </div>

                <ul class="nav nav-tabs mb-3 d-none" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link {{ $step == 1 ? 'active' : '' }}" id="step1_tab" data-toggle="tab" href="#step1" role="tab"
                           aria-controls="step1" aria-selected="true">Basic Information</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ $step == 2 ? 'active' : '' }}" id="step2_tab" data-toggle="tab" href="#step2" role="tab"
                           aria-controls="step2" aria-selected="false">Family Members</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ $step == 3 ? 'active' : '' }}" id="step3_tab" data-toggle="tab" href="#step3" role="tab"
                           aria-controls="step3" aria-selected="false">Upload Picture</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade {{ $step == 1 ? 'show active' : '' }}" id="step1" role="tabpanel" aria-labelledby="step1_tab">
                        <form id="add_refugee_form" method="POST" action="{{ route('refugee.store') }}"
                              enctype="multipart/form-data" class="needs-validation" novalidate>
                            @csrf
                            @include('refugee.step_create.step1')
                        </form>
                    </div>
                    <div class="tab-pane fade {{ $step == 2 ? 'show active' : '' }}" id="step2" role="tabpanel" aria-labelledby="step2_tab">
                        <form id="add_step2_form" method="POST" action="#" class="needs-validation" novalidate>
                            @include('refugee.step_create.step2')
                        </form>
                    </div>
                    <div class="tab-pane fade {{ $step == 3 ? 'show active' : '' }}" id="step3" role="tabpanel" aria-labelledby="step3_tab">
                        @include('refugee.step_create.step3')
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection