@extends('layouts.main-layout')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
@section('title')
All Users | Dashboard
@endsection

@section('content')


												<!--begin::Svg Icon | path: icons/duotune/ecommerce/ecm002.svg-->
											
											
											<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
						<!--begin::Post-->
						<div class="post d-flex flex-column-fluid" id="kt_post">
							<!--begin::Container-->
							<div id="kt_content_container" class="container-xxl">
					
								<div class="card mb-5 mb-xl-8">
             	<div class="card-header border-0 pt-5">
										<h3 class="card-title align-items-start flex-column">
											<span class="card-label fw-bolder fs-3 mb-1">Guest Profile Details</span>
		
										</h3>
			</div>
	<div class="card-body py-3">
            <ul class="collection with-header mt-3">

            <li class="collection-item">
                <strong class="grey-text text-darken-2">First Name:</strong> {{$guestProfile->GuestFirstName}}
            </li>
            <li class="collection-item">
                <strong class="grey-text text-darken-2">Last Name:</strong> {{$guestProfile->GuestLastName}}
            </li>
            <li class="collection-item">
                <strong class="grey-text text-darken-2">Email:</strong> {{$guestProfile->GuestEmail}}
            </li>
            <li class="collection-item">
                <strong class="grey-text text-darken-2">Telephone:</strong> {{$guestProfile->GuestTelephone}}
            </li>
            <li class="collection-item">
                <strong class="grey-text text-darken-2">Passport:</strong> {{$guestProfile->PassportNo}}
            </li>
            <li class="collection-item">
                <strong class="grey-text text-darken-2">CNIC:</strong> {{$guestProfile->CNIC}}
            </li>
            <li class="collection-item">
                <strong class="grey-text text-darken-2">Guest Request:</strong> {{$guestProfile->GuestRequest}}
            </li>
            <li class="collection-item">
                <strong class="grey-text text-darken-2">Street Address:</strong> {{$guestProfile->GuestStreet}}
            </li>
            <li class="collection-item">
                <strong class="grey-text text-darken-2">Zip Code:</strong> {{$guestProfile->GuestZipCode}}
            </li>
            <li class="collection-item">
                <strong class="grey-text text-darken-2">Preferred Language:</strong> {{$guestProfile->PreferredLanguage}}
            </li>
            @php $city = $guestProfile->city; @endphp
            @if($city)
                <li class="collection-item">
                    <strong class="grey-text text-darken-2">City:</strong> {{$guestProfile->city->CityName}}
                </li>
            @endif
        </ul>
        <div class="center-align mb-2 mt-5" style="margin-left:22px; margin-top:20px !important;">
            @hasAccess('Edit Guest Profile')
                <a href="{{route('admin.accommodations.guest-profiles.edit',$guestProfile->GuestId)}}" class="btn btn-primary ">
                    <i class="material-icons left"></i>
                   <i class="fa fa-edit" ></i> Edit Profile
                </a>
            @endhasAccess
            @hasAccess('Delete Guest Profile')
                <a href="#delete-modal" class="modal-trigger btn btn-danger btn-xs">
                   
                  <i class="fa fa-trash" ></i>  Delete Profile
                </a>
                <form action="{{route('admin.accommodations.guest-profiles.destroy',$guestProfile->GuestId)}}" method="post" id="delete-form">
                    @csrf
                    @method('DELETE')
                </form>
                @component('components.confirm',[
                    'modal' => 'delete-modal',
                    'id'    => 'delete-form',
                    'title' => 'Guest Profile'
                ])
                @endcomponent
            @endhasAccess
        </div>
          </div>
   
@endsection

<style>
    .collection-item{
        border:1px solid lightgrey;
        padding:15px 25px;
    }
    ul{
        list-style:none;
    }
</style>