@php
    $userDetails = auth()->user();
@endphp
@extends('user.layouts.app')
@section('page-title', $blade_data['title'])
{{-- @section('breadcrumb')
    <x-breadcrumb :blades="$blade_data" />
@endsection --}}
@section('content')
    <div class="row">
        <div class="col-md-3">
            @include('user.account.tab')
        </div>
        <div class="col-md-9">

            <div class="card mb-4">
                <h5 class="card-header">Profile Details</h5>
                <!-- Account -->
                {{-- <div class="card-body">
                    <div class="d-flex align-items-start align-items-sm-center gap-4">
                        <img src="../assets/img/avatars/1.png" alt="user-avatar" class="d-block rounded" height="100"
                            width="100" id="uploadedAvatar" />
                        <div class="button-wrapper">
                            <label for="upload" class="btn btn-primary me-2 mb-4" tabindex="0">
                                <span class="d-none d-sm-block">Upload new photo</span>
                                <i class="bx bx-upload d-block d-sm-none"></i>
                                <input type="file" id="upload" class="account-file-input" hidden
                                    accept="image/png, image/jpeg" />
                            </label>
                            <button type="button" class="btn btn-outline-secondary account-image-reset mb-4">
                                <i class="bx bx-reset d-block d-sm-none"></i>
                                <span class="d-none d-sm-block">Reset</span>
                            </button>

                            <p class="text-muted mb-0">Allowed JPG, GIF or PNG. Max size of 800K</p>
                        </div>
                    </div>
                </div> --}}
                <hr class="my-0" />
                <div class="card-body">
                    <form id="edit-profile-form" class="edit-form" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="mb-3 col-md-6">
                                <label for="i-first_name" class="form-label">First Name</label>
                                <input type="text" name="first_name" value="{{ $userDetails->first_name }}"
                                    class="form-control" id="i-first_name" required />
                            </div>
                            <div class="mb-3 col-md-6">
                                <label for="i-last_name" class="form-label">Last Name</label>
                                <input type="text" name="last_name" value="{{ $userDetails->last_name }}"
                                    class="form-control" id="i-last_name" required />
                            </div>

                            <div class="mb-3 col-md-6">
                                <label for="i-email" class="form-label">E-mail</label>
                                <input type="text" name="email" value="{{ $userDetails->email }}" class="form-control"
                                    id="i-email" readonly />
                            </div>

                            <div class="mb-3 col-md-6">
                                <label class="form-label" for="i-phone">Phone Number</label>
                                <input type="text" name="phone" value="{{ $userDetails->phone }}" class="form-control"
                                    id="i-phone" required />
                            </div>

                            {{-- <div class="mb-3 col-md-6">
                                <label for="address" class="form-label">Address</label>
                                <input type="text" class="form-control" id="address" name="address"
                                    placeholder="Address" />
                            </div>
                            <div class="mb-3 col-md-6">
                                <label for="state" class="form-label">State</label>
                                <input class="form-control" type="text" id="state" name="state"
                                    placeholder="California" />
                            </div>
                            <div class="mb-3 col-md-6">
                                <label for="zipCode" class="form-label">Zip Code</label>
                                <input type="text" class="form-control" id="zipCode" name="zipCode"
                                    placeholder="231465" maxlength="6" />
                            </div> --}}
                            <div class="mb-3 col-md-6">
                                <label class="form-label" for="country">Country</label>
                                <select name="country" id="country" class="select2 form-select" required>
                                    <option value="">Select</option>
                                    @foreach ($country_list as $item)
                                        <option value="{{ $item['name'] }}"
                                            {{ $userDetails->country == $item['name'] ? 'selected' : '' }}>
                                            {{ $item['name'] }}</option>
                                    @endforeach

                                </select>
                            </div>

                            <div class="col-md-12 mb-3">
                                <div class="fileinput fileinput-new" data-provides="fileinput">
                                    <div class="fileinput-new img-thumbnail" style="width: 200px; height: 150px;">
                                        <img src="{{ $userDetails->image_path }}" alt="">
                                    </div>
                                    <div class="fileinput-preview fileinput-exists img-thumbnail"
                                        style="max-width: 200px; max-height: 150px;"></div>
                                    <div>
                                        <span class="btn btn-outline-secondary btn-file">

                                            <span class="fileinput-new">Select image</span>
                                            <span class="fileinput-exists">Change</span>
                                            <input type="file" name="image"></span>
                                        <a href="#" class="btn btn-outline-secondary fileinput-exists"
                                            data-dismiss="fileinput">Remove</a>
                                    </div>
                                </div>
                                @error('image')
                                    <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
                                @enderror

                            </div>
                        </div>
                        <div class="mt-2">
                            <button type="submit" class="btn btn-primary me-2 submitBtn">Save changes</button>
                        </div>
                    </form>
                </div>
                <!-- /Account -->
            </div>
        </div>
    </div>
@endsection

@section('javascript')
    <link href="{{ asset('plugins/jasny-bootstrap-b4/css/jasny-bootstrap.min.css') }}" rel="stylesheet" type="text/css" />
    <script src="{{ asset('plugins/jasny-bootstrap-b4/js/jasny-bootstrap.min.js') }}" type="text/javascript"
        language="javascript"></script>

    {{-- <script src="{{ asset('themes/user-1/libs/apexcharts/apexcharts.min.js') }}"></script>
    <script src="{{ asset('themes/user-1/js/pages/dashboard.init.js') }}"></script> --}}
    <script>
        $("#edit-profile-form").validate({
            submitHandler: function(form) {
                var loadingText = '<i class="fa fa-circle-notch fa-spin"></i> Saving..';
                $('.edit-form .submitBtn').html(loadingText).prop('disabled', true);
                return true;
            }
        });
    </script>
@endsection