@extends('layouts/app')
@section('css')
<style type="text/css" nonce="{{ csp_nonce() }}">
  .card-header {
    background-color: white !important;
    color: black !important;
  }
  .w-25 {
    max-width: 250px !important;
  }
  .imagsize{
    max-height:500px;
  }
  .banner-image {
    border-left: 3px solid #ccc;
    border-top: 3px solid #ccc;
    border-right: 3px solid #bbb;
    border-bottom: 3px solid #bbb;
    height: 550px;
    float: left;
    margin-right: 20px;
    border-width: 3px;
    border-style: outset;
    text-align: center;
    /* border: 1px solid #ccc; */
    /* background-color: #f3f3f0; */
    padding: 5px;
    display: block;
    border-radius: 5px;
}
.banner-image:hover {
    border-left: 3px solid #777;
    border-top: 3px solid #777;
    border-right: 3px solid #bbb;
    border-bottom: 3px solid #bbb;
}
</style>
@stop

@section('js')
    <script nonce="{{ csp_nonce() }}">
        $(document).ready(function() {
            $('#banner').change(function() {
                this.form.submit();
            });
        });
    </script>
@endsection

@section('content')
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-4">
                <h4 class="card-title" >Kiosk Content Management</h4>
            </div>
            <div class="col-sm-8">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item">Content Management</li>
                    <li class="breadcrumb-item"><a href="{{route('content-management.kioskBanner')}}">Kiosk Content Management</a></li>
                </ol>
            </div>
        </div>
    </div>
</div>
<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card card-secondary">
                    @if(Session::has('message'))
                    <div class="alert alert-success alert-dismissible">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                        <h5><i class="icon fas fa-check"></i> Success!</h5>
                        {{ Session::get('message') }}
                        @php
                        Session::forget('message');
                        @endphp
                    </div>
                    @endif
                    @if(Session::has('error'))
                    <div class="alert alert-danger">
                        <h5><i class="icon fas fa-x"></i> Errors!</h5>
                        @foreach(Session::get('error') as $err)
                        {{ $err }}<br>
                        @endforeach
                        @php
                        Session::forget('error');
                        @endphp
                    </div>
                    @endif
                    <form name=f_a id="formB" action="{{ route('content-management.kioskBanner') }}" method="get">
                    <div class="card-header">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for="banner">Select Screen:</label>
                                <select id="banner" class="form-control" name="banner">
                                    @foreach($banners as $bn)
                                    <option value="{{ $bn->banner_name }}" @if(in_array($bn->banner_name, $bannerName)) selected="selected" @endif>{{ $bn->banner_description }}</option>
                                    @endforeach
                                </select>                        
                                @if ($errors->has('banner'))
                                <span class="text-danger">{{ $errors->first('banner') }}</span>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        @if(!empty($banner))
                        <div class="banner-image">
                            <a href="{{ route('content-management.kioskBanner.getItem',['banner_name'=>$banner->banner_name]) }}">
                                <h6 class="text-center">{{ $banner->banner_description }}</h6>
                                @php
                                    if(env('S3_ENABLED') && $banner->s3_key) {
                                        $url = Storage::disk('s3')->temporaryUrl($banner->s3_key, now()->addMinutes(decrypt(env('AWS_FILE_EXPIRED_TIME'))));
                                    }
                                    else {
                                        $url = asset('images/').'/'.$banner->wireframe_url;
                                    }
                                @endphp
                                <img src="{{ $url }}" class="imagsize" />
                            </a>                                            
                        </div>
                        @endif
                    </div>
                </form>
            </div>
            </div>
        </div>
    </div>
</div>
</div>
@endsection
@section('js')

@stop