@extends("admin.template.layout")
@section('header')
    <style>
        .form-control-plaintext {
            padding-left: 7px;
            border: 1px solid #990253;
            border-radius: 10px;
            color: #212529;
            text-align: left;
            margin-bottom: 15px;
        }

        .form-label {
            margin-bottom: 5px;
        }
    </style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/dropzone.css" />

@stop
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">

        <!-- Ajax Sourced Server-side -->
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">{{$mode ?? $page_heading}}</h5>
            </div>


            <form id="admin_form" method="post" action="{{ route('users.store') }}" enctype="multipart/form-data">
                @csrf
                <div class="card-body py-0">
                    <div class="row">

                        <div class="col-md-112 col-sm-12 py-4">
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label class="form-label">Name</label>
                                    <input name="name" class="form-control jqv-input" placeholder="Name">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Email</label>
                                    <input class="form-control jqv-input" name="email" placeholder="Email address">
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="" class="form-label">Dial Code</label>
                                    <select name="dial_code" class="select2 form-control jqv-input">
                                        <option value="">Select</option>
                                        @if(!empty($countries))
                                        @foreach($countries as $country)
                                            <option value="{{$country->dial_code}}">{{$country->dial_code.' - '.$country->country_name}}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                    @error('dial_code')
                                        <div class="error">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Phone Number</label>
                                    <input pattern="^[0-9]+$" type="number" class="form-control jqv-input phone" name="phone" placeholder="Phone number">
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="age" class="form-label">DOB</label>
                                    <input type="text" autocomplete="off" readonly id="dob" name="dob" class="form-control jqv-input" placeholder="Date of birth">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Gender</label>
                                    <select class="form-control jqv-input select2" name="gender">
                                        @foreach(\App\Models\User::GENDER as $key => $value)
                                            <option value="{{$key}}">{{$value}}</option>
                                        @endforeach
                                    </select>
                                    @error('gender')
                                        <div class="error">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label for="profile_pic" class="form-label">Profile Picture</label>
                                    <input type="file" class="form-control-file" id="picture" name="picture" accept="image/*">
                                </div>
                                <div class="col-md-6">
                                    <label for="" class="form-label">Photos</label>
                                    <input type="file" class="form-control-file" name="photos[]" multiple>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label class="form-label">Interested In</label>
                                    <select class="form-control jqv-input select2" name="intrest_gender">
                                        <option value="1">Male</option>
                                        <option value="2">Female</option>
                                        <option value="3">Both</option>
                                    </select>
                                    @error('intrest_gender')
                                        <div class="error">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Marital Status</label>
                                    <div style="display: flex; flex-direction: column; gap: 0.5rem;">
                                        <select name="marital_status" class="select2 form-control jqv-input">
                                            <option value="">Select</option>
                                            @foreach(\App\Models\User::MARITAL_STATUS as $key => $value)
                                                <option value="{{$key}}">{{$value}}</option>
                                            @endforeach
                                        </select>
                                        @error('marital_status')
                                            <div class="error">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>

                            </div>
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label class="form-label">Nationality</label>
                                    <select name="nationality" class="select2 form-control jqv-input">
                                        <option value="">Select</option>
                                        @if(!empty($countries))
                                        @foreach($countries as $country)
                                            <option value="{{$country->country_id}}">{{$country->country_name}}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Password</label>
                                    <input type="password" class="form-control jqv-input" name="password" placeholder="Password">
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-12">
                                    <label class="form-label">About Me</label>
                                    <input class="form-control jqv-input" name="about" value=''>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label class="form-label">Languages</label>
                                    <select class="form-control select2 jqv-input" name="language[]" multiple>
                                        <option value="">Select Language</option>
                                        @if(!empty($languages))
                                        <option value="eng">Urdu</option>
                                            @foreach($languages as $language)
                                            <option value="{{$language->language_id}}">{{$language->language_name}}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Account Status</label>
                                    <select class="form-control select2 jqv-input" name="status">
                                        <option value="1">DAU</option>
                                        <option value="2">Active</option>
                                        <option value="3">Inactive</option>
                                        <option value="4">Churned</option>
                                        <option value="5">Deactivated</option>
                                    </select>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label class="form-label">Facebook ID</label>
                                    <input type="text" name="facebook_id" class="form-control jqv-input">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Google ID</label>
                                    <input type="text" name="google_id" class="form-control jqv-input">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Apple ID</label>
                                    <input type="text" name="apple_id"  class="form-control jqv-input">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12 text-center">
                                    <button type="submit" class="main-btn primary-btn btn-hover">
                                        Submit
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@stop
@section('script')




