@extends('admin/layouts/layoutMaster')
@section('title', 'Edit Hostel')

@php
$floor = old('floors', $hostel->num_of_floors ?? '');
@endphp

@section('vendor-style')
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/select2/select2.css')}}" />
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/bootstrap-select/bootstrap-select.css')}}" />
@endsection

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

@endsection

@section('page-script')
  <script src="{{asset('assets/js/forms-selects.js')}}"></script>
@endsection

@section('content')
<h4 class="py-3 breadcrumb-wrapper mb-4">
    <span class="text-muted fw-light">Dashboard /</span> Edit Hostel
  </h4>

  <div class="row">
    <!-- Basic  -->
    <div class="col-md-10">
      <div class="card mb-4">
        <!--<h5 class="card-header"><i class="bi bi-building"></i> Add a new Hostel</h5>-->
        <div class="card-body">
        @if(session()->has('errors'))
          <div class="alert alert-danger alert-dismissible d-flex align-items-center" role="alert">
            <i class="fas fa-times-circle me-2"></i>{{session('errors')->first() }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
            </button>
          </div>
        @endif
        @if(session()->has('success'))
          <div class="alert alert-success alert-dismissible d-flex align-items-center" role="alert">
            <i class="fas fa-check-circle me-2"></i>{{session()->get('success')}}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
            </button>
          </div>
          <script>setTimeout(()=>{location="{{route('admin.hostel.show')}}"}, 4500)</script>
        @endif
            
          <form action="{{route('admin.hostel.update',$hostel->token)}}" method="post" autocomplete="" enctype="multipart/form-data">
            @csrf
            <div class="row g-2">
              <div class="col-md-12 mb-3">
                <label class="form-label" for="Hostel Name">Hostel Name</label>
                <input type="text" class="form-control" name="name" placeholder="Enter hostel name" value="{{old('name') ?? $hostel->name}}" />
              </div>
              <div class="col-md-7 mb-3">
                <label class="form-label" for="Hostel address">Hostel Address</label>
                <input type="text" class="form-control" name="address" placeholder="Enter hostel address" value="{{old('address') ?? $hostel->address}}" />
              </div>
              <div class="col-md-5 mb-3">
                <label class="form-label" for="Hostel Owner">Hostel Owner</label>
                <input type="text" class="form-control" name="hostelOwner" placeholder="Enter hostel owner" value="{{old('hostelOwner') ?? $hostel->hostel_owner}}" />
              </div>
              <div class="col-md-3 mb-3">
                <label class="form-label" for="basic-default-fullname">Hostel Type</label>
                <select  class="select2 form-select" data-allow-clear="true" name="hostel_type">
                  <option value="">Select Hostel Type</option>
                  <option value="Female" {{ old('hostel_type', $hostel->hostel_type ?? '') == 'Female' ? 'selected' : '' }}>Female</option>
                  <option value="Male" {{ old('hostel_type', $hostel->hostel_type ?? '') == 'Male' ? 'selected' : '' }}>Male</option>
                  <option value="Mixed" {{ old('hostel_type', $hostel->hostel_type ?? '') == 'Mixed' ? 'selected' : '' }}>Mixed</option>
                </select>
              </div>
              <div class="col-md-3 mb-3">
                <label class="form-label" for="basic-default-fullname">Floor Numbers</label>
                <select  class="select2 form-select" data-allow-clear="true" name="floors">
                  <option value="">Select Numbers</option>
                  @for($i = 1; $i <= 5; $i++)
                  <option value="{{ $i }}" {{ $floor == $i ? 'selected' : '' }}>
                    {{ $i }} Floor{{ $i > 1 ? 's' : '' }}
                  </option>
                  @endfor
                </select>
              </div>
              <div class="col-md-3 mb-3">
                <label class="form-label" for="Number of Rooms">Number of Rooms</label>
                <input type="number" class="form-control" name="rooms" placeholder="Enter hostel rooms" min="1" value="{{old('rooms') ?? $hostel->num_of_rooms}}" />
              </div>
              <div class="col-md-3 mb-3">
                <label class="form-label" for="Bedspace per Room">Bedspace per Room</label>
                <input type="number" class="form-control" name="bedspace" placeholder="Enter Bedspace per Room" min="1" value="{{old('bedspace') ?? $hostel->bedspace}}" />
              </div>
              
              <div class="col-md-4 mb-3">
                <label class="form-label" for="basic-default-fullname">Elecricity</label>
                <select  class="select2 form-select" data-allow-clear="true" name="light">
                  <option value="">Select Elecricity</option>
                  <option value="No" {{ old('light', $hostel->light ?? '') == 'No' ? 'selected' : '' }}>No</option>
                  <option value="Yes" {{ old('light', $hostel->light ?? '') == 'Yes' ? 'selected' : '' }}>Yes</option>
                </select>
              </div>
              
              <div class="col-md-4 mb-3">
                <label class="form-label" for="basic-default-fullname">Running Water</label>
                <select  class="select2 form-select" data-allow-clear="true" name="water">
                  <option value="">Select Availability</option>
                  <option value="No" {{ old('water', $hostel->water ?? '') == 'No' ? 'selected' : '' }}>No</option>
                  <option value="Yes" {{ old('water', $hostel->water ?? '') == 'Yes' ? 'selected' : '' }}>Yes</option>
                </select>
              </div>
              
              <div class="col-md-4 mb-3">
                <label class="form-label" for="basic-default-fullname">Air Condition</label>
                <select  class="select2 form-select" data-allow-clear="true" name="airCondition">
                  <option value="">Select Air Condition</option>
                  <option value="No" {{ old('airCondition', $hostel->aircondition ?? '') == 'No' ? 'selected' : '' }}>No</option>
                  <option value="Yes" {{ old('airCondition', $hostel->aircondition ?? '') == 'Yes' ? 'selected' : '' }}>Yes</option>
                </select>
              </div>
              
              <div class="col-md-4 mb-3">
                <label class="form-label" for="Manager Name">Manager Name</label>
                <input type="text" class="form-control" name="managerName" placeholder="Enter manager name" value="{{old('managerName') ?? $hostel->hostel_manager}}" />
              </div>
              
              <div class="col-md-4 mb-3">
                <label class="form-label" for="Manager Email">Manager Email</label>
                <input type="email" class="form-control" name="managerEmail" placeholder="Enter manager email" min="1" value="{{old('managerEmail') ?? $hostel->hostel_manager_email}}" />
              </div>
              
              <div class="col-md-4 mb-3">
                <label class="form-label" for="Manager Phone">Manager Phone</label>
                <input type="tel" class="form-control" name="managerPhone" placeholder="Enter manager phone" min="1" value="{{old('managerPhone') ?? $hostel->hostel_manager_phone}}" />
              </div>
              <div id="previewDiv" style="{{ empty($hostel->image) ? 'display:none;' : '' }}">
                <img id="preview" 
                  src="{{ !empty($hostel->image) ? asset($hostel->image) : '' }}" 
                  alt="Image Preview" 
                  style="max-width:200px;">
            </div>
              <div class="mb-3">
                <label for="hostelImage" class="form-label">Upload Hostel Image</label>
                <input class="form-control" type="file" id="hostelImage" name="hostelImage" accept=".png, .jpg, .jpeg">
              </div>
            </div>
            <button type="submit" class="btn btn-outline-primary">UPDATE</button>
          </form>
        </div>
      </div>
    </div>
    <!-- /Basic  -->

  </div>
<script>
document.getElementById('hostelImage').addEventListener('change', function(event) {
    const file = event.target.files[0];
    
    if (file) {
        const reader = new FileReader();

        reader.onload = function(e) {
            const preview = document.getElementById('preview');
            const previewDiv = document.getElementById('previewDiv');
            preview.src = e.target.result;
            previewDiv.style.display = 'block';
        }

        reader.readAsDataURL(file);
    }
});
</script>
@endsection