@php
    $participant = ['No limit', '1 KTP unique 1 for day', '1 phone unique 1 for day', '1 KTP unique on event', '1 phone unique on event'];
@endphp

@extends('layout.default')
@include('layout.filter')

@section('styles')
    <!--begin::Page Vendors Styles(used by this page)-->
    <link href="{{env('STORAGE_URL_VIEW')}}plugins/custom/datatables/datatables.bundle.css?v=7.0.8" rel="stylesheet" type="text/css" />
    <!--end::Page Vendors Styles-->

    <style>
        /*To nowrap text*/
        .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default{
            white-space: nowrap;
        }
        .pagination {
            justify-content: right !important;
        }
    </style>
@endsection

@section('content')
@yield('filter_view')
    <br>
    <div class="card">
        <div class="card-body">
            @include('layout.notifications')
            <!--begin: Datatable-->
            <div class="row">
                <div class="col-2"><b>Brand</b></div>
                <div class="col-5">: {{$detail_event['brand_name']}}</div>
            </div>
            <div class="row">
                <div class="col-2"><b>Product</b></div>
                <div class="col-5">: {{$detail_event['product_name']}}</div>
            </div>

            <div class="row">
                <div class="col-2"><b>Time Start</b></div>
                <div class="col-5">: {{$detail_event['event_time_start'] ? date('d-m-Y H:i', strtotime($detail_event['event_time_start'])) : null}}</div>
            </div>
            <div class="row">
                <div class="col-2"><b>Time End</b></div>
                <div class="col-5">: {{$detail_event['event_time_end'] ? date('d-m-Y H:i', strtotime($detail_event['event_time_end'])) : null}}</div>
            </div>
            <div class="row">
                <div class="col-2"><b>QTY Available</b></div>
                <div class="col-5">: {{$detail_event['event_qty_available']}}</div>
            </div>
            <div class="row">
                <div class="col-2"><b>Method</b></div>
                <div class="col-5">: {{$detail_event['event_method']}}</div>
            </div>
            <br>
            <div style="overflow-x: scroll;white-space:nowrap">
                <table class="table table-bordered table-checkable" id="kt_datatable">
                    <thead>
                    <tr>
                        <th>Status</th>
                        <th>Ticket Number</th>
                        <th>Name</th>
                        <th>ID Card Number</th>
                        <th>Address</th>
                        <th>Phone</th>
                    </tr>
                    </thead>
                    <tbody>
                    @if(!empty($data))
                        @foreach($data as $value)
                            <tr>
                                <td>
                                    @if($value['user_participant_status'] == 'winner')
                                        <span class="label label-success label-inline mr-2">Winner</span>
                                    @elseif($value['user_participant_status'] == 'skip' || $value['user_participant_status'] == 'not unique')
                                        <span class="label label-danger label-inline mr-2">{{$value['user_participant_status']}}</span>
                                    @else
                                        <span class="label label-dark label-inline mr-2">Registered</span>
                                    @endif
                                </td>
                                <td>{{$value['user_participant_ticket_number']}}</td>
                                <td>{{$value['user_participant_name']}}</td>
                                <td>{{$value['user_participant_id_card_number']}}</td>
                                <td>{{$value['user_participant_address']}}</td>
                                <td>{{$value['user_participant_phone']}}</td>
                            </tr>
                        @endforeach
                    @else
                        <tr>
                            <td colspan="10" style="text-align: center">Data Not Available</td>
                        </tr>
                    @endif
                    </tbody>
                </table>
            </div>
            <br>
            <div class="row">
                <div class="col-md-12">
                    @if (!empty($data_paginator))
                        {{ $data_paginator->links('pagination') }}
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <!--begin::Page Vendors(used by this page)-->
    <script src="{{env('STORAGE_URL_VIEW')}}plugins/custom/datatables/datatables.bundle.js?v=7.0.8"></script>
    <!--end::Page Vendors-->
    @yield('filter_script')
    <script>
        rules={
            user_participant_name:{
                display:'Name',
                operator:[
                    ['=','='],
                    ['like','like']
                ],
                opsi:[]
            },
            user_participant_id_card_number:{
                display:'ID Card Number',
                operator:[
                    ['=','='],
                    ['like','like']
                ],
                opsi:[]
            },
            user_participant_address:{
                display:'Address',
                operator:[
                    ['=','='],
                    ['like','like']
                ],
                opsi:[]
            },
            user_participant_phone:{
                display:'Phone',
                operator:[
                    ['=','='],
                    ['like','like']
                ],
                opsi:[]
            },
            user_participant_size:{
                display:'Size',
                operator:[
                    ['=','='],
                    ['like','like']
                ],
                opsi:[]
            }
        };
        var table;
        $(document).ready(function() {
            table = $('#kt_datatable').DataTable({searching: false, "paging": false, ordering: false, dom: 'Bfrtip',
            columnDefs: [{
                                targets: 3,
                                type: 'text',
                                render: function (data, type, row) {
                                if (type === 'export') {
                                    return '\u200C' + data;
                                }
                                return data;
                                }
                        }],
            buttons:    [{
                            extend: 'excelHtml5',
                            text: 'Download Excel',
                            exportOptions: { orthogonal: 'export' },
                        }]
            });
        });
    </script>
@endsection