@extends('layout.default')

@section('content')
<div class="card card-custom">
	<form action="{{url('dropzoneevent/store')}}" id="new-brand-form" method="post" enctype="multipart/form-data">
		@csrf
		<div class="card-body">
			@include('layout.notifications')
{{--            <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="{{old('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="{{old('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">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(old('event_type') == 'Surprise Drop') selected @endif>Surprise Drop</option>
                        <option value="Exclusive Release" @if(old('event_type') == 'Exclusive Release') selected @endif>Exclusive Release</option>
			<option value="Giveaway" @if(old('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']}}">{{$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="{{old('event_qty_available')}}" required placeholder="Enter quantity available"/>
                        <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">
                        <option></option>
                        <option value="First Come First Serve" @if(old('event_method') == 'First Come First Serve') selected @endif>First Come First Serve</option>
                        <option value="Raffle" @if(old('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(!empty(old('event_participant_method')) && old('event_participant_method') == 0) selected @endif>No limit</option>
                        <option value="1" @if(old('event_participant_method') == 1) selected @endif>1 KTP unique 1 for day</option>
                        <option value="2" @if(old('event_participant_method') == 2) selected @endif>1 phone unique 1 for day</option>
                        <option value="3" @if(old('event_participant_method') == 3) selected @endif>1 KTP unique on event</option>
                        <option value="4" @if(old('event_participant_method') == 4) selected @endif>1 phone unique on event</option>
		        <option value="5" @if(old('event_participant_method') == 5) selected @endif>1 KTP unique for 1 Brand</option>
                    </select>
                </div>
            </div>
		</div>
		<div class="card-footer">
			<div class="row">
				<div class="col-2">
				</div>
				<div class="col-10">
					<button type="submit" id="btn-submit" class="btn btn-success mr-2">Submit</button>
					<a href="{{url('dropzoneevent')}}"class="btn btn-secondary">Cancel</a>
				</div>
			</div>
		</div>
	</form>
</div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('.select2').select2();
            $('#date_start').datepicker({
                autoclose: true,
                todayHighlight: true,
                format: 'dd-M-yyyy',
                orientation: 'bottom'
            });
            $('#time_start').timepicker();
            $('#date_end').datepicker({
                autoclose: true,
                todayHighlight: true,
                format: 'dd-M-yyyy',
                orientation: 'bottom'
            });
            $('#time_end').timepicker();
        });

        $('.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++) {
                            selectProducts += '<option value="'+products[i]['product_id']+'" >'+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"
                    )
                }
            });
        }
    </script>
@endsection