@extends('layouts.main')

@section('title', 'Connected OTAs')

@section('css')


@endsection

@section('nav')
    @include('layouts.nav')
@endsection

@section('content')

    <div class="main-body">
        <div class="page-wrapper">
            <div class="page-header">

                <div class="page-header-title">
                    <h3>Connected OTAs</h3>
                </div>

                <div class="page-header-breadcrumb">
                    <ul class="breadcrumb-title">
                        <li class="breadcrumb-item">
                            <a href="{{ url('/') }}">
                                <i class="icofont icofont-home"></i>
                            </a>
                        </li>
                        <li class="breadcrumb-item"><a href="#!">Properties</a>
                        </li>
                        <li class="breadcrumb-item"><a href="#!">OTA</a>
                        </li>
                    </ul>
                </div>

            </div>

            <div class="row m-t-30 m-l-0">

                @if($property->otas)

                    @foreach($property->otas as $key => $ota)

                        @if(!empty($ota->pivot->url))
                            <div class="col-md-2 card prod-view logo_bg" >
                                <a target="_blank" href="{{ $ota->pivot->url }}"><img class="img-responsive ota_logo" src="{{ url("assets/images/$ota->logo_name") }}" alt=""></a>
                            </div>
                        @endif

                    @endforeach
                @else
                    <h4>No OTAs Mapped!</h4>
                @endif

            </div>
        </div>
    </div>


@endsection