@extends('web.layouts.layout')
@section('content')


    <main>


        <!-- ---------- Start breadcrumb ----------- -->
        @include('web.pages.components.header.header')


        <!-- ---------- profile page ----------- -->
        <section class="profile-pg pb-4">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3">
                        @include('web.pages.profile.layout.sidebar')
                    </div>
                    <div class="col-lg-9">
                        <div class="account-tab">
                            <div class="line-title mb-4"> <h5 class="bg-white pe-3"> <i class="far fa-user small me-2"></i> {{__('web.my_account')}} </h5> </div>
                            <div class="progress-box bg-light1 p-4 rounded-4 mb-4">
                                <div class="row gx-0 align-items-center">
                                    <div class="col-lg-1">
                                        <div class="avatar-wrapper position-relative">
                                            <div class="avatar">
                                                <img src="{{asset($user->photo ?? 'logo.png')}}" alt="" id="profile-photo-main">
                                            </div>
                                            <div class="camera-icon-overlay" onclick="document.getElementById('photo-upload-input').click()">
                                                <i class="fas fa-camera"></i>
                                            </div>
                                            <input type="file" id="photo-upload-input" style="display:none" accept="image/*" onchange="uploadPhoto(this)">
                                            <span class="prc-num"> {{$percentage}}% </span>
                                        </div>
                                    </div>
                                    <div class="col-lg-9">
                                        <div class="progress-wrapper ps-lg-4">
                                            <strong class="cr-blue d-block"> {{__('web.hello')}} {{$user->name}} {{__('web.hello_desc')}} </strong>
                                            <div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="{{$percentage}}" aria-valuemin="0" aria-valuemax="100">
                                                <div class="progress-bar" style="width: {{$percentage}}%"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <form method="post" action="{{route('web.profile.edit')}}" onsubmit="formAction(this)">
                                @method('PUT')
                                @CSRF
                                <div class="form-box bg-light1 p-4 rounded-4">
                                    <strong class="d-block cr-blue mb-4"> {{__('web.acc_details')}} </strong>
                                    <div class="form">
                                        <div class="row">
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label class="fw-bold mb-2"> {{__('web.email')}} </label>
                                                    <input type="text" name="email" value="{{$user->email}}" class="form-control" placeholder="">
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label class="fw-bold mb-2"> {{__('web.first_name')}} </label>
                                                    <input type="text" name="name" value="{{$user->name}}" class="form-control" placeholder="">
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label class="fw-bold mb-2"> {{__('web.last_name')}} </label>
                                                    <input type="text" name="last_name" value="{{$user->last_name}}" class="form-control" placeholder="">
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label class="fw-bold mb-2"> {{__('web.phone')}} </label>
                                                    <input type="text" name="phone" value="{{$user->phone}}" class="form-control" placeholder="">
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label class="fw-bold mb-2"> {{__('web.birth_date')}} </label>
                                                    <input type="date" class="form-control" name="birth_date" value="{{$user->birth_date}}" placeholder="" >
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label class="fw-bold mb-2"> {{__('web.gender')}} </label>
                                                    <div class="select-btns">
                                                        @foreach($genders as $row)
                                                            <div class="form-check form-check-inline mt-0">
                                                                 <input class="form-check-input" type="radio" name="gender" {{!empty($user->gender) && $user->gender == $row ? 'checked' : ''}} value="{{$row}}" id="size{{$row}}">
                                                                <label class="form-check-label" for="size{{$row}}">
                                                                    <i class="fal fa-child{{$row == $female ? '-dress' : ''}} me-1"></i> <span class="txt"> {{__('web.genders.'.$row)}} </span>
                                                                </label>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4">
                                                <div class="form-group">
                                                    <label class="fw-bold mb-2"> {{__('web.nationality')}} </label>
                                                    <select name="country_id" id="" class="form-control form-select">
                                                        <option value="" {{ empty($user->country_id) ? 'selected' : '' }} disabled>{{ __('web.choose_nationality') ?? 'Choose nationality' }}</option>
                                                        @foreach($countries as $row)
                                                            <option {{ !empty($user->country_id) && $user->country_id == $row->id ? 'selected' : '' }} value="{{ $row->id }}"> {{$row->title}} </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <button type="submit" class="butn col-lg-4 mx-auto d-block mt-2">
                                            <span> <i class="far fa-plus me-2"></i> {{__('web.update_account')}} </span>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        @include('web.layouts.footer_banner')



    </main>

@endsection
@section('inject_js')
    <style>
        .camera-icon-overlay {
            position: absolute;
            bottom: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: 0.3s;
        }
        .camera-icon-overlay:hover {
            background: rgba(0, 0, 0, 0.8);
        }
        .avatar-wrapper .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }
    </style>
    <script>
        function uploadPhoto(input) {
            if (input.files && input.files[0]) {
                let formData = new FormData();
                formData.append('photo', input.files[0]);
                formData.append('_token', '{{ csrf_token() }}');

                fetch('{{ route("web.profile.photo") }}', {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.data.status == 200) {
                        if(document.getElementById('profile-photo-main')) {
                            document.getElementById('profile-photo-main').src = data.data.photo;
                        }
                        if(document.getElementById('profile-photo-sidebar')) {
                            document.getElementById('profile-photo-sidebar').src = data.data.photo;
                        }
                        toastr.success(data.message);
                    } else {
                        toastr.error(data.message);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    toastr.error('Something went wrong');
                });
            }
        }
    </script>
@endsection