@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" width="150"/></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">
                <form action="{{ route('manage.search-entries') }}" method="post">
                    @csrf
                    <div class="row">
                        <div class="col-xs-6 col-md-4">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Search by Name" name="keyword" style="border:1px solid #ddd; max-height: 36px;"/>
                                <div class="input-group-btn" >
                                    <button class="btn btn-primary" type="submit" style="margin-top: 0px;">
                                        <span class="glyphicon glyphicon-search"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

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

                <div class="tab-content">
                    <div id="home" class="tab-pane fade in active">
                        @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" || $x->confirmed == "Yes")
                                                <span class="badge badge-primary pull-right" style="background: limegreen;">Verified</span>
                                            @elseif($x->valid  == null || $x->confirmed == 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>Quantity:</strong> {{ $x->winner_quantity }}</p>
                                        <p><strong>Store:</strong> {{ $x->winner_store }}</p>
                                        <p><strong>City:</strong> {{ $x->winner_city }}</p>
                                        <p><strong>Receive Communication:</strong> {{ $x->winner_communicate }}</p>
                                        <p><strong>Downloaded App:</strong> {{ $x->winner_app_downloaded }}</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" || $x->confirmed = null)
                                                <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>
            </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()