@extends('layouts.customer_template')

	@section('title')
		Bitbance Profile Update
	@endsection

	@section('style')

    <link rel="stylesheet" href="{{asset('customer/assets/css/profle.css')}}" />
    <link rel="stylesheet" href="{{asset('customer/assets/css/profile-responsive.css')}}" />

    <style>

    .profile-pic img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

    </style>

	@endsection

	@section('header-menu')

        {{--<div class="header-menu">
           <a href="{{ route('deposits') }}">
               <button class="btn-main active">Deposit Crypto</button>
           </a>
           <a href="{{ route('withdraw') }}">
               <button class="btn-main">Withdraw Crypto</button>
           </a>
       </div>--}}

        <div class="header-menu-display">

            <div class="header-menu">

                <a href="{{ route('deposits') }}">
                    <button class="btn-main">Deposit Crypto</button>
                </a>
                <a href="{{ route('withdraw') }}">
                    <button class="btn-main">Withdraw Crypto</button>
                </a>

                <a href="{{ route('trades_wallet') }}">
                    <button class="btn-main">Exchange</button>
                </a>

                <a href="{{route('transaction')}}"
                ><button class="btn-main {{ request()->routeIs('transaction') ? 'active' : '' }}">Transactions</button>
                </a>

                <a href="{{route('trades')}}"
                ><button class="btn-main {{ request()->routeIs('trades') ? 'active' : '' }}">Trades</button>
                </a>

                <a href="{{route('trades_wallet')}}">
                    <button class="btn-main">Exchange</button>
                </a>

                <a href="{{route('market')}}">
                    <button class="btn-main">Market</button>
                </a>

            </div>
        </div>
    @endsection

    @section('content')
        {{--<div id="loadingOverlay">
            <div class="spinner"></div>
        </div>--}}

        <div class="container">

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

            @if ($errors->any())
                <div class="alert alert-danger" id="errorMessage">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <div class="content-section mb-5">
                <div class="profile-wrapper">
                    <form action="{{route('update_profile')}}" method="post" enctype="multipart/form-data" >
                        @csrf
                        <div class="user">

                        <input name="profile_pic" type="file" style="display: none" id="image-input" />

                        @if(Auth::user()->profile_pic)
                            <div class="profile-pic">
                                <div class="profile-pic" id="profile-container"><img src="{{asset('storage/' . Auth::user()->profile_pic)}}"></div>
                            </div>
                        @else
                            <div class="profile-pic" id="profile-container">Profile Pic</div>

                        @endif
                        {{--<div class="profile-pic">
                            <img src="{{asset('customer/assets/images/profile_pic.png')}}">

                        </div>--}}
                            <div>
                                <p class="userInfo text-md-left text-center">
                                    Email: {{Auth::user()->email ?? ""}}
                                </p>
                                <p class="userInfo text-md-left text-center">
                                    User ID: {{Auth::user()->referral_id ?? ""}}
                                </p>
                            </div>
                        </div>

                        <input type="hidden" name="id" value="{{Auth::user()->id}}">
                        <div class="profile-section">
                            <input type="text" name="username"  value="{{Auth::user()->username ?? ""}}" placeholder="Nick Name" class="input-field" />

                            @php
                                $customer = (Auth::user()->name == "customer") ? "" : Auth::user()->name;
                            @endphp

                            <input type="text" name="name" value="{{$customer ?? ""}}" class="input-field" placeholder="Your Name" />
    {{--                        <input type="text" class="input-field" placeholder="Last Name " />--}}
                            <input
                                type="date"
                                name="dob"
                                value="{{Auth::user()->dob ?? ""}}"
                                class="text-center input-field"
                                placeholder="Date of Birth "
                            />
                            <input
                                type="email"
                                email="text"
                                name="email"
                                class="input-field"
                                placeholder="Email"
                                value="{{Auth::user()->email ?? ""}}"
                            />
                            <input
                                type="text"
                                name="country"
                                class="text-center "
                                placeholder="Country"
                                value="{{Auth::user()->country ?? ""}}"
                            />


{{--                            <input class="btn-main-2 py-2" type="file" name="profile_pic" id="profile_pic">--}}

                            <button type="submit" class="btn-main w-100">Save</button>
                        </div>
                    </form>
                </div>

                <div class="security-section mt-lg-0 mt-5">
                    <h2 class="text-start mt-2">Security</h2>
                    <form action="{{route('update_password')}}" method="post" >
                        @csrf
                    <input
                        type="password"
                        name="old_password"
                        class="w-100 text-center input-field mt-3"
                        placeholder="Old Password"
                    />
                    <input
                        type="password"
                        name="password"
                        class="w-100 text-center input-field"
                        placeholder="New Password"
                    />
                    <input
                        type="password"
                        name="password_confirmation"
                        class="w-100 text-center input-field"
                        placeholder="Confirm Password"
                    />
                    <button type="submit" class="btn-main w-100">Change Password</button>
                    </form>
                </div>
            </div>

            <div style="
            border-top: 4px solid rgba(255, 255, 255, 0.4);
            text-align: center;
            width: 100%;

            margin-top: 130px;
          " class="border-t">Bitbance &copy; {{date('Y')}}</div>
        </div>
	@endsection


	@section('script')
	<script>
      function toggleSidebar() {
        var sidebar = document.getElementById("sm-sidebar");
        var burgerMenu = document.querySelector(".burger-menu");

        if (sidebar.style.left === "0px") {
          sidebar.style.left = "-40%";
          burgerMenu.innerHTML = "&#9776;";
        } else {
          sidebar.style.left = "0px";
        }
      }
    </script>



    <script>
        const imageInput = document.getElementById("image-input");
        const profileContainer = document.getElementById("profile-container");
        profileContainer.addEventListener("click", selectImage);
        function selectImage() {
            imageInput.click();
        }
        imageInput.addEventListener("change", (e) => {
            const file = e.target.files[0];
            if (file) {
                profileContainer.innerHTML = `<img src="${URL.createObjectURL(file)}" alt="Profile Pic" class="profile-image" >`;
            }
        });
    </script>

	@endsection