@extends('Admin.Views.edit')

@include('employee::sidebar')

@section('editform')
    @php if (! isset($data)) { $old = old(); if (! empty($old)) { $data = $old; } else { $data=[]; } } @endphp

    @if (isset($data['id']))
        <x-fieldhidden name='id' :data='$data' />
    @endif

    <x-fieldselect
        id="employee_id"
        label='Elegir el empleado a asignar items'
        name='employee_id'
        :data="$data"
        :items='$model_info->employees'
        itemtext='person_name| - Legajo: |docket'
        itemindex='id'
        template="templateSelectEmployees"
        datatags="docket,dni"
    />
    <x-fieldselect
        label='Ítem en el cual agrupar los importes'
        name='item_id'
        :data='$data'
        :items='$model_info->descuentos'
        itemtext='name'
        itemindex='id'
        template='templateSelectSalaryItems'
        datatags='description'
    />

    <div class="row no-padding">
        <div class="col-sm-6">
            <x-fielddate
            label='Desde'
            name='startdate'
            :data='$data'
            autocomplete='off'
            />
        </div>
        <div class="col-sm-6">
            <x-fielddate
            empty="true"
            label='Hasta'
            name='enddate'
            :data='$data'
            autocomplete='off'
            />
        </div>
    </div>

    <div class="table-responsive">
        <table class="table table-stripped">
            <thead>
                <tr>
                    <th>Ítem a agrupar</th>
                    <th style="width:250px;">Tipo</th>
                    <th style="width:150px;">Cantidad</th>
                    <th style="width:120px;">&nbsp;</th>
                </tr>
            </thead>
            <tbody id="body_agregar">
                @if(!empty($data['items']))
                @foreach($data['items'] AS $key => $item)
                <tr>
                    <td>
                        <input type="hidden" data-index="{{ $key }}" name="items[{{ $key }}][id]" value="{{ $item['id'] }}">
                        {{ @$model_info->item_names[$item['id']] }}
                    </td>
                    <td>
                        <input type="hidden" data-index="{{ $key }}" name="items[{{ $key }}][type]" value="{{ $item['type'] }}">
                        {{ ($item['type'] == 1)?'Importe fijo':'Porcentaje del ítem'; }}
                    </td>
                    <td>
                        <input type="hidden" data-index="{{ $key }}" name="items[{{ $key }}][amount]" value="{{ $item['amount'] }}">
                        {{ ($item['type'] == 1)?'$ '.$item['amount']:$item['amount'].'%' }}
                    </td>
                    <td>
                        <a href="#" onclick="deleteDiscount(this); return false;" class="badge badge-danger"><i class="mi mi-delete"></i></a>
                    </td>
                </tr>
                @endforeach
                @endif
            </tbody>
        </table>
    </div>

    <hr>

    <div>
        <div class="alert bg-info text-white" role="alert">
            Seleccione los ítems que desea descontar / reembolsar, asigne si es por porcentaje o importe e indique la cantidad. Luego presione "Agregar".
            <br>
        </div>
        <div class="row px-1">
            <div class="col-sm-6">
                <div class="form-group">
                    <select class="form-control form-control-select2" id="add_item_id">
                        @foreach($model_info->haberes AS $item)
                        <option value="{{ $item->id }}">
                            {{ $item->name }}
                            @if(!empty($item->description))
                            <small>({{ $item->description }})</small>
                            @endif
                        </option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-sm-2">
                <select class="form-control" id="add_type" autocomplete="off">
                    <option value="1">Importe fíjo</option>
                    <option value="2">Porcentaje del ítem</option>
                </select>
            </div>
            <div class="col-sm-2">
                <input type="number" min="0" step="0.01" id="add_amount" class="form-control" autocomplete="off">
            </div>
            <div class="col-sm-2 text-right">
                <button type="button" class="btn btn-sm btn-primary" onclick="addItem(); return false;">Agregar ítem</button>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        function addItem(){
            let item_id = $('#add_item_id').val();
            let item_type = $('#add_type').val();
            let item_amount = $('#add_amount').val();

            let item_name = $('#add_item_id option:selected').html();
            let type_name = (item_type == 1)?'Importe fijo':'Porcentaje del ítem';
            let display_amount = (item_type == 1)?'$ '+item_amount:item_amount+'%';

            // obtener el último indice de los arrays
            let new_key = 1;
            let last_tr = $('#body_agregar tr:last-child');
            if (last_tr.length > 0) {
                let input = last_tr.find('input').first();
                new_key = input.data('index') + 1;
            }
            console.log(new_key);

            let html = '<tr>';
            html +=         '<td>';
            html +=             '<input type="hidden" data-index="'+new_key+'" name="items['+new_key+'][id]" value="'+item_id+'">';
            html +=             item_name;
            html +=         '</td>';
            html +=         '<td>';
            html +=             '<input type="hidden" data-index="'+new_key+'" name="items['+new_key+'][type]" value="'+item_type+'">';
            html +=             type_name;
            html +=         '</td>';
            html +=         '<td>';
            html +=             '<input type="hidden" data-index="'+new_key+'" name="items['+new_key+'][amount]" value="'+item_amount+'">';
            html +=             display_amount;
            html +=         '</td>';
            html +=         '<td>';
            html +=             '<a href="#" onclick="deleteDiscount(this); return false;" class="badge badge-danger"><i class="mi mi-delete"></i></a>';
            html +=         '</td>';
            html +=     '</tr>';

            $('#body_agregar').append(html);
        }

        function deleteDiscount(ele){
            $(ele).parents('tr').remove();
        }
    </script>
@endsection