@extends("admin.admin_app")

@section("content")

                <!-- Page Header -->
                <div class="content bg-gray-lighter">
                    <div class="row items-push">
                        <div class="col-sm-7">
                            <h1 class="page-heading">
                               {{ isset($user->id) ? 'Edit User' : 'Add User' }}
                            </h1>
                        </div>
                        <div class="col-sm-5 text-right hidden-xs">
                            <ol class="breadcrumb push-10-t">
                                <li><a href="{{ URL::to('admin/users') }}">Users</a></li>
                                <li><a class="link-effect" href="">{{ isset($user->id) ? 'Edit User' : 'Add User' }}</a></li>
                            </ol>
                        </div>
                    </div>
                </div>
                <!-- END Page Header -->
<style>
	/* Spacing between form groups */
.form-group {
    margin-bottom: 1.5rem; /* adjust as needed */
}

/* Minimal bottom-border style */
.custom-input {
    border: none;
    border-bottom: 2px solid #ccc;
    border-radius: 0;
    padding-left: 10px;
    box-shadow: none;
    background: transparent;
    transition: border-color 0.3s ease;
}

.custom-input:focus {
    border-bottom: 2px solid #007bff; /* primary color highlight */
    outline: none;
    box-shadow: none;
}


/* Spacing between form groups */
.form-group {
    margin-bottom: 1.5rem;
}

/* Minimal bottom-border style for input and select */
.custom-input {
    border: none !important;
    border-bottom: 2px solid #ccc !important;
    border-radius: 0 !important;
    padding-left: 10px !important;
    box-shadow: none !important;
    background: transparent !important;
    transition: border-color 0.3s ease;
    appearance: none; /* removes default arrow in some browsers */
}

