@extends('layouts.frontpages')

@section('content')
    @include('partials.header')

    <div class="page terms">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h1 class="legend">
                        Términos y condiciones <br>
                    </h1>
                </div>
            </div>
            <div class="row">
                @foreach ($terms as $key => $term)
                    @if ($term->category == 'platform')
                        <div class="terms-item col-md-3">
                            @if ($term->type == 'file')
                                <a href="{{ asset('storage/' . $term->description) }}" target="_blank">
                                    <img src="{{ url('storage/' . $term->image) }}" alt="terms" height="350"
                                        class="img-fluid {{ $term->status == 1 || $term->status == 2 ? 'exhausted' : '' }}">
                                </a>
                            @else
                                <a href="" data-toggle="modal" data-target="#bono{{ $key }}">
                                    <img src="{{ url('storage/' . $term->image) }}" alt="terms" height="350"
                                        class="img-fluid {{ $term->status == 1 || $term->status == 2 ? 'exhausted' : '' }}">
                                </a>
                            @endif
                            @if ($term->status == 1 || $term->status == 2)
                                <div class="text-exhausted">{{ $term->status == 1 ? 'AGOTADO' : 'VENCIDO' }}</div>
                            @endif
                        </div>
                    @endif
                @endforeach
            </div>

            <div class="row">
                <div class="col-md-12">
                    <h1 class="legend">
                        Términos y condiciones <br>
                        Catalogo
                    </h1>
                </div>
            </div>
            <div class="row">
                @foreach ($terms as $key => $term)
                    @if ($term->category == 'catalog')
                        <div class="terms-item col-md-3">
                            @if ($term->type == 'file')
                                <a href="{{ asset('storage/' . $term->description) }}" target="_blank">
                                    <img src="{{ url('storage/' . $term->image) }}" alt="terms" height="350"
                                        class="img-fluid {{ $term->status == 1 || $term->status == 2 ? 'exhausted' : '' }}">
                                </a>
                            @else
                                <a href="" data-toggle="modal" data-target="#bono{{ $key }}">
                                    <img src="{{ url('storage/' . $term->image) }}" alt="terms" height="350"
                                        class="img-fluid {{ $term->status == 1 || $term->status == 2 ? 'exhausted' : '' }}">
                                </a>
                            @endif
                            @if ($term->status == 1 || $term->status == 2)
                                <div class="text-exhausted">{{ $term->status == 1 ? 'AGOTADO' : 'VENCIDO' }}</div>
                            @endif
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
    </div>

    @foreach ($terms as $key => $term)
        <!-- Modal bono -->
        <div id="bono{{ $key }}" class="modal fade" role="dialog">
            <div class="modal-dialog modal-lg">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-body">
                        @if ($term->type == 'file')
                            <div class="thumbnail">
                                <object width="100%" height="600px" type="application/pdf"
                                    data="{{ url('storage/' . $term->description) }}">
                                    <p>Términos</p>
                                </object>
                            </div>
                        @else
                            <div class="thumbnail">
                                <img src="{{ url('storage/' . $term->image) }}" width="100%" class="img-responsive"
                                    alt="...">
                                <div class="caption text-left">
                                    <h5>Términos y condiciones</h5>
                                    <hr />
                                    {!! $term->description !!}
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
                <!-- End Modal content-->
            </div>
        </div>
    @endforeach

    @include('partials.footer')
@endsection