@section('title', 'Manage')
@extends('layouts.admin')

@section('extra-css')
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500&display=swap" rel="stylesheet">
    <style>

        html,body{
            font-family: 'Montserrat', sans-serif;
            font-size: 16px;
            font-weight: 500;
            margin-top: 0;
            padding-top: 0;
            color:#000;
        }
        .wrapper .btn {
            border-radius: 0;
            min-height: 45px;
        }
        .footable-filtering-search{ font-weight: 200; }
        .footable-filtering-search input[type="text"]{ margin-top: 5px;  }
        .table > tbody > tr > td{ vertical-align: middle; }
        .footable-filtering{ display: none;}
        html {
            display: block;
            position: relative;
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            overflow-x: hidden;
            overflow-y: scroll;
            color:#000;
            background-color: #fff;

        }
        .table-striped > tbody > tr:nth-of-type(2n+1) {
            background-color: #eaecf0;
            color:#000;
        }
        .table > tbody > tr > td {
            padding:0 8px;
            border:none;
            font-size: 14px;
        }
        .footable-header{color:#000;}
        .wrapper .btn {
            border-radius: 0;
            min-height: 30px;
        }
        .header{ display: none;}
        .navbar {
            border-radius: 0px;
        }
        .panel-title a{ font-family: 'Montserrat', sans-serif; text-decoration: none;}
        .panel-heading {
            padding: 16px 15px;
            border-bottom: 1px solid transparent;
            border-bottom: 0;
        }
        .alert{ font-size: 16px;}
    </style>
@endsection()

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 text-center">
                <a href="/"> <img src="{{ asset('assets/images/logo-mobile.png') }}" class="img-responsive"/></a>
            </div>
            <div class="col-md-6 text-right">
                <a class="dropdown-item btn btn-success" href="{{ route('logout') }}"
                   onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                    {{ __('Logout') }}
                </a>

                <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                    @csrf
                </form>
            </div>
        </div>
        <div class="row">
            <nav class="navbar navbar-inverse">
                <div class="container-fluid">
                    {{-- <div class="navbar-header">
                         <a class="navbar-brand" href="#">Dashboard </a>
                     </div>--}}
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="/manage">Home</a></li>
                        {{-- <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Manage Prizes
                                    <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#" data-toggle="modal" data-target="#addprize">Add Prizes</a></li>
                                    <li><a href="#" data-toggle="modal" data-target="#importPrizes">Import Prizes</a></li>
                                </ul>
                            </li>--}}
                        <li><a href="{{route('entries.export-all')}}">Export Entries</a></li>

                    </ul>
                </div>
            </nav>
        </div>
    </div>
    <!--begin:: Stats -->


    <div class="container-fluid counter">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                <div class="design">
                    <p class="counter-count">{{ $dailyAvailable }}</p>
                    <p class="design-p">Available Vouchers</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                <div class="customer">
                    <p class="counter-count">{{ $dailyRedeemed }}</p>
                    <p class="customer-p">Redeemed Vouchers </p>
                </div>
            </div>

            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                <div class="customer">
                    <p class="counter-count">{{ $totalEntries }}</p>
                    <p class="customer-p">Total Entries </p>
                </div>
            </div>
            {{-- <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <div class="employees">
                    <p class="counter-count">{{ $allocated }}</p>
                    <p class="employee-p">Allocated</p>
                </div>
            </div>--}}
        </div>
    </div>
    <!--end:: Stats -->
    <hr>
    <!--begin:: Content -->
    <div class="container-fluid">

        @include('layouts.partials.errors')
        @include('layouts.partials.success')

        <div class="row">
            <div class="col-md-12">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#home">Entries</a></li>
                    <li><a data-toggle="tab" href="#menu1">Prizes</a></li>
                </ul>

                <div class="tab-content">
                    <div id="home" class="tab-pane fade in active">
                        <br>
                        @if($entries->isEmpty())
                            NO DATA LOADED
                        @else
                            @foreach($entries as $x)
                                <div class="panel-group" id="accordion">
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h4 class="panel-title">
                                                <a data-toggle="collapse" data-parent="#accordion" href="#collapse{{ $x->id }}">
                                                    {{ $x->winner_name }} {{ $x->winner_surname }}
                                                    @if($x->valid  == "Yes")
                                                        <span class="badge badge-primary pull-right" style="background: limegreen;">Verified</span>
                                                    @elseif($x->valid  == null)
                                                        <span class="badge badge-info pull-right" style="background: blue;">Pending</span>
                                                    @else
                                                        <span class="badge badge-danger pull-right" style="background: #dd042b;">Rejected</span>
                                                    @endif
                                                </a>
                                            </h4>
                                        </div>
                                        <div id="collapse{{ $x->id }}" class="panel-collapse collapse @if($x->id == 1) in @endif">
                                            <div class="panel-body" style="font-size: 14px;">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <p><strong>Full Name:</strong> {{ $x->winner_name }} {{ $x->winner_surname }}</p>
                                                        <p><strong>Email Address:</strong> {{ $x->winner_email }}</p>
                                                        <p><strong>Cell:</strong> {{ $x->winner_cell }}</p>
                                                        <p><strong>Name of Outlet Purchased from:</strong> {{ $x->winner_vet }}</p>
                                                        <p><strong>Cashier:</strong> {{ $x->winner_cashier }}</p>
                                                        <p><strong>Product Purchased:</strong> {{ $x->winner_receipt }}</p>
                                                        <p><strong>Receive Communication:</strong> {{ $x->winner_communicate }}</p>
                                                        <p><strong>Receive Newsletter:</strong> {{ $x->winner_newsletter }}</p>
                                                        <hr>
                                                        <p><strong>Prize Won</strong>
                                                            <br>{{ $x->prize }}</p>
                                                        <hr>
                                                        <p><strong>Voucher Code</strong>
                                                            <br>{{ $x->description }}</p>
                                                    </div>
                                                </div>

                                                <div class="row">
                                                    <div class="col-md-2">
                                                        <a href="{{ env('APP_URL') }}/slips/{{ $x->winner_file }}" target="_blank" class="btn btn-primary" style="background: blue; border:none; font-weight: bold;">View Slip</a>
                                                    </div>
                                                    <div class="col-md-2">
                                                        @if($x->confirmed  == "No")
                                                            <form action="{{route('manage.confirm-prize', $x->id )}}" method="post">
                                                                @csrf
                                                                <input type="hidden" name="confirmed" value="Yes" />
                                                                <input type="hidden" name="valid" value="Yes" />
                                                                <button type="submit" class="btn btn-primary" style="background: limegreen; border:none; font-weight: bold;">Confirm</button>
                                                            </form>
                                                        @else
                                                            <button type="submit" class="btn btn-primary" style="background: limegreen; border:none; font-weight: bold;" disabled>Already Confirmed</button>
                                                        @endif
                                                    </div>
                                                    <div class="col-md-2">
                                                        @if($x->valid == null)
                                                            <form action="{{route('manage.reject-prize', $x->id )}}" method="post">
                                                                @csrf
                                                                <input type="hidden" name="confirmed" value="No" />
                                                                <input type="hidden" name="valid" value="No" />
                                                                <button type="submit" class="btn btn-primary" style="border:none; font-weight: bold;">Reject</button>
                                                            </form>
                                                        @elseif ($x->valid == "Yes")
                                                            <button type="submit" class="btn btn-primary" style="border:none; font-weight: bold;" disabled>Validated</button>
                                                        @else
                                                            <button type="submit" class="btn btn-primary" style="border:none; font-weight: bold;" disabled>Rejected</button>
                                                        @endif
                                                    </div>
                                                    <div class="col-md-6"> &nbsp;</div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>

                                </div>
                            @endforeach
                        @endif

                        {{ $entries->links() }}
                    </div>
                    <div id="menu1" class="tab-pane fade">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>PRIZE</th>
                                <th>STORE</th>
                                <th>Voucher</th>
                                <th>AVAILABLE</th>
                                <th data-type="html" data-breakpoints="xs sm md">-</th>
                            </tr>
                            </thead>
                            <tbody>
                            @if($prizes)
                                @foreach($prizes as $prize)
                                    <tr>
                                        <td>{{ $prize->prize }}</td>
                                        <td>{{ $prize->store }}</td>
                                        <td>{{ $prize->description }}</td>
                                        <td>@if($prize->available == 1) Yes @else No @endif</td>
                                        <td>
                                            -
                                            {{--<a href="{{ route('manage.edit-prize',$prize->id)}}" class="btn btn-default">Edit</a>
                                            <a href="{{ action('ManageController@destroy', $prize->id )}}" class="btn btn-default">Delete
                                                Prize</a>--}}
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="6"><p>The are currently no prizes loaded.</p></td>
                                </tr>
                            @endif

                            </tbody>
                        </table>
                        {{--{{ $prizes->links() }}--}}
                    </div>
                </div>
            </div>
        </div>



        <div class="row m-t-150">&nbsp;</div>
        <div class="row m-t-150">&nbsp;</div>

        <!--end:: Content-->
        @endsection

        @section('extra-js')
            <script type="text/javascript">
                $('.counter-count').each(function () {
                    $(this).prop('Counter',0).animate({
                        Counter: $(this).text()
                    }, {
                        duration: 5000,
                        easing: 'swing',
                        step: function (now) {
                            $(this).text(Math.ceil(now));
                        }
                    });
                });
            </script>
@endsection()