@extends('layouts.landing')

@section('title', 'General Settings')

@section('content')

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet"/>
    <div class="row">
        <div class="col-12 col-xxl-4 col-xl-4 col-lg-4">
            @include('elements.settings-menu')
        </div>
        <div class="col-12 col-xxl-8 col-xl-8 col-lg-8">
            <div class="card w-100 border-0 p-0 bg-white shadow-xss rounded-xxl">
                <div class="card-body p-4">
                    <h5>Profile Settings</h5>
                    <div class="row">
                        <div class="col-12">
                            <form class="pb-4" action="{{route('account.save-setting', $user->id)}}" method="POST">
                                @csrf
                                <input type="hidden" name="user_id" value="{{$user->id}}">
                                <div class="">
                                    <div class="mt-2 pt-2 mb-3">
                                        <div class="row">
                                            <div class="col-12 col-xl-6 col-lg-6">
                                                <div class="form-group">
                                                    <label class="form-label mb-1">
                                                        First Name
                                                    </label>
                                                    <input type="text" name="first_name" class="form-control" value="{{$user->first_name}}">
                                                </div>
                                            </div>
                                            <div class="col-12 col-xl-6 col-lg-6">
                                                <div class="form-group">
                                                    <label class="form-label mb-1">
                                                        Last Name
                                                    </label>
                                                    <input type="text" name="last_name" class="form-control" value="{{$user->last_name}}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12 col-xl-6 col-lg-6">
                                                <div class="form-group">
                                                    <label class="form-label mb-1">
                                                        Middle Name
                                                    </label>
                                                    <input type="text" name="maiden_name" class="form-control" value="{{$user->maiden_name}}">
                                                </div>
                                            </div>
                                            @if(tenantSetting($_SERVER['HTTP_HOST']) !== '')
                                                @if(tenantSetting($_SERVER['HTTP_HOST'])->verify_status == 1)
                                                    <div class="col-12 col-xl-6 col-lg-6">
                                                        <div class="form-group">
                                                            <label class="form-label mb-1">
                                                                Year of Call to bar
                                                            </label>
                                                            <input id="datepicker" type="text" value="{{$user->ctb}}" class="form-control" name="ctb" placeholder="Year of Call to bar" disabled>
                                                        </div>
                                                    </div>
                                                @endif
                                            @endif
                                            <div class="col-12 col-xl-6 col-lg-6">
                                                <div class="form-group">
                                                    <label class="form-label mb-1">
                                                        Email
                                                    </label>
                                                    <input type="email" name="email" class="form-control" value="{{$user->email}}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row border-bottom-xs mb-4 pb-4">
                                            <div class="col-12 col-xl-6 col-lg-6">
                                                <div class="form-group">
                                                    <label class="form-label mb-1">
                                                        Gender
                                                    </label>
                                                    <select name="gender" class="form-select w-100">
                                                        <option value="{{$user->gender}}">{{$user->gender == 'male' ? 'Male' : 'Female'}}</option>
                                                        <option value="male">Male</option>
                                                        <option value="female">Female</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-12 col-xl-6 col-lg-6">
                                                <div class="form-group">
                                                    <label class="form-label mb-1">
                                                        Birthday
                                                    </label>
                                                    <input type="date" name="dob" class="form-control" style="height: 46px" value="{{$user->dob}}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12 col-xl-6 col-lg-6">
                                                <div class="form-group">
                                                    <label class="form-label mb-1">
                                                        Area of Specialization
                                                    </label>
                                                    <input type="text" name="area_of_specialization" class="form-control" value="{{$user->area_of_specialization}}">
                                                </div>
                                            </div>
                                            <div class="col-12 col-xl-6 col-lg-6">
                                                <div class="form-group">
                                                    <label class="form-label mb-1">
                                                        School Attended
                                                    </label>
                                                    <input type="text" name="school" class="form-control" value="{{$user->school}}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12 col-xl-6 col-lg-6">
                                                <div class="form-group">
                                                    <label class="form-label mb-1">
                                                        City
                                                    </label>
                                                    <input type="text" name="city" class="form-control" value="{{$user->city}}">
                                                </div>
                                            </div>
                                            <div class="col-12 col-xl-6 col-lg-6">
                                                <div class="form-group">
                                                    <label class="form-label mb-1">
                                                        State
                                                    </label>
                                                    <input type="text" name="state" class="form-control" value="{{$user->state}}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12 col-xl-6 col-lg-6">
                                                <div class="form-group">
                                                    <label class="form-label mb-1">
                                                        Country
                                                    </label>
                                                    <select name="country" class="form-select">
                                                        <option value="{{Auth::user()->country == '' ? '' : Auth::user()->country}}" {{Auth::user()->country == '' ? '' : 'selected'}}>{{Auth::user()->country == '' ? 'Select country' : Auth::user()->country}}</option>
                                                        @foreach($countries as $country)
                                                            <option value="{{$country->name}}">{{$country->name}}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-12 col-xl-6 col-lg-6">
                                                <div class="form-group">
                                                    <label class="form-label mb-1">
                                                        Phone number
                                                    </label>
                                                    <input type="number" name="phone_number" id="phone_number" class="form-control" onkeydown="limit(this);" onkeyup="limit(this);" value="{{$user->phone_number}}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group mb-4">
                                            <label class="form-label mb-1">
                                                Add a bio
                                            </label>
                                            <textarea type="text" name="bio" class="form-control">{{$user->bio}}</textarea>
                                        </div>
                                        <div class="form-group text-end">
                                            <button type="submit" name="submit" onclick="this.classList.toggle('button--loading')" class="button_load btn custom-btn">
                                                <span class="button__text"><i class="mdi mdi-check"></i> Save changes</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var input = document.querySelector("#phone_number");
        window.intlTelInput(input, {
            separateDialCode: true,
            preferredCountries: ["ng"]
        });
    </script>
    <script>
        $("#datepicker").datepicker({
            format: "yyyy",
            viewMode: "years",
            minViewMode: "years",
            autoclose:true,
            endDate: '-1d',
        });

        function limit(element)
        {
            var max_chars = 11;  // phone number maxlength

            if(element.value.length > max_chars) {
                element.value = element.value.substr(0, max_chars);
            }
        }
    </script>
@endsection