@extends('frontend.layouts.app')

@section('content')
<style type="text/css">
	.Litheader {
		color: #18AA38;
		font-family: 'Roboto Condensed' ,Arial, sans-serif;
		font-weight: bold;
		font-size: 28px;
		border-bottom: 2px solid #2C6700;
		margin-bottom: 10px;
		letter-spacing: 1px;
	}
	.form-control{
		font-size: 12px!important;
	}
    .gallery {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
        -webkit-column-width: 33%;
        -moz-column-width: 33%;
        column-width: 33%; 
    }
    .gallery .pics {
        -webkit-transition: all 350ms ease;
        transition: all 350ms ease; }
        .gallery .animation {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1); 
    }

    @media (max-width: 450px) {
        .gallery {
            -webkit-column-count: 1;
            -moz-column-count: 1;
            column-count: 1;
            -webkit-column-width: 100%;
            -moz-column-width: 100%;
            column-width: 100%;
        }
    }

    @media (max-width: 400px) {
        .btn.filter {
            padding-left: 1.1rem;
            padding-right: 1.1rem;
        }
    }

    .galley-a-tag{
        font-size: 12px;
        color: #000;
    }
    .galley-a-tag:hover {
        color: #6aad46;
        text-decoration: none;
    }
</style>
<div class="Litheader">
	Flight Schedule
</div>
<div class="row" id="gallery">
	@if(sizeof($data) > 0)
	@foreach ($data as $element)
	<div class="col-md-4" style=" text-align: center; ">
		@if($element->image)
		    {{-- <a href="{{ route('tournamnetFlightScheduleDetails',$element->id) }}" class="">
                
                <!-- <iframe height="153px" width="100%" src="{{ asset($element->image) }}"></iframe>	 -->
            </a> --}}
            <img src="{{ asset($element->image) }}" style="width: 100%;cursor: pointer;height: 180px;">
		@else
            <a href="#">
                <iframe class="click_box" height="180px" width="100%" src="{{ asset($element->attachment_url) }}"></iframe>	
            </a>
        @endif
        <div>
            <a href="#" 
                class="galley-a-tag popup" 
                data-target="#viewFlightSchedule"
                data-toggle="modal"
                data-url="{{ $element->image ? asset($element->image) : asset($element->attachment_url) }}" 
                data-type="{{ $element->image ? 1 : 0 }}"
                data-tournament_name = "{{ $element->tournament_name }}"
            >{{substr($element->tournament_name,0,20) }} <span style="color:red;">...click here</span> </a>

        </div>
        {{-- <a href="{{ route('tournamnetFlightScheduleDetails',$element->id) }}" class="galley-a-tag" style=" display: inline-table; ">{{substr($element->tournament_name,0,20) }}... More</a> --}}
	</div>

  	@endforeach
	@endif
  <!-- Grid column -->
</div>
<div class="modal fade" id="viewFlightSchedule" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                 
                </div>
            </div>
        </div>
    </div>
</div>
<div style="margin-top: -1px;float: right;margin-right: -1px;">
	{{ $data->links() }}
</div>
@endsection

@section('before_body_end')
@endsection

@push('script')
    <script>
        $(document).ready(function () {
            $('#viewFlightSchedule').on('shown.bs.modal', function (e) {
                var height = '500px';
                var type = $(e.relatedTarget).data('type');
                var url = $(e.relatedTarget).data('url');
                var tournament_name = $(e.relatedTarget).data('tournament_name');
                console.log(tournament_name);
                var html = '';
                $('#viewFlightSchedule .modal-title').text('');
                $('#viewFlightSchedule .modal-title').text(tournament_name);
                if(type == 0){
                    html = '<iframe height="'+height+'" width="100%" src="'+url+'"></iframe>';
                }else{
                    html = ' <img src="'+url+'" style="width: 100%;cursor: pointer;height:'+height+' ;">';
                }
                $('#viewFlightSchedule .modal-body .row').empty();
                $('#viewFlightSchedule .modal-body .row').append(html);
            })
        });
    </script>
@endpush