@extends('admin.layouts.master')

@section('title','Showings')

@section('content')
    <div class="container-fluid">
        <div class="row justify-content-center p-10 m-t-15">
            <div class="col-12">
                <h4>Table</h4>
                <div class="search-field mt-4">
                  <form action="{{ route('admin.showing.index') }}" method="get">
                    @csrf
                    <div class="d-flex justify-content-center align-items-center my-1">
                      <input name="keyword" type="search" class="col-8 rounded p-2 border border-dark mx-2" placeholder="search.."/>
                      <button type="submit" class="btn btn-primary text-white col-1 p-2 mx-2">
                        <i class="fa fa-search mx-1"></i>search
                      </button>
                    </div>
                  </form>
                </div>
                <div class="d-flex justify-content-end align-items-center my-4 py-4">
                  <form class="d-flex justify-content-center align-items-center" action="{{route('admin.showing.destroy','x')}}" method="post">
                    @csrf
                    @method('DELETE')
                    <input type="text" name="ids" id="idsArray" hidden>
                    <div>
                      <input type="checkbox" id="selectAll"/>
                      <label class="mb-0" for="selectAll" >Select All</label>
                    </div>
                    <div>
                      <button type="submit" class="btn btn-primary text-white p-2 mx-2" id="dis">
                        <i class="fa fa-trash mx-1"></i>Delete All
                      </button>
                    </div>
                  </form>
                </div>
                <table class="table table-responsive">
                    <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Agent ID</th>
                        <th scope="col">Property ID</th>
                        <th scope="col">Method</th>
                        <th scope="col">Name</th>
                        <th scope="col">Email</th>
                        <th scope="col">Mobile</th>
                        <th scope="col">Message</th>
                        <th scope="col">Date</th>
                        <th scope="col">Time</th>
                        <th scope="col">Date2</th>
                        <th scope="col">Time2</th>
                        <th scope="col">Created At</th>
                      <th scope="col">Action</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($showings as $showing)
                        <tr>
                            <th scope="row">{{$loop->iteration}}</th>
                            <td>{{$showing->agent_id}}</td>
                           @php
    $property = \App\Property::find($showing->property_id);
    $parent = $property?->property_for === 'Rent' ? 'Rent' : ($property ? 'Sale' : null);
@endphp
<td>
    @if($property && $parent)
        <a target="_blank" href="{{ route('site.property-details', ['parentSlug' => $parent, 'slug' => $property->slug]) }}">
            {{ $showing->property_id }}
        </a>
    @else
        {{ $showing->property_id }}
    @endif
</td>

                            <td>{{$showing->method}}@if($showing->method == 'virtual')<br>{{ $showing->methodType }}<br>{{ $showing->methodTypeData }}@endif</td>
                            <td>{{$showing->name}}</td>
                            <td>{{$showing->email}}</td>
                            <td>{{$showing->mobile}}</td>
                            <td>{{$showing->message}}</td>
                            <td>{{$showing->date}}</td>
                            <td>{{$showing->time}}</td>
                            <td>{{$showing->date2}}</td>
                            <td>{{$showing->time2}}</td>
                            <td>{{$showing->created_at->format('d-m-Y')}}</td>
                            <td class="px-0">
                                <div class="d-flex justify-content-around align-items-center">
                                    <input type="checkbox" class="checkDel" id="{{ $showing->id }}" value="{{ $showing->id }}"/>
                                    <a href="{{route('admin.showing.edit', $showing->id)}}"><i class="fas fa-pencil"></i></a>
                                    <form class="delete-form" action="{{route('admin.showing.destroy', $showing->id)}}" method="post">
                                        @method('DELETE')
                                        @csrf
                                      <button class="btn btn-white-lg-outline border-0 btn-color-blue" ><i class="fa fa-trash"></i></button>
                                    </form>
                                </div>
                                @if($showing->status == 'Not Read')
                                <div>
                                    <a href="{{route('admin.showing.markAsRead', $showing->id)}}" class="btn btn-success text-white px-1"><small>Mark As Read</small></a>
                                </div>
                                @else
                                <div>
                                    <p class="text-success font-weight-bold small">Read</p>
                                </div>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
                    {{$showings->links()}}
            </div>
        </div>
    </div>
@endsection
@section('js')
<script>
  let arr = [];
  let all = false;
  $('#dis').attr('disabled',true);
  $(document).on('click','.checkDel',function(){
    var item = $(this).val();
    if(arr.includes(item)){
      arr = arr.filter(e => e !== item)
    }else{
      arr.push(item);
    }
    $('#idsArray').val(arr);
    if(arr.length > 1){
      $('#dis').attr('disabled', function(_, attr){ return false});
    }else{
      $('#dis').attr('disabled', function(_, attr){ return true});
    }
  });
  $(document).on('change','#selectAll',function(){
    all==false? all = true : all = false;
    var items = $('.checkDel');
    items.each(element => {
      if(arr.includes(items[element].value) == false && all == true){
        $('#'+items[element].value).click();
      }
      if(arr.includes(items[element].value) == true && all == false){
        $('#'+items[element].value).click();
      }
    });
    console.log(arr);
  });
</script>
@endsection