/* On focus */
.custom-input:focus {
    border-bottom: 2px solid #007bff !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Fix for select2 wrapper so it also looks like input */
.select2-container--default .select2-selection--multiple {
    border: none !important;
    border-bottom: 2px solid #ccc !important;
    border-radius: 0 !important;
    background: transparent !important;
    min-height: 38px; /* same as input height */
    padding-left: 10px;
}

.select2-container--default .select2-selection--multiple:focus,
.select2-container--default .select2-selection--multiple:active {
    border-bottom: 2px solid #007bff !important;
    outline: none !important;
    box-shadow: none !important;
}

</style>
                <!-- Page Content -->
                <div class="content content-boxed">
                    <div class="row">
                        <div class="col-sm-12 col-lg-12">
                            <div class="block">
                               <div class="block-content block-content-narrow"> 
                                @if (count($errors) > 0)
                                <div class="alert alert-danger">
                                     <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                                @endif
                                 @if(Session::has('flash_message'))
                                                <div class="alert alert-success">
                                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span></button>
                                                    {{ Session::get('flash_message') }}
                                                </div>
                                @endif
                                {!! Form::open(array('url' => array('admin/users/adduser'),'class'=>'form-horizontal padding-15','name'=>'user_form','id'=>'user_form','role'=>'form','enctype' => 'multipart/form-data')) !!} 
                <input type="hidden" name="id" value="{{ isset($user->id) ? $user->id : null }}">
                
					<div class="col-md-6">
						<div class="form-group mb-2">
    <label for="first_name" class="form-label">First Name</label>
    <input type="text" 
           name="first_name" 
           id="first_name" 
           value="{{ isset($user->first_name) ? $user->first_name : null }}" 
           class="form-control custom-input">
</div>
					</div>
					<div class="col-md-6">
						<div class="form-group md-2">
							<!-- <div class="form-material floating"> -->
								<label for="last_name">Last Name</label>
								<input type="text" name="last_name" id="last_name" 
								value="{{ isset($user->last_name) ? $user->last_name : null }}" 
								 class="form-control custom-input"
								 >
								
							<!-- </div> -->
						</div>
					</div>
					
				
					<div class="col-md-6">
						<div class="form-group mb-2">
							<!-- <div class="form-material floating"> -->
									<label for="email">Email</label>
								<input type="text" name="email" id="email" 
								value="{{ isset($user->email) ? $user->email : null }}"
								 class="form-control custom-input" 
								autocomplete="off">
							
							<!-- </div> -->
						</div>
					</div>
					<div class="col-md-6">
						<div class="form-group mb-2">
							<!-- <div class="form-material floating"> -->
								<label for="password">Password</label>
								<input type="password" name="password" 
								id="password" value=""  class="form-control custom-input"
								 autocomplete="off">
								
							<!-- </div> -->
						</div>
					</div>
				
					<div class="col-md-6">
						<div class="form-group mb-2">
							<!-- <div class="form-material floating"> -->
								<label for="mobile">Phone</label>
								<input type="text" name="mobile" id="mobile"
								 value="{{ isset($user->mobile) ? $user->mobile : null }}" 
								  class="form-control custom-input"
								  >
								
							<!-- </div> -->
						</div>
					</div>
					<div class="col-md-6"  id='companyWrapper'>
						<div class="form-group mb-2">
							<!-- <div class="form-material floating"> -->
								<label for="company">Company</label>
								<input type="text" name="company" id="company"
								 value="{{ isset($user->company) ? $user->company : null }}" 
								  class="form-control custom-input"
								 >
								
							<!-- </div> -->
						</div>
					</div> 
                     {{-- User Type --}}

                    @if(!isset($user)&& Auth::user()->usertype==='Admin') 
                    <div class="col-md-6">
                        <div class="form-group mb-2">
                            <label for="usertype">User Type</label>
                            <select name="usertype" id="usertype" class="form-control custom-input" required>
                                <!-- <option value="">-- Select --</option> -->
                                <option value="User" 
                                {{ (isset($user) && $user->usertype == 'User') ? 'selected' : '' }} 
                                
                                >Individual</option>
                                <option value="hotelier" {{ (isset($user) && $user->usertype == 'hotelier') ? 'selected' : '' }}>Hotelier</option>
                                <option value="Corporate" {{ (isset($user) && $user->usertype == 'Corporate') ? 'selected' : '' }}>Corporate</option>
                                <option value="Agent" {{ (isset($user) && $user->usertype == 'Agent') ? 'selected' : '' }}>Agent</option>
                                <option value="Admin" {{ (isset($user) && $user->usertype == 'Admin') ? 'selected' : '' }}>Admin</option>
                            </select>
                        </div>
                    </div>
                    @endif

			@if(!isset($user) || (isset($user) && $user->usertype === 'hotelier'))
				    @if((Auth::user()->usertype==="Admin"  )&& !empty($hotels) && count($hotels) > 0  )
					<div class="col-md-6" id='hotelWrapper'>
						<div class="form-group" >
						  <!-- <div class="form-material floating">  -->
						    <!-- 
								<input type="text" name="hotel" id="hotel" value="{{ isset($user->hotel) ? $user->hotel : null }}" class="form-control">
							 -->
								<label for="hotel">Hotel</label>
								<select name="hotels[]" class="js-select2 form-control custom-input" multiple> 
																<option value="">-- Choose --</option> 
																@foreach($hotels as $key => $value)
									<option 
										value="{{ $key }}" 
										@if(isset($hotelier) && in_array($key, $hotelier)) selected @endif
									>
										{{ $value . ', ' . backendHotels($key) }}
									</option>
										@endforeach

								</select>
							
                           <!-- </div> -->
                        </div>
					</div>
					@endif

			@endif

            	@if(!isset($user) || (isset($user) && $user->usertype === 'hotelier'))
				    @if(( Auth::user()->usertype==="hotelier" )&& !empty($hotels) && count($hotels) > 0  )
					<div class="col-md-6">
						<div class="form-group" >
						  <!-- <div class="form-material floating">  -->
						    <!-- 
								<input type="text" name="hotel" id="hotel" value="{{ isset($user->hotel) ? $user->hotel : null }}" class="form-control">
							 -->
								<label for="hotel">Hotel</label>
								<select name="hotels[]" class="js-select2 form-control custom-input" multiple> 
																<option value="">-- Choose --</option> 
																@foreach($hotels as $key => $value)
									<option 
										value="{{ $key }}" 
										@if(isset($hotelier) && in_array($key, $hotelier)) selected @endif
									>
										{{ $value . ', ' . backendHotels($key) }}
									</option>
										@endforeach

								</select>
							
                           <!-- </div> -->
                        </div>
					</div>
					@endif

			@endif
					<div class="col-md-6">
						<div class="form-group mb-2">
							<!-- <div class="form-material floating"> -->
								<label for="designation">Designation</label>
								<input type="text" name="designation" id="designation"
								 value="{{ isset($user->designation) ? $user->designation : null }}" 
								 class="form-control custom-input"
								 >
								
							<!-- </div> -->
						</div>
                        @if(isset($mainuser) && !empty($mainuser))
                            <input type="hidden" name="mainuser_id" value="{{ $mainuser }}">
                        @endif
					</div>				
                <div class="form-group">
                    <div class="col-md-offset-3 col-sm-9 ">
                        <button type="submit" class="btn btn-primary">{{ isset($user->id) ? 'Edit User' : 'Add User' }}</button>
						<a href="{{ URL::to('admin/users') }}" class="btn btn-info">Cancel</a>
                         
                    </div>
                </div>
                
                {!! Form::close() !!} 
                                </div>
                            </div>
                        </div>
                    </div>


                    <script>
document.addEventListener("DOMContentLoaded", function () {
    const usertypeSelect = document.getElementById("usertype");
    const hotelWrapper = document.getElementById("hotelWrapper");
    const companyWrapper = document.getElementById("companyWrapper");
    if(usertypeSelect && hotelWrapper){
        function toggleHotel(){
            if(usertypeSelect.value === "hotelier"){
                hotelWrapper.style.display = "block";
            } else {
                hotelWrapper.style.display = "none";
            }
            if(usertypeSelect.value === 'User'){
                companyWrapper.style.display ="none";
            }
            else{
                companyWrapper.style.display ="block";
            }
        }

        // Run on page load
        toggleHotel();

        // Run on change
        usertypeSelect.addEventListener("change", toggleHotel);
    }
});
</script>
                </div>
                <!-- END Page Content -->     

@endsection