@extends('layouts.main')

@section('content')
<!-- CONTENT HEADER -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Vouchers</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{route('home')}}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{route('admin.vouchers.index')}}">Vouchers</a></li>
                    <li class="breadcrumb-item"><a class="text-muted" href="{{route('admin.products.edit' , $voucher->id)}}">Edit</a>
                    </li>
                </ol>
            </div>
        </div>
    </div>
</section>
<!-- END CONTENT HEADER -->

<!-- MAIN CONTENT -->
<section class="content">
    <div class="container-fluid">

        <div class="row">
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">
                            <i class="fas fa-money-check-alt mr-2"></i>Voucher details
                        </h5>
                    </div>
                    <div class="card-body">
                        <form action="{{route('admin.vouchers.update' , $voucher->id)}}" method="POST">
                            @csrf
                            @method('PATCH')

                            <div class="form-group">
                                <label for="memo">Memo <i data-toggle="popover" data-trigger="hover" data-content="Only admins can see this" class="fas fa-info-circle"></i></label>
                                <input value="{{ $voucher->memo }}" placeholder="Summer break voucher" id="memo" name="memo" type="text" class="form-control @error('memo') is-invalid @enderror">
                                @error('memo')
                                <div class="text-danger">
                                    {{$message}}
                                </div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="credits">{{CREDITS_DISPLAY_NAME}} *</label>
                                <input value="{{$voucher->credits}}" placeholder="500" id="credits" name="credits" type="number" step="any" min="0" max="99999999" class="form-control @error('credits') is-invalid @enderror">
                                @error('credits')
                                <div class="text-danger">
                                    {{$message}}
                                </div>
                                @enderror
                            </div>


                            <div class="form-group">
                                <label for="code">Code *</label>
                                <div class="input-group">
                                    <input value="{{$voucher->code}}" placeholder="SUMMER" id="code" name="code" type="text" class="form-control @error('code') is-invalid @enderror" required="required">
                                    <div class="input-group-append">
                                        <button class="btn btn-info" onclick="setRandomCode()" type="button">
                                            Random
                                        </button>
                                    </div>
                                </div>
                                @error('code')
                                <div class="text-danger">
                                    {{$message}}
                                </div>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label for="uses">Uses * <i data-toggle="popover" data-trigger="hover" data-content="A voucher can only be used one time per user. Uses specifies the number of different users that can use this voucher." class="fas fa-info-circle"></i></label>
                                <div class="input-group">
                                    <input value="{{$voucher->uses}}" id="uses" min="1" max="2147483647" name="uses" type="number" class="form-control @error('uses') is-invalid @enderror" required="required">
                                    <div class="input-group-append">
                                        <button class="btn btn-info" onclick="setMaxUses()" type="button">Max
                                        </button>
                                    </div>
                                </div>
                                @error('uses')
                                <div class="text-danger">
                                    {{$message}}
                                </div>
                                @enderror
                            </div>

                            <div class="form-group mb-3">
                                <label for="expires_at">Expires at <i data-toggle="popover" data-trigger="hover" data-content="Timezone: {{ Config::get('app.timezone') }}" class="fas fa-info-circle"></i></label>
                                <div class="input-group date" id="expires_at" data-target-input="nearest">
                                    <input value="{{$voucher->expires_at ? $voucher->expires_at->format('d-m-Y H:i:s') : ''}}" name="expires_at" placeholder="dd-mm-yyyy hh:mm:ss" type="text" class="form-control @error('expires_at') is-invalid @enderror datetimepicker-input" data-target="#expires_at" />
                                    <div class="input-group-append" data-target="#expires_at" data-toggle="datetimepicker">
                                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                    </div>
                                </div>
                                @error('expires_at')
                                <div class="text-danger">
                                    {{$message}}
                                </div>
                                @enderror
                            </div>


                            <div class="form-group text-right">
                                <button type="submit" class="btn btn-primary">
                                    Submit
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>
<!-- END CONTENT -->


<script>
    document.addEventListener('DOMContentLoaded', (event) => {
        $('#expires_at').datetimepicker({
            format: 'DD-MM-yyyy HH:mm:ss',
            icons: {
                time: 'far fa-clock',
                date: 'far fa-calendar',
                up: 'fas fa-arrow-up',
                down: 'fas fa-arrow-down',
                previous: 'fas fa-chevron-left',
                next: 'fas fa-chevron-right',
                today: 'fas fa-calendar-check',
                clear: 'far fa-trash-alt',
                close: 'far fa-times-circle'
            }
        });
    })

    function setMaxUses() {
        let element = document.getElementById('uses')
        element.value = element.max;
        console.log(element.max)
    }


    function setRandomCode() {
        let element = document.getElementById('code')
        element.value = getRandomCode(36)
    }

    function getRandomCode(length) {
        let result = '';
        let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-';
        let charactersLength = characters.length;
        for (let i = 0; i < length; i++) {
            result += characters.charAt(Math.floor(Math.random() *
                charactersLength));
        }
        return result;
    }
</script>


@endsection