@extends('layouts.app')

@section('css')
    <link href="{{ asset('assets/css/parent-form.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
    @include('layouts.toolbar')

    <div id="kt_content_container" class="d-flex flex-column-fluid align-items-start container-xxl parent-form-page">
        <div class="content flex-row-fluid" id="kt_content">

            <form id="ParentForm" name="ParentForm" class="parent-form-shell">
                {{ csrf_field() }}

                <div class="parent-form-header">
                    <div class="parent-form-title-wrap">
                        <h1 class="parent-form-title">Add Parent</h1>
                        <p class="parent-form-subtitle">Create a new parent account with family and emergency contact details.</p>
                    </div>

                    <div class="parent-form-type-field">
                        <label for="account_type">Account type</label>
                        <select name="account_type" id="account_type" class="parent-form-control">
                            <option value="LIVE">Live</option>
                            <option value="TEST">Test</option>
                        </select>
                    </div>
                </div>

                {{-- Father --}}
                <div class="parent-form-section">
                    <div class="parent-form-section-head">
                        <span class="parent-form-section-icon is-father"><i class="fa-solid fa-person"></i></span>
                        <div>
                            <h2 class="parent-form-section-title">Father Information</h2>
                            <p class="parent-form-section-note">Primary contact details for the father.</p>
                        </div>
                    </div>

                    <div class="parent-form-grid">
                        <div class="parent-field">
                            <label class="parent-label is-required" for="father_full_name">Full Name</label>
                            <input type="text" class="parent-form-control @error('father_full_name') is-invalid @enderror"
                                   placeholder="Enter full name" name="father_full_name" id="father_full_name"
                                   value="{{ old('father_full_name') }}" />
                        </div>

                        <div class="parent-field">
                            <label class="parent-label is-required" for="father_email">Email</label>
                            <input type="email" class="parent-form-control @error('father_email') is-invalid @enderror"
                                   placeholder="Enter email address" name="father_email" id="father_email"
                                   value="{{ old('father_email') }}" />
                            <span class="parent-hint">Used to log in to the account.</span>
                        </div>

                        <div class="parent-field is-third">
                            <label class="parent-label is-required" for="father_mobile_number">Mobile Number</label>
                            <input type="tel" class="parent-form-control @error('father_mobile_number') is-invalid @enderror"
                                   placeholder="Enter mobile number" name="father_mobile_number" id="father_mobile_number"
                                   value="{{ old('father_mobile_number') }}" />
                        </div>

                        <div class="parent-field is-third">
                            <label class="parent-label" for="father_home_phone">Home Phone</label>
                            <input type="tel" class="parent-form-control" placeholder="Enter home phone"
                                   name="father_home_phone" id="father_home_phone" value="{{ old('father_home_phone') }}" />
                        </div>

                        <div class="parent-field is-third">
                            <label class="parent-label" for="father_work_phone">Work Phone</label>
                            <input type="tel" class="parent-form-control" placeholder="Enter work phone"
                                   name="father_work_phone" id="father_work_phone" value="{{ old('father_work_phone') }}" />
                        </div>

                        <div class="parent-field is-full">
                            <label class="parent-label is-required" for="father_home_address">Home Address</label>
                            <textarea class="parent-form-control @error('father_home_address') is-invalid @enderror"
                                      placeholder="Enter home address" name="father_home_address"
                                      id="father_home_address" rows="2">{{ old('father_home_address') }}</textarea>
                        </div>
                    </div>
                </div>

                {{-- Mother --}}
                <div class="parent-form-section">
                    <div class="parent-form-section-head">
                        <span class="parent-form-section-icon is-mother"><i class="fa-solid fa-person-dress"></i></span>
                        <div>
                            <h2 class="parent-form-section-title">Mother Information</h2>
                            <p class="parent-form-section-note">Primary contact details for the mother.</p>
                        </div>
                    </div>

                    <div class="parent-form-grid">
                        <div class="parent-field">
                            <label class="parent-label is-required" for="mother_full_name">Full Name</label>
                            <input type="text" class="parent-form-control @error('mother_full_name') is-invalid @enderror"
                                   placeholder="Enter full name" name="mother_full_name" id="mother_full_name"
                                   value="{{ old('mother_full_name') }}" />
                        </div>

                        <div class="parent-field">
                            <label class="parent-label is-required" for="mother_email">Email</label>
                            <input type="email" class="parent-form-control @error('mother_email') is-invalid @enderror"
                                   placeholder="Enter email address" name="mother_email" id="mother_email"
                                   value="{{ old('mother_email') }}" />
                            <span class="parent-hint">Used to log in to the account.</span>
                        </div>

                        <div class="parent-field is-third">
                            <label class="parent-label is-required" for="mother_mobile_number">Mobile Number</label>
                            <input type="tel" class="parent-form-control @error('mother_mobile_number') is-invalid @enderror"
                                   placeholder="Enter mobile number" name="mother_mobile_number" id="mother_mobile_number"
                                   value="{{ old('mother_mobile_number') }}" />
                        </div>

                        <div class="parent-field is-third">
                            <label class="parent-label" for="mother_home_phone">Home Phone</label>
                            <input type="tel" class="parent-form-control" placeholder="Enter home phone"
                                   name="mother_home_phone" id="mother_home_phone" value="{{ old('mother_home_phone') }}" />
                        </div>

                        <div class="parent-field is-third">
                            <label class="parent-label" for="mother_work_phone">Work Phone</label>
                            <input type="tel" class="parent-form-control" placeholder="Enter work phone"
                                   name="mother_work_phone" id="mother_work_phone" value="{{ old('mother_work_phone') }}" />
                        </div>

                        <div class="parent-field is-full">
                            <label class="parent-label is-required" for="mother_home_address">Home Address</label>
                            <textarea class="parent-form-control @error('mother_home_address') is-invalid @enderror"
                                      placeholder="Enter home address" name="mother_home_address"
                                      id="mother_home_address" rows="2">{{ old('mother_home_address') }}</textarea>
                        </div>
                    </div>
                </div>

                {{-- Emergency --}}
                <div class="parent-form-section">
                    <div class="parent-form-section-head">
                        <span class="parent-form-section-icon is-emergency"><i class="fa-solid fa-phone-volume"></i></span>
                        <div>
                            <h2 class="parent-form-section-title">Emergency Contact</h2>
                            <p class="parent-form-section-note">Who to contact if both parents are unreachable.</p>
                        </div>
                    </div>

                    <div class="parent-form-grid">
                        <div class="parent-field is-third">
                            <label class="parent-label" for="emergency_full_name">Full Name</label>
                            <input type="text" class="parent-form-control @error('emergency_full_name') is-invalid @enderror"
                                   placeholder="Enter full name" name="emergency_full_name" id="emergency_full_name"
                                   value="{{ old('emergency_full_name') }}" />
                        </div>

                        <div class="parent-field is-third">
                            <label class="parent-label" for="emergency_mobile_number">Contact Number</label>
                            <input type="tel" class="parent-form-control @error('emergency_mobile_number') is-invalid @enderror"
                                   placeholder="Enter contact number" name="emergency_mobile_number" id="emergency_mobile_number"
                                   value="{{ old('emergency_mobile_number') }}" />
                        </div>

                        <div class="parent-field is-third">
                            <label class="parent-label" for="emergency_relationship">Relationship</label>
                            <input type="text" class="parent-form-control @error('emergency_relationship') is-invalid @enderror"
                                   placeholder="Enter relationship" name="emergency_relationship" id="emergency_relationship"
                                   value="{{ old('emergency_relationship') }}" />
                        </div>
                    </div>
                </div>

                <div class="parent-form-actions">
                    <a href="{{ url('parents/list') }}" class="parent-form-btn is-ghost" id="CancelForm">Cancel</a>
                    <button type="button" class="parent-form-btn is-primary" id="SubmitForm">
                        <i class="fa-solid fa-check"></i>
                        Save Parent
                    </button>
                </div>
            </form>

        </div>
    </div>
