@extends('admin.layouts.master')

@section('contents')
<div class="content-wrapper">
    <div class="content-header row">
        <div class="content-header-left col-md-9 col-12 mb-2">
            <div class="row breadcrumbs-top">
                <div class="col-12">
                    <h2 class="content-header-title float-left mb-0">{{ __('Charge Vouchers') }}</h2>
                    <div class="breadcrumb-wrapper col-12">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('admin.home') }}">{{ __('Home') }}</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('charge-vouchers.index') }}">{{ __('Charge Vouchers') }}</a></li>
                            <li class="breadcrumb-item active">{{ __('Create') }}</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="content-body">
        <section id="basic-input">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">{{ __('Add Voucher') }}</h4>
                        </div>
                        <div class="card-content">
                            <div class="card-body">
                                <form method="POST" action="{{ route('charge-vouchers.store') }}">
                                    @csrf
                                    @include('admin.charge-vouchers.form')
                                    <div class="col-12 mt-1">
                                        <button type="submit" class="btn btn-primary mr-1 mb-1 waves-effect waves-light">
                                            {{ __('Submit') }}
                                        </button>
                                        <a href="{{ route('charge-vouchers.index') }}">
                                            <button type="button" class="btn btn-outline-warning mr-1 mb-1 waves-effect waves-light">
                                                {{ __('Cancel') }}
                                            </button>
                                        </a>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
@endsection

@section('scripts')
<script>
    // Force uppercase
    document.getElementById('voucher-code-field').addEventListener('input', function() {
        var pos = this.selectionStart;
        this.value = this.value.toUpperCase();
        this.setSelectionRange(pos, pos);
    });
    // Generate code button
    document.getElementById('btn-generate-code').addEventListener('click', function() {
        fetch('{{ route('charge-vouchers.generate-code') }}')
            .then(r => r.json())
            .then(data => {
                document.getElementById('voucher-code-field').value = data.code;
            })
            .catch(() => alert('Failed to generate code'));
    });
    // Select2 ajax user search
    $(document).ready(function() {
        $('#voucher-for-user').select2({
            placeholder: '{{ __("Search by name or email...") }}',
            allowClear: true,
            minimumInputLength: 0,
            ajax: {
                url: '{{ route('charge-vouchers.search-users') }}',
                dataType: 'json',
                delay: 300,
                data: function(params) { return { q: params.term || '' }; },
                processResults: function(data) { return { results: data.results }; },
                cache: true
            }
        });
    });
</script>
@endsection