@extends('user.layout')

@section('content')
    <style>
        /* Card Styling */
        .profile-card {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            max-width: 100%;
            margin: 0 auto;
            padding: 20px;
        }

        /* Profile Image Styling */
        .profile-image {
            margin-bottom: 20px;
        }

        .profile-image img {
            border-radius: 50%;
            border: 4px solid #4CAF50;
        }

        .form-row {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 15px;
            justify-content: space-evenly;
        }
    </style>



    <div class="row mb-3">
        <div class="col">
            <h3 class="page-top-heading">Profile</h3>
        </div>
    </div>

    <div class="card profile-card">
        <div class="card-body">
            <form action="{{ route('profile_update') }}" method="POST" enctype="multipart/form-data" id="profileForm">
                @csrf
                <div class="form-row">
                    <div class="form-group col-lg-12">
                        <div class="profile-image text-center">
                            @if ($profile_details->profile_image)
                                <img id="profilePreview" src="{{ asset($profile_details->profile_image) }}"
                                    alt="Profile Image" class="rounded-circle" width="100" height="100">
                            @else
                                <img id="profilePreview" src="{{ asset('/assets/images/avatar/profiledefault.svg') }}"
                                    alt="Profile Image" class="rounded-circle" width="100" height="100">
                            @endif

                            <input type="file" id="uploadImage" class="d-none" name="profile_image" accept="image/*"
                                onchange="previewImage(event)">
                            <label for="uploadImage" class="upload-label btn btn-primary mt-2">Upload</label>
                        </div>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group col-lg-5">
                        <label for="firstName">First Name *</label>
                        <input type="text" id="firstName" class="form-control" name="name"
                            value="{{ $profile_details->name }}" readonly>
                    </div>
                    <div class="form-group col-lg-5">
                        <label for="contactNumber">Contact Number *</label>
                        <input type="number" id="contactNumber" class="form-control" name="phone_number"
                            value="{{ $profile_details->phone_number }}" readonly>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group col-lg-5">
                        <label for="email">Email Address *</label>
                        <input type="email" id="email" class="form-control" name="email"
                            value="{{ $profile_details->email }}">
                    </div>
                    <div class="form-group col-lg-5">
                        <label for="country">Country *</label>
                        <input type="text" id="country" class="form-control" value="{{ $profile_details->country }}"
                            name="country" required>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group col-lg-5">
                        <label for="city">Address *</label>
                        <input type="text" id="city" class="form-control" value="{{ $profile_details->address }}"
                            name="address" required>
                    </div>
                    <div class="form-group col-lg-5">
                        <label for="state">Landmark *</label>
                        <input type="text" id="state" class="form-control" value="{{ $profile_details->landmark }}"
                            name="landmark" required>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group col-lg-5">
                        <label for="sponsorName">Pincode *</label>
                        <input type="number" id="sponsorName" class="form-control" value="{{ $profile_details->pincode }}"
                            name="pincode" required>
                    </div>
                    <div class="form-group col-lg-5">
                        <label for="sponsorId">Sponsor ID </label>
                        <input type="text" id="sponsorId" class="form-control"
                            value="{{ $profile_details->sponsor_id }}" readonly>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-lg-5">
                        <label for="city">Courier Address </label>
                        <input type="text" id="city" class="form-control"
                            value="{{ $profile_details->courier_address }}" name="courier_address" required>
                    </div>
                        <div class="form-group col-lg-5">
                            <label for="sponsorId">Sponsor name *</label>
                            <input type="text" id="sponsorId" class="form-control" value="{{ $sponsor->name }}"
                                readonly>
                        </div>
                    </div>
                    <div class="form-row flex-start">
                        <div class="form-group col-lg-5">
                            <label for="sponsorId">Date Of Joining *</label>
                            <input type="text" id="sponsorId" class="form-control"
                                value="{{ $profile_details->created_at }}" Readonly>
                        </div>  
                        <div class="form-group col-lg-5">
                           
                        </div>  
                    </div>
                  
                    <div class=" d-flex justify-content-end mt-5">
                        <button type="submit" class="btn btn-primary w-25">Save</button>
                    </div>
                </div>
            </form>
        </div>

        <script>
            function previewImage(event) {
                const file = event.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const preview = document.getElementById('profilePreview');
                        preview.src = e.target.result;
                    };
                    reader.readAsDataURL(file);
                }
            }
        </script>
    @endsection