@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>      

            <form method="POST" action="{{ route('promotions') }}"> 
                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                <div class="form-group row">
                    <div class="col-xs-1"></div>
                    <div class="col-xs-1">
                        
                    </div>
                    <div class="col-xs-4" style="display: table-cell;vertical-align: middle;height: 50px;">      
                        <label style="display: flex;align-items: center;" for="terminal_group_id">Grup Terminale</label>
                        <select id="terminal_group_id" name="terminal_group_id" class="form-control" onchange="this.form.submit()">
                            @foreach ($groups as $group)
                                <option value="{{ $group->id }}" {{($group_id == $group->id)?"selected":""}}>{{ $group->name }}</option>
                            @endforeach                                    
                        </select>
                    </div>
                </div>      
            </form> 
        </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.png') }}" width="340" 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 (1)</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 (1)</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(2)</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 (2)</div>
                                    </div>
                                </a>
                            </div>
                        @endif


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


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

                        @if ($promotions[4]->photo != null) 
                        <div style="grid-column: 1 /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(5)</div>
                            </div>
                        </div>
                        @else
                            <div style="grid-column: 1 /span 2 ; grid-row: 3">
                                <a href="{{ route('promotion.edit', 5) }}">
                                    <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(5)</div>
                                    </div>
                                </a>
                            </div>
                        @endif

                        @if ($promotions[5]->photo != null) 
                        <div style="grid-column: 3 /span 2 ; grid-row: 3 ;">
                            <div style="position: relative; color: white;">
                                <a href="{{ route('promotion.edit', 6) }}">
                                    <img src="{{ $promotions[5]->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 (6)</div>
                            </div>
                        </div>
                        @else
                            <div style="grid-column: 3 /span 2 ; grid-row: 3">
                                <a href="{{ route('promotion.edit', 6) }}">
                                    <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 (6)</div>
                                    </div>
                                </a>
                            </div>
                        @endif

                        @if ($promotions[6]->photo != null) 
                            <div style="grid-column: 1 ; grid-row: 4">
                                <div style="position: relative; color: white;">
                                    <a href="{{ route('promotion.edit', 7) }}">
                                        <img src="{{ $promotions[6]->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 (7)</div>
                                </div>
                            </div>
                        @else
                            <div style="grid-column: 1 ; grid-row: 4">
                                <a href="{{ route('promotion.edit', 7) }}">
                                    <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 (7)</div>
                                    </div>
                                </a>
                            </div>
                        @endif

                        @if ($promotions[7]->photo != null) 
                            <div style="grid-column: 2 / span 2 ; grid-row: 4 ;">
                                <div style="position: relative; color: white;">
                                    <a href="{{ route('promotion.edit', 8) }}">
                                        <img src="{{ $promotions[7]->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 (8)</div>
                                </div>
                            </div>
                        @else
                            <div style="grid-column: 2 / span 2 ; grid-row: 4">
                                <a href="{{ route('promotion.edit', 8) }}">
                                    <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 (8)</div>
                                    </div>
                                </a>
                            </div>
                        @endif

                        @if ($promotions[8]->photo != null) 
                            <div style="grid-column: 4 ; grid-row: 4 ;">
                                <div style="position: relative; color: white;">
                                    <a href="{{ route('promotion.edit', 9) }}">
                                        <img src="{{ $promotions[8]->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 (9)</div>
                                </div>
                            </div>
                        @else
                            <div style="grid-column: 4 ; grid-row: 4">
                                <a href="{{ route('promotion.edit', 9) }}">
                                    <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 (9)</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