@extends('layouts.template')

@section('content')
    @include('components.notification')
    <form action="{{ route('voucher.update',$voucher->id) }}" method="POST">
        @method('put')
        @csrf
        <div class="form-group row">
            <div class="col-md-6">
                <label>Member</label>
                <input type="hidden" name="poin" value="0" id="poin">
                <select name="id_customer" id="id_customer" class="form-control select2 @error('id_customer') is-invalid @enderror">
                    <option value="">---Pilih Member (Masukkan Nomer HP)---</option>
                    @if(old('id_customer')=='')
                    <option value='{{$voucher->id_customer}}' data-poin='{{$voucher->poin - $getVoucher + $voucher->price_item}}' selected>{{$voucher->nama}} {{$voucher->phone}}</option>
                    @endif
                </select>
                @error('item_code')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                @enderror
            </div>
            <div class="col-md-6">
                <label>Nominal Voucher</label>
                <input type="number" name="price_item" class="form-control @error('price_item') is-invalid @enderror"
                    placeholder="Nominal Voucher" id="nominal" value="{{ old('price_item',$voucher->price_item) }}">
                    @error('price_item')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                    @enderror
                </div>

        </div>
        <div class="form-group row">
            <div class="col-md-6">
                <label>Deskripsi</label>
                <input type="text" name="item_name" class="form-control @error('item_name') is-invalid @enderror"
                    placeholder="Deskripsi" value="{{ old('item_name',$voucher->item_name) }}">
                    @error('item_name')
                    <div class="invalid-feedback">
                        {{ $message }}
                    </div>
                    @enderror
                </div>
            <div class="col-md-6">
                <label>Cabang</label>
                <select name="id_branch" id="" class="form-control select2">
                    <option value="0" {{$voucher->id_branch == 0 ? 'selected' : ''}}>Semua Cabang</option>
                    @foreach($branch as $item)
                        <option value="{{$item->id}}" {{$voucher->id_branch == $item->id ? 'selected' : ''}}>{{$item->cabang}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="form-group row">
            <div class="col-md-6 mt-2">
                <button type="submit" class="btn btn-primary mr-2"><i class="fa fa-save"></i> Simpan</button>
                <button type="reset" class="btn btn-default"><i class="fa fa-times"></i> Reset</button>
            </div>
            </div>
    </form>
    
@endsection
@push('custom-script')
    <script>
        $(document).ready(function(){
            $("#id_customer").change(function(){
                var poin = $(this).find(':selected').attr('data-poin')
                $("#nominal").val(poin)
                $("#poin").val(poin)
            })
            var poinOld = $('#id_customer').find(':selected').attr('data-poin')
            $("#poin").val(poinOld)
            $("#id_customer").select2({
                minimumInputLength: 10,
                ajax: {
                    url: "{{url('voucher/getMember')}}",
                    dataType: 'json',
                    type: "GET",
                    data: function (term) {
                        return {
                            term: term.term
                        };
                    },
                    processResults: function (data) {
                        return {
                            results: $.map(data, function (item,i) {
                                return {
                                    text: item.phoneNama,
                                    id: item.id,
                                }
                            })
                        };
                    },
                   cache: true                
                }
            });
            $('#id_customer').on('select2:select', function (e) {
                var thisSelect = $(this)
                $.ajax({
                    url: "{{url('voucher/getMember')}}",
                    dataType: 'json',
                    type: "GET",
                    async : false,
                    data: {poin:true,id:thisSelect.val()},
                    success:function(res){
                        thisSelect.find(':selected').attr('data-poin',res[0].poin)
                        $("#id_customer").trigger('change')
                    }
                })
            });
        })
    </script>
@endpush
