@extends('layouts.main')
@section('title', 'My Profile')
@section('content')    
<section>
  <div class="container" data-aos="fade-up">
    <div class="row gx-5">
      <div class="col-md-7">
        <div class="heading5 p-2">Upcoming reservations</div>
        <div class="org-line1 mb-4"></div>
        <div class="clearfx"></div>
        <div class="row">
          <div class="col-md-12">
            <div class="row">
            <div class="card boxshadow">
              <div class="card-body pt-3">
              <div class="row">
                <div class="col-md-4 mb-2 position-relative">
                  <div class="imgbox">
                  <img src="{{asset('img/upcomingresverastion/upcomres1.jpg')}}" class="imgfluidlogged">
                  </div>
                </div>
                <div class="col-md-8 mb-2 position-relative">
                <label>Date</label>
                <div class="cleaefix"></div>
                <div class="fw-bold">19 April 2023 - 25 April 2023 (7 days)</div>
                <div class="cleaefix"></div>
                <table class="table table-borderless">
                  <thead>
                    <tr>
                      <td>Location</td>
                      <td>Studio</td>
                      <td>Room</td>                
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th>Room</th>
                      <th>Music</th>
                      <th>Music</th>
                    
                    </tr>
                    <tr>
                      <th colspan="3">
                        <label class="fw-bold mt-3">350 pts</label>
                      </th>
                    </tr>            
                  </tbody>
                </table>
                <div class="float-end">
                  <button type="button" class="btn2 btnseedetails">See details
                    <i class="bi bi-arrow-up-right mlmr"></i>
                    </button>
                </div>
                </div>
              
              </div>        
            </div>

          </div>
            </div>
            <div class="row">
              <div class="card boxshadow">
                <div class="card-body pt-3">
                <div class="row">
                  <div class="col-md-4 mb-2 position-relative">
                    <div class="imgbox">
                    <img src="{{asset('img/upcomingresverastion/upcomres2.jpg')}}" class="imgfluidlogged">
                  </div>
                  </div>
                  <div class="col-md-8 mb-2 position-relative">
                  <label>Date</label>
                  <div class="cleaefix"></div>
                  <div class="fw-bold">19 April 2023 - 25 April 2023 (7 days)</div>
                  <div class="cleaefix"></div>
                  <table class="table table-borderless">
                    <thead>
                      <tr>
                        <td>Location</td>
                        <td>Studio</td>
                        <td>Room</td>                
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <th>Room</th>
                        <th>Music</th>
                        <th>Music</th>
                      
                      </tr>
                      <tr>
                        <th colspan="3">
                          <label class="fw-bold mt-3">350 pts</label>
                        </th>
                      </tr>            
                    </tbody>
                  </table>
                  <div class="float-end">
                    <button type="button" class="btn2 btnseedetails">See details
                      <i class="bi bi-arrow-up-right mlmr"></i>
                      </button>
                  </div>
                  </div>
                
                </div>        
              </div>
        
            </div>
              </div>
              <div class="row">
                <div class="card boxshadow">
                  <div class="card-body pt-3">
                  <div class="row">
                    <div class="col-md-4 mb-2 position-relative">
                      <div class="imgbox">
                      <img src="{{asset('img/upcomingresverastion/upcomres3.jpg')}}" class="imgfluidlogged">
                      </div>
                    </div>
                    <div class="col-md-8 mb-2 position-relative">
                    <label>Date</label>
                    <div class="cleaefix"></div>
                    <div class="fw-bold">19 April 2023 - 25 April 2023 (7 days)</div>
                    <div class="cleaefix"></div>
                    <table class="table table-borderless">
                      <thead>
                        <tr>
                          <td>Location</td>
                          <td>Studio</td>
                          <td>Room</td>                
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <th>Room</th>
                          <th>Music</th>
                          <th>Music</th>
                        
                        </tr>
                        <tr>
                          <th colspan="3">
                            <label class="fw-bold mt-3">350 pts</label>
                          </th>
                        </tr>            
                      </tbody>
                    </table>
                    <div class="float-end">
                      <button type="button" class="btn2 btnseedetails">See details
                        <i class="bi bi-arrow-up-right mlmr"></i>
                        </button>
                    </div>
                    </div>
                  
                  </div>        
                </div>
          
              </div>
                </div>

                <div class="row">
                  <div class="card boxshadow">
                    <div class="card-body pt-3">
                    <div class="row">
                      <div class="col-md-4 mb-2 position-relative">
                        <div class="imgbox">
                        <img src="{{asset('img/upcomingresverastion/upcomres4.jpg')}}" class="imgfluidlogged">
                        </div>
                      </div>
                      <div class="col-md-8 mb-2 position-relative">
                      <label>Date</label>
                      <div class="cleaefix"></div>
                      <div class="fw-bold">19 April 2023 - 25 April 2023 (7 days)</div>
                      <div class="cleaefix"></div>
                      <table class="table table-borderless">
                        <thead>
                          <tr>
                            <td>Location</td>
                            <td>Studio</td>
                            <td>Room</td>                
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <th>Room</th>
                            <th>Music</th>
                            <th>Music</th>
                          
                          </tr>
                          <tr>
                            <th colspan="3">
                              <label class="fw-bold mt-3">350 pts</label>
                            </th>
                          </tr>            
                        </tbody>
                      </table>
                      <div class="float-end">
                        <button type="button" class="btn2 btnseedetails">See details
                          <i class="bi bi-arrow-up-right mlmr"></i>
                          </button>
                      </div>
                      </div>
                    
                    </div>        
                  </div>
            
                </div>
                  </div>
          </div>
        </div>
        <div class="text-center">
          <button type="button" class="btn2 btnseedetails">See all
            <i class="bi bi-arrow-up-right" style="margin-left: 10px; margin-right:10px"></i>
            </button>
        </div>

        <div class="float-end">
          <button type="button" class="btn btn-primary">Create booking </button>
            
            
        </div>

      </div>
      <div class="col-md-5">
        <div class="heading5 p-2">Guest invitations</div>
        <div class="org-line1 mb-4"></div>
        <div class="clearfx"></div>
        <div class="row">
          <div class="col-md-12">
            <div class="row">
              <div class="card boxshadow height285">
                <div class="card-body pt-3">
                  <div class="row">
                    <div class="col-md-4 mb-2 position-relative">
                      <div class="imgbox150">
                        <img src="{{asset('img/gustinvitation/gustinva1.jpg')}}" class="imgfluidlogged">
                      </div>
                    </div>
                    <div class="col-md-8 mb-2 position-relative">
                      <label>Date</label>
                      <div class="cleaefix"></div>
                      <div class="fw-bold">10:00AM, 17 April 2023</div>
                      <div class="cleaefix"></div>
                      <table class="table table-borderless">
                        <thead>
                          <tr>
                            <td>Location</td>
                            <td>Studio</td>
                            <td>Room</td>                
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <th>Room</th>
                            <th>Music</th>
                            <th>Music</th>
                          
                          </tr>
                                    
                        </tbody>
                      </table>
                      <div class="float-end">
                        <button type="button" class="btn2 btnseedetails">See details
                          <i class="bi bi-arrow-up-right mlmr"></i>
                          </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="card boxshadow height285">
                <div class="card-body pt-3">
                  <div class="row">
                    <div class="col-md-4 mb-2 position-relative">
                      <div class="imgbox150">
                      <img src="{{asset('img/gustinvitation/gustinva2.jpg')}}" class="imgfluidlogged">
                      </div>
                    </div>
                    <div class="col-md-8 mb-2 position-relative">
                      <label>Date</label>
                      <div class="cleaefix"></div>
                      <div class="fw-bold">10:00AM, 17 April 2023</div>
                      <div class="cleaefix"></div>
                      <table class="table table-borderless">
                        <thead>
                          <tr>
                            <td>Location</td>
                            <td>Studio</td>
                            <td>Room</td>                
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <th>Room</th>
                            <th>Music</th>
                            <th>Music</th>  
                          </tr>
                        </tbody>
                      </table>
                      <div class="float-end">
                        <button type="button" class="btn2 btnseedetails">See details
                          <i class="bi bi-arrow-up-right mlmr"></i>
                          </button>
                      </div>
                    </div>
                  </div>        
                </div>
              </div>
            </div>
            <div class="row">
                <div class="card boxshadow height285">
                  <div class="card-body pt-3">
                  <div class="row">
                    <div class="col-md-4 mb-2 position-relative">
                      <div class="imgbox150">
                        <img src="{{asset('img/gustinvitation/gustinva3.jpg')}}" class="imgfluidlogged">
                      </div>
                    </div>
                    <div class="col-md-8 mb-2 position-relative">
                    <label>Date</label>
                    <div class="cleaefix"></div>
                    <div class="fw-bold">10:00AM, 17 April 2023</div>
                    <div class="cleaefix"></div>
                    <table class="table table-borderless">
                      <thead>
                        <tr>
                          <td>Location</td>
                          <td>Studio</td>
                          <td>Room</td>                
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <th>Room</th>
                          <th>Music</th>
                          <th>Music</th>       
                        </tr>
                      </tbody>
                    </table>
                    <div class="mt-3"></div>
                      <div class="float-end">
                        <button type="button" class="btn2 btnseedetails">See details
                          <i class="bi bi-arrow-up-right mlmr"></i>
                        </button>
                      </div>
                    </div>
                  </div>        
                </div>
              </div>
                </div>

                <div class="row">
                  <div class="card boxshadow height285">
                    <div class="card-body pt-3">
                    <div class="row">
                      <div class="col-md-4 mb-2 position-relative">
                        <div class="imgbox150">
                        <img src="{{asset('img/gustinvitation/gustinva4.jpg')}}" class="imgfluidlogged">
                        </div>
                      </div>
                      <div class="col-md-8 mb-2 position-relative">
                      <label>Date</label>
                      <div class="cleaefix"></div>
                      <div class="fw-bold">10:00AM, 17 April 2023</div>
                      <div class="cleaefix"></div>
                      <table class="table table-borderless">
                        <thead>
                          <tr>
                            <td>Location</td>
                            <td>Studio</td>
                            <td>Room</td>                
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <th>Room</th>
                            <th>Music</th>
                            <th>Music</th>
                          
                          </tr>
                                    
                        </tbody>
                      </table>
                    
                      <div class="float-end">
                        <button type="button" class="btn2 btnseedetails">See details
                          <i class="bi bi-arrow-up-right mlmr"></i>
                          </button>
                      </div>
                      </div>
                    
                    </div>        
                  </div>
            
                </div>
              </div>
          </div>
        </div>
        <div class="text-center">
          <button type="button" class="btn2 btnseedetails">See all
            <i class="bi bi-arrow-up-right mlmr"></i>
            </button>
        </div>
        <div class="float-end">
          <button type="button" class="btn btn-primary">Invite guest </button>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="p-0">
  <div class="container" data-aos="fade-up">
    <div class="row gx-5">
      <div class="col-md-8">
        <div class="heading5 p-2">Related news</div>
        <div class="org-line1 mb-4"></div>
        <div class="clearfx"></div>
        <div class="row">
        @if($related_news)
          @foreach($related_news as $rnews)
          <div class="col-md-4">
            <div class="card boxshadow">
              <div class="card-body pt-3">
                <div class="col-md-12 mb-2 position-relative">
                  <img src="{{asset('storage/location/news/'.$rnews->conclusion_picture)}}" class="img-thumbnail rounded-0 p-0">
                  <div class="clearfix"></div>
                  <small class="mt-2 mb-2 d-block text-success">{{$rnews->tags}}</small>
                  <div class="clearfix"></div>
                  <div class="float-start">
                    <h5>{{$rnews->name}}</h5>
                  </div>
                  <div class="float-end">
                  <a href="{{url('view-news/'.$rnews->id)}}" style="color:#000000;"><i class="bi bi-arrow-up-right" style="cursor:pointer;"></i></a>
                  </div>
                  <div class="clearfix"></div>
                  <p class="mb-2 d-block font13px">{{$rnews->heading_intro}}</p>
                  <div class="clearfix"></div>
                  <div class="d-inline">
                    @if($rnews->createdBy->profile_pic)
                    <img src="{{asset('storage/profile-pic/'.$rnews->createdBy->profile_pic)}}" alt="Profile" class="rounded-circle height35">
                    @else
                    <img src="{{asset('images/user-img.png')}}" alt="Profile" class="rounded-circle height35">
                    @endif
                  </div>
                  <div class="d-inline">
                    <span class="font13px" style="font-weight:100;">{{ucfirst($rnews->createdBy->fname)}} {{ucfirst($rnews->createdBy->lname)}}</span>
                    <div class="font12px" style="margin-top:-15px;margin-left:40px;">{{date('d l Y',strtotime($rnews->created_at))}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          @endforeach
        @endif
        </div>
      </div>
      <div class="col-md-4">
        <div class="heading5 p-2">Social feed</div>
        <div class="org-line1 mb-4"></div>
        <div class="clearfx"></div>
        <div class="row">
          <div class="col-md-12">
            <div class="card bordertop2">
              <div class="card-body pt-3">
                <div class="col-md-12 mb-2 position-relative">
                  <div class="d-inline">
                    <img src="http://localhost/nomadic/public/images/user-img.png" alt="Profile" class="rounded-circle height35">
                  </div>
                  <div class="d-inline">
                  <b>Nolan Stanton</b> <a class="text-primary">@Nolan Stanton</a><a class="text-primary m-lg-3">25s</a>
                  <div class="clearfix"></div>
                  <div class="font13px offset-1 mb-2">13 Places Where You Can See the Bluest Water in 
                    the World</div>
                  </div>
                  <img src="http://localhost/nomadic/public/img/socialfeed1.jpg" class="imgfluid imgradius">
                  <div class="clearfix"></div>
                  <div class="float-start w-50 mt-3">
                  <div class="d-inline">
                  <i class="bi bi-chat text-primary"></i>
                  <a class="text-primary ms-3 font13px">61</a>
                  <i class="bi bi-repeat ms-3 text-primary"></i>
                  <a class="text-primary ms-3 font13px">12</a>
                  </div>
                  
                  </div>
                  <div class="float-end w-50 mt-3">
                    <div class="d-inline">
                      <i class="bi bi-heart-fill text-danger"></i>
                      <a class="text-danger ms-3 fw-bold font13px">6.2k</a>
                      <i class="bi bi-upload ms-5 text-primary"></i>
                      <a class="text-primary ms-3 font13px">61</a>
                      </div>
                  </div>
                  <div class="clearfix"></div>
                  <small class="mt-2 mb-2 d-block fw-bold text-primary">Show this thread</small>
                  
                </div>
            </div>
          </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="card bordertop2">
              <div class="card-body pt-3">
                <div class="col-md-12 mb-2 position-relative">
                  <div class="d-inline">
                    <img src="http://localhost/nomadic/public/images/user-img.png" alt="Profile" class="rounded-circle height35">
                  </div>
                  <div class="d-inline">
                  <b>Nolan Stanton</b> <a class="text-primary">@Nolan Stanton</a><a class="text-primary m-lg-3">25s</a>
                  <div class="clearfix"></div>
                  <div class="font13px offset-1 mb-2">13 Places Where You Can See the Bluest Water in 
                    the World</div>
                  </div>
                  <img src="http://localhost/nomadic/public/img/socialfeed1.jpg" class="imgfluid imgradius">
                  <div class="clearfix"></div>
                  <div class="float-start w-50 mt-3">
                  <div class="d-inline">
                  <i class="bi bi-chat text-primary"></i>
                  <a class="text-primary ms-3 font13px">61</a>
                  <i class="bi bi-repeat ms-3 text-primary"></i>
                  <a class="text-primary ms-3 font13px">12</a>
                  </div>
                  
                  </div>
                  <div class="float-end w-50 mt-3">
                    <div class="d-inline">
                      <i class="bi bi-heart-fill text-danger"></i>
                      <a class="text-danger ms-3 fw-bold font13px">6.2k</a>
                      <i class="bi bi-upload ms-5 text-primary"></i>
                      <a class="text-primary ms-3 font13px">61</a>
                      </div>
                  </div>
                  <div class="clearfix"></div>
                  <small class="mt-2 mb-2 d-block fw-bold text-primary">Show this thread</small>       
                </div>
            </div>
          </div>
          </div>
        </div>    
        <div class="text-center">
          <button type="button" class="btn2 btnseedetails">See all
            <i class="bi bi-arrow-up-right mlmr"></i>
            </button>
        </div>
      </div>
    </div>
  </div>
</section>


<section class="upcomingeventbg mt-5">
      <div class="container" data-aos="fade-up">
        <h1 class="txtwhite mb-4">Upcoming events</h1>
   <div class="row">
<div class="col-md-3 mb-4">
  <div class="position-relative">
    <div class="imgbox">
  <img src="img/upcomingevent/upcoevnt1.jpg" class="imgfluidlogged">
</div>
  
  </div>
  <div class="clearfix"></div>
  <div class="mt-2 mb-2 txtwhite">THURSDAY, 2 NOV AT 7:00PM</div>
  <div class="clearfix"></div>
  <h4 class="mb-2 txtwhite">James Francies Trio</h4>
  <div class="clearfix"></div>
  <div class="mb-2 txtwhite">BALI, HALL C</div>
  <div class="clearfix"></div>
  <div class="mb-4 txtwhite font13px">97 interested 17 going</div>
  <div class="clearfix"></div>
  <div class="d-inline position-relative">
    <button type="button" class="btn btnwhite">Interested</button>
    <button type="button" class="btn btnwhite">Going</button>
    
    <button type="button" class="btn2 btnwhite d-inline minwidth position-relative" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <i class="bi bi-share mlmr"></i>
    </button>
    <div class="dropdown-menu ddlmenuwidth">
      <a class="dropdown-item" href="#"><i class="bi bi-facebook mlmr"></i></a>
      <a class="dropdown-item" href="#"><i class="bi bi-whatsapp mlmr"></i></a>
      <a class="dropdown-item" href="#"><i class="bi bi-instagram mlmr"></i></a>
      <a class="dropdown-item" href="#"><i class="bi bi-youtube mlmr"></i></a>
      <a class="dropdown-item" href="#"><i class="bi bi-linkedin mlmr"></i></a>
    </div>
  
  </div>
</div>
<div class="col-md-3 mb-4">
  <div class="position-relative">
    <div class="imgbox">
    <img src="img/upcomingevent/upcoevnt2.jpg" class="imgfluidlogged">
    </div>

    </div>
    <div class="clearfix"></div>
    <div class="mt-2 mb-2 txtwhite">THURSDAY, 2 NOV AT 7:00PM</div>
    <div class="clearfix"></div>
    <h4 class="mb-2 txtwhite">James Francies Trio</h4>
    <div class="clearfix"></div>
    <div class="mb-2 txtwhite">BALI, HALL C</div>
    <div class="clearfix"></div>
    <div class="mb-4 txtwhite font13px">97 interested 17 going</div>
    <div class="clearfix"></div>
    <div class="d-inline dropdown position-relative">
      <button type="button" class="btn btnwhite">Interested</button>
      <button type="button" class="btn btnwhite">Going</button>
      <button type="button" class="btn2 btnwhite d-inline minwidth position-relative" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="bi bi-share mlmr"></i>
      </button>
      <div class="dropdown-menu ddlmenuwidth">
        <a class="dropdown-item" href="#"><i class="bi bi-facebook mlmr"></i></a>
        <a class="dropdown-item" href="#"><i class="bi bi-whatsapp mlmr"></i></a>
        <a class="dropdown-item" href="#"><i class="bi bi-instagram mlmr"></i></a>
        <a class="dropdown-item" href="#"><i class="bi bi-youtube mlmr"></i></a>
        <a class="dropdown-item" href="#"><i class="bi bi-linkedin mlmr"></i></a>
      </div>
    </div>
</div>
<div class="col-md-3 mb-4">
  <div class="position-relative">
    <div class="imgbox">
    <img src="img/upcomingevent/upcoevnt3.jpg" class="imgfluidlogged">
    </div>

    </div>
    <div class="clearfix"></div>
    <div class="mt-2 mb-2 txtwhite">THURSDAY, 2 NOV AT 7:00PM</div>
    <div class="clearfix"></div>
    <h4 class="mb-2 txtwhite">James Francies Trio</h4>
    <div class="clearfix"></div>
    <div class="mb-2 txtwhite">BALI, HALL C</div>
    <div class="clearfix"></div>
    <div class="mb-4 txtwhite font13px">97 interested 17 going</div>
    <div class="clearfix"></div>
    <div class="d-inline dropdown position-relative">
      <button type="button" class="btn btnwhite">Interested</button>
      <button type="button" class="btn btnwhite">Going</button>
      <button type="button" class="btn2 btnwhite d-inline minwidth position-relative" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="bi bi-share mlmr"></i>
      </button>
      <div class="dropdown-menu ddlmenuwidth">
        <a class="dropdown-item" href="#"><i class="bi bi-facebook mlmr"></i></a>
        <a class="dropdown-item" href="#"><i class="bi bi-whatsapp mlmr"></i></a>
        <a class="dropdown-item" href="#"><i class="bi bi-instagram mlmr"></i></a>
        <a class="dropdown-item" href="#"><i class="bi bi-youtube mlmr"></i></a>
        <a class="dropdown-item" href="#"><i class="bi bi-linkedin mlmr"></i></a>
      </div>
     
    </div>
</div>
<div class="col-md-3 mb-4">
  <div class="position-relative">
    <div class="imgbox">
    <img src="img/upcomingevent/upcoevnt4.jpg" class="imgfluidlogged">
    </div>

    </div>
    <div class="clearfix"></div>
    <div class="mt-2 mb-2 txtwhite">THURSDAY, 2 NOV AT 7:00PM</div>
    <div class="clearfix"></div>
    <h4 class="mb-2 txtwhite">James Francies Trio</h4>
    <div class="clearfix"></div>
    <div class="mb-2 txtwhite">BALI, HALL C</div>
    <div class="clearfix"></div>
    <div class="mb-4 txtwhite font13px">97 interested 17 going</div>
    <div class="clearfix"></div>
    <div class="d-inline dropdown position-relative">
      <button type="button" class="btn btnwhite">Interested</button>
      <button type="button" class="btn btnwhite">Going</button>
      <button type="button" class="btn2 btnwhite d-inline minwidth position-relative" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="bi bi-share mlmr"></i>
      </button>
      <div class="dropdown-menu ddlmenuwidth">
        <a class="dropdown-item" href="#"><i class="bi bi-facebook mlmr"></i></a>
        <a class="dropdown-item" href="#"><i class="bi bi-whatsapp mlmr"></i></a>
        <a class="dropdown-item" href="#"><i class="bi bi-instagram mlmr"></i></a>
        <a class="dropdown-item" href="#"><i class="bi bi-youtube mlmr"></i></a>
        <a class="dropdown-item" href="#"><i class="bi bi-linkedin mlmr"></i></a>
      </div>
    </div>
</div>
</div>

        
        
      </div>
    </section>
@endsection