@extends('backend.manager.layouts.manager-app')

@section('title', 'Profile Settings')

@push('style')
<style>
    .profile-pic {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border-radius: 50%;
        border: 3px solid #e8edf6;
    }
    .store-logo-pic {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border-radius: 0.5rem;
        border: 2px solid #e8edf6;
    }
    .upload-placeholder {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #f0f4fe;
        border: 2px dashed #d6e2f8;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #7a8ab0;
        font-size: 0.75rem;
        text-align: center;
        cursor: pointer;
    }
    .upload-placeholder-logo {
        width: 100px;
        height: 100px;
        border-radius: 0.5rem;
        background: #f0f4fe;
        border: 2px dashed #d6e2f8;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #7a8ab0;
        font-size: 0.75rem;
        text-align: center;
        cursor: pointer;
    }
    .card-header-gradient {
        background: linear-gradient(135deg, #0c1f3f, #304b92);
        color: #fff;
    }
</style>
@endpush

@section('content')
    <div class="page-header">
        <div>
            <h1 class="page-title">Profile Settings</h1>
        </div>
        <div class="ms-auto pageheader-btn">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('store-manager.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item active" aria-current="page">Profile</li>
            </ol>
        </div>
    </div>

    @if (session('status') === 'profile-updated')
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fe fe-check-circle me-1"></i> Profile updated successfully.
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <form method="POST" action="{{ route('store-manager.settings.profile.update') }}" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <div class="row">
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header card-header-gradient">
                        <h5 class="mb-0"><i class="fe fe-user me-2"></i>Personal Information</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3 text-center">
                            <label class="form-label fw-semibold d-block">Profile Picture</label>
                            <label for="avatar" class="d-inline-block" style="cursor: pointer;">
                                <img src="{{ $user->avatar ? asset($user->avatar) : asset('frontend/default-avatar-profile.jpg') }}"
                                     alt="Avatar" class="profile-pic" id="avatar-preview">
                                <div class="mt-1 small text-muted">Click to change</div>
                            </label>
                            <input type="file" id="avatar" name="avatar"
                                   class="d-none @error('avatar') is-invalid @enderror"
                                   accept="image/*">
                            @error('avatar')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="name" class="form-label fw-semibold">Name</label>
                            <input type="text" id="name" name="name"
                                   class="form-control @error('name') is-invalid @enderror"
                                   value="{{ old('name', $user->name) }}" required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="phone" class="form-label fw-semibold">Phone</label>
                            <input type="text" id="phone" name="phone"
                                   class="form-control @error('phone') is-invalid @enderror"
                                   value="{{ old('phone', $user->phone) }}">
                            @error('phone')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="address" class="form-label fw-semibold">Address</label>
                            <textarea id="address" name="address" rows="2"
                                      class="form-control @error('address') is-invalid @enderror">{{ old('address', $user->address) }}</textarea>
                            @error('address')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header card-header-gradient">
                        <h5 class="mb-0"><i class="fe fe-image me-2"></i>Store Logo</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3 text-center">
                            <label class="form-label fw-semibold d-block">Store Logo</label>
                            <label for="store_logo" class="d-inline-block" style="cursor: pointer;">
                                <img src="{{ $user->store?->logo ? asset($user->store->logo) : asset('frontend/no-image.jpg') }}"
                                     alt="Store Logo" class="store-logo-pic" id="store-logo-preview">
                                <div class="mt-1 small text-muted">Click to change</div>
                            </label>
                            <input type="file" id="store_logo" name="store_logo"
                                   class="d-none @error('store_logo') is-invalid @enderror"
                                   accept="image/*">
                            @error('store_logo')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header card-header-gradient">
                        <h5 class="mb-0"><i class="fe fe-lock me-2"></i>Change Password</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="current_password" class="form-label fw-semibold">Current Password</label>
                            <input type="password" id="current_password" name="current_password"
                                   class="form-control @error('current_password') is-invalid @enderror"
                                   autocomplete="off">
                            @error('current_password')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="new_password" class="form-label fw-semibold">New Password</label>
                            <input type="password" id="new_password" name="new_password"
                                   class="form-control @error('new_password') is-invalid @enderror"
                                   autocomplete="off">
                            @error('new_password')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="new_password_confirmation" class="form-label fw-semibold">Confirm New Password</label>
                            <input type="password" id="new_password_confirmation" name="new_password_confirmation"
                                   class="form-control" autocomplete="off">
                        </div>
                    </div>
                </div>

                <div class="gap-2 d-flex">
                    <button type="submit" class="px-4 btn btn-primary">
                        <i class="fe fe-save me-1"></i> Save Changes
                    </button>
                </div>
            </div>
        </div>
    </form>
@endsection

@push('scripts')
<script>
    document.getElementById('avatar')?.addEventListener('change', function (e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function (ev) {
                document.getElementById('avatar-preview').src = ev.target.result;
            };
            reader.readAsDataURL(file);
        }
    });

    document.getElementById('store_logo')?.addEventListener('change', function (e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function (ev) {
                document.getElementById('store-logo-preview').src = ev.target.result;
            };
            reader.readAsDataURL(file);
        }
    });
</script>
@endpush