@extends('app')
@section('content')
@if(Session::has('flash_message'))
<div class="alert {{ (Session::has('flash_message_status'))?'alert-error':'alert-success'}}">
    <button class="close" data-dismiss="alert"></button>
    {!! Session::get('flash_message') !!}
</div>
@endif
<style type="text/css">

    /*@media screen and (min-width: 1431px) {*/
    /*   .tiles{*/
    /*        min-height: 700px;*/
    /*        max-height: 940px;*/
    /*    }*/
    /*}*/

    /*@media screen and (min-width: 1217px) and (max-width: 1430px) {*/
    /*   .tiles{*/
    /*       min-height: 800px;*/
    /*       max-height: 940px;*/
    /*    }*/
    /*}*/

    /*@media screen and (max-width: 1216px) {*/
    /*   .tiles{*/
    /*       min-height: 700px;*/
    /*       max-height: 1000px;*/
    /*    }*/
    /*}*/

    .tiles .tiles-title{
        text-align: center;
        font-size: 18px !important;
        font-weight: bold;
        margin-bottom: 10px;
    }
    .statColor{
        color: #292567;
    }
</style>
<div class="row">
<div class="col-md-4 col-vlg-4 col-sm-4">
        <div class="tiles theme-red m-b-10" id="theme-blue" style="height:580px !important">
          <div class="tiles-body" >
               
               
                <div class="row ">
                    <div class="col-md-12 text-center">
                        <p class="first_card_table_heading dashboard-stat-color"></p>الهرم السكاني لأبناء وأحفاد الميموني</p>
                    </div>
                    <div class="col-md-12">
                        <table id="malomaat_card_table" class="table table-boarderless">
                            <thead>
                                <tr>
                                    <th>
                                        العمر
                                    </th>
                                    <th>
                                        الذكور
                                    </th>
                                    <th>
                                        الإناث
                                    </th>
                                    <th>
                                        الإجمالي
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="statColor">
                                        0-15
                                    </td>
                                    <td>
                                        {{$familymembers['first_set_male_count']}}
                                    </td>
                                    <td>
                                        {{$familymembers['first_set_female_count']}}
                                    </td>
                                    <td>
                                        {{$familymembers['first_set_count']}}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="statColor">
                                        16-25
                                    </td>
                                    <td>
                                        {{$familymembers['second_set_male_count']}}
                                    </td>
                                    <td>
                                        {{$familymembers['second_set_female_count']}}
                                    </td>
                                    <td>
                                        {{$familymembers['second_set_count']}}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="statColor">
                                        26-40
                                    </td>
                                    <td>
                                        {{$familymembers['third_set_male_count']}}
                                    </td>
                                    <td>
                                        {{$familymembers['third_set_female_count']}}
                                    </td>
                                    <td>
                                        {{$familymembers['third_set_count']}}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="statColor">
                                        41-60
                                    </td>
                                    <td>
                                        {{$familymembers['fourth_set_male_count']}}
                                    </td>
                                    <td>
                                        {{$familymembers['fourth_set_female_count']}}
                                    </td>
                                    <td>
                                        {{$familymembers['fourth_set_count']}}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="statColor">
                                        + 60
                                    </td>
                                    <td>
                                        {{$familymembers['fifth_set_male_count']}}
                                    </td>
                                    <td>
                                        {{$familymembers['fifth_set_female_count']}}
                                    </td>
                                    <td>
                                        {{$familymembers['fifth_set_count']}}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="statColor">
                                    بيانات غير متوفرة
                                    </td>
                                    <td>
                                        {{$familymembers['sixth_set_male_count']}}
                                    </td>
                                    <td>
                                        {{$familymembers['sixth_set_female_count']}}
                                    </td>
                                    <td>
                                        {{$familymembers['sixth_set_count']}}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <br>
        </div>
    </div>
    <div class="col-md-4 col-vlg-4 col-sm-4">
        <div class="tiles  green m-b-10" id="theme-green" style="height:580px !important">
            <div class="tiles-body" >
                <div class="tiles-title f-s-15">شجرة الأسرة</div>
                
                <div class="row form-group">
                    <div class="col-md-4 col-sm-6 float-right widgets-border-left">
                        <div class="widget-stats">
                            <div class="wrapper transparent">
                                <span class="item-title">أجمالي</span> <span class="item-count animate-number semi-bold dashboard-stat-color">{{ $familymembers['total_nodes'] }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 float-right widgets-border-left">
                        <div class="widget-stats">
                            <div class="wrapper transparent">
                                <span class="item-title">ذكور</span> <span class="item-count animate-number semi-bold">{{ $familymembers['total_male_nodes'] }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 float-right">
                        <div class="widget-stats">
                            <div class="wrapper transparent">
                                <span class="item-title">إناث</span> <span class="item-count animate-number semi-bold">{{ $familymembers['total_female_nodes'] }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="row form-group">
                    <div class="col-md-4 col-sm-6 float-right widgets-border-left">
                        <div class="widget-stats">
                            <div class="wrapper transparent">
                                <span class="item-title">على قيد الحياة</span> <span class="item-count animate-number semi-bold dashboard-stat-color">{{ $familymembers['alive_nodes'] }}</span>
                            </div>
                        </div>
                    </div>            
                    <div class="col-md-4 col-sm-6 float-right widgets-border-left">
                        <div class="widget-stats">
                            <div class="wrapper transparent">
                                <span class="item-title">ذكور</span> <span class="item-count animate-number semi-bold">{{ $familymembers['alive_male_nodes'] }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 float-right">
                        <div class="widget-stats">
                            <div class="wrapper transparent">
                                <span class="item-title">إناث</span> <span class="item-count animate-number semi-bold">{{ $familymembers['alive_female_nodes'] }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="row form-group">
                    <div class="col-md-4 col-sm-6 float-right widgets-border-left">
                        <div class="widget-stats">
                            <div class="wrapper transparent">
                                <span class="item-title">المسجلين</span> <span class="item-count animate-number semi-bold dashboard-stat-color">{{ $familymembers['registered_nodes'] }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 float-right widgets-border-left">
                        <div class="widget-stats">
                            <div class="wrapper transparent">
                                <span class="item-title">ذكور</span> <span class="item-count animate-number semi-bold">{{ $familymembers['registered_male_nodes'] }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 float-right">
                        <div class="widget-stats">
                            <div class="wrapper transparent">
                                <span class="item-title">إناث</span> <span class="item-count animate-number semi-bold">{{ $familymembers['registered_female_nodes'] }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="row form-group">
                    <div class="col-md-4 col-sm-6 float-right widgets-border-left">
                        <div class="widget-stats">
                            <div class="wrapper transparent">
                                <span class="item-title">تمركز الإقامة</span> 
                                <span class="item-count animate-number semi-bold">{{ isset($familymembers['cities']) ? $familymembers['cities']['total_nodes'] : '' }}</span>
                                <span class="item-title f-s-15 dashboard-stat-color">{{ isset($familymembers['cities']) ? $familymembers['cities']['city_name'] : '' }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 float-right widgets-border-left">
                        <div class="widget-stats">
                            <div class="wrapper transparent">
                                <span class="item-title">أسماء الذكور</span> <span class="item-count animate-number semi-bold">{{ isset($familymembers['popular_male_names']) ? $familymembers['popular_male_names']['count'] : 0 }}</span>
                                <span class="item-title f-s-15 dashboard-stat-color">{{ isset($familymembers['popular_male_names']) ? $familymembers['popular_male_names']['name'] : '' }}</span> 
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 float-right">
                        <div class="widget-stats">
                            <div class="wrapper transparent">
                                <span class="item-title">أسماء الإناث</span> <span class="item-count animate-number semi-bold">{{ isset($familymembers['popular_female_names']) ? $familymembers['popular_female_names']['count'] : 0 }}</span>
                                <span class="item-title f-s-15 dashboard-stat-color">{{ isset($familymembers['popular_female_names']) ? $familymembers['popular_female_names']['name'] : '' }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4 col-vlg-4 col-sm-4">
        <div class="tiles blue m-b-10" id="theme-blue" style="height:580px !important">
          <div class="tiles-body" >
                <div class="tiles-title f-s-15">معلومات عامة</div>
                <div class="row form-group">
                    <div class="col-md-12 text-center">
                        <p class="first_card_table_heading dashboard-stat-color">عدد الذكور والإناث في كل مدينة</p>
                    </div>
                </div>
                <div class="row form-group">
                    @foreach($familymembers['cities_data'] as $k => $v)
                    <div class="col-md-4 col-sm-6 float-right margin-top-15 position-relative">
                        <div class="ouert-widgets-border-left"></div>
                            <span class="dashboard-stat-color">{{$v['city_name']}}</span>
                            <div class="malomaat_card_flex_div">
                                <div class="widgets-border-left">
                                    <div class="widget-stats">
                                        <div class="wrapper transparent">
                                            <span class="item-title">ذكور</span> <span style="font-size: 18px !important;" class="item-count animate-number semi-bold">{{$v['male_nodes']}}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="">
                                    <div class="widget-stats">
                                        <div class="wrapper transparent">
                                            <span class="item-title">إناث</span> <span style="font-size: 18px !important;" class="item-count animate-number semi-bold">{{$v['female_nodes']}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="row margin-top-70">
                 
                   
                </div>
            </div>
            <br>
        </div>
    </div>
    
    
</div>

<script type="text/javascript">
    $(document).ready(function() {
        var red = document.getElementById('theme-red').style.height;
        var green = document.getElementById('theme-green').style.height;
        var blue = document.getElementById('theme-blue').style.height;
        console.log(red, green.blue);
        if (red > green && red > blue) {
            document.getElementById('theme-green').style.height = red;
            document.getElementById('theme-blue').style.height = red;
        } else if (green > red && green > blue) {
            document.getElementById('theme-red').style.height = green;
            document.getElementById('theme-blue').style.height = green;
        } else if (blue > red && blue > green) {
            document.getElementById('theme-red').style.height = blue;
            document.getElementById('theme-green').style.height = blue;
        }
    });

    var currentHeight = 0;
    $(window).load(function() {

        currentHeight = $('#theme-green').outerHeight();
        $('#theme-red').outerHeight(currentHeight);
        $('#theme-blue').outerHeight(currentHeight);
    });
</script>
@endsection