@extends('layouts/gnr_layout')
@section('title', '| Transaction Time Schedule')
@section('content')
<div class="row add-data-form">
    <div class="col-md-12">
        <div class="col-md-10 col-md-offset-1 fullbody">
            <div class="panel panel-default panel-border" style="background-color:#708090;">
                <div class="panel-heading" style="padding-bottom:0px">
                    <h3 style=" text-align: center; font-family: Antiqua; letter-spacing: 2px; color: white;"> Transaction Time Schedule</h3>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-12">
                            {!! Form::open(['url' => '']) !!}
                            {!! Form::hidden('level', $level, []) !!}
                            {!! Form::hidden('nameList', $nameList->pluck('id'), []) !!}
                            {!! Form::hidden('effectiveDate', $effectiveDate, []) !!}
                            <div class="tab-content">
                                <div id="bankAccount" class="tab-pane active">
                                    <div class="form-group">
                                        <table id="trxTimeSlot" class="table">
                                            <thead>
                                                <tr>
                                                    <th style="width:10%;">{{$level}}</th>
                                                    <th style="width:15%;">From</th>
                                                    <th style="width:15%;">To</th>
                                                    <th style="width:15%;">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($nameList as $levelName)
                                                    @php
                                                        $rowspan = isset($previousData[$levelName->id]) ? count(json_decode($previousData[$levelName->id]->timeSlots)) : 1;
                                                        $data = isset($previousData[$levelName->id]) ? json_decode($previousData[$levelName->id]->timeSlots) : null;
                                                    @endphp
                                                    <tr class="{{$levelName->id}}" data-levelName="{{$levelName->name}}">
                                                        <td rowspan="{{$rowspan}}" class="levelName" style="color:black;text-align: left;">{{$levelName->name}}</td>
                                                        @if (!empty($data))
                                                            @for ($i = 0; $i < $rowspan; $i++)
                                                                <td><input class="text-center form-control" type="time" style="color:black;" value="{{$data[$i]->fromTime}}" name="{{$levelName->id}}[from][]"></td>
                                                                <td><input class="text-center form-control" type="time" style="color:black;" value="{{$data[$i]->toTime}}" name="{{$levelName->id}}[to][]"></td>
                                                                <td class="text-center">
                                                                    <i class="fa fa-plus-square addRow" style=" color:black; font-size: 26px;"></i>
                                                                    &nbsp; &nbsp;
                                                                    <i class="fa fa-minus-square removeRow" style=" color:black; font-size: 26px;"></i>
                                                                </td></tr>
                                                            @endfor
                                                        @else
                                                        <td><input class="text-center form-control" type="time" style="color:black;" name="{{$levelName->id}}[from][]"></td>
                                                        <td><input class="text-center form-control" type="time" style="color:black;" name="{{$levelName->id}}[to][]"></td>
                                                        <td class="text-center">
                                                            <i class="fa fa-plus-square addRow" style=" color:black; font-size: 26px;"></i>
                                                            &nbsp; &nbsp;
                                                            <i class="fa fa-minus-square removeRow" style=" color:black; font-size: 26px;"></i>
                                                        </td>
                                                        @endif
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <td colspan="18">
                                                        <input id="submit" class="btn btn-primary text-uppercase pull-right" type="submit" value="Submit">
                                                    </td>
                                                </tr>
                                            </tfoot>
                                        </table>
                                        {!! Form::close() !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function () {
    // Add row event
    $(document).on('click', '.addRow', function () {
        var row = $(this).closest('tr');
        var rowClassName  = row.attr('class');
        var firstRowWithClass = $('#trxTimeSlot tr.' + rowClassName ).first();
        var cell = firstRowWithClass.find('td:first');
        console.log(rowClassName);
        var clone = row.clone();
        if (parseInt(cell.attr('rowspan')) == 1) {
            clone.find('td:first').remove();
        }
        clone.insertAfter(row);
        updateRowspan(cell);
    });

    function updateRowspan(cell) {
        var currentRowspan = parseInt(cell.attr('rowspan')) ;
        cell.attr('rowspan', currentRowspan + 1); // Increase rowspan
    }

    // Remove row event
    $(document).on('click', '.removeRow', function () {
        var row = $(this).closest('tr');
        var rowClassName  = row.attr('class'); console.log(row);
        
        var firstRowWithClass = $('#trxTimeSlot tr.' + rowClassName ).first();
        var cell = firstRowWithClass.find('td:first');
        if (parseInt(cell.attr('rowspan')) <= 1) {
            return; // Don't remove the row if it's the only one remaining
        }
        // row.remove();
        // decreaseRowspan(cell);
    });
    
    // Function to decrease rowspan for the correct zone cell
    function decreaseRowspan(cell) {
        var currentRowspan = parseInt(cell.attr('rowspan')) || 1;
        if (currentRowspan > 1) {
            cell.attr('rowspan', currentRowspan - 1); // Decrease rowspan
        }
    }

    $('form').submit(function(event) {
        event.preventDefault();
        var formData = new FormData(this);
        $.ajax({
            type: 'post',
            url: "{{ route('trxTimeSlot.store') }}",
            data: formData,
            contentType: false,
            cache: false,
            dataType: 'json',
            processData: false,
            success: function(data) {
                if (data.errors) {
                } else {
                    if(data.responseTitle == "Success!"){
                        toastr.success(data.responseText, data.responseTitle, opts);
                        setTimeout(function(){
                            window.location.href = "{{ route('trxTimeSlot.filter') }}";
                        }, 2000);
                    }else{
                        toastr.warning(data.responseText, data.responseTitle, opts);
                    }
                }
            },
            error: function(_response) {
                // Handle error
                alert(_response.errors);
            }
        });
    });
});


</script>




@endsection