@extends('sellers.layout.mainlayout')
@section('content')
    @php
        $user = Auth::user();
        use Carbon\Carbon;
    @endphp

    <div class="main-wrapper innerpagebg">

        <!-- Header -->
        @include('sellers.layout.top_header')
        <!-- /Header -->

        <!-- Breadscrumb Section -->
        <div class="breadcrumb-bar"></div>
        <!-- /Breadscrumb Section -->

        <!-- Profile Content -->
        <div class="dashboard-content offset-transform-top listing-section">
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        @include('sellers.layout.profile')
                    </div>
                    <div class="col-md-8">

                        @include('sellers.layout.header')

                        <div class="profile-content">
                            <div class="dashboard-info">
                                <div class="card dash-cards">
                                    <div class="card-header">
                                        <h4>Profile Details</h4>
                                    </div>
                                    <div class="card-body">
                                        <div class="profile-photo">
                                            <div class="profile-img">
                                                <div class="settings-upload-img">
                                                    <img src="{{ auth()->user()->profile_image_url }}" alt="profile">

                                                </div>
                                                <div class="settings-upload-btn">
                                                    <input class="hide-input image-upload" id="profile_image" name="profile_image" type="file" accept="image/*">
                                                    <label class="file-upload" for="file">Upload New photo</label>
                                                </div>
                                            </div>
                                            <a class="profile-img-del" id="profile_delete" href="javascript:void(0)"><i class="feather-trash-2"></i></a>
                                        </div>
                                        <div class="profile-form">
                                            <form id="profile_update" method="POST" action="{{ route('seller.profile.update') }}">
                                                @csrf
                                                <div class="form-set">
                                                    <label class="col-form-label">Username <span class="starcolor">*</span></label>
                                                    <div class="pass-group group-img">
                                                        <span class="lock-icon"><i class="feather-user"></i></span>
                                                        <input class="form-control" id="full_name" name="full_name" type="text" value="{{ $user->name }}" placeholder="Enter username">
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-lg-6 col-md-6">
                                                        <div class="form-set">
                                                            <label class="col-form-label">Phone Number</label>															
                                                            <div class="d-flex align-items-center">
                                                                <div class="pass-group group-img flex-fill">
                                                                    <span class="lock-icon"><i class="feather-phone-call"></i></span>
                                                                    <input class="form-control" id="mobile" name="mobile" type="tel" value="{{ $user->mobile }}"
                                                                        placeholder="Enter phone number"><!--+44 215346 1223-->
                                                                </div>
                                                                {{-- <div class="active-switch d-flex align-items-center ms-3">
                                                                    <label class="switch">
                                                                        <input type="checkbox" name="p_mobile" @if($user->p_mobile) checked @else @endif>
                                                                        <span class="sliders round"></span>
                                                                    </label>
                                                                </div> --}}
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-6 col-md-6">
                                                        <div class="form-set">
                                                            <label class="col-form-label">Email Address<span class="starcolor">*</span></label>
                                                            <div class="d-flex align-items-center">
                                                                <div class="group-img flex-fill">
                                                                    <i class="feather-mail"></i>
                                                                    <input class="form-control" id="email" name="email" type="email" value="{{ $user->email }}" placeholder="Enter email">
                                                                </div>
																{{-- <div class="active-switch d-flex align-items-center ms-3">
																	<label class="switch">
																		<input type="checkbox" name="p_email" @if($user->p_email) checked @else @endif>
																		<span class="sliders round"></span>
																	</label>
																</div> --}}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="form-set">
                                                    <div class="d-flex align-items-center mb-2">
                                                        <label class="col-form-label mb-0">Address<span class="starcolor">*</span></label>
                                                        {{-- <div class="active-switch d-flex align-items-center ms-3">
                                                            <label class="switch">
                                                                <input type="checkbox" name="p_address" @if($user->p_address) checked @else @endif>
                                                                <span class="sliders round"></span>
                                                            </label>
                                                        </div> --}}
                                                    </div>
                                                    <div class="pass-group group-img">
                                                        <textarea class="form-control" id="address" name="address" rows="4" placeholder="Enter address">{{ $user->address }}</textarea>
                                                    </div>
                                                </div>
                                                <div class="form-set">
                                                    <label class="col-form-label">Privacy Settings ("<b>visible</b> to everyone")</label>
                                                    <div class="pass-group group-img">
														<div class="row" style="margin-left: 25px">
															Mobile
															<div class="col">																													
																<div class="active-switch">
																	<label class="switch">
																		<input type="checkbox" name="p_mobile" @if($user->p_mobile) checked @else @endif>
																		<span class="sliders round"></span>
																	</label>
																</div>
															</div>
															Email
															<div class="col">
																<div class="active-switch">
																	<label class="switch">
																		<input type="checkbox" name="p_email" @if($user->p_email) checked @else @endif>
																		<span class="sliders round"></span>
																	</label>
																</div>
															</div>
															Address
															<div class="col">
																<div class="active-switch">
																	<label class="switch">
																		<input type="checkbox" name="p_address" @if($user->p_address) checked @else @endif>
																		<span class="sliders round"></span>
																	</label>
																</div>
															</div>
														</div>
                                                    </div>
                                                </div>
                                                <button class="btn btn-primary" type="submit">Save</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>

                                <div class="card">
                                            <div class="card-header">
                                                <h4>Change Password</h4>
                                            </div>
                                            <div class="card-body">
                                                <form id="update_password" name="update_password" method="POST" action="{{ route('seller.change_password') }}">
                                                    @csrf
                                                    <div class="form-set">
                                                        <label class="col-form-label">Current Password</label>
                                                        <div class="pass-group group-img">
                                                            <span class="lock-icon"><i class="feather-lock"></i></span>
                                                            <input class="form-control pass-input" id="password" name="password" type="text" placeholder="Current password">
                                                        </div>
                                                    </div>
                                                    <div class="form-set">
                                                        <label class="col-form-label">New Password</label>
                                                        <div class="pass-group group-img">
                                                            <span class="lock-icon"><i class="feather-lock"></i></span>
                                                            <input class="form-control pass-input" id="newpassword" name="newpassword" type="password" value="" placeholder="New password">
                                                            <span class="toggle-password feather-eye-off" data-toggle="newpassword"></span>
                                                        </div>
                                                    </div>
                                                    <div class="form-set">
                                                        <label class="col-form-label">Confirm New Password</label>
                                                        <div class="pass-group group-img">
                                                            <span class="lock-icon"><i class="feather-lock"></i></span>
                                                            <input class="form-control pass-input" id="confirmpassword" name="confirmpassword" type="password" value=""
                                                                placeholder="Confirm password">
                                                            <span class="toggle-password feather-eye-off" data-toggle="confirmpassword"></span>
                                                        </div>
                                                    </div>

                                                    <button class="btn btn-primary" type="submit"> Change Password</button>
                                                </form>
                                            </div>
                                        </div>                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /Profile Content -->

    </div>

    <!-- scrollToTop start -->
    <div class="progress-wrap active-progress">
        <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
            <path style="transition: stroke-dashoffset 10ms linear 0s; stroke-dasharray: 307.919px, 307.919px; stroke-dashoffset: 228.265px;" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"></path>
        </svg>
    </div>
    <!-- scrollToTop end -->

    <!-- Profile -->
    <div class="modal fade" id="imageModel" aria-labelledby="exampleModalLabel" aria-hidden="true" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Upload Profile Image</h5>
                    <button class="btn-close" data-bs-dismiss="modal" type="button" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="image_demo"></div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" data-bs-dismiss="modal" type="button">Close</button>
                    <button class="btn btn-primary crop_image" type="button">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    <!-- /Profile -->

    <!-- Delete -->
    <div class="modal fade" id="delete-item" aria-labelledby="exampleModalLabel" aria-hidden="true" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered ">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Delete Profile Image</h5>
                    <button class="btn-close close-modal" data-bs-dismiss="modal" type="button" aria-label="Close">
                        <i class="fe fe-x"></i>
                    </button>
                </div>
                <form action="{{ route('seller.delete_profile_image') }}" method="GET">
                    @csrf
                    <div class="modal-body py-0">
                        <div class="del-modal">
                            <p>Are you sure want to Delete?</p>
                        </div>
                    </div>
                    <br>
                    <div class="modal-footer pt-0">
                        <button class="btn btn-cancel" data-bs-dismiss="modal" type="button">Cancel</button>
                        <button class="btn btn-submit" type="submit">Yes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <input type="hidden" id="profile_picture_url" value="{{ route('seller.profile_picture.save') }}">
    <!-- /Delete -->

    <style type="text/css">
        /* Custom CSS for error messages */
        .error {
            color: red;
            /* Specify the desired font color for error messages */
            font-size: 12px;
            /* Adjust the font size if needed */
        }
        .starcolor {
            color: red;
        }
    </style>
@endsection

@section('customScript')
@endsection