@extends('backend.app')
@section('title')
    Edit Profile
@endsection
@section('content')
    <div class="row">
        <div class="col-12">
            <h4 class="card-title">Update your Profile</h4>
            <p class="card-title-desc">Fill all information below</p>
            <form action="{{ route('profile.update') }}" method="POST" role="form" id="form1"
                  enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label" for="name">{{ __('messages.name')}} <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" name="name"
                                   placeholder="Enter your name" id="name"
                                   value="{{(auth()->user()->name) ?? ''}}"/>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label" for="address">Address</label>
                            <input type="text" class="form-control" name="address" id="address" placeholder="Enter address"
                                   value="{{(auth()->user()->address) ?? ''}}"/>
                        </div>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label" for="phone">Phone</label>
                            <input type="text" class="form-control" name="phone" id="phone" placeholder="ex: 017XXXXXXXX"
                                   value="{{(auth()->user()->phone) ?? ''}}"/>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label" for="gender">Gender</label>
                            <select class="form-select" name="gender" id="gender" required>
                                <option value="">Select Gender</option>
                                <option
                                    value="male" {{(auth()->user()->gender && (auth()->user()->gender  === 'male')) ? 'selected' : ''}}>Male</option>
                                <option
                                    value="female" {{(auth()->user()->gender && (auth()->user()->gender  === 'female')) ? 'selected' : ''}}>Female</option>
                                <option
                                    value="other" {{(auth()->user()->gender && (auth()->user()->gender  === 'other')) ? 'selected' : ''}}>Other</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="form-label">Profile Photo</label>
                            <div class="fileinput fileinput-new" data-provides="fileinput">
                                <input type="file" class="form-control mb-3" onchange="imagePreView(this)" name="profile_photo" accept="image/*">
                                @if(isset(auth()->user()->profile_photo))
                                    <img src="{{asset('storage/'.auth()->user()->profile_photo)}}" class="rounded-circle imagePreView"
                                         alt="{{auth()->user()->name}}" width="200" height="200"/>
                                @else
                                    <img src="http://placehold.it/200x150" class="rounded-circle imagePreView" alt="..." width="200" height="200">
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-4 d-flex justify-content-end">
                    <div>
                        <button type="submit" class="btn btn-primary" >Update Profile</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        function imagePreView(file) {
            let reader = new FileReader();
            reader.readAsDataURL(file.files[0]);
            reader.onload = function (event) {
                let source = event.target.result;
                $('.imagePreView').attr('src', source);
            }
        }
    </script>
@endpush