<script>
$(document).ready(function(){
    $('#dob').datepicker({
        format: 'yyyy-mm-dd',
        endDate: '-18y',
        startView: 'decade',
        autoclose: true
    });
    $('.form-control').on('input', function () {
        $(this).siblings('.error').hide();
    });
});
        $('.phone').on('keydown', function (event) {
                if (event.keyCode === 69 || event.keyCode === 189 || event.keyCode === 190) {
                    event.preventDefault();
                }
            });
        $('.all-select').click(function () {
            $(this).siblings('.crud-items').prop('checked', this.checked);
        });
        $('.crud-items').click(function () {
            $(this).siblings('.all-select').prop('checked', false);
        });
        $('.all-p').click(function () {
            $(this).siblings('.reader').prop('checked', true);
        });
        App.initFormView();
        let form_in_progress = 0;

        $('body').off('submit', '#admin_form');
        $('body').on('submit', '#admin_form', function (e) {
            e.preventDefault();
            var validation = $.Deferred();
            var $form = $(this);
            var formData = new FormData(this);

            $form.validate({
                rules: {},
                errorElement: 'div',
                errorPlacement: function (error, element) {
                    element.addClass('is-invalid');
                    error.addClass('error');
                    error.insertAfter(element);
                }
            });

            // Bind extra rules. This must be called after .validate()
            App.setJQueryValidationRules('#admin_form');

            if ($form.valid()) {
                validation.resolve();
            } else {
                var error = $form.find('.is-invalid').eq(0);
                $('html, body').animate({
                    scrollTop: (error.offset().top - 100),
                }, 500);
                validation.reject();
            }

            validation.done(function () {
                $form.find('.is-invalid').removeClass('is-invalid');
                $form.find('div.error').remove();


                App.button_loading(true);

                form_in_progress = 1;
                $.ajax({
                    type: "POST",
                    enctype: 'multipart/form-data',
                    url: $form.attr('action'),
                    data: formData,
                    processData: false,
                    contentType: false,
                    cache: false,
                    timeout: 600000,
                    dataType: 'html',
                    success: function (res) {
                        res = JSON.parse(res);
                        console.log(res['status']);
                        form_in_progress = 0;
                        App.button_loading(false);
                        if (res['status'] == 0) {
                            if (typeof res['errors'] !== 'undefined') {
                                var error_def = $.Deferred();
                                var error_index = 0;
                                jQuery.each(res['errors'], function (e_field, e_message) {
                                    if (e_message != '') {
                                        var $input = $('[name="' + e_field + '"]').eq(0);
                                        $input.addClass('is-invalid');
                                        var $errorDiv = $('<div class="error">' + e_message + '</div>');
                                        if ($input.hasClass('select2')) {
                                            $input.next('.select2-container').after($errorDiv);
                                        } else {
                                            $errorDiv.insertAfter($input);
                                        }
                                        if (error_index == 0) {
                                            error_def.resolve();
                                        }
                                        error_index++;
                                    }
                                });
                                error_def.done(function () {
                                    var error = $form.find('.is-invalid').eq(0);
                                    $('html, body').animate({
                                        scrollTop: (error.offset().top - 100),
                                    }, 500);
                                });

                            } else {
                                var m = res['message'] || 'Unable to save variation. Please try again later.';
                                App.alert(m, 'Oops!', 'error');
                            }
                        } else {
                            App.alert(res['message'] || 'Record saved successfully', 'Success!', 'success');
                            setTimeout(function () {
                                window.location.href = res['oData']['redirect'];
                            }, 2500);

                        }

                    },
                    error: function (e) {
                        form_in_progress = 0;
                        App.button_loading(false);
                        console.log(e);
                        App.alert("Network error please try again", 'Oops!', 'error');
                    }
                });
            });
        });
        $(document).ready(function () {
            $(window).keydown(function (event) {
                if (event.keyCode == 13) {
                    event.preventDefault();
                    return false;
                }
            });

            $('#admin_form select.select2.is-invalid').each(function() {
            var errorMessageDiv = $(this).prev('.error');
            $(this).next('.select2').after(errorMessageDiv);
            });




        });
    </script>
@stop