@extends('layouts.admin')
@section('content')

<form method="POST" action="{{ route("admin.luck-draw-datas.store") }}" enctype="multipart/form-data">
@csrf
    <div class="card">
        <div class="card-header">
            {{ trans('global.create') }} {{ trans('cruds.luckDrawData.title_singular') }}
        </div>
        <div class="card-body">
            <div class="form-group">
                <label class="required" for="lucky_draw_item_id">{{ trans('cruds.luckDrawData.fields.lucky_draw_item') }}</label>
                <select class="form-control select2 {{ $errors->has('lucky_draw_item') ? 'is-invalid' : '' }}" name="lucky_draw_item_id" id="lucky_draw_item_id" required>
                    @foreach($lucky_draw_items as $id => $entry)
                        <option value="{{ $id }}" {{ old('lucky_draw_item_id') == $id ? 'selected' : '' }}>{{ $entry }}</option>
                    @endforeach
                </select>
                @if($errors->has('lucky_draw_item'))
                    <div class="invalid-feedback">
                        {{ $errors->first('lucky_draw_item') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.luckDrawData.fields.lucky_draw_item_helper') }}</span>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            {{ trans('global.create') }} {{ trans('cruds.luckDrawData.fields.happy_code') }}
        </div>
        <div class="card-body">
            <table class="table" id="luck_draw_datas_table">
                <thead>
                    <tr>
                        <th>{{ trans('cruds.luckDrawData.fields.happy_code') }}</th>
                        {{-- <th>{{ trans('cruds.luckDrawData.fields.is_used') }}</th> --}}
                        <th>{{ trans('cruds.luckDrawData.fields.status') }}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr id="luckDrawData0">
                        <td>
                            <input inputmode="numeric" pattern="[0-9]*" class="form-control @error('happy_code.0') is-invalid @enderror" type="text" name="happy_code[]" id="happy_code" value="{{ old('happy_code.0') }}" maxlength="5">
                            {{-- <input class="form-control {{ $errors->has('happy_code') ? 'is-invalid' : '' }}" type="text" name="happy_code[]" id="happy_code" value="{{ old('happy_code', '') }}" required> --}}
                        </td>
                        <td>
                            <select class="form-control" name="status[]" id="status">
                            {{-- <select class="form-control {{ $errors->has('status') ? 'is-invalid' : '' }}" name="status[]" id="status" required> --}}
                                @foreach(App\Models\LuckDrawData::STATUS_SELECT as $key => $label)
                                    <option value="{{ $key }}">{{ $label }}</option>
                                @endforeach
                            </select>
                        </td>
                    </tr>
                    <tr id="luckDrawData1"></tr>
                </tbody>
            </table>

            <div class="row">
                <div class="col-md-12">
                    <button id="add_row" type="button" class="btn btn-default pull-left">+ Add Row</button>
                    <button id='delete_row' type="button" class="pull-right btn btn-danger">- Delete Row</button>
                </div>
            </div>
        </div>
    </div>
            
    {{-- <div class="form-group">
        <label class="required" for="happy_code">{{ trans('cruds.luckDrawData.fields.happy_code') }}</label>
        <input class="form-control {{ $errors->has('happy_code') ? 'is-invalid' : '' }}" type="text" name="happy_code" id="happy_code" value="{{ old('happy_code', '') }}" required>
        @if($errors->has('happy_code'))
            <div class="invalid-feedback">
                {{ $errors->first('happy_code') }}
            </div>
        @endif
        <span class="help-block">{{ trans('cruds.luckDrawData.fields.happy_code_helper') }}</span>
    </div>
    <div class="form-group">
        <label class="required">{{ trans('cruds.luckDrawData.fields.is_used') }}</label>
        <select class="form-control {{ $errors->has('is_used') ? 'is-invalid' : '' }}" name="is_used" id="is_used" required>
            <option value disabled {{ old('is_used', null) === null ? 'selected' : '' }}>{{ trans('global.pleaseSelect') }}</option>
            @foreach(App\Models\LuckDrawData::IS_USED_SELECT as $key => $label)
                <option value="{{ $key }}" {{ old('is_used', '0') === (string) $key ? 'selected' : '' }}>{{ $label }}</option>
            @endforeach
        </select>
        @if($errors->has('is_used'))
            <div class="invalid-feedback">
                {{ $errors->first('is_used') }}
            </div>
        @endif
        <span class="help-block">{{ trans('cruds.luckDrawData.fields.is_used_helper') }}</span>
    </div>
    <div class="form-group">
        <label class="required">{{ trans('cruds.luckDrawData.fields.status') }}</label>
        <select class="form-control {{ $errors->has('status') ? 'is-invalid' : '' }}" name="status" id="status" required>
            <option value disabled {{ old('status', null) === null ? 'selected' : '' }}>{{ trans('global.pleaseSelect') }}</option>
            @foreach(App\Models\LuckDrawData::STATUS_SELECT as $key => $label)
                <option value="{{ $key }}" {{ old('status', '1') === (string) $key ? 'selected' : '' }}>{{ $label }}</option>
            @endforeach
        </select>
        @if($errors->has('status'))
            <div class="invalid-feedback">
                {{ $errors->first('status') }}
            </div>
        @endif
        <span class="help-block">{{ trans('cruds.luckDrawData.fields.status_helper') }}</span>
    </div> --}}

    <div class="form-group">
        <button class="btn btn-danger" type="submit">
            {{ trans('global.save') }}
        </button>
    </div>
</form>
@endsection

@section('scripts')
<script>
$(document).ready(function(){
    let row_number = 1;
    let error_happy_code_array = [];
    let oldInput = {!! json_encode(session()->getOldInput()) !!};

    @if ($errors->has('happy_code.*'))
        let errors = {!! json_encode($errors->get('happy_code.*')) !!};
        let errorsRow = [];
        $.each(errors,function(index,element){
            errorsRow.push(Number(index.substr(index.length - 1)));
        });
        var errorsLength = Object.keys(errors).length;
    @endif

    //GET PREVIOUS OLD INPUT
    if(Object.keys(oldInput).length !== 0)
    {
        var oldRowCount = oldInput.happy_code.length;
        var oldInputHappyCode = oldInput.happy_code;
        var oldInputStatus = oldInput.status;

        //PARSE value into integer
        oldInputStatus = oldInputStatus.map(function(x){
            return Number(x);
        });

        if(oldRowCount > 1)
        {   
            var addRowCount = oldRowCount - 1;

            for (var i = 0; i < addRowCount; i++) {
                let new_element = '<td><input inputmode="numeric" pattern="[0-9]*" class="form-control" type="text" name="happy_code[]" id="happy_code" maxlength="5" value=""></td><td> <select class="form-control" name="status[]" id="status"><option value="0">Lose</option><option value="1">Win</option> </select></td>';
                $('#luckDrawData' + row_number).html(new_element).find('td:first-child');
                $('#luck_draw_datas_table').append('<tr id="luckDrawData' + (row_number + 1) + '"></tr>');
                row_number++;
            }

            $.each(oldInputHappyCode,function(index,element){
                //SET VALUE FOR HAPPY CODE
                $('#luckDrawData' + index).find('td:first-child').find('input[type=text]').val(element);
                //SET VALUE FOR STATUS
                $('#luckDrawData' + index).find('td:first-child').next().find('select').val(oldInputStatus[index]);
            });

            //SET ERROR VALUE CODE
            $.each(errorsRow, function(index,element){
                $('#luckDrawData' + element).find('td:first-child').find('input[type=text]').addClass('is-invalid');
            });
        }
    }

    $("#add_row").click(function(e){
      e.preventDefault();
      let new_row_number = row_number - 1;
      let new_element = '<td><input inputmode="numeric" pattern="[0-9]*" class="form-control" type="text" name="happy_code[]" id="happy_code" maxlength="5" value=""></td><td> <select class="form-control" name="status[]" id="status"><option value="0">Lose</option><option value="1">Win</option> </select></td>';
      $('#luckDrawData' + row_number).html(new_element).find('td:first-child');
      $('#luck_draw_datas_table').append('<tr id="luckDrawData' + (row_number + 1) + '"></tr>');
      row_number++;
    });

    $("#delete_row").click(function(e){
      e.preventDefault();
      if(row_number > 1){
        $("#luckDrawData" + (row_number - 1)).html('');
        row_number--;
      }
    });
});
</script>
@endsection