@extends('layouts.master')
@section('title') Edit Pot @endsection

@section('css')
<!-- Select2 css-->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" type="text/css" />
<style>
    @media(min-width: 768px){
    .mt-m-29{
        margin-top: 29px;
    }
}
</style>
@endsection

@section('content')
<!-- Breadcrumb Trail -->
@component('components.breadcrumb')
@slot('li_1')
Pots
@endslot
@slot('title')
Edit
@endslot
@endcomponent

<!-- Session Messages -->
@include('partials.session')

<!-- Add Form -->
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h1 class="card-title mb-0">Edit Pot</h1>
            </div>
            <div class="card-body">
                <div class="row">
                    <form method="POST" action="{{ route('jackpot.update') }}" enctype="multipart/form-data" class="jackpot-form">
                        @csrf
                        <input type="hidden" name="id" value="{{encrypt($item->id)}}">
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <div class="form-check form-switch form-switch-lg" dir="ltr">
                                    <input type="checkbox" class="form-check-input" name="active" id="autoRenew" {{$item->is_active === 1 ? 'checked' : ''}}>
                                    <label class="form-check-label" for="autoRenew">Active</label>
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="title" class="form-label">Title</label>
                                <input required type="text" class="form-control" name="title" value="{{$item->title}}" placeholder="Title" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label" for="item_picked">Item to be purchased</label>
                                <select class="form-control" name="item_picked" required>
                                    <option value="">Select an asset</option>
                                    @foreach($assets as $asset)
                                        <option value="{{ $asset->id }}" {{$asset->id === $item->item_to_be_purchased ? 'selected' : ''}}>{{ $asset->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Start Datetime (EST)</label>
                                {{-- <input type="text" class="form-control flatpickr-input" name="start_time" value="{{ \Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $item->start_time, 'UTC')->setTimezone('America/New_York')->format('d/m/Y H:i') }}" data-provider="flatpickr" data-date-format="d/m/Y" data-enable-time="" placeholder="d/m/y h:i" required> --}}
                                <input type="text" class="form-control flatpickr-input" name="start_time" value="{{ \Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $item->start_time)->format('d/m/Y H:i') }}" data-provider="flatpickr" data-date-format="d/m/Y" data-enable-time="" placeholder="d/m/y h:i" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">End Datetime (EST)</label>
                                {{-- <input type="text" class="form-control flatpickr-input" name="end_time" value="{{ \Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $item->end_time, 'UTC')->setTimezone('America/New_York')->format('d/m/Y H:i') }}" data-provider="flatpickr" data-date-format="d/m/Y" data-enable-time="" placeholder="d/m/y h:i" required> --}}
                                <input type="text" class="form-control flatpickr-input" name="end_time" value="{{ \Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $item->end_time)->format('d/m/Y H:i') }}" data-provider="flatpickr" data-date-format="d/m/Y" data-enable-time="" placeholder="d/m/y h:i" required>
                            </div>
                        </div>

                        <div class="row mb-2 sizes top-parent">
                            <div class="col-md-12">
                                <hr>
                                <h5>Percentages For Winners</h5>
                                <hr>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="platform_percentage" class="form-label">Platform Percentage</label>
                                <div class="form-icon">
                                    <input type="number" class="form-control form-control-icon" value="{{$item->platform_percentage}}" id="platform_percentage" placeholder="10" name="platform_percentage">
                                    <i class="ri-percent-line"></i>
                                </div>
                            </div>
                            <div class="col-md-12 duplicatable">
                                <div class="row mb-2">
                                    <div class="col-md-4">
                                        <label for="">Percentage</label>
                                        <div class="form-icon">
                                            <input type="number" class="form-control form-control-icon" value="{{$item->standings[0]->percentage}}" placeholder="50" name="percentage[]" required>
                                            <i class="ri-percent-line"></i>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <label class="form-label">Starting Balance</label>
                                        <div class="form-icon">
                                            <input type="number" class="form-control form-control-icon" value="{{$item->standings[0]->starting_balance}}" placeholder="100" name="starting_balance[]">
                                            <i class="ri-money-dollar-circle-fill"></i>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <label for="">Rank</label>
                                        <input type="number" value="1" class="form-control standing" value="{{$item->standings[0]->standing}}" name="position[]" style="pointer-events: none; background:#efefef;">
                                    </div>
                                    <div class="col-md-2 add">
                                        <button class="btn btn-primary add-more w-100 mt-m-29">Add More</button>
                                    </div>
                                    <div class="col-md-2 add-remove-btn mt-m-29"></div>
                                </div>
                            </div>
                            <div class="duplicated">
                                @for($i=1; $i<count($item->standings); $i++)
                                <div class="col-md-12 duplicatable">
                                    <div class="row mb-2">
                                        <div class="col-md-4">
                                            <label for="">Percentage</label>
                                            <div class="form-icon">
                                                <input type="number" class="form-control form-control-icon" value="{{$item->standings[$i]->percentage}}" placeholder="50" name="percentage[]" required>
                                                <i class="ri-percent-line"></i>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <label class="form-label">Starting Balance</label>
                                            <div class="form-icon">
                                                <input type="number" class="form-control form-control-icon" value="{{$item->standings[$i]->starting_balance}}" placeholder="100" name="starting_balance[]">
                                                <i class="ri-money-dollar-circle-fill"></i>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <label for="">Rank</label>
                                            <input type="number" value="{{$item->standings[$i]->standing}}" class="form-control standing" name="position[]" style="pointer-events: none; background:#efefef;">
                                        </div>

                                        <div class="col-md-2 add-remove-btn mt-m-29"><button type="button" class="btn btn-danger w-100 remove-row mt-m-29" data-reward="{{$item->standings[$i]->standing}}">Remove</button></div>
                                    </div>
                                </div>
                                @endfor
                            </div>
                        </div>
                        <hr>
                        <h5>Rewards Detail</h5>
                        <hr>
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label for="">Rewards for Rank 1</label>
                                <div class="reward-items-wrapper">
                                    <div class="reward-item-entry row mb-3">
                                        <div class="col-md-6">
                                            <select class="form-control" name="reward_item[{{$item->standings[0]->standing}}][]" required>
                                                <option value="">Select an asset</option>
                                                @foreach($assets as $asset)
                                                    <option value="{{ $asset->id }}" {{$asset->id == $item->standings[0]->standing_rewards[0]->item_id  ? 'selected' : ''}}>{{ $asset->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        {{-- <div class="col-md-1">
                                            <input type="number" class="form-control" name="reward_quantity[{{$item->standings[0]->standing}}][]" min="1" value="{{$item->standings[0]->standing_rewards[0]->quantity}}">
                                        </div> --}}
                                        <div class="col-md-2 remove-btn-holder">

                                        </div>
                                    </div>
                                    @for($i = 1; $i < count($item->standings[0]->standing_rewards); $i++)
                                    <div class="row mb-3 reward-item-new-entry">
                                        <div class="col-md-6">
                                            <select class="form-control" name="reward_item[{{$item->standings[0]->standing}}][]" required>
                                                <option value="">Select an asset</option>
                                                @foreach($assets as $asset)
                                                <option value="{{ $asset->id }}" {{$asset->id == $item->standings[0]->standing_rewards[$i]->item_id  ? 'selected' : ''}}>{{ $asset->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        {{-- <div class="col-md-1">
                                            <input type="number" class="form-control" name="reward_quantity[{{$item->standings[0]->standing}}][]" min="1" value="{{$item->standings[0]->standing_rewards[$i]->quantity}}">
                                        </div> --}}
                                        <div class="col-md-2 remove-btn-holder"><button class="btn btn-danger remove-reward w-100">Remove</button></div>
                                    </div>
                                    @endfor
                                </div>
                                <button type="button" class="add-reward-item btn btn-primary btn-sm">Add Another Reward Item</button>
                                <hr>
                            </div>
                            <div class="reward-duplicates">
                                @for($i = 1; $i < count($item->standings); $i++)
                                <div class="col-md-12 mb-3 reward-{{$item->standings[$i]->standing}}">
                                    @php
                                        $selected = count($item->standings[$i]->standing_rewards) > 0 ? $item->standings[$i]->standing_rewards[0]->item_id : -1;
                                        $selected_quantity = count($item->standings[$i]->standing_rewards) > 0 ? $item->standings[$i]->standing_rewards[0]->quantity : "";
                                    @endphp
                                    <label for="">Rewards for Rank {{$item->standings[$i]->standing}}</label>
                                    <div class="reward-items-wrapper">
                                        <div class="reward-item-entry row mb-3">
                                            <div class="col-md-6">
                                                <select class="form-control" name="reward_item[{{$item->standings[$i]->standing}}][]" required>
                                                    <option value="">Select an asset</option>
                                                    @foreach($assets as $asset)
                                                    <option value="{{ $asset->id }}" {{$asset->id == $selected  ? 'selected' : ''}}>{{ $asset->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            {{-- <div class="col-md-1">
                                                <input type="number" class="form-control" name="reward_quantity[{{$item->standings[$i]->standing}}][]" min="1" value="{{$selected_quantity}}">
                                            </div> --}}
                                            <div class="col-md-2 remove-btn-holder">
                                            </div>
                                        </div>

                                        @for($j = 1; $j < count($item->standings[$i]->standing_rewards); $j++)
                                            <div class="row mb-3 reward-item-new-entry">
                                                <div class="col-md-6">
                                                    <select class="form-control" name="reward_item[{{$item->standings[$i]->standing}}][]" required>
                                                        <option value="">Select an asset</option>
                                                        @foreach($assets as $asset)
                                                        <option value="{{ $asset->id }}" {{$asset->id == $item->standings[$i]->standing_rewards[$j]->item_id  ? 'selected' : ''}}>{{ $asset->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                {{-- <div class="col-md-1">
                                                    <input type="number" class="form-control" name="reward_quantity[{{$item->standings[$i]->standing}}][]" min="1" value="{{$item->standings[$i]->standing_rewards[$j]->quantity}}">
                                                </div> --}}
                                                <div class="col-md-2 remove-btn-holder"><button class="btn btn-danger remove-reward w-100">Remove</button></div>
                                            </div>
                                        @endfor
                                    </div>
                                    <button type="button" class="add-reward-item btn btn-primary btn-sm" data-dashlane-label="true">Add Another Reward Item</button>
                                    <hr>
                                </div>

                                @endfor
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12 form-group mb-2">
                                <a style="margin-right:3px;" href="{{ route('jackpot.list') }}" class="btn btn-danger btn-sm">Cancel</a>
                                <input type="submit" value="update" class="btn btn-success btn-sm">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Select2 cdn -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="{{ URL::asset('assets/js/pages/select2.init.js') }}"></script>
<!-- Input Mask -->
<script src="{{ URL::asset('assets/libs/cleave.js/cleave.js.min.js') }}"></script>
<script src="{{ URL::asset('assets/libs/flatpickr/flatpickr.min.js') }}"></script>
<script src="{{ URL::asset('assets/js/pages/form-masks.init.js') }}"></script>
<!-- App JS -->
<script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>

<script>
    $(function () {
        $(document).on('click','.add-more', function (e) {
            e.preventDefault();
            let cloneDiv = $(this).closest('.duplicatable').clone();
            cloneDiv.find('input[type="number"]').val('');
            cloneDiv.find('.add').remove();
            let parent = $(this).closest('.top-parent');
            let standing = parent.find('.duplicated').find(".row").length + 2;
            cloneDiv.find('.standing').val(standing);
            cloneDiv.find('.add-remove-btn').append(`<button type="button" class="btn btn-danger w-100 remove-row mt-m-29" data-reward="${standing}">Remove</button>`);
            if(standing > 3) {
                iziToast['error']({
                    message: "You can add max of 3 Ranks",
                    position: "bottomCenter"
                });
            }else{
                parent.find('.duplicated').append(cloneDiv);
                // let rewardHtml = `
                //     <div class="col-md-12 mb-3 reward-${standing}">
                //         <label for="">Rewards for Rank ${standing}</label>
                //         <div class="reward-items-wrapper">
                //             <div class="reward-item-entry row mb-3">
                //                 <div class="col-md-6">
                //                     <select class="form-control" name="reward_item[${standing}][]">
                //                         <option value="">Select an asset</option>
                //                         @foreach($assets as $asset)
                //                             <option value="{{ $asset->id }}">{{ $asset->name }}</option>
                //                         @endforeach
                //                     </select>
                //                 </div>
                //                 <div class="col-md-1">
                //                     <input type="number" class="form-control" name="reward_quantity[${standing}][]" min="1" value="1">
                //                 </div>
                //                 <div class="col-md-2 remove-btn-holder">
                //                 </div>
                //             </div>
                //         </div>
                //         <button type="button" class="add-reward-item btn btn-primary btn-sm">Add Another Reward Item</button>
                //         <hr>
                //     </div>
                // `;
                let rewardHtml = `
                    <div class="col-md-12 mb-3 reward-${standing}">
                        <label for="">Rewards for Rank ${standing}</label>
                        <div class="reward-items-wrapper">
                            <div class="reward-item-entry row mb-3">
                                <div class="col-md-6">
                                    <select class="form-control" name="reward_item[${standing}][]" required>
                                        <option value="">Select an asset</option>
                                        @foreach($assets as $asset)
                                            <option value="{{ $asset->id }}">{{ $asset->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-2 remove-btn-holder">
                                </div>
                            </div>
                        </div>
                        <button type="button" class="add-reward-item btn btn-primary btn-sm">Add Another Reward Item</button>
                        <hr>
                    </div>
                `;
                $('.reward-duplicates').append(rewardHtml);
            }
        });
        $(document).on('click','.remove-row', function (e) {
            let standing = $(this).data('reward');
            let row = $(this).closest('.row');
            row.remove();
            $('.reward-duplicates').find('.reward-'+standing).remove();
        });
    });
    $(document).on('click', '.add-reward-item', function (e) {
        e.preventDefault();
        let toAppend = $(this).parent().find('.reward-items-wrapper');
        let toDuplicate = toAppend.find('.reward-item-entry');
        let clonned = toDuplicate.clone();
        let removeBtn = `<button class="btn btn-danger remove-reward w-100">Remove</button>`;
        clonned.removeClass('reward-item-entry');
        clonned.addClass('reward-item-new-entry');
        clonned.find('select').val('');
        clonned.find('input').val('1');
        clonned.find('.remove-btn-holder').html(removeBtn);
        toAppend.append(clonned);
    });

    $(document).on('click', '.remove-reward', function (e) {
        e.preventDefault();
        $(this).closest('.reward-item-new-entry').remove();
    });

    $(document).on('click', 'input[name="auto_renew"]', function (e) {
        if($(this).is(":checked")) {
            $(this).parent().find('label').html('Active')
        }else{
            $(this).parent().find('label').html('Inactive')
        }
    });

    $('.jackpot-form').on('submit', function (e) {


    let platform_percentage = parseFloat($('#platform_percentage').val()) || 0;
    const standing_percentage = $("input[name='percentage[]']").map(function() {
        return parseFloat($(this).val()) || 0; // Convert to number, default to 0 if empty
    }).get() // Convert to array
    .reduce((sum, value) => sum + value, 0); // Calculate the sum
    let total = platform_percentage + standing_percentage;
    if(total > 100){
        e.preventDefault();
        iziToast['error']({
                message: "Total percentage should not exceed 100%",
                position: "bottomCenter"
            });
    }

    });

</script>
@endsection