<div>
    <div class="col-12">

    @if($doctype == 'ID')
            <div class="both-parents row">
                @if(!empty($familyrelation))
                    @foreach($familyrelation['parents'] as $parent)
                        
                        <div class="level-1 card col-3">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-3">
                                        @if($parent->sex == "M")
                                            <i class="fas fa-male" style="font-size: 4rem;padding: 6px 20px;background: aliceblue;border-radius: 5px;color: #193752;"></i>
                                        @else
                                            <i class="fas fa-female" style="font-size: 4rem;padding: 6px 20px;background: aliceblue;border-radius: 5px;color: #193752;"></i>
                                        @endif

                                    </div>
                                    <div class="col-9">
                                        <h4>{{ $parent->name }} {{ $parent->last_name }} {{ $parent->surn }}</h4>
                                        <strong>ID#: {{ $parent->o_pid }}</strong>
                                        @if($parent->sex == "M")
                                            <p>Gender: Male</p>
                                            <small>Father of..</small>
                                        @else
                                            <p>Gender: Female</p>
                                            <small>Mother of..</small>
                                        @endif

                                    </div>
                                </div>
                            </div>
                        </div>

                    @endforeach
                @endif
            </div>
            @if(!empty($familyrelation['children']))
                <ol class="level-2-wrapper row" style="background-color: #f2f3f4;padding: 8px;">
                    @foreach($familyrelation['children'] as $child)
                        <li class="col-3">
                            <div class="level-2 card">
                                <div class="card-body">
                                    <div class="row">

                                        <div class="col-4" style="text-align: center;">
                                            <i class="fas fa-user" style="font-size: 2rem;"></i>
                                            <p>Child</p>
                                        </div>
                                        <div class="col-8">
                                            <h5>{{ $child->name }} {{ $child->last_name }} {{ $child->surn }}</h5>
                                            @if($child->sex == "M")
                                                <p>Gender: Male</p>
                                            @else
                                                <p>Gender: Female</p>
                                            @endif
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </li>
                    @endforeach
                </ol>
            @endif
    @endif

    @if($doctype == 'Birth')
            <div class="both-parents row">
                @if(!empty($familyrelation))
                    @foreach($familyrelation as $parent)
                        <div class="level-1 card col-3">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-3">
                                        @if($parent->sex == "M")
                                            <i class="fas fa-male" style="font-size: 4rem;padding: 6px 20px;background: aliceblue;border-radius: 5px;color: #193752;"></i>
                                        @else
                                            <i class="fas fa-female" style="font-size: 4rem;padding: 6px 20px;background: aliceblue;border-radius: 5px;color: #193752;"></i>
                                        @endif
                                    </div>
                                    <div class="col-9">
                                        <h4>{{ $parent->name }} {{ $parent->last_name }} {{ $parent->surn }}</h4>
                                        <strong>ID#: {{ $parent->o_pid }}</strong>
                                        @if($parent->sex == "M")
                                            <p>Gender: Male</p>
                                            <small>Father of..</small>
                                        @else
                                            <p>Gender: Female</p>
                                            <small>Mother of..</small>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
            <ol class="level-2-wrapper row" style="background-color: #f2f3f4;padding: 8px;">
                <li class="col-4 offset-4">
                    <div class="level-2 card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-4" style="text-align: center;">
                                    <i class="fas fa-user" style="font-size: 2rem;"></i>
                                    <p>Child</p>
                                </div>
                                <div class="col-8">
                                    <h5>{{ $human->name }} {{ $human->last_name }} {{ $human->surn }}</h5>
                                    @if($human->sex == "M")
                                        <p>Gender: Male</p>
                                    @else
                                        <p>Gender: Female</p>
                                    @endif
                                </div>

                            </div>
                        </div>
                    </div>
                </li>
            </ol>
    @endif

    </div>
    <style>
        :root {
            --level-1: #8dccad;
            --level-2: #f5cc7f;
            --level-3: #7b9fe0;
            --level-4: #f27c8d;
            --black: black;
        }
        /* RESET STYLES & HELPER CLASSES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
        ol {
            list-style: none;
        }

        /* LEVEL-1 STYLES
        –––––––––––––––––––––––––––––––––––––––––––––––––– */
        .level-1 {
            width: 30%;
            margin: 0 auto 40px;
            background:rgba(0, 255, 76, 0.65);
        }

        .level-1::before {
            content: "";
            position: absolute;
            top: 100%;
            left: 51%;
            transform: translateX(-50%);
            width: 2px;
            height: 4.85rem;
            background: var(--black);
        }
        /* LEVEL-2 STYLES
        –––––––––––––––––––––––––––––––––––––––––––––––––– */
        .level-2-wrapper {
            position: relative;
            /*display: grid;*/
            display:flex;
            margin-top: 5%;
            grid-template-columns: repeat(2, 1fr);
        }
        .level-2-wrapper::before {
            content: "";
            position: absolute;
            top: -3rem;
            left: 25%;
            width: 50.5%;
            height: 2px;
            background: var(--black);
        }

        .level-2-wrapper::after {
            content: "";
            position: absolute;
            left: 50%;
            top: -20%;
            width: 47px;
            height: 2px;
            background: var(--black);
            transform: rotate(90deg);
            /*display: none;
            content: "";
            position: absolute;
            left: -20px;
            bottom: -20px;
            width: calc(100% + 20px);
            height: 2px;
            background: var(--black);*/
        }

        .level-2-wrapper li {
            position: relative;
        }

        .level-2 {
           /* width: 70%;
            width: 15rem;*/
            margin: auto;
            border: 1px solid #a0a1ab;
            background:rgba(214, 222, 232, 0.45);
        }

        .level-2::before {
            /*content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 20px;
            background: var(--black);*/
        }

        .level-2::after {
            display: none;
            content: "";
            position: absolute;
            top: 50%;
            left: 0%;
            transform: translate(-100%, -50%);
            width: 20px;
            height: 2px;
            background: var(--black);
        }


        /* LEVEL-3 STYLES
        –––––––––––––––––––––––––––––––––––––––––––––––––– */
        .level-3-wrapper {
            position: relative;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-column-gap: 20px;
            width: 90%;
            margin: 0 auto;
        }

        .level-3-wrapper::before {
            content: "";
            position: absolute;
            top: -20px;
            left: calc(25% - 5px);
            width: calc(50% + 10px);
            height: 2px;
            background: var(--black);
        }

        .level-3-wrapper > li::before {
            content: "";
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, -100%);
            width: 2px;
            height: 20px;
            background: var(--black);
        }

        .level-3 {
            margin-bottom: 20px;
            background: var(--level-3);
        }


        /* LEVEL-4 STYLES
        –––––––––––––––––––––––––––––––––––––––––––––––––– */
        .level-4-wrapper {
            position: relative;
            width: 80%;
            margin-left: auto;
        }

        .level-4-wrapper::before {
            content: "";
            position: absolute;
            top: -20px;
            left: -20px;
            width: 2px;
            height: calc(100% + 20px);
            background: var(--black);
        }

        .level-4-wrapper li + li {
            margin-top: 20px;
        }

        .level-4 {
            font-weight: normal;
            background: var(--level-4);
        }

        .level-4::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0%;
            transform: translate(-100%, -50%);
            width: 20px;
            height: 2px;
            background: var(--black);
        }


        /* MQ STYLES
        –––––––––––––––––––––––––––––––––––––––––––––––––– */
        @media screen and (max-width: 700px) {
            .rectangle {
                padding: 20px 10px;
            }

            .level-1,
            .level-2 {
                width: 100%;
            }

            .level-1 {
                margin-bottom: 20px;
            }

            .level-1::before,
            .level-2-wrapper > li::before {
                display: none;
            }

            .level-2-wrapper,
            .level-2-wrapper::after,
            .level-2::after {
                display: block;
            }

            .level-2-wrapper {
                width: 90%;
                margin-left: 10%;
            }

            .level-2-wrapper::before {
                left: -20px;
                width: 2px;
                height: calc(100% + 40px);
            }

            .level-2-wrapper > li:not(:first-child) {
                margin-top: 50px;
            }
        }
    </style>
</div>



