@extends('layouts.app')
@section('title')
    <title>Baboon - Trego LLogarinë Time</title>
@endsection

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-3 col-sm-4 col-xs-12 user-sidebar">
                @include('user.account.partials.sidebar')
            </div>
            <div class="col-md-7 col-sm-8 col-xs-12 user-profile">
                <h1 class="account-title">Të dhënat e mia</h1>
                <form class="form-horizontal" method="POST" action="{{ route('user.account.update', 1) }}"
                      id="update-account">
                    {{ csrf_field() }}
                    <input type="hidden" name="_method" value="PUT">

                    <div class="form-group{{ $errors->has('fullname') ? ' has-error' : '' }}">
                        <div class="col-md-12" style="padding: unset">
                            <img src="{{asset('images/user.svg')}}" class="form-control-left-icon input-icon"/>
                            <input style="height: 60px; border-radius: 10px; border: 1px solid #cacaca; padding-left: 4rem"
                                   type="text" class="form-control" name="fullname" value="{{ old('fullname') ?? $user->name . ' ' . $user->surname }}"
                                   placeholder="Emër Mbiemër" autofocus>
                        </div>
                        @if ($errors->has('fullname'))
                            <span class="help-block">
                                <strong>{{ $errors->first('fullname') }}</strong>
                            </span>
                        @endif
                    </div>

                    <div class="form-group {{ $errors->has('phone') ? ' has-error' : '' }}">
                        <div>
                            <div class="col-md-12 profile-prefix" style="padding: unset; margin-top: -2rem">
                                <select class="form-control country-prefix-select" name="phonePrefix">
                                    @foreach($phonePrefixes as $country)
                                        <option data-img="{{$country->flagUrl}}" @if($country->phonePrefixes[0] == '+383') data-is-selected="1" @endif value="{{$country->phonePrefixes[0]}}">
                                            {{$country->phonePrefixes[0]}}
                                        </option>
                                    @endforeach
                                </select>

                                <input type="text" class="form-control" id="phone-input" name="phone"
                                       style="border: 1px solid #cacaca; border-radius: 10px; height: 60px"
                                       value="{{ old('phone') ?? $user->phone }}" placeholder="Vendosni celularin"
                                       autofocus
                                >
                            </div>
                        </div>
                        @if ($errors->has('phone'))
                            <span class="help-block">
                                <strong>{{ $errors->first('phone') }}</strong>
                            </span>
                        @endif
                    </div>

                    <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                        <div class="col-md-12" style="padding: unset">
                            <img src="{{asset('images/email.svg')}}" class="form-control-left-icon input-icon"/>
                            <input style="border: 1px solid #cacaca; border-radius: 10px; height: 60px; padding-left: 4rem"
                                   type="email" class="form-control" name="email" value="{{ old('email') ?? $user->email }}"
                                   placeholder="Email" autofocus>
                        </div>
                        @if ($errors->has('email'))
                            <span class="help-block">
                                <strong>{{ $errors->first('email') }}</strong>
                            </span>
                        @endif
                    </div>
                    <div class="form-group {{ $errors->has('password') ? ' has-error' : '' }}">
                        <div>
                            <div class="col-md-12" style="padding: unset">
                                <img src="{{asset('images/password.svg')}}" class="form-control-left-icon input-icon"/>
                                <input style="border: 1px solid #cacaca; border-radius: 10px; height: 60px; padding-left: 4rem"
                                       type="password" class="form-control" name="password"
                                       value="{{ old('password') }}" placeholder="Fjalëkalimi"
                                       autofocus>
                            </div>
                        </div>
                        @if ($errors->has('password'))
                            <span class="help-block">
                                    <strong>{{ $errors->first('password') }}</strong>
                                </span>
                        @endif
                    </div>
                    <div class="form-group">
                        <h2>Mënyra e pagesës</h2>
                        <h6>Default është Cash, zgjidhni mënyrën</h6>
                        <div>
                            <div class="col-md-12" style="padding: unset">
                                <select class="form-control"
                                        style="border: 1px solid #cacaca; border-radius: 10px; height: 60px; padding-right: 1rem">
                                    <option selected>Cash</option>
                                    <option selected>PayPal</option>
                                    <option selected>Card</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <button class="btn"
                                style="width: 100%; border-radius: 10px; height: 60px; font-size: 19px; font-weight: bolder; margin-top: auto; color: white; background-color: #42CD69">
                            Ruaj ndryshimet
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@section('custom-js')
    <script>
        if ('{{$user->phonePrefix}}' !== '') {
            $('.country-prefix-select').select2("val", '{{$user->phonePrefix}}');
        }
    </script>
@endsection