{{-- Extends layout --}}
@extends('layout.default')

{{-- Content --}}
@section('content')

<!--begin::Entry-->
<div class="d-flex flex-column-fluid">
    <!--begin::Container-->
    <div class="container">

        @if ($errors->any())
        <div class="alert alert-danger">
            <strong>Error!</strong>
            <ul>
                @foreach ($errors->all() as $error)
                <li></li>
                @endforeach
            </ul>
        </div>
        @endif
        <!--begin::Form-->
        <form class="kt-form kt-form--label-right" id="frmstudent" action="{{route('students.store')}}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('POST')
            <div class="row">
                <div class="col-md-6">
                    <!--begin::Card-->
                    <div class="card card-custom gutter-b example example-compact">
                        <div class="card-header">
                            <h3 class="card-title">Student Information</h3>
                        </div>
                        <div class="card-body">
                            <div class="form-group row">
                                <div class="col-lg-6 col-xl-6">
                                    <div class="image-input image-input-outline" id="kt_image_1">
                                        <div class="image-input-wrapper" style="background-image: url('{{ asset('media/users/blank.png')}}');"></div>
                                        <label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="change" data-toggle="tooltip" title="" data-original-title="Change avatar">
                                            <i class="fa fa-pen icon-sm text-muted"></i>
                                            <input type="file" name="photo" accept=".png, .jpg, .jpeg" />
                                            <input type="hidden" name="profile_avatar_remove" />
                                        </label>
                                        <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="cancel" data-toggle="tooltip" title="Cancel avatar">
                                            <i class="ki ki-bold-close icon-xs text-muted"></i>
                                        </span>
                                    </div>
                                    <span class="form-text text-muted">png, jpg, jpeg</span>
                                </div>
                                <div class="col-lg-6 col-xl-6">
                                    <div class="image-input image-input-outline">
                                        <label for="photo">
                                            Id Proof</label>
                                        <input type="file" name="idproof" accept=".png, .jpg, .jpeg, .pdf" />
                                    </div>
                                    <span class="form-text text-muted">png, jpg, jpeg,pdf</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Enter Name</label>
                                <input type="hidden" name="trialid" value="" />
                                <input type="text" class="form-control" id="participant_name" name="participant_name" placeholder="Enter Name" value="{{ $trials[0]->participant_name ?? '' }}" minlength="2" maxlength="50" onkeypress="return ((event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || (event.charCode == 32))" required />
                                @if ($errors->has('participant_name'))
                                <span class="text-danger">{{ $errors->first('participant_name') }}</span>
                                @endif
                            </div>
                            <div class="form-group">
                                <label>DOB</label>
                                <input type="date" date="yyyy-MM-dd" class="form-control" id="dob" name="dob" required>
                            </div>
                            <div class="form-group row">
                                <label class="col-3 col-form-label">Gender</label>
                                <div class="col-9 col-form-label">
                                    <div class="radio-inline">
                                        <label class="radio radio-success">
                                            <input type="radio" name="gender" id="gender" value="M" required checked />
                                            <span></span>Male</label>
                                        <label class="radio radio-success">
                                            <input type="radio" name="gender" id="gender" value="F" required />
                                            <span></span>Female</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>School / College</label>
                                <input type="text" class="form-control" id="edu" name="edu" placeholder="Enter School / College" maxlength="50" onkeypress="return ((event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || (event.charCode == 32))" />
                            </div>
                            <div class="form-group row">
                                <label class="col-3 col-form-label">Board</label>
                                <div class="col-9 col-form-label">
                                    <div class="radio-inline">
                                        <label class="radio radio-success">
                                            <input type="radio" name="SchoolType" id="SchoolType" value="IB" required checked />
                                            <span></span>IB</label>
                                        <label class="radio radio-success">
                                            <input type="radio" name="SchoolType" id="SchoolType" value="OTHER" required />
                                            <span></span>IGCSE</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="exampleSelect2">Grade
                                    <span class="text-danger">*</span></label>
                                <select class="form-control" id="sport" name="sport" required>
                                    <option value="" selected="">Grade</option>
                                                                    </select>
                            </div>
                            <!--begin: Code-->
                            <div class="example-code mt-10">
                                <div class="example-highlight">
                                </div>
                            </div>
                            <!--end: Code-->
                        </div>
                        <div class="card-footer">

                        </div>
                    </div>
                    <!--end::Card-->
                </div>
                <div class="col-md-6">
                    <!--begin::Card-->
                    <div class="card card-custom gutter-b example example-compact">
                        <div class="card-header">
                            <h3 class="card-title">Contact Information</h3>
                        </div>

                        <div class="card-body">
                            <div class="form-group">
                                <label>Parent Name</label>
                                <input type="text" class="form-control" id="father_name" name="father_name" value="" placeholder="Parent's Name" required maxlength="50" onkeypress="return ((event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || (event.charCode == 32))" />
                                <input type="hidden" class="form-control" id="address_1" name="address_1" />
                                <input type="hidden" class="form-control" id="pincode" name="pincode" />
                            </div>
                            <div class="form-group">
                                <label class="form-group-float-label text-success font-weight-semibold">Country</label>
                                <select class="form-control" id="country" name="country" required>
                                    <option value="" selected="">Country</option>
                                                                    </select>
                            </div>
                            <div class="form-group">
                                <label class="form-group-float-label text-success font-weight-semibold">State</label>
                                <select class="form-control" name="state" id="state" required>
                                    <option>Select State</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>City</label>
                                <select class="form-control" name="city" id="city" required>
                                    <option>Select city</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Email</label>
                                <input type="email" class="form-control" id="email" name="email" placeholder="Email" value="{{ $trials[0]->email ?? '' }}" required />
                                <div id="status" style="left:0px;  padding-top: 10px;" class="col-md-2"></div>
                            </div>
                            <div class="form-group">
                                <label>Phone</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <select class="form-control" id="phonecode" name="phonecode" required>
                                                <option value="" selected="">Code</option>
                                                                                            </select>
                                        </span>
                                    </div>
                                    <div class="input-group-append">
                                        <span class="input-group-text">
                                            <input type="text" class="form-control" id="phone_no" name="phone_no" value="{{ $trials[0]->phone ?? '' }}" placeholder="Phone No" onkeypress="return event.charCode >= 48 && event.charCode <= 57" required maxlength="12" />
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>Alternate no.</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <select class="form-control" id="phonecodealt" name="phonecodealt" required>
                                                <option value="" selected="">Code</option>
                                                                                            </select>
                                        </span>
                                    </div>
                                    <div class="input-group-append">
                                        <span class="input-group-text">
                                            <input type="text" class="form-control" id="phone_no_alt" name="phone_no_alt" placeholder="Phone No" onkeypress="return event.charCode >= 48 && event.charCode <= 57" required maxlength="12" required />
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <!--begin: Code-->
                            <div class="example-code mt-10">
                                <div class="example-highlight">
                                </div>
                            </div>
                            <!--end: Code-->
                        </div>
                        <div class="card-footer">
                            <input type="submit" class="btn btn-primary mr-2" value="Submit">
                            <button type="reset" class="btn btn-secondary">Cancel</button>
                        </div>
                    </div>
                    <!--end::Card-->
                </div>
            </div>
        </form>

    </div>
    <!--end::Container-->
