@extends('layouts.app')

@section('content')
<div class="container">

@include('flash::message')

  <h3 class="m-4">تفاصيل فندق ( {{$TblPropertyBuilding->title}})</h3>
  <br>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#hotel">معلومات العمارة</a>
    </li>
   
    <li class="nav-item">
        <a class="nav-link" href="{{ route('tblPropertyBuilding.apartments', $TblPropertyBuilding->id) }}">
        شقق العمارة 
        </a>
        </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#pictures">  صور العمارة</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#internalFacility">  المرافق الداخلية </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#externalFacility">  المرافق الخارجية </a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content mt-4">
    <div id="hotel" class="container tab-pane active"><br>
      <table class="table table-striped">

    <tbody>
    <tr>
      <th scope="row">اسم العمارة</th>
      <td scope="row">{{ $TblPropertyBuilding->title }}</td>

    </tr>
    <tr>
      <th scope="row">الرمز الخاص</th>
      <td scope="row">{{ $TblPropertyBuilding->unique_code }} </td>
    </tr>
    <tr>
      <th scope="row">عدد الشقق</th>
      <td scope="row">{{ $TblPropertyBuilding->numberofapartment }} </td>
    </tr>
    <tr>
      <th scope="row">العنوان</th>
      <td scope="row">  {{ $TblPropertyBuilding->location }} </td>
    </tr>
    <tr>
      <th scope="row">وقت الإضافة</th>
      <td scope="row">{{ $TblPropertyBuilding->created_on }} </td>
    </tr>
    <tr>
      <th scope="row"> إضافة من قِبل المستخدم </th>
      <td scope="row"><a href="{{ route('tblUsers.show',$TblPropertyBuilding->createdBy->id) }}" ><span class='badge badge-primary'><i class='fa fa-user'></i> {{ $TblPropertyBuilding->createdBy->full_name}} </span> <span class='badge badge-light'><i class='fa fa-phone'></i> {{ $TblPropertyBuilding->createdBy->contact_no}} - {{ $TblPropertyBuilding->createdBy->country_code}}</a></td>
     
    </tr>
    <tr>
      <th scope="row">الحالة</th>
      <td scope="row">
        @if($TblPropertyBuilding->state_id == 1)
            <span class='badge badge-success'>Active</span>
        @elseif($TblPropertyBuilding->state_id == 0)
            <span class='badge badge-danger'>Inactive</span>
        @endif
        </td>
   
    </tr>
    <tr>
    <th scope="row">خط الطول</th>
    <td scope="row"> {{ $TblPropertyBuilding->latitude }} </td>
     
    </tr>
    <tr>
      <th scope="row">خط العرض</th>
      <td scope="row">{{ $TblPropertyBuilding->longitude}}</td> 

    </tr>
 
    </tbody>
  </table>
    </div>
    <div id="pictures" class="container tab-pane fade"><br>
    <div class="tab-pane" id="pictures">
    <form id="bulk-delete-form" method="POST" action="{{ route('pictures.bulkDelete') }}">
    @csrf
    @method('DELETE')
    <a href="{{ route('tblPropertyPictures.addBuildingPicture',$TblPropertyBuilding->id) }}" class="btn btn-primary ">إضافة صور + </a>
    <button type="submit" class="border border-none bg-none float-left" onclick="return confirm('هل أنت متأكد من الحذف؟')"><i class="fa fa-trash text-danger" title="delete image"></i> </button>
    <div class="row mt-4">
        @foreach($pictures as $picture)
        <div class="col-lg-2 col-md-4 col-xs-6 thumb ml-4 mt-4">
            <input type="checkbox" name="pictures[]" value="{{ $picture->id }}" class="form-check-input">
            <a href="{{ asset('storage/' . $picture->image_path) }}" target="_blank">
                <img src="{{ asset('storage/' . $picture->image_path) }}" style="width: 100%; height: 100px; object-fit: cover;" class="zoom img-fluid" alt="{{ $picture->alt_text }}">
            </a>
            @if($picture->is_publish == 1)
            <a href="{{ route('tblPropertyPictures.publication', $picture->id) }}" class='badge badge-success' >Published</a>
            @elseif($picture->is_publish == 0)
            <a href="{{ route('tblPropertyPictures.publication', $picture->id) }}" class='badge badge-danger'>Unpublished</a>
           
            @endif
        </div>
        @endforeach
    </div>
</form>
</div>

    </div>
 
  <div id="internalFacility" class="container tab-pane fade"><br>
  <ul class="list-group">
  <a href="">
        <span> <i class="fa fa-plus pb-4" aria-hidden="true"></i></span>
    </a> 
    @foreach($InternalFacilities as $internal)
    
    <li class="list-group-item">
    <form action="{{ route('BuildinginternalFacility.destroy') }}" method="POST" enctype="multipart/form-data">
    @csrf
               <input  type="hidden"   name="facility_id" value="{{$internal['id']}}">
               <input  type="hidden"   name="id" value="{{$TblPropertyBuilding->id}}">
               {{$internal['name']}}
    <button type="submit"  class="float-left border-0 bg-0" > <i class="fa fa-trash text-danger" title="delete image"></i></button>
    </form>
    @endforeach
  </ul>
    </div>

  <div id="externalFacility" class="container tab-pane fade"><br>
  <ul class="list-group">
  <a href="">
        <span> <i class="fa fa-plus pb-4" aria-hidden="true"></i></span>
    </a> 
    @foreach($ExternalFacilities as $external)
    <li class="list-group-item">
    <form action="{{ route('BuildingexternalFacility.destroy') }}" method="POST" enctype="multipart/form-data">
    @csrf
               <input  type="hidden"   name="facility_id" value="{{$external['id']}}">
               <input  type="hidden"   name="id" value="{{$TblPropertyBuilding->id}}">
               {{$external['name']}}
    <button type="submit"  class="float-left border-0 bg-0" > <i class="fa fa-trash text-danger" title="delete image"></i></button>
    </form> 
  
    @endforeach
  </ul>
    </div>
  </div>
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
@endsection