@extends('private_seller.layout')

@section('content')
   <div class="page-header">
    <h4 class="page-title">{{ __('Edit Profile') }}</h4>

    <ul class="breadcrumbs">
        <li class="nav-home">
            <a href="{{ route('seller.dashboard') }}">
                <i class="fas fa-home"></i>
            </a>
        </li>

        <li class="separator">
            <i class="fas fa-chevron-right"></i>
        </li>

        <li class="nav-item">
            <a href="#">
                <i class="fas fa-user"></i> {{ __('Profile') }}
            </a>
        </li>

        <li class="separator">
            <i class="fas fa-chevron-right"></i>
        </li>

        <li class="nav-item active">
            <a href="#">
                <i class="fas fa-user-edit"></i> {{ __('Edit Profile') }}
            </a>
        </li>
    </ul>
</div>

    <div class="row">
        <div class="col-md-12">
            <form
                action="{{ route('seller.profile.update') }}"
                method="POST"
                enctype="multipart/form-data"
            >
                @csrf

                <div class="card">
                    <div class="card-header">
                        <div class="card-title">{{ __('Profile Details') }}</div>
                    </div>

                    <div class="card-body">
                        @if (session('success'))
                            <div class="alert alert-success">
                                {{ session('success') }}
                            </div>
                        @endif

                        @if ($errors->any())
                            <div class="alert alert-danger pb-1">
                                <button type="button" class="close" data-dismiss="alert">×</button>
                                <ul class="mb-0">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <div class="row">
                            <div class="col-lg-12 mb-4">
                                <div class="text-center">
                                    @php
                                        $profileImage = !empty($seller->profile_image)
                                            ? asset($seller->profile_image)
                                            : asset('assets/admin/img/propics/blank_user.jpg');
                                    @endphp

                                    <img
                                        id="profilePreview"
                                        src="{{ $profileImage }}"
                                        alt="Profile Image"
                                        style="width: 130px; height: 130px; object-fit: cover; border-radius: 50%; border: 3px solid #e5e7eb;"
                                    >

                                    <div class="mt-3">
                                        <input
                                            type="file"
                                            name="profile_image"
                                            id="profileImageInput"
                                            class="d-none"
                                            accept="image/*"
                                        >

                                        <button
                                            type="button"
                                            class="btn btn-primary btn-sm"
                                            id="chooseProfileImageBtn"
                                        >
                                            <i class="fas fa-upload"></i> {{ __('Upload Image') }}
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label>{{ __('First Name') }} <span class="text-danger">*</span></label>
                                    <input
                                        type="text"
                                        name="first_name"
                                        class="form-control"
                                        value="{{ old('first_name', $seller->first_name) }}"
                                        placeholder="{{ __('Enter First Name') }}"
                                    >
                                </div>
                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label>{{ __('Last Name') }}</label>
                                    <input
                                        type="text"
                                        name="last_name"
                                        class="form-control"
                                        value="{{ old('last_name', $seller->last_name) }}"
                                        placeholder="{{ __('Enter Last Name') }}"
                                    >
                                </div>
                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label>{{ __('Email') }} <span class="text-danger">*</span></label>
                                    <input
                                        type="email"
                                        name="email"
                                        class="form-control"
                                        value="{{ old('email', $seller->email) }}"
                                        placeholder="{{ __('Enter Email') }}"
                                    >
                                </div>
                            </div>

                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label>{{ __('Phone') }}</label>
                                    <input
                                        type="text"
                                        name="phone"
                                        class="form-control"
                                        value="{{ old('phone', $seller->phone) }}"
                                        placeholder="{{ __('Enter Phone Number') }}"
                                    >
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card mt-4">
                    <div class="card-header">
                        <div class="card-title">{{ __('Change Password') }}</div>
                    </div>

                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label>{{ __('Current Password') }}</label>
                                    <input
                                        type="password"
                                        name="current_password"
                                        class="form-control"
                                        placeholder="{{ __('Enter Current Password') }}"
                                    >
                                </div>
                            </div>

                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label>{{ __('New Password') }}</label>
                                    <input
                                        type="password"
                                        name="new_password"
                                        class="form-control"
                                        placeholder="{{ __('Enter New Password') }}"
                                    >
                                </div>
                            </div>

                            <div class="col-lg-4">
                                <div class="form-group">
                                    <label>{{ __('Confirm New Password') }}</label>
                                    <input
                                        type="password"
                                        name="new_password_confirmation"
                                        class="form-control"
                                        placeholder="{{ __('Repeat New Password') }}"
                                    >
                                </div>
                            </div>
                        </div>

                        <small class="text-muted">
                            {{ __('Leave password fields empty if you do not want to change password.') }}
                        </small>
                    </div>
                </div>

                <div class="text-center mt-3">
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-save"></i> {{ __('Update Profile') }}
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const chooseProfileImageBtn = document.getElementById('chooseProfileImageBtn');
            const profileImageInput = document.getElementById('profileImageInput');
            const profilePreview = document.getElementById('profilePreview');

            if (chooseProfileImageBtn && profileImageInput) {
                chooseProfileImageBtn.addEventListener('click', function () {
                    profileImageInput.click();
                });
            }

            if (profileImageInput && profilePreview) {
                profileImageInput.addEventListener('change', function (event) {
                    const file = event.target.files[0];

                    if (!file) {
                        return;
                    }

                    const reader = new FileReader();

                    reader.onload = function (e) {
                        profilePreview.src = e.target.result;
                    };

                    reader.readAsDataURL(file);
                });
            }
        });
    </script>
@endsection