@extends('layouts/layoutMaster')
@section('title', 'Hostel Allotment')
@section('vendor-style')
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css')}}">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
  <style>
    .badge,
    .cursor-pointer{cursor:pointer;}
    /*img{width:400px; height:250px;}*/
  </style>
@endsection

@section('content')

  <h4 class="py-3 breadcrumb-wrapper mb-4">
    <span class="text-muted fw-light">Dashboard /</span> Hostel Allotment
  </h4>
  <div class="card shadow">
    <div class="card-body">
        
        <!---->
    <h2 class="text-center mb-4">Explore Our Available Hostels</h2>
    <div class="row g-4">
    @if($lists)
      @foreach($lists as $key => $list)
      <!-- Room 1 -->
       <!-- Hostel Card Start -->
        <div class="col-md-4 col-lg-4 col-sm-12" data-step="{{$key+1}}">
            <div class="card shadow-sm h-100">
                
                <!-- Image -->
                <img src="{{asset('hostels/'.$list->image)}}" class="card-img-top " alt="{{$list->name}}" draggable="false">

                <div class="card-body">

                    <!-- Name & Status -->
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">{{$list->name}}</h5>
                        <span class="badge bg-success">Available</span>
                    </div>

                    <!-- Address -->
                    <p class="text-muted mt-1 mb-1">
                        <i class="bi bi-geo-alt me-1 text-danger"></i> {{$list->address}}
                    </p>

                    <!-- Hostel Info -->
                    <ul class="list-unstyled small">
                        <li><i class="bi bi-building-fill"></i> <strong>Type:</strong> {{$list->hostel_type}} Hostel</li>
                        <!--<li><strong>Owner:</strong> Mr. John Doe</li>-->
                        <li><i class="bi bi-layers-fill"></i> <strong>Floors:</strong> {{$list->num_of_floors}} Floor{{$list->num_of_floors>1?'s':''}}</li>
                        <li><i class="bi bi-bed-fill"></i> <strong>Total Rooms:</strong> {{$list->num_of_rooms}} Rooms</li>
                    </ul>

                    <!-- Facilities -->
                    <div class="mb-0">
                        <span class="badge bg-info text-{{$list->light=='Yes'? 'white':'dark'}} me-1"
                        data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        title="@if($list->light=='Yes')Electricity Available @else No Light @endif">
                          <i class="bi bi-lightbulb-fill"></i> {{$list->light}}
                        </span>
                        <span class="badge bg-info text-{{$list->water=='Yes'? 'white':'dark'}} me-1" 
                        data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        title="@if($list->water=='Yes')Water Available @else No Running Water @endif">
                          <i class="bi bi-droplet-fill"></i> {{$list->water}}
                        </span>
                        <span class="badge bg-info text-{{$list->aircondition=='Yes'? 'white':'dark'}} me-1"
                        data-bs-toggle="tooltip"
                        data-bs-placement="bottom"
                        title="@if($list->aircondition=='Yes')Air-Conditioned @else No Air Conditioning @endif">
                          <i class="bi bi-snow"></i> {{$list->aircondition}}
                        </span>
                    </div>

                    <!-- Manager Info -->
                    <!--<div class="border-top pt-2 small">-->
                    <!--    <p class="mb-1"><strong>Manager:</strong> Sarah Smith</p>-->
                    <!--    <p class="mb-1"><i class="bi bi-envelope"></i> manager@email.com</p>-->
                    <!--    <p class="mb-1"><i class="bi bi-telephone"></i> +1234567890</p>-->
                    <!--</div>-->

                </div>
                <!-- Footer card-footer-->
                <div class="mt-0 bg-white text-center mb-3">
                  <form method="post" action="{{route('floors')}}" class="inline">
                    @csrf
                    <input type="hidden" name="hostelId" value="{{$list->id}}">
                    <button type="submit" class="btn btn-primary btn-sm">Proceed</button>
                  </form>
                </div>

            </div>
        </div>
        <!-- Hostel Card End -->
      @endforeach
    @else
    <div class="container d-flex justify-content-center align-items-center" style="height: 60vh;">
      <div class="text-center">
        <i class="bi bi-building-x display-1 text-secondary"></i>
        <h3 class="mt-3">No Available Hostel</h3>
        <p class="text-muted">Please check back later.</p>
      </div>
    </div>
    @endif
    </div>
    <div>
    <!-- Pagination -->
    <div class="my-3">
      {{ $lists->links() }}
    </div>
    
<!--<nav aria-label="Room page navigation" class="mt-4">-->
<!--  <ul class="pagination justify-content-end">-->
    <!-- Previous Button -->
<!--    <li class="page-item disabled">-->
<!--      <a class="page-link rounded-pill px-3" href="#" tabindex="-1">-->
<!--        <i class="bi bi-chevron-left"></i> Previous-->
<!--      </a>-->
<!--    </li>-->

    <!-- Page Numbers -->
<!--    <li class="page-item active">-->
<!--      <a class="page-link rounded-circle" href="#">1</a>-->
<!--    </li>-->
<!--    <li class="page-item">-->
<!--      <a class="page-link rounded-circle" href="#">2</a>-->
<!--    </li>-->
<!--    <li class="page-item">-->
<!--      <a class="page-link rounded-circle" href="#">3</a>-->
<!--    </li>-->
<!--    <li class="page-item">-->
<!--      <a class="page-link rounded-circle" href="#">4</a>-->
<!--    </li>-->

    <!-- Next Button -->
<!--    <li class="page-item">-->
<!--      <a class="page-link rounded-pill px-3" href="#">-->
<!--        Next <i class="bi bi-chevron-right"></i>-->
<!--      </a>-->
<!--    </li>-->
<!--  </ul>-->
<!--</nav>-->
    </div>

            
      <div class="row g-2 p-4 d-none">
        <div class="col-md-7 p-3" style="border:1px solid #ccc;border-radius:5px!important">
          @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show p-2" role="alert">
              <i class="bi bi-x-circle"></i> {{ $errors->first() }}
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
          @endif
          @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show p-2" role="alert">
              <i class="bi bi-check-circle"></i> {!! session('success') !!}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <script>
              setTimeout(()=>{location ="{{route('student-home')}}"},4000);
            </script>
          @endif
          <form action="{{route('chgPass.update')}}" method="post">
            @csrf
            <div class="mb-3">
                <label class="form-label" for="Choose a Hostel">Choose a Hostel</label>
                <select id="hostel" name="hostel" class="select2 form-select form-select-lg cursor-pointer" data-allow-clear="true">
                @foreach($lists as $list)
                  <option value="{{$list->id}}" @if(old('hostel')==$list->id)selected @endif>{{$list->name}}</option>
                @endforeach 
                </select>
            </div>

            <button type="submit" class="btn btn-outline-success">
              <i class="bi bi-save me-2"></i> Search
            </button>
          </form>
        </div>
      </div>
      <!---->
      
    </div>
  </div>

@section('vendor-script')
  <script src="{{asset('assets/vendor/libs/moment/moment.js')}}"></script>
@endsection
@endsection