</div>
<!--end::Entry-->

@endsection
{{-- Scripts Section --}}
@section('scripts')
{{-- vendors --}}
{{-- page scripts --}}
<script src="{{ asset('js/pages/crud/file-upload/image-input.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/app.js') }}" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#country').change(function() {
            var countryid = $(this).val();
            $.ajax({
                url: '{{ url('getstates') }}/' + countryid,
                type: 'get',
                success: function(response) {

                    if (response.data != null) {
                        var json_data = response.data;
                        if ($("select[name$='state'] > option").length > 0) {
                            $("select[name$='state']").empty();
                            $("select[name$='state']").append($('<option>').text("Select State...").attr('value', ''));
                        }
                        $.each(json_data, function(idx, obj) {

                            $('#state')
                                .append($('<option>', {
                                        value: obj.id
                                    })
                                    .text(obj.name));
                        });
                    }
                }
            })
        });

        $('#state').change(function() {
            var stateid = $(this).val();
            $.ajax({
                url: '{{ url('getcities') }}/' + stateid,
                type: 'get',
                success: function(response) {

                    if (response.data != null) {
                        var json_data = response.data;
                        if ($("select[name$='city'] > option").length > 0) {
                            $("select[name$='city']").empty();
                            $("select[name$='city']").append($('<option>').text("Select City...").attr('value', ''));
                        }
                        $.each(json_data, function(idx, obj) {

                            $('#city')
                                .append($('<option>', {
                                        value: obj.id
                                    })
                                    .text(obj.name));
                        });
                    }
                }
            })
        });

    });
</script>
@endsection