@csrf
<style>
    .input-group {
        width: 100%;
    }

    .icon-rtl {
        padding-right: 35px;
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 18px 18px;
    }

    /* Ícono porcentaje */
    .icon-percent {
        background-image: url("https://img.icons8.com/metro/512/percentage2--v1.png");
    }

    /* Ícono dólar */
    .icon-value {
        background-image: url("https://img.icons8.com/?size=100&id=85843&format=png&color=000000");
    }
</style>
<div class="card-body">
    <input type="hidden" class="form-control" id="id" name="id" required value="{{ $object->id ?? old('id') }}">
    <div class="row">
        <div class="col-6 col-md-6">
            <div class="form-group">
                <label for="academy_location_id"> {{ Lang::get('messages.service_charges.tag2')}}</label>
                <select class="form-control select2" multiple="multiple" data-placeholder="{{ Lang::get('messages.screen_products_tag32') }}" name="services" required>
                    @foreach ($services as $service)
                    <option value="{{ $service->value }}" {{ isset($object) && in_array($service->value, $assignedServices) ? 'selected' : '' }}>
                        {{ $service->name }}
                    </option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="col-6 col-md-6">
            <label for="priority">{{ Lang::get('messages.service_charges.tag5') }}</label>
            <select class="form-control" name="priority" value="{{ isset($object) && $object->priority ?? old('priority') }}">
                <option value="1" {{isset($object) && $object->priority ? 'selected' : ''}}>
                    @lang('messages.yes')
                </option>
                <option value="0" {{isset($object) && !$object->priority ? 'selected' : ''}}>
                    @lang('messages.no')
                </option>
            </select>
        </div>
    </div>

    <div class="row">
        <div class="col-2 col-md-2">
            <div class="form-group">
                <label>{{ Lang::get('messages.service_charges.fee') }}</label><br>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="price_type" id="price_type_value" value="value"
                        {{ (isset($object) && $object->price_type == 'value') || (!isset($object) && !old('price_type')) || old('price_type') == 'value' ? 'checked' : '' }} required>
                    <label class="form-check-label" for="price_type_value">{{ Lang::get('messages.service_charges.fixed_value') }}</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="price_type" id="price_type_percent" value="percent"
                        {{ (isset($object) && $object->price_type == 'percent') || old('price_type') == 'percent' ? 'checked' : '' }}>
                    <label class="form-check-label" for="price_type_percent">{{ Lang::get('messages.service_charges.percent') }} (0-100)</label>
                </div>
            </div>
        </div>
        <div class="col-4 col-md-4">
            <div class="form-group">
                <label for="price"></label>
                <div class="input-group">
                    <input type="number" class="form-control icon-rtl 
                          {{ (isset($object) && $object->price_type == 'percent') || old('price_type') == 'percent' ? 'icon-percent' : 'icon-value' }}"
                        id="priceInput" name="price" maxlength="10" step="0.01" required value="{{ $object->price ?? old('price') }}">
                </div>
            </div>
        </div>
        <div class="col-6 col-md-6">
            <div class="form-group">
                <label for="tags"> {{ Lang::get('messages.service_charges.tag4')}} {{ Lang::get('messages.optional') }}</label>
                <select class="form-control select2" multiple="multiple" data-placeholder="{{ Lang::get('messages.screen_products_tag32') }}" name="generalMultiselect">
                    @foreach ($tags as $tag)
                    <option value="{{ $tag->id }}" {{ isset($assignedTags) && in_array($tag->id, $assignedTags) ? 'selected' : '' }}>
                        {{ $tag->name }}
                    </option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>

    <!-- RULES/CONFIGURATIONS -->
    <div class="box collapsed-box">
        <div class="box-header with-border">
            <h3 class="box-title">
                {{ Lang::get('messages.service_charges.title_rules') }}
            </h3>

            <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse">
                    <i class="fa fa-plus"></i>
                </button>
            </div>
        </div>
        <div class="box-body">
            <h4>{{ Lang::get('messages.service_charges.title_ticketing') }}</h4>
            <div class="row">
                <div class="col-12 col-md-12">
                    <div class="form-group">
                        <label for="matchEvents"> {{ Lang::get('messages.service_charges.tag3-1')}} {{ Lang::get('messages.optional') }}</label>
                        <select class="form-control select2 col-12 col-md-12" multiple="multiple" data-placeholder="{{ Lang::get('messages.screen_products_tag32') }}" name="matchEvents">
                            @foreach ($matchEvents as $matchEvent)
                            <option value="{{ $matchEvent->id }}" {{ isset($assignedMatchEvents) && in_array($matchEvent->id, $assignedMatchEvents) ? 'selected' : '' }}>
                                {{ $matchEvent->name }} @if($matchEvent->event_start) - {{ $matchEvent->event_start }} @endif
                            </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-12 col-md-12">
                    <div class="form-group">
                        <label for="zones"> {{ Lang::get('messages.service_charges.tag3-2')}} {{ Lang::get('messages.optional') }}</label>
                        <select class="form-control select2 col-12 col-md-12" multiple="multiple" data-placeholder="{{ Lang::get('messages.screen_products_tag32') }}" name="zones">
                            @foreach ($tribunes as $tribune)
                            <option value="{{ $tribune->id }}" {{ isset($assignedZones) && in_array($tribune->id, $assignedZones) ? 'selected' : '' }}>
                                {{ $tribune->name }} @if($tribune->zone) ({{ $tribune->zone->name }}) @endif
                            </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-12 col-md-12">
                    <div class="form-group">
                        <label for="ticketTypes"> {{ Lang::get('messages.service_charges.ticket_types')}} {{ Lang::get('messages.optional') }}</label>
                        <select class="form-control select2 col-12 col-md-12" multiple="multiple" data-placeholder="{{ Lang::get('messages.screen_products_tag32') }}" name="ticketTypes">
                            @foreach ($ticketTypes as $ticketType)
                            <option value="{{ $ticketType->id }}" {{ isset($assignedTicketTypes) && in_array($ticketType->id, $assignedTicketTypes) ? 'selected' : '' }}>
                                {{ $ticketType->name }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <h4>{{ Lang::get('messages.service_charges.title_academy') }}</h4>
            <div class="row">
                <div class="col-12 col-md-12">
                    <div class="form-group">
                        <label for="paymentTypes"> {{ Lang::get('messages.service_charges.tag3-3')}} {{ Lang::get('messages.optional') }}</label>
                        <select class="form-control select2 col-12 col-md-12" multiple="multiple" data-placeholder="{{ Lang::get('messages.screen_products_tag32') }}" name="paymentTypes">
                            @foreach ($paymentTypes as $paymentType)
                            <option value="{{ $paymentType->value }}" {{ isset($assignedPaymentTypes) && in_array($paymentType->value, $assignedPaymentTypes) ? 'selected' : '' }}>
                                {{ $paymentType->name }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-12 col-md-12">
                    <div class="form-group">
                        <label for="categories"> {{ Lang::get('messages.service_charges.tag3-4')}} {{ Lang::get('messages.optional') }}</label>
                        <select class="form-control select2 col-12 col-md-12" multiple="multiple" data-placeholder="{{ Lang::get('messages.screen_products_tag32') }}" name="categories">
                            @foreach ($categories as $category)
                            <option value="{{ $category->id }}" {{ isset($assignedCategories) && in_array($category->id, $assignedCategories) ? 'selected' : '' }}>
                                {{ $category->name }} @if($category->academy_location) ({{ $category->academy_location->name }}) @endif
                            </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<br>
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/crud.js') . '?v=' . time() }}"></script>
<script src="{{ asset('js/service_charges.js') . '?v=' . time() }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.select2').select2();
    });
</script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const priceInput = document.getElementById("priceInput");
        const radios = document.querySelectorAll("input[name='price_type']");

        function updatePriceField(type) {
            // primero limpiar clases de ícono
            priceInput.classList.remove("icon-percent", "icon-value");

            if (type === "percent") {
                priceInput.setAttribute("max", "100");
                priceInput.setAttribute("min", "0");
                priceInput.setAttribute("step", "0.01");
                priceInput.classList.add("icon-percent"); // aplicar ícono %
                if (parseFloat(priceInput.value) > 100) priceInput.value = 100;
            } else {
                priceInput.removeAttribute("max");
                priceInput.setAttribute("step", "0.01");
                priceInput.classList.add("icon-value"); // aplicar ícono $
            }
        }

        // Inicializar según valor precargado
        const selectedType = document.querySelector("input[name='price_type']:checked");
        if (selectedType) updatePriceField(selectedType.value);

        // Cambiar al seleccionar otro radio
        radios.forEach(radio => {
            radio.addEventListener("change", function() {
                updatePriceField(this.value);
            });
        });
    });
</script>