@extends('layouts.admin')
@section('content')
@if (session('status'))
<div class="row mb-2">
    <div class="col-lg-12">
        <div class="alert alert-success" role="alert">{{ session('status') }}</div>
    </div>
</div>
@endif
<form method="POST" action="{{ route("admin.luck-draw-datas.massUpdate") }}" enctype="multipart/form-data">
@csrf
    <div class="card">
        <div class="card-header">
            {{ trans('global.edit') }} {{ 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') ? old('lucky_draw_item_id') : $luckDrawData->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.edit') }} {{ 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>
                    @foreach ($luckDrawDatas as $key => $luckDrawData)
                        <tr id="luckDrawData{{ $key }}">
                            <td>
                                <input type="hidden" name="id[]" id="luck_draw_id_{{ $key }}" value="{{ $luckDrawData->id }}">
                                <input inputmode="numeric" pattern="[0-9]*" class="form-control" type="text" name="happy_code[]" id="happy_code" maxlength="5" value="{{ $luckDrawData->happy_code }}">
                            </td>
                            <td>
                                <select class="form-control" name="status[]" id="status_{{ $key }}">
                                    @foreach(App\Models\LuckDrawData::STATUS_SELECT as $key => $label)
                                        <option value="{{ $key }}" {{ old('status', $luckDrawData->status) === (string) $key ? 'selected' : '' }}>{{ $label }}</option>
                                    @endforeach
                                </select>
                            </td>
                        </tr>
                    @endforeach
                    <tr id="luckDrawData{{ $luckDrawDatas->count() }}"></tr>
                </tbody>
            </table>

            <div id="deleted_id_arrays">
                
            </div>

            <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">
        <button class="btn btn-danger" type="submit">
            {{ trans('global.update') }}
        </button>
    </div>
</form>
@endsection

@section('scripts')
<script>
$(document).ready(function(){
    let row_number = {{ $luckDrawDatas->count() }};
    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 > row_number)
        {
            var addRowCount = oldRowCount - row_number;

            for (var i = 0; i < addRowCount; i++) {
                let new_element = '<td><input type="hidden" name="id[]" id="luck_draw_id_'+ row_number +'" value=""><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]').attr('value',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 type="hidden" name="id[]" id="luck_draw_id_'+ new_row_number +'" value=""> <input inputmode="numeric" pattern="[0-9]*" class="form-control" type="text" name="happy_code[]" id="happy_code_'+ new_row_number +'" maxlength="5" value=""></td><td><select class="form-control" name="status[]" id="status_'+ new_row_number +'"><option value="0" selected="selected">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){
        let deleted_id = parseInt($("#luckDrawData" + (row_number - 1)).find("input[type=hidden]").val());
        $('#deleted_id_arrays').append('<input type="hidden" name="deleted_id_array[]" value="'+ deleted_id +'">');
        $("#luckDrawData" + (row_number - 1)).html('');
        row_number--;
      }
    });
});
</script>
@endsection