@extends('vendor.site-bases.website.layouts.master')

@section('title', trans('title.profile'))

@section('page_title', trans('title.profile'))

@section('breadcrumbs')
    {!! Breadcrumbs::render('profile') !!}
@endsection

@section('content')
    @include('partials.profile-sidebar')
    @if (count($errors) > 0)
        <section class="error_section container">
            <ul>
                @foreach ($errors->getMessages() as $key => $messages)
                    @foreach ($messages as $text)
                        <li>{{ $key }} - {{ $text }}</li>
                    @endforeach
                @endforeach
            </ul>
        </section>
    @endif
    <section class="profile_section container">
        @if (session('success'))
            <div class="alert-success">
                {{ session('success') }}
            </div>
        @endif
        <form action="" method="POST">
            @csrf
            <div class="input_group">
                <input type="email" id="email" disabled value="{{ auth()->user()->email }}">
                <svg id="Group_6812" data-name="Group 6812" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.005 20.005">
                    <path id="Path_4738" data-name="Path 4738" d="M0,0H20V20H0Z" fill="none"/>
                    <path id="Path_4739" data-name="Path 4739" d="M4.778,17.249H6.035l8.279-8.293L13.057,7.7,4.778,15.99ZM19,19.029H3V15.252L14.942,3.29a.888.888,0,0,1,1.257,0l2.515,2.519a.891.891,0,0,1,0,1.259L8.549,17.249H19ZM14.314,6.438,15.571,7.7l1.257-1.259L15.571,5.179,14.314,6.438Z" transform="translate(-0.999 -1.024)"/>
                </svg>
            </div>
            <div class="input_group">
                <input type="text" id="name" name="name" required value="{{ auth()->user()->name }}" placeholder="@lang('site.name')">
                <svg id="Group_6812" data-name="Group 6812" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.005 20.005">
                    <path id="Path_4738" data-name="Path 4738" d="M0,0H20V20H0Z" fill="none"/>
                    <path id="Path_4739" data-name="Path 4739" d="M4.778,17.249H6.035l8.279-8.293L13.057,7.7,4.778,15.99ZM19,19.029H3V15.252L14.942,3.29a.888.888,0,0,1,1.257,0l2.515,2.519a.891.891,0,0,1,0,1.259L8.549,17.249H19ZM14.314,6.438,15.571,7.7l1.257-1.259L15.571,5.179,14.314,6.438Z" transform="translate(-0.999 -1.024)"/>
                </svg>
            </div>
            <div class="input_group">
                <input type="text" id="last_name" name="last_name" required value="{{ auth()->user()->last_name }}" placeholder="@lang('site.last_name')">
                <svg id="Group_6812" data-name="Group 6812" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.005 20.005">
                    <path id="Path_4738" data-name="Path 4738" d="M0,0H20V20H0Z" fill="none"/>
                    <path id="Path_4739" data-name="Path 4739" d="M4.778,17.249H6.035l8.279-8.293L13.057,7.7,4.778,15.99ZM19,19.029H3V15.252L14.942,3.29a.888.888,0,0,1,1.257,0l2.515,2.519a.891.891,0,0,1,0,1.259L8.549,17.249H19ZM14.314,6.438,15.571,7.7l1.257-1.259L15.571,5.179,14.314,6.438Z" transform="translate(-0.999 -1.024)"/>
                </svg>
            </div>
            <div class="input_group">
                <div class="phone-validation">
                    <input type="tel" id="phone_number" name="phone_number" placeholder="@lang('site.phone_number')" required value="{{ auth()->user()->phone_number }}">
                    <button id="send-sms" type="button">@lang('site.validation_code')</button>
                </div>
                <svg id="Group_6812" data-name="Group 6812" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.005 20.005">
                    <path id="Path_4738" data-name="Path 4738" d="M0,0H20V20H0Z" fill="none"/>
                    <path id="Path_4739" data-name="Path 4739" d="M4.778,17.249H6.035l8.279-8.293L13.057,7.7,4.778,15.99ZM19,19.029H3V15.252L14.942,3.29a.888.888,0,0,1,1.257,0l2.515,2.519a.891.891,0,0,1,0,1.259L8.549,17.249H19ZM14.314,6.438,15.571,7.7l1.257-1.259L15.571,5.179,14.314,6.438Z" transform="translate(-0.999 -1.024)"/>
                </svg>
            </div>
            <div class="input_group {{ !old('sms_code') ? 'display-none' : '' }}">
                <input id="sms_code" type="text" name="sms_code" value="{{ old('sms_code') }}" placeholder="@lang('site.sms_code')" autocomplete="sms_code">
                <svg id="Group_6812" data-name="Group 6812" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.005 20.005">
                    <path id="Path_4738" data-name="Path 4738" d="M0,0H20V20H0Z" fill="none"/>
                    <path id="Path_4739" data-name="Path 4739" d="M4.778,17.249H6.035l8.279-8.293L13.057,7.7,4.778,15.99ZM19,19.029H3V15.252L14.942,3.29a.888.888,0,0,1,1.257,0l2.515,2.519a.891.891,0,0,1,0,1.259L8.549,17.249H19ZM14.314,6.438,15.571,7.7l1.257-1.259L15.571,5.179,14.314,6.438Z" transform="translate(-0.999 -1.024)"/>
                </svg>
            </div>
            <div class="input_group submit">
                <input type="submit" value="@lang('site.save')">
            </div>
        </form>
    </section>
@endsection

@section('scripts')
    <script>
        if ($('#phone_number').val().length == 9 && $('#phone_number').val() != '{{ auth()->user()->phone_number }}') {
            $('#send-sms').addClass('active')
        }
        $('#phone_number').keyup(function () {
            if (this.value.length == 9 && this.value != '{{ auth()->user()->phone_number }}') {
                $(this).next('button').addClass('active')
            } else {
                $(this).next('button').removeClass('active')
            }
        });
        $('#send-sms').click(function () {
            let that = $(this);
            let phoneNumber = $('#phone_number').val();
            $('#sms_code').val('');
            if (phoneNumber.length == 9) {
                $.ajax({
                    url:"{{ route('send.validation.code') }}",
                    type:"POST",
                    data: {
                        _token: '{{ csrf_token() }}',
                        phone_number: phoneNumber
                    }
                }).done(function(status){
                    if (status) {
                        $('.input_group.display-none').removeClass('display-none');
                        that.removeClass('active');
                        setTimeout(() => {
                            that.addClass('active');
                        }, 60000);
                    }
                }).fail(function(xhr, status, error) {
                    alert('Retry in ' + xhr.responseJSON.errors.retry_in[0] + ' seconds');
                });
            }
        });
    </script>
@endsection