@extends('layout.default')

@section('content')
<div class="card card-custom">
    <div class="card-body">
        <div class="row">
            <div class="col-10"></div>
            <div class="col-2" style="text-align: right">
                @if(empty($detail['event_time_start']))
                    <a data-toggle="confirmation" data-popout="true" class="btn btn-info" onclick="startEvent({{$detail['dropzone_event_id']}})"><i class="ki ki-reload icon-nm"></i>Start Event</a>
                @else
                    <button class="btn btn-info" disabled><i class="ki ki-reload icon-nm"></i>Start Event</button>
                @endif
            </div>
        </div>
        <form action="{{url('dropzoneevent/update', $detail['dropzone_event_id'])}}" id="new-brand-form" method="post" enctype="multipart/form-data">
            @csrf
            @include('layout.notifications')
            <div class="form-group row">
                <label for="example-search-input" class="col-2 col-form-label">Status</label>
                <div class="col-5">
                    <div style="margin-top: 2%">
                        @if(!empty($detail['event_time_start']) && strtotime($detail['event_time_start']) < strtotime(date('Y-m-d H:i:s')) && strtotime($detail['event_time_end']) > strtotime(date('Y-m-d H:i:s')))
                            <span class="label label-success label-inline mr-2">Started</span>
                        @elseif(!empty($detail['event_time_start']) && strtotime($detail['event_time_end']) < strtotime(date('Y-m-d H:i:s')))
                            <span class="label label-danger label-inline mr-2">Ended</span>
                        @else
                            <span class="label label-dark label-inline mr-2">Not Started</span>
                        @endif
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label for="example-search-input" class="col-2 col-form-label">QR Code</label>
                <div class="col-5">
                    <div style="margin-bottom: 2%;margin-top: 2%">
                        @if(!empty($detail['qr_code']))
                            <img src="{{$detail['qr_code']}}" style="width: 120px;height: 120px">
                        @endif
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label for="example-search-input" class="col-2 col-form-label">Code</label>
                <div class="col-6">
                    <input class="form-control" type="text" value="{{$detail['event_unique_code']}}" disabled/>
                </div>
            </div>
{{--            <div class="form-group row">--}}
{{--                <label for="example-search-input" class="col-2 col-form-label">QR Duration <span class="text-danger">*</span></label>--}}
{{--                <div class="col-3">--}}
{{--                    <div class="input-group">--}}
{{--                        <input class="form-control onlynumber" type="text" name="qr_duration" maxlength="10" value="{{$detail['qr_duration']}}" required placeholder="Enter duration QR showing"/>--}}
{{--                        <div class="input-group-append">--}}
{{--                            <span class="input-group-text">minute</span>--}}
{{--                        </div>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
            <div class="form-group row">
                <label for="example-search-input" class="col-2 col-form-label">Duration <span class="text-danger">*</span></label>
                <div class="col-3">
                    <div class="input-group">
                        <input class="form-control onlynumber" type="text" name="event_duration" maxlength="10" value="{{$detail['event_duration']}}" required placeholder="Enter duration event"/>
                        <div class="input-group-append">
                            <span class="input-group-text">minute</span>
                        </div>
                    </div>
{{--                    <small class="form-text text-danger mt-2">--}}
{{--                        ** The recommended duration should be 2 or 3 minutes greater than the QR duration value.--}}
{{--                    </small>--}}
                </div>
            </div>
            <div class="form-group row">
                <label for="example-search-input" class="col-2 col-form-label">Event Time <span class="text-danger">*</span></label>
                <div class="col-3">
                    <input type="text" class="form-control" @if(!empty($detail['event_time_start'])) value="{{date('d-M-Y H:i', strtotime($detail['event_time_start']))}}" @endif disabled>
                </div>
                <div class="col-1" style="text-align: center;margin-top: 1%">
                    -
                </div>
                <div class="col-3">
                    <input type="text" class="form-control" @if(!empty($detail['event_time_end'])) value="{{date('d-M-Y H:i', strtotime($detail['event_time_end']))}}" @endif disabled>
                </div>
            </div>
            <div class="form-group row">
                <label for="example-search-input" class="col-2 col-form-label">Type <span class="text-danger">*</span></label>
                <div class="col-6">
                    <select class="select2 form-control" name="event_type" required data-placeholder="Select type">
                        <option></option>
                        <option value="Surprise Drop" @if($detail['event_type'] == 'Surprise Drop') selected @endif>Surprise Drop</option>
                        <option value="Exclusive Release" @if($detail['event_type'] == 'Exclusive Release') selected @endif>Exclusive Release</option>
                        <option value="Giveaway" @if($detail['event_type'] == 'Giveaway') selected @endif>Giveaway</option>
                    </select>
                </div>
            </div>
            <div class="form-group row">
                <label for="example-search-input" class="col-2 col-form-label">Brand <span class="text-danger">*</span></label>
                <div class="col-6">
                    <select class="select2 form-control" onchange="loadProduct(this.value)" name="brand_id" required data-placeholder="Select brand">
                        <option></option>
                        @foreach($brands as $brand)
                            <option value="{{$brand['brand_id']}}" @if($detail['brand_id'] == $brand['brand_id']) selected @endif>{{$brand['brand_code']}} - {{$brand['brand_name']}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="form-group row">
                <label for="example-search-input" class="col-2 col-form-label">Product <span class="text-danger">*</span></label>
                <div class="col-6">
                    <select class="select2 form-control" name="product_id" id="products" required data-placeholder="Select product">
                        <option></option>
                    </select>
                </div>
            </div>
            <div class="form-group row">
                <label for="example-search-input" class="col-2 col-form-label">Quantity Available <span class="text-danger">*</span></label>
                <div class="col-3">
                    <div class="input-group">
                        <input class="form-control onlynumber" type="text" name="event_qty_available" maxlength="10" value="{{$detail['event_qty_available']}}" required placeholder="Enter quantity available" @if(!empty($detail['event_time_start'])) disabled @endif/>
                        <div class="input-group-append">
                            <span class="input-group-text">qty</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label for="example-search-input" class="col-2 col-form-label">Method <span class="text-danger">*</span></label>
                <div class="col-6">
                    <select class="select2 form-control" name="event_method" required data-placeholder="Select method" @if(!empty($detail['event_time_start'])) disabled @endif>
                        <option></option>
                        <option value="First Come First Serve" @if($detail['event_method'] == 'First Come First Serve') selected @endif>First Come First Serve</option>
                        <option value="Raffle" @if($detail['event_method'] == 'Raffle') selected @endif>Raffle</option>
                    </select>
                </div>
            </div>
            <div class="form-group row">
                <label for="example-search-input" class="col-2 col-form-label">Participant Setting <span class="text-danger">*</span></label>
                <div class="col-6">
                    <select class="select2 form-control" name="event_participant_method" required data-placeholder="Select participant setting">
                        <option></option>
                        <option value="0" @if($detail['event_participant_method'] == 0) selected @endif>No limit</option>
                        <option value="1" @if($detail['event_participant_method'] == 1) selected @endif>1 KTP unique 1 for day</option>
                        <option value="2" @if($detail['event_participant_method'] == 2) selected @endif>1 phone unique 1 for day</option>
                        <option value="3" @if($detail['event_participant_method'] == 3) selected @endif>1 KTP unique on event</option>
                        <option value="4" @if($detail['event_participant_method'] == 4) selected @endif>1 phone unique on event</option>
                        <option value="5" @if($detail['event_participant_method'] == 5) selected @endif>1 KTP unique for 1 Brand</option>
                    </select>
                </div>
            </div>
            <div class="card-footer">
                <div class="row">
                    <div class="col-2">
                    </div>
                    <div class="col-10">
                        @php
                            $condition = '';
                            if(!empty($detail['event_time_start']) && strtotime($detail['event_time_start']) < strtotime(date('Y-m-d H:i:s')) && strtotime($detail['event_time_end']) > strtotime(date('Y-m-d H:i:s'))) {
                                $condition = 'disabled';
                            }
                        @endphp
                        @if($condition == 'disabled')
                            <button type="button" class="btn btn-success mr-2 {{ $condition }}">Submit</button>
                        @else
                            <button type="submit" id="btn-submit" class="btn btn-success mr-2">Submit</button>
                        @endif
                        <a href="{{url('dropzoneevent')}}"class="btn btn-secondary">Cancel</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('.select2').select2();
            loadProduct({{$detail['brand_id']}});
        });

        $('.onlynumber').keypress(function (e) {
            var regex = new RegExp("^[0-9]");
            var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);

            var check_browser = navigator.userAgent.search("Firefox");

            if(check_browser == -1){
                if (regex.test(str) || e.which == 8) {
                    return true;
                }
            }else{
                if (regex.test(str) || e.which == 8 ||  e.keyCode === 46 || (e.keyCode >= 37 && e.keyCode <= 40)) {
                    return true;
                }
            }

            e.preventDefault();
            return false;
        });

        function loadProduct(brand_id){
            const url = "{{url('product/ajax')}}";
            $('#products').empty();
            $.ajax({
                type: "post",
                url  : url,
                data : {
                    '_token' : '{{csrf_token()}}',
                    'brand_id' : brand_id
                },
                success : function(response) {
                    if(response.status == 'success') {
                        $('#products').prop('disabled', false);

                        var products  = response.result;
                        var selectProducts = '<option></option>';

                        for (var i = 0; i < products.length; i++) {
                            var selected = '';
                            if({{$detail['product_id']}} == products[i]['product_id']){
                                selected = 'selected';
                            }
                            selectProducts += '<option value="'+products[i]['product_id']+'" '+selected+'>'+products[i]['product_code']+' - '+products[i]['product_name']+'</option>';
                        }

                        $('#products').html(selectProducts);
                    } else {
                        Swal.fire(
                            "Gagal",
                            response.messages ? response.messages[0] : 'Something went wrong',
                            "error"
                        )
                    }
                },
                error : function() {
                    Swal.fire(
                        "Gagal",
                        "Failed load data",
                        "error"
                    )
                }
            });
        }

        function startEvent(event_id){
            const url = "{{url('dropzoneevent/start-event')}}"
            Swal.fire({
                title: "Are you sure want to start this event?",
                text: "You won't be able to revert this!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "Yes, start it!"
            }).then(function (result) {
                if (result.value) {
                    $.ajax({
                        type: "POST",
                        url: url,
                        data: {
                            '_token': '{{csrf_token()}}',
                            "dropzone_event_id" : event_id
                        },
                        success: function (response) {
                            if (response.status == 'success') {
                                swal.fire({
                                    title: "Updated!",
                                    text: "Event has been started.",
                                    icon: "success",
                                    timer: 900,
                                    showConfirmButton:false,
                                    confirmButtonText: false
                                }).then(function () {
                                    window.location.href = "{{url('dropzoneevent/detail')}}/"+event_id;
                                });
                            } else {
                                Swal.fire(
                                    "Failed!",
                                    response.messages ? response.messages[0] : 'Something went wrong',
                                    "error"
                                )
                            }
                        },
                        error: function () {
                            Swal.fire(
                                "Failed!",
                                "Failed delete data",
                                "error"
                            )
                        }
                    });
                }
            });
        }
    </script>
@endsection