@extends('layouts.metronic')

@section('content')
    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption font-dark">
                <i class="fa fa-table"></i>
                <span class="caption-subject bold uppercase">Promovări</span>
            </div>            
        </div>

        
        <div class="portlet-body">
            <div class="row">
                <div class="col-md-3"></div>
                <div class="col-md-6">
                    <div style="display: grid;grid-gap: 0px;background-color: #fff;color: #444;grid-template-columns: 170px 170px 170px 170px;grid-template-rows: 170px 170px 170px 170px;">
                        <div style="grid-column: 2 / span 2 ; grid-row: 1;">
                            <img src="{{ asset('layout/00_LogoEngie.jpg') }}" alt="logo"  class="logo-default" />
                        </div>


                        @if ($promotions[0]->photo != null)
                        <div style="grid-column: 1 ; grid-row: 1 / span 2;">
                            <div style="position: relative; color: white;">
                                <a href="{{ route('promotion.edit', 1) }}">
                                    <img src="{{ $promotions[0]->photo }}"  style="width:100%;"/>
                                </a>
                                <div style="position: absolute;  bottom: 5px;  background-color: #00000099;padding-left: 10px;padding-right: 10px;">540 x 1080</div>
                            </div>
                        </div>
                        @else
                            <div style="grid-column: 1 ; grid-row: 1/ span 2">
                                <a href="{{ route('promotion.edit', 1) }}">
                                    <div style="position: relative; background-color: #6b5b95; width: 100%; height: 100%">
                                        <div style="position: absolute;  bottom: 5px;  background-color: #00000099;padding-left: 10px;padding-right: 10px;">540 x 1080</div>
                                    </div>
                                </a>
                            </div>
                        @endif

                        @if ($promotions[1]->photo != null) 
                        <div style="grid-column: 2 ; grid-row: 2;">
                            <div style="position: relative; color: white;">
                                <a href="{{ route('promotion.edit', 2) }}">
                                    <img src="{{ $promotions[1]->photo }}"  style="width:100%;" />
                                </a>
                                <div style="position: absolute;  bottom: 5px;  background-color: #00000099;padding-left: 10px;padding-right: 10px;">540 x 540</div>
                            </div>
                        </div>
                         @else
                            <div style="grid-column: 2 ; grid-row: 2">
                                <a href="{{ route('promotion.edit', 2) }}">
                                    <div style="position: relative; background-color: #feb236; width: 100%; height: 100%">
                                        <div style="position: absolute;  bottom: 5px;  background-color: #00000099;padding-left: 10px;padding-right: 10px;">540 x 540</div>
                                    </div>
                                </a>
                            </div>
                        @endif


                        @if ($promotions[8]->photo != null) 
                        <div style="grid-column: 3 ; grid-row: 2;">
                            <div style="position: relative; color: white;">
                                <a href="{{ route('promotion.edit', 9) }}">
                                    <img src="{{ $promotions[8]->photo }}"  style="width:100%;"/>
                                </a>
                                <div style="position: absolute;  bottom: 5px;  background-color: #00000099;padding-left: 10px;padding-right: 10px;">540 x 540</div>
                            </div>
                        </div>
                        @else
                            <div style="grid-column: 3 ; grid-row: 2">
                                <a href="{{ route('promotion.edit', 9) }}">
                                    <div style="position: relative; background-color: #d64161; width: 100%; height: 100%">
                                        <div style="position: absolute;  bottom: 5px;  background-color: #00000099;padding-left: 10px;padding-right: 10px;">540 x 540</div>
                                    </div>
                                </a>
                            </div>
                        @endif


                        @if ($promotions[2]->photo != null) 
                        <div style="grid-column: 4 ; grid-row: 1 / span 2;">
                            <div style="position: relative; color: white;">
                                <a href="{{ route('promotion.edit', 3) }}">
                                    <img src="{{ $promotions[2]->photo }}" width="170"/>
                                </a>
                                <div style="position: absolute;  bottom: 5px;  background-color: #00000099;padding-left: 10px;padding-right: 10px;">540 x 1080</div>
                            </div>
                        </div>
                        @else
                            <div style="grid-column: 4 ; grid-row: 1 / span 2">
                                <a href="{{ route('promotion.edit', 3) }}">
                                    <div style="position: relative; background-color: #ff7b25; width: 100%; height: 100%">
                                        <div style="position: absolute;  bottom: 5px;  background-color: #00000099;padding-left: 10px;padding-right: 10px;">540 x 540</div>
                                    </div>
                                </a>
                            </div>
                        @endif

                        @if ($promotions[3]->photo != null) 
                        <div style="grid-column: 1 /span 2 ; grid-row: 3 ;">
                            <div style="position: relative; color: white;">
                                <a href="{{ route('promotion.edit', 4) }}">
                                    <img src="{{ $promotions[3]->photo }}" height="170" class="logo-default" />
                                </a>
                                <div style="position: absolute;  bottom: 5px;  background-color: #00000099;padding-left: 10px;padding-right: 10px;">1080 x 540</div>
                            </div>
                        </div>
                        @else
                            <div style="grid-column: 1 /span 2 ; grid-row: 3">
                                <a href="{{ route('promotion.edit', 4) }}">
                                    <div style="position: relative; background-color: #82b74b; width: 100%; height: 100%">
                                        <div style="position: absolute;  bottom: 5px;  background-color: #00000099;padding-left: 10px;padding-right: 10px;">540 x 540</div>
                                    </div>
                                </a>
                            </div>
                        @endif

                        @if ($promotions[4]->photo != null) 
                        <div style="grid-column: 3 /span 2 ; grid-row: 3 ;">
                            <div style="position: relative; color: white;">
                                <a href="{{ route('promotion.edit', 5) }}">
                                    <img src="{{ $promotions[4]->photo }}" height="170" class="logo-default" />
                                </a>
                                <div style="position: absolute;  bottom: 5px;  background-color: #00000099;padding-left: 10px;padding-right: 10px;">1080 x 540</div>
                            </div>
                        </div>
                        @else
                            <div style="grid-column: 3 /span 2 ; grid-row: 3">
                                <a href="{{ route('promotion.edit', 5) }}">
                                    <div style="position: relative; background-color: #c1946a; width: 100%; height: 100%">
                                        <div style="position: absolute;  bottom: 5px;  background-color: #00000099;padding-left: 10px;padding-right: 10px;">540 x 540</div>
                                    </div>
                                </a>
                            </div>
                        @endif

                        @if ($promotions[5]->photo != null) 
                            <div style="grid-column: 1 ; grid-row: 4">
                                <div style="position: relative; color: white;">
                                    <a href="{{ route('promotion.edit', 6) }}">
                                        <img src="{{ $promotions[5]->photo }}" width="170" class="logo-default" />
                                    </a>
                                    <div style="position: absolute;  bottom: 5px;  background-color: #00000099;padding-left: 10px;padding-right: 10px;">540 x 540</div>
                                </div>
                            </div>
                        @else
                            <div style="grid-column: 1 ; grid-row: 4">
                                <a href="{{ route('promotion.edit', 6) }}">
                                    <div style="position: relative; background-color: #b1cbbb; width: 100%; height: 100%">
                                        <div style="position: absolute;  bottom: 5px;  background-color: #00000099;padding-left: 10px;padding-right: 10px;">540 x 540</div>
                                    </div>
                                </a>
                            </div>
                        @endif

                        @if ($promotions[6]->photo != null) 
                            <div style="grid-column: 2 / span 2 ; grid-row: 4 ;">
                                <div style="position: relative; color: white;">
                                    <a href="{{ route('promotion.edit', 7) }}">
                                        <img src="{{ $promotions[6]->photo }}" height="170" class="logo-default" />
                                    </a>
                                    <div style="position: absolute;  bottom: 5px;  background-color: #00000099;padding-left: 10px;padding-right: 10px;">1080 x 540</div>
                                </div>
                            </div>
                        @else
                            <div style="grid-column: 2 / span 2 ; grid-row: 4">
                                <a href="{{ route('promotion.edit', 7) }}">
                                    <div style="position: relative; background-color: #eea29a; width: 100%; height: 100%">
                                        <div style="position: absolute;  bottom: 5px;  background-color: #00000099;padding-left: 10px;padding-right: 10px;">540 x 540</div>
                                    </div>
                                </a>
                            </div>
                        @endif

                        @if ($promotions[7]->photo != null) 
                            <div style="grid-column: 4 ; grid-row: 4 ;">
                                <div style="position: relative; color: white;">
                                    <a href="{{ route('promotion.edit', 8) }}">
                                        <img src="{{ $promotions[7]->photo }}" width="170" class="logo-default" />
                                    </a>
                                    <div style="position: absolute;  bottom: 5px;  background-color: #00000099;padding-left: 10px;padding-right: 10px;">540 x 540</div>
                                </div>
                            </div>
                        @else
                            <div style="grid-column: 4 ; grid-row: 4">
                                <a href="{{ route('promotion.edit', 8) }}">
                                    <div style="position: relative; background-color: #50394c; width: 100%; height: 100%">
                                        <div style="position: absolute;  bottom: 5px;  background-color: #00000099;padding-left: 10px;padding-right: 10px;">540 x 540</div>
                                    </div>
                                </a>
                            </div>
                        @endif                       
                    </div>
                </div>
                <div class="col-md-3"></div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        window.onload = function(e){ 
            CreateTable($("#mainTable"));
        }
    </script>
@stop

@section('menuVariables')
    var menuItemName = "menuPromotions";
    var submenuItemName = "";
@stop