@extends('layouts.mainlayout')
@section('content')
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    @if( !is_null($msg_success) )
        <div class="alert alert-danger alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            {{ $msg_success ?? ''}}
        </div>
    @endif
    @if( !is_null($msg_insert) )
        <div class="alert alert-success alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            {{ $msg_insert ?? ''}}
        </div>
    @endif
    <div class="card-body">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="tab-pane fade show active" id="nav-home" role="tabpanel"
                             aria-labelledby="nav-home-tab">
                            <div class="row">

                                <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
                                <script src="/vendor/js/gijgo.min.js"
                                        type="text/javascript"></script>
                                <link href="/css/gijgo.min.css"
                                      rel="stylesheet" type="text/css"/>
                                <div class="album text-muted">
                                    <div class="container mw-100">
                                        <div class="card mb-3 align-middle">
                                            @if( Session::has('msg_success') )
                                                <div class="alert alert-alert alert-dismissable">
                                                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                                                    {{ Session::get('msg_success') }}
                                                </div>
                                            @endif
                                            <div class="card-header"><i class="fas fa-table"></i>
                                                Add new staff personal details
                                            </div>
                                            <div class="card-body">
                                                <form  action="" method="POST" id="myform">
                                                    <div class="row">
                                                        <div class="col-xl-3 col-sm-6 mb-3">
                                                            <p>First name</p>
                                                            <input class="form-control input-lg" type='text' name='firstname'
                                                                   value="" required/>
                                                        </div>
                                                        <div class="col-xl-3 col-sm-6 mb-3">
                                                            <p>Last name</p>
                                                            <input class="form-control input-lg" type='text' name='lastname'
                                                                   value="" required/>
                                                        </div>
                                                        <div class="col-xl-3 col-sm-6 mb-3">
                                                            <p>Maiden name</p>
                                                            <input class="form-control input-lg" type='text' name='maiden_name'
                                                                   value="" />
                                                        </div>
                                                        <div class="col-xl-3 col-sm-6 mb-3">
                                                            <p>Birth date</p>
                                                            <input class="form-control input-lg" type='text' id="birth_date" name='birth_date'
                                                                   value="" required/>
                                                            <script>
                                                                $('#birth_date').datepicker({
                                                                    uiLibrary: 'bootstrap4',
                                                                    format: 'yyyy-mm-dd'
                                                                });
                                                            </script>
                                                            <!---->
                                                        </div>
                                                        <div class="col-xl-3 col-sm-6 mb-3">
                                                            <p>Social status</p>

                                                            <input type="radio" name="soc_status" value="1" required> Single
                                                            <input type="radio" name="soc_status" value="2" required> In relationship
                                                            <input type="radio" name="soc_status" value="3" required> Married
                                                        </div>
                                                        <div class="col-xl-3 col-sm-6 mb-3">
                                                            <p>Gender</p>

                                                            <input type="radio" name="gender" value="1" required> Male
                                                            <input type="radio" name="gender" value="2" required> Female
                                                        </div>

                                                        <div class="col-xl-3 col-sm-6 mb-3">
                                                            <p>Birth Country</p>
                                                            <select class="form-control input-lg" name="b_country" required>