@extends('layouts.admin.app')

@section('title', translate('messages.mlm_plan'))

@push('css_or_js')

@endpush

@section('content')
<div class="content container-fluid">
    <div class="page-header">
        <div class="d-flex flex-wrap justify-content-between align-items-start">
            <h1 class="page-header-title mr-3">
                <span class="page-header-icon">
                    <img src="{{ dynamicAsset('public/assets/admin/img/business.png') }}" class="w--20" alt="">
                </span>
                <span>{{ translate('messages.business_setup') }}</span>
            </h1>
            <div class="d-flex flex-wrap justify-content-end align-items-center flex-grow-1">
                <div class="blinkings active">
                    <i class="tio-info-outined"></i>
                    <div class="business-notes">
                        <h6><img src="{{dynamicAsset('/public/assets/admin/img/notes.png')}}" alt=""> {{translate('Note')}}</h6>
                        <div>
                            {{translate('Don’t_forget_to_click_the_respective_‘Save_Information’_buttons_below_to_save_changes')}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('admin-views.business-settings.partials.nav-menu')
    </div>
    <form action="{{ route('admin.customer.update-mlm-settings') }}" method="post" enctype="multipart/form-data" id="update-mlm-settings">
        @csrf
        <div class="row gx-2">
            <div class="col-lg-12">
                <div class="card mb-3">
                    <div class="card-header card-header-shadow">
                        <h5 class="card-title d-flex align-items-center">
                            <img src="{{dynamicAsset('/public/assets/admin/img/loyalty.png')}}" alt="" class="card-header-icon align-self-center mr-1">
                            <span>
                                {{ translate('Level_Commission_Settings') }}
                            </span>
                            <span class="input-label-secondary" data-toggle="tooltip" data-placement="right" data-original-title="{{ translate('Customer_can_get_level_commission_if_he_added_users_in_levels') }}">
                                <img src="{{ dynamicAsset('/public/assets/admin/img/info-circle.svg') }}" alt="{{ translate('messages.show_hide_food_menu') }}">
                            </span>
                        </h5>
                    </div>
                    <div class="card-body py-4">
                        <div class="row g-3">
                            <div class="col-sm-6 col-lg-4">
                                <div class="form-group mb-0">
                                    <label>
                                        {{ translate('Enable_Level_Commission') }}
                                    </label>
                                    <label class="toggle-switch toggle-switch-sm d-flex justify-content-between border  rounded px-4 form-control {{ isset($data['wallet_status']) && $data['wallet_status'] == 1 ? '' : 'text-muted' }}">
                                        <span class="pr-2">{{ translate('Customer_level_earning') }}</span>
                                        <input type="checkbox" data-id="level_earning_status" data-type="toggle" data-image-on="{{ dynamicAsset('/public/assets/admin/img/modal/referral-on.png') }}" data-image-off="{{ dynamicAsset('/public/assets/admin/img/modal/referral-off.png') }}" data-title-on="{{ translate('Want_to_enable_the') }} <strong>{{ translate('Level_Earning') }}</strong> ?" data-title-off="{{ translate('Want_to_disable_the') }} <strong>{{ translate('Level_Earning') }}</strong> ?" data-text-on="<p>{{ translate('If_enabled,_Customers_can_earn_points_by_adding_more_users_in_levels_&_first_purchase_successfully_from_your_business.') }}</p>" data-text-off="<p>{{ translate('If_disabled,_the_level-earning_feature_will_be_hidden_from_the_Customer_App_&_Website.') }}</p>" class="toggle-switch-input dynamic-checkbox-toggle" name="level_earning_status" id="level_earning_status" data-section="level-earning" value="1" {{ isset($data['wallet_status']) && $data['wallet_status']==1 ? '' : 'disabled' }} {{ isset($data['level_earning_status']) && $data['level_earning_status']==1 ? 'checked' : '' }}>
                                        <span class="toggle-switch-label text">
                                            <span class="toggle-switch-indicator"></span>
                                        </span>
                                    </label>
                                </div>
                            </div>

                            <div class="col-sm-6 col-lg-4">
                                <div class="form-group mb-0">
                                    <label for="number_of_levels" class="form-label">
                                        {{ translate('Number_of_Levels') }}
                                        <span class="text-danger">*</span>
                                    </label>
                                    <input type="number" min="1" max="100" class="form-control" id="number_of_levels" name="number_of_levels" value="{{ old('number_of_levels', $settings['number_of_levels'] ?? 1) }}" required>
                                </div>
                            </div>
                            <div class="col-sm-6 col-lg-4">
                                <div class="form-group mb-0">
                                    <label for="level_commission_type" class="form-label">
                                        {{ translate('Level_Commission_Type') }}
                                        <span class="text-danger">*</span>
                                    </label>
                                    <select name="level_commission_type" id="level_commission_type" class="form-control js-select2-custom">
                                        <option value="amount" {{ (old('level_commission_type', $settings['level_commission_type'] ?? '' )=='amount' ) ? 'selected' : '' }}>{{ translate('Amount') }}</option>
                                        <option value="percentage" {{ (old('level_commission_type', $settings['level_commission_type'] ?? '' )=='percentage' ) ? 'selected' : '' }}>{{ translate('Percentage') }}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 mt-4">
                    <div class="card">
                        <div class="card-header">
                            <h5>{{ translate('Level Wise Commission Setup') }}</h5>
                        </div>
                        <div class="card-body">
                            <div id="levels-container">
                                @php
                                $savedLevels = isset($settings['levels']) ? json_decode($settings['levels'], true) : [];
                                $levels = old('levels', $savedLevels);
                                @endphp

                                @foreach($levels as $index => $level)
                                <div class="row align-items-center mb-2 level-row">
                                    <div class="col-md-4">
                                        <input type="text" name="levels[{{ $index }}][name]" class="form-control" placeholder="{{ translate('Level Name') }}" value="{{ $level['name'] ?? 'Level '.($index+1) }}">
                                    </div>
                                    <div class="col-md-4">
                                        <input type="number" step="0.01" min="0" name="levels[{{ $index }}][commission]" class="form-control" placeholder="{{ translate('Commission') }}" value="{{ $level['commission'] ?? '' }}">
                                    </div>
                                    <div class="col-md-2">
                                        <button type="button" class="btn btn-danger remove-level">
                                            <i class="tio-delete"></i>
                                        </button>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                            <button type="button" id="add-level" class="btn btn-outline-primary mt-3">
                                + {{ translate('Add Level') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="mb-4 mt-4 col-12 ">
            <div class="btn--container justify-content-end">
                <button type="reset" id="reset_btn" class="btn btn--reset location-reload">{{ translate('reset') }}</button>
                <button type="submit" id="submit" class="btn btn--primary">{{ translate('Save Information') }}</button>
            </div>
        </div>
    </form>
</div>
@endsection

@push('script_2')
<script>
    "use strict";

    $('#new_customer_discount_amount_type').on('change', function() {
        if($('#new_customer_discount_amount_type').val() == 'amount')
        {
            $('#percentage').addClass('d-none');
            $('#cuttency_symbol').removeClass('d-none');
            $('#new_customer_discount_amount').attr('max',99999999999);

        }
        else
        {
            $('#percentage').removeClass('d-none');
            $('#cuttency_symbol').addClass('d-none');
            $('#new_customer_discount_amount').attr('max',100);

        }
    });

    $('#ref_earning_type').on('change', function() {
        if($('#ref_earning_type').val() == 'amount')
        {
            $('#ref_percentage').addClass('d-none');
            $('#ref_currency_symbol').removeClass('d-none');
            $('#ref_earning_exchange_rate').attr('max',99999999999);

        }
        else
        {
            $('#ref_percentage').removeClass('d-none');
            $('#ref_currency_symbol').addClass('d-none');
            $('#ref_earning_exchange_rate').attr('max',100);

        }
    });

let levelIndex = {{ isset($levels) ? count($levels) : 0 }};

$('#add-level').on('click', function () {
    let html = `
    <div class="row align-items-center mb-2 level-row">
        <div class="col-md-4">
            <input type="text" name="levels[${levelIndex}][name]" class="form-control"
                   placeholder="{{ translate('Level Name') }}" value="Level ${levelIndex+1}">
        </div>
        <div class="col-md-4">
            <input type="number" step="0.01" min="0"
                   name="levels[${levelIndex}][commission]" class="form-control"
                   placeholder="{{ translate('Commission') }}">
        </div>
        <div class="col-md-2">
            <button type="button" class="btn btn-danger remove-level">
                <i class="tio-delete"></i>
            </button>
        </div>
    </div>`;

    $('#levels-container').append(html);
    levelIndex++;
});

$(document).on('click', '.remove-level', function () {
    $(this).closest('.level-row').remove();
});
</script>
@endpush