@endsection

@section('js')
    <script type="text/javascript">
        $(function() {
            $(document).on('click', '#SubmitForm', function(e) {
                $.blockUI({
                    css: {
                        border: 'none',
                        padding: '20px',
                        backgroundColor: '#000',
                        '-webkit-border-radius': '10px',
                        '-moz-border-radius': '10px',
                        opacity:         0.6,
                        color: '#fff',
                    }
                });
                $.ajax ({
                    type : 'POST',
                    url : '{{ url("parents/save") }}',
                    processData : false,
                    contentType : false,
                    data : new FormData($('#ParentForm')[0]),
                    dataType : 'json',

                    beforeSend: function() {
                        $('#SubmitForm').hide();
                        $('#CancelForm').hide();
                    },

                    success: function (data) {
                        $.unblockUI();
                        if(data.success) {
                            toastr.success(data.success);
                            if($('#account_type').val() == 'LIVE'){
                                setTimeout(function () {
                                    window.location.href = "{{ url( 'parents/list' ) }}";
                                }, 1500);
                            }

                            if($('#account_type').val() == 'TEST'){
                                setTimeout(function () {
                                    window.location.href = "{{ url( 'parents/test/list' ) }}";
                                }, 1500);
                            }

                        } else if (data.failure) {

                            let htmlError = '';
                            $.each(data.failure, function(index, value) {
                                htmlError += '<li>'+value+'</li>';
                            });

                            toastr.error(htmlError);
                        } else if (data.failure_record) {
                            Swal.fire({
                                icon: "error",
                                title: "Oops...",
                                text: data.failure_record
                            });
                        }
                    },

                    complete: function(){
                        $('#SubmitForm').show();
                        $('#CancelForm').show();
                    }
                });
            });
        });
    </script>
@endsection