@extends('Client.layouts.layout')

@section('content')
    
    <style>
        .nav-link{
            background: transparent !important;
        }
    </style>
    
    @php($current_route = Route::current()->getName())
    <section class="py-5">
    	<div class="container">

			<!-- About and Conditions heading text -->
			<div class="section-header">
				<div class="d-flex">
					<h6 class="text-uppercase fw-semibold text-dark mx-1">@lang('trans.home')</h6>
					<h6 class="text-uppercase fw-semibold text-dark">{{ lang('ar') ? '/' : '\\' }}</h6>
					<h6 class="fw-normal text-heading mx-1">@yield('pagetitle')</h6>
				</div>
			</div>
			<!-- start content  -->
			<div class="d-flex justify-content-start flex-column">
			    @if($current_route == 'client.profile')
			    <section class="py-3">
                	<div class="container">
                		<div class="card text-center">
                			<div class="card-body">
                				<div class="avatar-upload">
                					<div class="avatar-edit" data-bs-toggle="modal" data-bs-target="#ChangePhotoModal">
                						<img src="{{ asset((auth('client')->check() && isset(auth('client')->user()?->image)) ? auth('client')->user()->image : 'avatar.png') }}" style="width: 100px;">
                						<label for="imageUpload"></label>
                					</div>
                					<!-- Modal -->
                					<div class="modal fade" id="ChangePhotoModal" tabindex="-1" aria-labelledby="ChangePhotoModalLabel" aria-hidden="true">
                						<div class="modal-dialog modal-dialog-centered">
                							<div class="modal-content">
                								<div class="modal-header border-0">
                									<h1 class="modal-title fs-5" id="ChangePhotoModalLabel">@lang('trans.image')</h1>
                									<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                								</div>
                								<div class="modal-body">
                								    <form id="change-image-form" action="{{ route('client.profile') }}" method="POST" enctype="multipart/form-data">
                								        @csrf		        
                    								    <input type="file" name="image" class="custom-file-input d-none" id="change-image" onchange="document.getElementById('preview-image').src = window.URL.createObjectURL(this.files[0])">
                    									<label class="d-block" for="change-image">
                    										<div>
                    											<img style="max-height: 150px;" id="preview-image" src="https://tadbeer.emcan-group.com/assets/images/Gallery Download.png" alt="">
                    										</div>
                    										<h6>Upload your photo here</h6>
                    									</label>
                    									<span class="text-danger">Supports: JPG, JPG2000, PNG</span>
                								    </form>
                								</div>
                								<div class="modal-footer border-0 text-center d-flex justify-content-center">
                									<button type="button" class="btn btn-secondary rounded-2"  data-bs-dismiss="modal" aria-label="Close">@lang('trans.cancel')</button>
                									<button type="submit" form="change-image-form" class="btn main_bt rounded-2">@lang('trans.edit')</button>
                								</div>
                							</div>
                						</div>
                					</div>
                					<div class="avatar-preview">
                						<div id="imagePreview" style="background-image: url('{{ asset((auth('client')->check() && isset(auth('client')->user()?->image)) ? auth('client')->user()->image : 'avatar.png') }}');">
                						    
                						</div>
                					</div>
                				</div>
                				<h5 class="card-title text-black fw-semibold">{{ auth('client')->user()->name ?? 'assets/images/Group%201000002686.svg' }}</h5>
                			</div>
                		</div>
                	</div>
                </section>
                @endif
                <section class="mb-5">
                	<div class="container">
                		<div class="row">
                			<!-- btn filter  -->
                			<button class="btn btn-link d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight1" aria-controls="offcanvasRight">
                			<i class="fa-solid fa-list-ul text-primary fs-1 d-flex justify-content-end p-0"></i>
                			</button>
                			<!-- start col-3  -->
                			<div class="col-lg-2 d-lg-block d-none">
                				<nav>
                					<ul class="nav-pills mt-3">
                						<li class="nav-item list-unstyled"> <a href="{{ route('client.profile') }}" class="nav-link {{ $current_route == 'client.profile' ? 'active' : '' }}"> <span class="mx-3 {{ $current_route != 'client.profile' ? 'text-a' : '' }}"> @lang('trans.My Profile') </span></a>  </li>
                						<li class="nav-item list-unstyled"> <a href="{{ route('client.reset-password') }}" class="nav-link {{ $current_route == 'client.reset-password' ? 'active' : '' }}"> <span class="mx-3 {{ $current_route != 'client.reset-password' ? 'text-a' : '' }}"> @lang('trans.Password') </span></a>  </li>
                						<li class="nav-item list-unstyled"> <a href="{{ route('client.orders') }}" class="nav-link {{ in_array($current_route, ['client.orders','client.order.show']) ? 'active' : '' }}"> <span class="mx-3 {{ $current_route != 'client.orders' ? 'text-a' : '' }}"> @lang('trans.My Orders') </span></a>  </li>
                						<li class="nav-item list-unstyled"> <a href="{{ route('client.addresses') }}" class="nav-link {{ $current_route == 'client.addresses' ? 'active' : '' }}"> <span class="mx-3 {{ $current_route != 'client.addresses' ? 'text-a' : '' }}"> @lang('trans.addresses') </span></a>  </li>
                						<li class="nav-item list-unstyled"> <a href="{{ route('client.wallet') }}" class="nav-link {{ $current_route == 'client.wallet' ? 'active' : '' }}"> <span class="mx-3 {{ $current_route != 'client.wallet' ? 'text-a' : '' }}"> @lang('trans.wallet') </span></a>  </li>
                						<li class="nav-item list-unstyled"> <a href="{{ route('client.logout') }}" class="nav-link {{ $current_route == 'client.logout' ? 'active' : '' }}"> <span class="mx-3 {{ $current_route != 'client.logout' ? 'text-a' : '' }}"> @lang('trans.logout') </span></a>  </li>
                					</ul>
                				</nav>
                			</div>

                			<!--=========== start sidebar Filter =========-->
                			<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasRight1" aria-labelledby="offcanvasRightLabel">
                				<div class="offcanvas-header">
                					<div class="d-flex align-items-center">
                						<i class="fa-solid fa-filter text-secondary fs-4"></i>
                						<h2 class="text-uppercase fw-semibold text-secondary mx-2 mt-3">@lang('trans.filter')</h2>
                					</div>
                					<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                				</div>
                				<div class="offcanvas-body">
                					<div class="col-12 rounded-1 p-4 d-block hover-links">
                						<ul class="navbar-nav ms-auto me-auto mb-lg-0 d-flex px-3 footer">
                							<li class="nav-item me-3 fw-bold">
                								<a class="nav-link text-secondary link-primary {{ $current_route == 'client.profile' ? 'active' : '' }}" href="{{ route('client.profile') }}"> @lang('trans.My Profile') </a>
                							</li>
                							<li class="nav-item me-3 fw-bold">
                								<a class="nav-link text-secondary link-primary {{ $current_route == 'client.reset-password' ? 'active' : '' }}" href="{{ route('client.reset-password') }}"> @lang('trans.Password') </a>
                							</li>
                							<li class="nav-item me-3 fw-bold">
                								<a class="nav-link text-secondary link-primary {{ in_array($current_route, ['client.orders','client.order.show']) ? 'active' : '' }}" href="{{ route('client.orders') }}"> @lang('trans.My Orders') </a>
                							</li>
                							<li class="nav-item me-3 fw-bold">
                								<a class="nav-link text-secondary link-primary {{ $current_route == 'client.addresses' ? 'active' : '' }} " href="{{ route('client.addresses') }}"> @lang('trans.addresses') </a>
                							</li>
                						</ul>
                						<hr class="mt-5">
                					</div>
                				</div>
                			</div>
                			<!--=========== End sidebar Filter =========-->

                			<!-- start col-9 -->
                			<div class="col-lg-10">
                			    @yield('logged-in-content')
                			</div>
                		</div>
                	</div>
                </section>
			    
			</div>
			<!-- end content  -->

    	</div>
    </section>
		
@endsection

@push('css')
<style>
    .link-primary.active {
        color: #f15a50 !important;
    }
    .link-primary.active:hover, .link-primary.active:focus {
        color: #000 !important;
    }

    .btn-close{
        margin: inherit !important;
    }
    
    .col-lg-3 .nav-pills .nav-link:not(.active) {
        border-{{ lang('en') ? 'left' : 'right' }}: 1px solid #EE3124;
        border-{{ lang('ar') ? 'left' : 'right' }}: none;
    }
    .col-lg-3 .nav-pills .nav-link.active {
        border-{{ lang('en') ? 'left' : 'right' }}: 3px solid #EE3124;
        border-{{ lang('ar') ? 'left' : 'right' }}: none;
    }
</style>
@endpush