@extends('layouts.app_main')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-9">
            <div class="panel panel-default">
                <div class="panel-heading">Children</div>
                <div class="panel-body">
                    <form class="form-horizontal" role="form" method="POST" >
                        {{ csrf_field() }}
                        <table style="width:100%;">
                            <tr>
                                <th>Name</th>
                                <th>Sex</th>
                                <th>Date of Birth</th>
                                <th>Satus</th>
                                <th>&nbsp</th>
                            </tr>
                            @forelse(Auth::user()->children as $child)
                                <tr class="noedit">
                                    <td class="child_name" detail_data="{{$child->name}}">{{$child->name}}</td>
                                    <td class="child_sex" detail_data="{{$child->sex}}">{{$child->sex}}</td>
                                    <td class="child_dob" detail_data="{{$child->dob}}">{{$child->dob}}</td>
                                    <td class="child_status" detail_data="{{$child->status}}">{{$child->status}}</td>
                                    <td class="child_id" detail_data="{{$child->id}}"><a href="#" class="edit">Edit</a></td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5">
                                        Enter child's details below.
                                    </td>
                                </tr>
                            @endforelse
                            <tr>
                                <td style="padding:1px;">
                                    <input type='hidden' id="id" name="id" value=""/>

                                    <input id="name" type="text" class="form-control" name="name" value="{{ old('name') }}" required autofocus>
                                    @if ($errors->has('name'))
                                        <span class="help-block">
                                            <strong>{{ $errors->first('name') }}</strong>
                                        </span>
                                    @endif
                                </td>
                                <td style="padding:1px;">
                                    <select id="sex" id="sex" class="form-control" name="sex" required>
                                        <option></option>
                                        <option value="Male">Male</opttion>
                                        <option value="Female">Female</opttion>
                                    </select>

                                    @if ($errors->has('sex'))
                                        <span class="help-block">
                                            <strong>{{ $errors->first('sex') }}</strong>
                                        </span>
                                    @endif

                                </td>
                                <td style="padding:1px;">
                                    <div class='input-group date' id='datetimepicker1'>
                                        <input type='text' id="dob" class="form-control"  name="dob" value="{{ old('dob') }}" required />
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                    @if ($errors->has('dob'))
                                        <span class="help-block">
                                            <strong>{{ $errors->first('dob') }}</strong>
                                        </span>
                                    @endif
                                </td>
                                <td style="padding:1px;">
                                    <select id="status" id="status" class="form-control" name="status" required>
                                        <option></option>
                                        <option value="Dependent" >Dependent</opttion>
                                        <option value="Independent">Independent</opttion>
                                        <option value="Deceased" >Deceased</opttion>
                                    </select>

                                    @if ($errors->has('status'))
                                        <span class="help-block">
                                            <strong>{{ $errors->first('status') }}</strong>
                                        </span>
                                    @endif

                                </td>
                                <td style="padding:1px;">
                                    <button type="submit" class="btn btn-primary">
                                        Save
                                    </button>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('javascript')
        $(function (){
            $('#datetimepicker1').datepicker({
                format: 'yyyy-mm-dd',
                zIndexOffset: '1001',
            });
            $('.edit').on('click',function(event){
                event.preventDefault();
                $('.noedit').hide();
                $('#id').val($(this).closest('.child_id').attr('detail_data'));
                $('#name').val($(this).closest('.child_id').siblings('.child_name').attr('detail_data'));
                $('#sex').val($(this).closest('.child_id').siblings('.child_sex').attr('detail_data'));
                $('#dob').val($(this).closest('.child_id').siblings('.child_dob').attr('detail_data'));
                $('#status').val($(this).closest('.child_id').siblings('.child_status').attr('detail_data'));
            })
        });
@endsection