@extends('layouts.main')

@section('main-container')
    <style>
        .d-flex.flex-column.flex-column-fluid {
            background: #F7F7F9;
        }

        div#kt_app_main {
            margin-top: -56px;
        }

        .row>* {
            padding-right: 0px;
        }

        .card-text {
            color: #8C3EFF;
            margin-bottom: 3rem !important;
            cursor: pointer;
            /* Add pointer cursor to indicate it's clickable */
        }
    </style>
    <div class="container" style="background:#F7F7F9">
        <div class="col-12">
            <div class="d-flex align-items-center" style="margin-left: 2.3rem;margin-top: 8rem;">
                <a href="{{ url('/') }}" class="">
                    <svg style="margin-top: -3px;" width="24" height="25" viewBox="0 0 24 25" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path d="M19 12.5H5" stroke="#200F31" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                        <path d="M12 19.5L5 12.5L12 5.5" stroke="#200F31" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" />
                    </svg>

                    <span class="ms-2 fs-1hx" style="color:#200F31;font-size:18px;margin-left:40px">Edit Profile</span>
                </a>
            </div>
        </div>
        <div class="row" style="margin: 30px 20px 40px 20px;">
            {{-- @if (session('success'))
                <div class="alert alert-success mt-3">
                    {{ session('success') }}
                </div>
            @endif --}}
            @if (session('error'))
                <div class="alert alert-danger mt-3">
                    {{ session('error') }}
                </div>
            @endif
            <div class="col-md-3">
                <!-- User Profile -->
                <div class="card" style="border-radius: 22px;height: 19rem;margin-right: 1rem;">
                    <div class="card-body text-center">
                        <!-- User Profile Content Goes Here -->

                        @if (auth()->user()->profile_picture)
                            <img src="{{ asset(auth()->user()->profile_picture) }}" alt="{{ auth()->user()->name }}"
                                id="preview" class="h-100px" style="border-radius: 20px;margin-bottom: 20px;" />
                        @else
                            <img src="{{ url('media/avatars/300-6.jpg') }}" id="preview" class="h-100px"
                                style="border-radius: 20px;margin-bottom: 20px;" />
                        @endif
                        <p class="card-text" style="color:#8C3EFF;margin-bottom: 3rem !important;"
                            onclick="triggerUpload()"><img src="{{ url('/media/logos/upload-cloud.png') }}" alt=""
                                class="h-15px" />&nbsp;&nbsp;UPLOAD IMAGE</p>
                    </div>
                </div>
            </div>
            <div class="col-md-9">
                <!-- Profile Information -->
                <div class="card" style="border-radius: 22px;">
                    <div class="card-body">
                        <!-- Profile Information Content Goes Here -->
                        <form action="{{ url('edit_profile') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="mb-6">
                                <label for="name" class="form-label" style="color:#8D99AE;font-size:14px">Name</label>
                                <input type="text" name="aname"
                                    class="form-control  @error('aname') is-invalid @enderror" id="aname"
                                    value="{{ old("aname", auth()->user()->name) }}"
                                    style="color:#8D99AE;font-size:14px;border-radius: 12px;">
                                @error('aname')
                                    <div
                                        class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="mb-6">
                                <label for="email" class="form-label" style="color:#8D99AE;font-size:14px">Email</label>
                                <input type="email" name="email"
                                    class="form-control  @error('email') is-invalid @enderror" id="email"
                                    value="{{ old("email", auth()->user()->email) }}"
                                    style="color:#8D99AE;font-size:14px;border-radius: 12px;">
                                @error('email')
                                    <div
                                        class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="mb-6">
                                <label for="location" class="form-label" style="color:#8D99AE;font-size:14px">Phone</label>
                                <input type="text" class="form-control  @error('phone') is-invalid @enderror"
                                    name="phone" id="phone" value="{{ old('phone', auth()->user()->phone_number) }}"
                                    style="color:#8D99AE;font-size:14px;border-radius: 12px;">
                                @error('phone')
                                    <div
                                        class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                            <input type="file" id="fileInput" name="admin_profile" style="display: none;"
                                onchange="handleFileUpload(this.files)">

                            <div class="text-center" style="margin-bottom: 5.75rem;margin-top: 3rem">
                                <button type="submit" class="btn btn-primary" style="border-radius: 10px;">SAVE
                                    CHANGES</button>
                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <script>
        function triggerUpload() {
            document.getElementById('fileInput').click(); // Click on the hidden file input
        }

        function handleFileUpload(files) {
            // Handle file upload logic here
            // For demonstration, you can access the file using 'files[0]'
            // For example:
            var uploadedFile = files[0];
            console.log("Uploaded file:", uploadedFile);
            // You can perform further actions like uploading the file to a server using AJAX, etc.
            // Assuming 'preview' is the ID of the image element
            var previewImage = document.getElementById('preview');

            // Check if a file is selected
            if (uploadedFile) {
                var reader = new FileReader();

                // Read the uploaded file as a data URL
                reader.readAsDataURL(uploadedFile);

                // Set the image source when the file is loaded
                reader.onload = function() {
                    previewImage.src = reader.result;
                };
            }
        }
    </script>
@endsection