@extends('layouts.layout')

@section('body_class', 'nav-md')

<style>
    .custom-button {
            position: relative; /* Menggunakan position relative agar right px berlaku */
            left: 1500px; /* Menggeser tombol ke kanan sebanyak 20px, sesuaikan dengan kebutuhan Anda */
        }
</style>
@section('body_content')
    <div class="container body">
        <div class="main_container">
            @include('includes.sidebar')
            <div class="right_col" role="main">
                <div class="page-title">
                    <div class="title_left">
                        <h3>Probability</h3>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <ol class="breadcrumb">
                            <li><a href="{{ route('dashboard') }}">Home</a></li>
                            <li><a href="{{ route('configuration/gacha_probability') }}">Probability</a></li>
                            <li class="active">List</li>
                        </ol>
                    </div>
                </div>
                <div>
                    <button type="button" class="btn btn-primary edit-button" data-toggle="modal" data-target="#Modal">
                        <i class="fa fa-edit" aria-hidden="true"></i> Edit
                    </button>
                </div>
                
                <div class="row">
                    <div class="container">
                        <div class="table-responsive">
                        <div class="col-xs-12">
                            <div class="x_panel">
                                <button type="button" class="btn btn-primary edit-button custom-button" data-toggle="modal" data-target="#Modal">
                                    <i class="fa fa-edit" aria-hidden="true"></i> Edit
                                </button>
                                <h2>List Activated</h2>
                                <table class="table table-bordered table-striped">
                                        <tr>
                                            <th class="text-center" style="font-size: 12px; vertical-align:middle;" rowspan="2">No</th>
                                            <th class="text-center" style="font-size: 12px; vertical-align:middle;" rowspan="2">Reward Name</th>
                                            <th class="text-center" style="font-size: 12px;" colspan="2">Current</th>
                                        </tr>
                                        <tr> 
                                            {{-- pakai width: 425px; --}}
                                            <th class="text-center" style="font-size: 12px;">active</th>
                                            <th class="text-center" style="font-size: 12px;">Probability</th>
                                        </tr>
                                    <tbody>
                                        @php
                                            $totalPro = 0;
                                        @endphp
                                        @foreach($probabilitys as $index => $data)
                                            @if ($data->isactive == 1)
                                                <tr>
                                                    <td class="text-center" style="font-size: 12px; width: 50px">{{ $index + 1 }}</td>
                                                    <td class="text-center" style="font-size: 12px;">{{ $data->description }}</td>
                                                    <td class="text-center" style="font-size: 12px;">
                                                        <input type="hidden" name="textbox_values[{{ $data->id }}][isactive]" value="0">
                                                        <input type="checkbox" name="textbox_values[{{ $data->id }}][isactive]" id="isactive_{{ $data->id }}" value="1" {{ $data->isactive == 1 ? 'checked' : '' }} class="my_checkbox" onclick="countProb()">
                                                    </td>  
                                                    <td class="text-center" style="font-size: 12px;">
                                                        {{-- <input type="hidden" name="id" value="{{ $data->probability }}" id="editRewardId"> --}}
                                                        <input type="text" name="textbox_values[{{ $data->id }}][probability]" class="probability_value" value="{{ $data->probability }}" onchange="countProb()" size="9">
                                                    </td>
                                                </tr>
                                                @php
                                                    $totalPro += $data->probability;
                                                @endphp
                                            @endif
                                        @endforeach
                                        <tfoot>
                                            <tr>
                                                <td colspan="3" class="text-right">Total:</td>
                                                <td class="text-center">{{ $totalPro . "%" }}</td>
                                            </tr>
                                        </tfoot>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        </div>
                    </div>
                    </div>
                    
                    <div class="col-xs-12">
                        <div class="x_panel">
                            <h2>All List Item</h2>
                            <table class="table table-bordered table-striped">
                                <tr>
                                    <th class="text-center" style="font-size: 12px;">Title</th>
                                    <th class="text-center" style="font-size: 12px;">Description</th>
                                    <th class="text-center" style="font-size: 12px;">Type</th>
                                    <th class="text-center" style="font-size: 12px;">Probability</th>
                                    <th class="text-center" style="font-size: 12px;">Stock</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $totalQty = 0;
                                @endphp
                                @foreach($probabilitys as $data)
                                        <tr>
                                            <td class="text-center" style="font-size: 12px;">{{ $data->title }}</td>
                                            <td class="text-center" style="font-size: 12px;">{{ $data->description }}</td>
                                            <td class="text-center" style="font-size: 12px;">{{ $data->lakuhoki_lookup->name }}</td>
                                            <td class="text-center" style="font-size: 12px;">{{ $data->probability . "%" }}</td>
                                            <td class="text-center" style="font-size: 12px;">{{ $data->qty }}</td>
                                        </tr>
                                        @php
                                            $totalQty += $data->qty;
                                        @endphp
                                @endforeach
                                <tfoot>
                                    <tr>
                                        <td colspan="4" class="text-right">Total:</td>
                                        <td class="text-center">{{ $totalQty }}</td>
                                    </tr>
                                </tfoot>
                            </tbody>
                            </table>
                        </div>
                    </div>
                    @include('includes.footer')
                    @include('pages.lakuhoki.modal.config_show')
                </div>
            </div> 
        </div>     
    </div>
    

 
    
    @endsection

<script>
    const checkboxes = document.querySelectorAll('.myCheckbox');
    const sumElement = document.getElementById('sumElement');

    checkboxes.forEach((checkbox) => {
        checkbox.addEventListener('change', () => {
            let sum = 0;
            checkboxes.forEach((checkbox) => {
                if (checkbox.checked) {
                    sum++;
                }
            });
            sumElement.textContent = sum;
        });
    });

function countProb() {
    let probabilityInputs = document.getElementsByClassName('probability_value');
    let isActiveCheckboxes = document.getElementsByClassName('my_checkbox');
    let totalActive = 0;

    for (let p = 0; p < probabilityInputs.length; p++) {
        if (isActiveCheckboxes[p].checked) {
            totalActive += parseFloat(probabilityInputs[p].value);
        }
    }

    $('#saveChangesButton').prop('disabled', true);
    if (totalActive === 100) {
        $('#saveChangesButton').prop('disabled', false);
    }

    $('#totalProb').html(totalActive.toFixed(4) + '%');
}
</script>