@extends('layouts.master')
@section('title', pageTitle('My Account'))
@section('content')
    @include('sections.breadcrumb')
    <div class="container-fluid has_base" @if(config('app.env') === 'stage') data-base-url="/TMS/public" @endif>
        <div class="row justify-content-center">
            <div class="col-xl-8 pt-5">
                <div class="card height-equal">
                    <div class="card-header pb-0">
                        <h1 class="font-weight-bold" >Account Information</h1>
                    </div>
                    <div class="card-body">

                        @include('sections.messages')

                        <form method="POST" action="{{ route('admin.account.update') }}" enctype="multipart/form-data" class="row g-3 needs-validation custom-input mt-4">
                            @csrf

                            <div class="col-md-12 theme-form mt-2 mb-3">
                                <label for="avatar">Profile Avatar (jpg,png,jpeg)</label>
                                <input type="file" class="dropify"
                                    data-height="200"
                                    data-default-file="{{ userAvatar($user->avatar) }}"
                                    data-max-file-size="1M"
                                    data-allowed-file-extensions="jpeg png jpg"
                                    name="avatar"/>
                            </div>

                            <div class="col-md-12 theme-form">
                                <label for="staffId">Staff ID</label>
                                <input class="form-control form-control-lg" type="text" id="staffId" readonly value="{{ $user->identifier }}">
                            </div>

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

                            <div class="col-md-4 mb-3 theme-form">
                                <label for="phone">Phone</label>
                                <input class="form-control @error('phone') is-invalid @enderror form-control-lg" id="phone"
                                oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
                                pattern="\d*" maxlength="11"
                                 type="number" name="phone" value="{{ $user->phone ?? old('phone') }}" required placeholder="Phone Number">
                                @error('phone')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                            </div>

                            <div class="col-md-8 mb-3 theme-form">
                                <label for="email">Email Address</label>
                                <input class="form-control @error('email') is-invalid @enderror form-control-lg" id="email" type="email" name="email" value="{{ $user->email ?? old('email') }}" required placeholder="Email Address">
                                @error('email')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                            </div>

                            <div class="col-md-6 theme-form">
                                <label for="state">State</label>
                                <select name="state" id="state" location="{{ $user->location_id }}" class="form-control has-locations @error('state') is-invalid @enderror form-control-lg" aria-placeholder="State">
                                    <option value="">Select State</option>
                                    @if (isset($states) && count($states) > 0)
                                        @foreach ($states as $state)
                                            <option value="{{ $state->id }}" {{ $user->state_id == $state->id ? 'selected' : '' }}>{{ $state->name }}</option>
                                        @endforeach
                                    @endif
                                </select>
                                @error('state')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                            </div>

                            <div class="col-md-6 theme-form">
                                <label for="location">Location</label>
                                <select name="location" id="location" @error('location') is-invalid @enderror class="form-control select2 form-control-lg" aria-placeholder="Location">
                                    <option value="0 ">Select Location</option>
                                </select>
                                @error('location')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                            </div>

                        
                            <div class="col-md-12 mt-5">
                                <h5 class="text-primary">Change Password</h5>
                                <p>Only fill below if you want to change your password.</p>
                            </div>
                            <div class="col-md-6 mb-3 theme-form">
                                <label for="password">Password</label>
                                <input class="form-control @error('password') is-invalid @enderror form-control-lg" id="password" type="password" name="password" placeholder="Password">
                                @error('password')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                            </div>

                            <div class="col-md-6 mb-3 theme-form">
                                <label for="confirm-password">Confirm Password</label>
                                <input class="form-control form-control-lg" id="confirm-password" type="password" name="password_confirmation" placeholder="Confirm Password">
                            </div>
                            <div class="col-md-12 mb-3 theme-form mt-0">
                                <ul>
                                    <li class="text-muted">Your password must have at least 8 chars in length, one (1) uppercase, (1) lowercase and letters</li>
                                    <li class="text-muted">Your password must have at least one number</li>
                                    <li class="text-muted">Your password must have at least one special character.</li>
                                </ul>
                            </div>

                            <div class="col-12 mt-4">
                                <button class="btn btn-primary" type="submit">Submit form <i class="fa-regular fa-arrow-right-to-arc"></i></button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop
@section('page-scripts')
<script type="text/javascript" src="{{ asset('/assets/js/fileuploads/js/fileupload.js') }}"></script>
<script type="text/javascript" src="{{ asset('/assets/js/fileuploads/js/file-upload.js') }}"></script>
<!-- Select2 js-->
<script src="{{ asset('/assets/plugins/select2/js/select2.min.js') }}"></script>
<script src="{{ asset('/assets/js/select2.js') }}"></script>
<script type="text/javascript" src="{{  asset('/assets/js/state-select.js') }}"></script>
@stop