@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>
    <li class="nav-item">
        <a class="nav-link"   href="#Terms" data-toggle="tab">
              شروط الحجز
        </a>
        </li>
    <li class="nav-item">
        <a class="nav-link" href="#policies" data-toggle="tab">
            السياسات
        </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->city?->name ?? 'N/A' }}</td>
</tr>
<tr>
  <th scope="row">المنطقة</th>
  <td scope="row">{{ $TblPropertyBuilding->zone?->name ?? 'N/A' }}</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 id="map" style="height: 500px;"></div>
    </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 class="tab-pane" id="internalFacility">
    <form id="bulk-delete-form" method="POST" action="{{ route('BuildingInternalFacility.bulkDelete') }}">
    @csrf
    @method('DELETE')
    <a href="{{ route('tblPropertyBuilding.AddInternalFacility', $TblPropertyBuilding->id) }}">
        <span><i class="fa fa-plus pb-4" aria-hidden="true"></i></span>
    </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>
    <ul class="list-group">
        @foreach($InternalFacilities as $internal)

        <li class="list-group-item">
            <input type="checkbox" name="internal[]" value="{{ $internal['id'] }}" class="form-check-input">
            <input  type="hidden"   name="id" value="{{$TblPropertyBuilding->id}}">
            <h6 class="mr-4"> {{$internal['name']}}</h6>
        </li>

        @endforeach
        <ul>
      </form>
      </div>

  <div id="externalFacility" class="container tab-pane fade"><br>
  <form id="bulk-delete-form" method="POST" action="{{ route('BuildingExternalFacility.bulkDeleteExternalFacility') }}">
    @csrf
    @method('DELETE')
    <a href="{{ route('tblPropertyBuilding.AddExternalFacility', $TblPropertyBuilding->id) }}">
        <span><i class="fa fa-plus pb-4" aria-hidden="true"></i></span>
    </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>
    <ul class="list-group">
        @foreach($ExternalFacilities as $external)
        <li class="list-group-item">
            <input type="checkbox" name="external[]" value="{{ $external['id'] }}" class="form-check-input">
            <input  type="hidden"   name="id" value="{{$TblPropertyBuilding->id}}">
            <h6 class="mr-4"> {{$external['name']}}</h6>
        </li>
        @endforeach
        <ul>
  </form>
  </div>

  <div class="tab-pane" id="Terms">
    <p class="font-italic text-black text-right">إضافة شرط للحجز     </p>
  <form action="{{ route('BookingTerms.Buildingstore') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <div class="input-group mb-3 px-2 py-2 rounded-pill  shadow-sm ">
                <input  type="hidden"   name="id" value="{{$TblPropertyBuilding->id}}">
                <input id="upload" type="text"  class="form-control border-0" name="title" placeholder="إضافة شرط للحجز" >
    </div>
       <div class="row m-4">
       <button type="submit" class="col-12 btn btn-primary">حفــظ</button>
      </div>
  </form>
<br>
<form id="bulk-delete-form" method="POST" action="{{ route('bookingTerms.bulkDelete') }}">
    @csrf
    @method('DELETE')
    <div>
    <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>
    <br><br>
    <ul class="list-group">
    @foreach($terms as $term)
        <li class="list-group-item">
            <input type="checkbox" name="titles[]" value="{{ $term['id'] }}" class="form-check-input">
           <span class="mr-4"> {{ $term['title'] }}</span>
        </li>
        @endforeach
    </ul>
</form>
</div>

    <div class="tab-pane pb-3" id="policies">
        <p class="font-italic text-black text-right">إضافة سياسة</p>
        <form action="{{ route('tblPropertyBuilding.storePolicy') }}" method="POST">
            @csrf
            <div class="input-group mb-3 px-2 py-2 rounded-pill  shadow-sm ">
                <input  type="hidden" name="id" value="{{$TblPropertyBuilding->id}}">
                <input id="title" type="text"  class="form-control border-0" name="title" placeholder="إضافة سياسة جديد" >
            </div>
            <div class="row m-4">
                <button type="submit" class="col-12 btn btn-primary">حفــظ</button>
            </div>
        </form>
        <br>
        @if (count($activePolicies) > 0)
            <form id="bulk-delete-form" method="POST" action="{{ route('tblPropertyBuilding.bulkDeletePolicy') }}">
                @csrf
                @method('DELETE')
                <div class="d-flex justify-content-between">
                    <p class="font-italic text-black text-right">السياسات الفعالة</p>
                    <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>
                <br>
                <ul class="list-group">
                    @foreach($activePolicies as $policy)
                        <li class="list-group-item">
                            <input type="checkbox" name="policies[]" value="{{ $policy['id'] }}" class="form-check-input">
                        <span class="mr-4"> {{ $policy['title'] }}</span>
                        </li>
                    @endforeach
                </ul>
            </form>
        @endif

        @if (count($deletedPolicies) > 0)
            <form class="mt-5" id="deleted-policy-bulk-delete-form" method="POST" action="{{ route('tblPropertyBuilding.bulkRestorePolicy') }}">
                @csrf
                <div class="d-flex justify-content-between">
                    <p class="font-italic text-black text-right">أرشيف السياسات</p>

                    <button type="submit" class="border border-none bg-none float-left" onclick="return confirm('هل أنت متأكد من الاسترجاع')"><i class="fas fa-trash-restore-alt text-success" title="delete image"></i> </button>
                </div>
                <br>
                <ul class="list-group">
                    @foreach($deletedPolicies as $policy)
                        <li class="list-group-item">
                            <input type="checkbox" name="policies[]" value="{{ $policy['id'] }}" class="form-check-input">
                            <span class="mr-4"> {{ $policy['title'] }}</span>
                        </li>
                    @endforeach
                </ul>
            </form>
        @endif
    </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>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {

    // Define coordinates
    var latitude = {{ $TblPropertyBuilding->latitude }};
    var longitude = {{ $TblPropertyBuilding->longitude }};
    // Initialize map
    var map = L.map('map').setView([latitude, longitude], 13);
    // Add OpenStreetMap tiles
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    // Add marker
    L.marker([latitude, longitude]).addTo(map)
        .bindPopup(
            `<b>{{ $TblPropertyBuilding->name }}</b><br>Latitude: ${latitude}<br>Longitude: ${longitude}<br>
             <a href="https://www.google.com/maps?q=${latitude},${longitude}" target="_blank">
                Open in Google Maps
             </a>`
        )
        .openPopup();
});
</script>
  @endsection