@extends('layouts.smartadmin.main')

@section('title')
    @lang('Account') • @lang('Profile')
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-6 offset-lg-3">
            <div id="contract_list_panel" class="panel">
                <div class="panel-hdr">
                    <h2>@lang('Update Profile Information')</h2>
                </div>
                <div class="panel-container show">
                    <div class="panel-content">
                        <form id="update_profile_form" method="POST" action="{{ route('account.profile') }}" enctype="multipart/form-data">
                            @csrf
                            @method('PATCH')

                            <div class="row">
                                <div class="col-6">
                                    <div class="form-group">
                                        <label for="first_name" class="form-label required">@lang('First Name')</label>
                                        <input id="first_name" type="text"
                                               class="form-control @error('first_name') is-invalid @enderror" name="first_name"
                                               value="{{ old('first_name') ?? auth()->user()->first_name }}" required>
                                        @error('first_name')
                                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-6">
                                    <div class="form-group">
                                        <label for="last_name" class="form-label required">@lang('Last Name')</label>
                                        <input id="last_name" type="text"
                                               class="form-control @error('last_name') is-invalid @enderror" name="last_name"
                                               value="{{ old('last_name') ?? auth()->user()->last_name }}" required>
                                        @error('last_name')
                                        <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="email" class="form-label required">@lang('Email')</label>
                                <input id="email" type="email"
                                       class="form-control @error('email') is-invalid @enderror" name="email"
                                       value="{{ old('email') ?? auth()->user()->email }}" required>
                                @error('email')
                                <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="avatar" class="form-label required">@lang('Profile Picture')</label>
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input" id="avatar" name="avatar">
                                    <label class="custom-file-label" for="avatar">@lang('Choose file')</label>
                                </div>
                            </div>
                        </form>
                    </div>

                    {{-- Delete Profile Picture --}}
                    <form method="POST" action="{{ route('account.profile.delete-current-profile-picture') }}" id="delete-current-profile-picture" style="display: none;">
                        @csrf
                        @method('DELETE')
                    </form>

                    <div class="panel-content border-faded border-left-0 border-right-0 border-bottom-0 d-flex flex-row">
                        <button class="btn btn-danger ml-auto" id="delete-current-profile-picture-button">
                            @lang('Delete Current Profile Picture')
                        </button>
                        <button class="btn btn-primary ml-3" form="update_profile_form">
                            @lang('Update Profile')
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    {!! JsValidator::formRequest(\App\Http\Requests\Users\UpdateProfileRequest::class)->selector('#update_profile_form')->submitHandler('submit_form'); !!}

    <script>
        $(function() {
            let button = document.getElementById('delete-current-profile-picture-button')
            button.addEventListener('click', function () {
                submit_form(document.getElementById('delete-current-profile-picture'))
            })
        });
    </script>
@endpush