@extends('layouts.customer-dashboard')

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

{{-- Breadcrumb --}}
@section('breadcrumb')
<div class="breadcrumb-bar breadcrumb-bg-04 text-center">
    <h2 class="breadcrumb-title mb-2">Settings</h2>
    <nav>
        <ol class="breadcrumb justify-content-center mb-0">
            <li class="breadcrumb-item">
                <a href="{{ url('/') }}"><i class="isax isax-home5"></i></a>
            </li>
            <li class="breadcrumb-item active">Profile Settings</li>
        </ol>
    </nav>
</div>
@endsection

{{-- Dashboard Content --}}
@section('dashboard-content')

<div class="card settings mb-0">
    <div class="card-header">
        <h6>Settings</h6>
    </div>
    <div class="card-body pb-3">
<form action="{{ route('customer.profile.update') }}" method="POST" enctype="multipart/form-data">    @csrf
        <div class="settings-link d-flex align-items-center flex-wrap">
            <a href="{{ route('customer.profile.settings') }}" class="active ps-3">
                <i class="isax isax-user-octagon me-2"></i>Profile Settings
            </a>
            <a href="{{ route('customer.security-settings') }}"><i class="isax isax-shield-tick me-2"></i>Security</a>
            <a href="#"><i class="isax isax-notification me-2"></i>Notifications</a>
            <a href="#" class="pe-3"><i class="isax isax-hierarchy me-2"></i>Integrations</a>
        </div>

        <!-- Basic Information -->
        <div class="settings-content mb-3">
            <h6 class="fs-16 mb-3">Basic Information</h6>
            <div class="row gy-2">
                <div class="col-lg-12">
                    <div class="d-flex align-items-center">
                      <img src="{{ $user->profile && $user->profile->profile_image 
                            ? asset('uploads/' . $user->profile->profile_image) 
                            : asset('ajyad_front/img/users/user-01.jpg') }}"
                            class="img-fluid avatar avatar-xxl br-10">
                        <div>
                            <p class="fs-14 text-gray-6 fw-normal mb-2">
                                Recommended dimensions are typically 400 x 400 pixels.
                            </p>
                            <div class="d-flex align-items-center">
                                <div class="me-2">
                                   <input type="file" name="profile_image" id="fileUpload" hidden>

                                    <label for="fileUpload" class="btn btn-primary">
                                        Upload
                                    </label>
                                </div>
                                <a href="#" class="btn btn-light btn-md">Remove</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div>
                        <label class="form-label">Name</label>
                        <input type="text" name="name" class="form-control" value="{{ $user->name }}">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div>
                        <label class="form-label">Email</label>
                        <input type="email" class="form-control bg-light text-muted" 
                                    value="{{ $user->email }}" readonly>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div>
                        <label class="form-label">Phone</label>
                        <input type="text" name="phone" class="form-control" value="{{ $user->profile->phone ?? '' }}" >
                    </div>
                </div>
            </div>
        </div>
        <!-- /Basic Information -->

        <!-- Address Information -->
        <div class="settings-content">
            <h6 class="fs-16 mb-3">Address Information</h6>
            <div class="row gy-2">
                <div class="col-lg-12">
                    <div>
                        <label class="form-label">Address</label>
                        <input type="text" name="address" class="form-control" value="{{ $user->profile->address ?? '' }}" >
                    </div>
                </div>
                <div class="col-lg-6">
                    <div>
                        <label class="form-label">Country</label>
                        <input type="text" name="country" class="form-control" value="{{ $user->profile->country ?? '' }}" >
                    </div>
                </div>
                <div class="col-lg-6">
                    <div>
                        <label class="form-label">State</label>
                        <select class="form-control">
                            <option>Select</option>
                            <option>California</option>
                            <option>Texas</option>
                        </select>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div>
                        <label class="form-label">City</label>
                        <select class="form-control">
                            <option>Select</option>
                            <option>New York</option>
                            <option>Tokyo</option>
                        </select>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div>
                        <label class="form-label">Postal Code</label>
                        <input type="text" name="postal_code" class="form-control" value="{{ $user->profile->postal_code ?? '' }}" >
                    </div>
                </div>
            </div>
        </div>
        <!-- /Address Information -->
    </div>

    <div class="card-footer">
        <div class="d-flex align-items-center justify-content-end">
            <a href="#" class="btn btn-light me-2">Cancel</a>
          <button type="submit" class="btn btn-primary">Save</button>
        </div>
    </div>

    
</form>
    

</div>

@endsection