<div>
<form name="{{$name}}" id="{{$id}}"  class="form-control" action="{{URL::route($action)}}" method="POST" autocomplete="off">
    <div class="row">
        <div class="col-12">
            <div class="p-2">
                <label for="address">{{__('com-form-payment.payer')}}</label>
                <input type="text" name="payer" class="form-control">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-lg-3 col-md-3">
            <div class="p-2">
                <label for="currency">{{__('com-form-payment.currency')}}</label>
                    <select value="SELECT" class="form-control" name="currency" id="currency">
                        <option value="SELECT">{{__('com-form-history.selectValue')}}</option>
                        @foreach($currencies as $key => $option)
                            <option value="{{$option->id}}">{{$option->title}}</option>
                        @endforeach
                    </select>
            </div>
        </div>
        <div class="col-12 col-lg-6 col-md-6">
            <div class="p-2">
                <label for="amount">{{__('com-form-payment.amount')}}</label>
                <input type="text" name="amount" id="amount" class="form-control" placeholder="{{$placeHolderAmount}}">
            </div>
        </div>
        <div class="col-12 col-lg-3 col-md-3">
            <div class="p-2">
                <label for="paymentMethods">{{__('com-form-payment.method')}}</label>
                    <select value="SELECT" class="form-control" name="paymentMethods" id="paymentMethods">
                        <option value="SELECT">{{__('com-form-history.selectValue')}}</option>
                        @foreach($paymentMethods as $key => $option)
                            <option value="{{$option->id}}">{{$option->title}}</option>
                        @endforeach
                    </select>
            </div>
        </div>
    </div>
    
    <div class="row mt-2">
        <div class="col-12 col-lg-4 col-md-4">
            <div class="p-3 form-check ps-4">
                <input type="checkbox" name="is_electronic" id="is_electronic" class="form-check-input" onchange="toggleReferenceField()">
                <label for="is_electronic" class="form-check-label">{{__('com-form-payment.isElectronic')}}</label>
            </div>
        </div>
        <div class="col-12 col-lg-8 col-md-8" id="user_reference_container" style="display: none;">
            <div class="p-2">
                <label for="user_reference">{{__('com-form-payment.userReference')}} <span class="text-danger">*</span></label>
                <input type="text" name="user_reference" id="user_reference" class="form-control">
                <small class="text-muted">{{__('com-form-payment.userReferenceHelp')}}</small>
            </div>
        </div>
    </div>
    
    <div class="row">
        <div class="col-12">
            <div class="p-2">
                <label for="address">{{__('com-form-payment.address')}}</label>
                <textarea name="address_payer" class="form-control" cols="30" rows="5"></textarea>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12  col-lg-6 col-md-6">
            <div class="p-2">
                <label for="especiality">{{__("com-form-history.especiality")}}</label>
                    <select value="{{$payment->especiality}}" class="form-control" name="especiality" id="especiality">
                        <option value="SELECT">{{__('com-form-history.selectValue')}}</option>
                        @foreach($optionsEspeciality as $key => $option)
                            <option value="{{$key}}">{{$option}}</option>
                        @endforeach
                    </select>
            </div>
        </div>
        <div class="col-12   col-lg-6 col-md-6">
            <div class="p-2">
              <label for="doctors">{{__('com-form-payment.doctor')}}</label>
                    <select value="SELECT" class="form-control" name="doctors" id="doctors">
                        <option value="SELECT">{{__('com-form-history.selectValue')}}</option>
                        @foreach($doctors as $key => $option)
                            <option value="{{$option->id}}">{{$option->name}}</option>
                        @endforeach
                    </select>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="p-2">
                <label for="reason">{{__('com-form-payment.reason')}}</label>
                <textarea name="reason" class="form-control" cols="30" rows="5"></textarea>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="p-2 text-center">
            <input  class="btn btn-success" type="submit" value="{{($new === true) ? __('com-form-payment.btnSubmit') : __('com-form-payment.btnSubmitUpdate') }}">
                @csrf
            </div>
        </div>
    </div>
</form>

<script>
    function toggleReferenceField() {
        const isElectronic = document.getElementById('is_electronic').checked;
        const referenceContainer = document.getElementById('user_reference_container');
        const referenceField = document.getElementById('user_reference');
        
        if (isElectronic) {
            referenceContainer.style.display = 'block';
            referenceField.setAttribute('required', 'required');
        } else {
            referenceContainer.style.display = 'none';
            referenceField.removeAttribute('required');
        }
    }
    
    // Inicializar al cargar la página
    document.addEventListener('DOMContentLoaded', function() {
        toggleReferenceField();
    });
</script>
</div>