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

        .select2-selection__choice {
            background-color: #41b883;
            border: none;
            border-radius: 4px;
            cursor: default;
            float: left;
            margin-right: 5px;
            margin-top: 5px;
            padding: 0 5px;
        }
        .max-dimensions {
            max-height:200px;;max-width:350px
        }
        .cart-size{
            font-size:20px; color:lawngreen;
        }
    </style>
@stop
@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">
                        <div class="card-header">
                            <a href="{{ route('content-management.kioskBanner', ['banner' => $banner->banner_name]) }}"
                                class="card-title cart-size"><i
                                    class="fa fa-chevron-circle-left"></i>&nbsp;&nbsp;Back</a>
                        </div>
                        @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>
                                    <label for="banner">BANNER NAME:
                                        @if (!empty($banner))
                                            {{ strtoupper($banner->banner_description) }}
                                            ({{ $banner->banner_height }} X {{ $banner->banner_width }})
                                        @endif
                                    </label>
                                    <div>
                                        <a href="{{ route('content-management.kioskBanner.addImage', ['banner_name' => $banner->banner_name]) }}"
                                            class="btn btn-success">Add Image/Video</a>
                                        {{-- <a href="{{route('content-management.kioskBanner.addVideo')}}" class="btn btn-success" style="color:white;">Add Video</a>           --}}
                                    </div>
                                </div>
                            </div>
                            <div class="card-body table-responsive p-0">
                                @if (count($items))
                                    <table class="table table-hover text-nowrap">
                                        <thead>
                                            <tr>
                                                <th></th>
                                                <th>Active</th>
                                                <th>Branch Display</th>
                                                <th>Duration</th>
                                                <th>Data</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @php
                                                $max_row = count($items);
                                                $min_row = 0;
                                            @endphp
                                            @foreach ($items as $item)
                                                @php
                                                    $min_row++;
                                                @endphp
                                                <tr>
                                                    <td>
                                                        <a href="{{ route('content-management.kioskBanner.delete', ['guid' => $item->guid]) }}"
                                                            class="btn btn-danger btn-sm">Delete</a>
                                                        <a href="{{ route('content-management.kioskBanner.updateImage', ['banner_name' => $banner->banner_name, 'guid' => $item->guid]) }}"
                                                            class="edit btn btn-primary btn-sm">Edit</a>
                                                        @if ($min_row == 1 && $max_row > 1)
                                                            <a href="{{ route('content-management.kioskBanner.moveDown', ['guid' => $item->guid]) }}"
                                                                class="btn btn-sm"><i class="fa fa-arrow-down"></i></a>
                                                        @endif
                                                        @if ($min_row > 1 && $min_row < $max_row)
                                                            <a href="{{ route('content-management.kioskBanner.moveUp', ['guid' => $item->guid]) }}"
                                                                class="btn btn-sm"><i class="fa fa-arrow-up"></i></a>
                                                            <a href="{{ route('content-management.kioskBanner.moveDown', ['guid' => $item->guid]) }}"
                                                                class="btn btn-sm"><i class="fa fa-arrow-down"></i></a>
                                                        @elseif($min_row == $max_row && $max_row > 1)
                                                            <a href="{{ route('content-management.kioskBanner.moveUp', ['guid' => $item->guid]) }}"
                                                                class="btn btn-sm"><i class="fa fa-arrow-up"></i></a>
                                                        @endif
                                                    </td>
                                                    <td class="w-action">
                                                        <a href="{{ route('content-management.kioskBanner.updateStatus', ['guid' => $item->guid]) }}"
                                                            class="btn btn btn-outline-{{ $item->active ? 'success' : 'danger' }}">
                                                            @if ($item->active)
                                                                <i class="fa fa-lock-open"></i>
                                                            @else
                                                                <i class="fa fa-lock"></i>
                                                            @endif
                                                        </a>
                                                    </td>
                                                    <td>
                                                        @if ($item->all_branch == '1')
                                                            Display all Branches
                                                        @else
                                                            @php
                                                                $branchIds = json_decode($item->allow_branch, true);
                                                            @endphp
                                                            @foreach ($branches as $branch)
                                                                @if (in_array($branch->id, $branchIds))
                                                                    <span
                                                                        class="select2-selection__choice">{{ $branch->code }}</span>
                                                                @endif
                                                            @endforeach
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @if ($item->duration)
                                                            {{$item->duration }} sec
                                                        @endif
                                                    </td>
                                                    <td>
                                                        @php
                                                            $key = array_search($item->guid, array_column($banner_list['banner_list'], 'guid'));
                                                        @endphp
                                                        @if ($key !== false)
                                                            @if ($item->item_type == 'image')
                                                                <img src="{{ $banner_list['banner_list'][$key]['file_url'] }}"
                                                                    class="max-dimensions">
                                                            @else
                                                                <video
                                                                    src="{{ $banner_list['banner_list'][$key]['file_url'] }}"
                                                                    controls autoplay muted
                                                                   class="max-dimensions">
                                                            @endif
                                                        @endif
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                @else
                                    <div class="card-footer">
                                        <h6>No data found</h6>
                                    </div>
                                @endif
                                <div class="card-footer clearfix">
                                    <div class="pagination pagination-sm m-0 float-right">
                                        {{-- {{ $items->links('pagination::bootstrap-4') }} --}}
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection
@section('js')
    <script nonce="{{ csp_nonce() }}">
        $('#branches').select2({
            placeholder: "Select",
            allowClear: true
        });
    </script>
@stop