@extends("layouts.app")
@section('pageTitle', 'Editar propietario')

@section('content')
    <div class="row">
    @if ($owner->status == 2)
        @can('satellite-owner-disable')
            <div class="col-md-12">
                <div class="alert alert-danger row">
                    <div class="col-lg-10 text-center">
                        <h3>Propietario Vetado</h3>
                    </div>
                    <div class="col-lg-2">
                        <form action="{{ route('satellite.update_status') }}" class="form-row" method="post"
                            id="form-update-status">
                            @csrf
                            <input type="hidden" name="id" value="{{ $owner->id }}">
                            <input type="hidden" name="status" value="1">
                            <input type="hidden" name="user_manager" value="{{ $owner->user_manager }}">
                            <input type="hidden" name="status_comment" value="">
                        </form>
                        <button type="button" onclick="changeStatus()" class="btn btn-success btn-sm float-right"> <i
                                class="fa fa-check"></i> Activar</button>
                    </div>
                </div>
            </div>
        @endcan
    @endif

    <div class="col-md-12">
        <div class="card table-responsive">
            <div class="card-header">
                <div class="d-flex flex-wrap align-items-center justify-content-around justify-content-md-between">
                    <div>
                        <span class="span-title">
                            Editar Propietario <span class="text-danger">{{ $owner->owner }}</span>
                        </span>
                    </div>

                    @if ($owner->status == 1)
                    <div class="d-flex gap-1 align-items-center">
                        <button
                                id="btn-get-logs-owner"
                                type="button"
                                class="btn btn-primary btn-sm @if($owner->has_pending_logs) animation-clickme @endif"
                        >
                            <i class="fas fa-list"></i> Historial
                        </button>

                        <button id="btn-send-note-owner" type="button" class="btn btn-m btn-warning float-left btn-sm">
                            <i class="fas fa-notes-medical"></i> Notas
                        </button>
                    </div>
                    @endif
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-3">
                        <div class="list-group" id="list-tab" role="tablist">
                            <a class="list-group-item list-group-item-action item-sm active" data-toggle="list"
                                href="#personal_info" role="tab" aria-controls="home">Datos Personales</a>

                            <a class="list-group-item list-group-item-action item-sm" data-toggle="list"
                                href="#payment_method_tab" role="tab" aria-controls="profile">Forma de Pago</a>
                            @can('satellite-owner-percent')
                                <a class="list-group-item list-group-item-action item-sm" data-toggle="list"
                                    href="#commission" role="tab" aria-controls="messages">Porcentajes</a>
                            @endcan

                            <a class="list-group-item list-group-item-action item-sm" data-toggle="list"
                                href="#account_status" role="tab" aria-controls="messages">Estado de Cuenta</a>
                            @can('satellite-owner-api')
                                @if (tenant('is_central_tenant'))
                                    <a class="list-group-item list-group-item-action item-sm" data-toggle="list" href="#api"
                                        role="tab" aria-controls="settings">
                                        Api
                                    </a>
                                @endif
                            @endcan
                        </div>

                    </div>
                    <div class="col-lg-9">
                        <div class="tab-content" id="nav-tabContent">

                            <!--Informacion Personal-->
                            <div class="tab-pane fade active show" id="personal_info" role="tabpanel">
                                <Personal-Information-Form
                                    :initial-owner="{{ json_encode($owner) }}"
                                    :initial-cities="{{ json_encode($cities) }}"
                                    :countries="{{ json_encode($countries) }}"
                                    :departments="{{ json_encode($departments) }}"
                                    :permissions="{{ json_encode(auth()->user()->getPermissionsViaRoles()->pluck('name')) }}"
                                ></Personal-Information-Form>
                            </div>

                            <!--Forma de Pago-->
                            <div class="tab-pane fade" id="payment_method_tab" role="tabpanel">
                                <Payment-Method-Form
                                    :initial-owner="{{ json_encode($owner) }}"
                                    :payment-methods="{{ json_encode($payment_methods) }}"
                                    :banks="{{ json_encode($banks) }}"
                                    :documents="{{ json_encode($documents) }}"
                                ></Payment-Method-Form>
                            </div>

                            <!--Porcentajes-->
                            <div class="tab-pane fade" id="commission" role="tabpanel">
                                <div class="card border-secondary">
                                    <div class="card-body">
                                        <form action="" class="form-row" method="post"
                                            id="form-update-payment-method">
                                            @csrf
                                            <input type="hidden" name="id" value="{{ $owner->id }}">

                                            <div class="form-group col-md-12">
                                                <div class="card">
                                                    <div class="card-body">
                                                        <div class="row">
                                                            <label class="col-lg-2">% Predeterminado:</label>
                                                            <div class="col-lg-4">
                                                                <input type="text" class="form-control"
                                                                    name="commission_percent" id="commission_percent"
                                                                    value="{{ $owner->commission_percent }}">
                                                            </div>
                                                            <div class="col-lg-3">
                                                                @if ($owner->status == 1)
                                                                    @can('satellite-owner-percent-edit')
                                                                        <button type="button"
                                                                            class="btn btn-success btn-sm"
                                                                            id="btn_percent">
                                                                            <i class="fa fa-check"></i> Guardar</button>
                                                                    @endcan
                                                                @endif
                                                            </div>
                                                            @if (tenant('is_central_tenant'))
                                                                @can('satellite-owner-percent-edit')
                                                                    <label class="col-lg-2">Elegir mínimo
                                                                        Pago:</label>
                                                                    <div class="col-lg-1">
                                                                        <button type="button" data-toggle="modal"
                                                                            data-target="#modal-change-payment"
                                                                            class="btn btn-primary btn-sm "><i
                                                                                class="fa fa-piggy-bank"></i></button>
                                                                    </div>
                                                                @endcan
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>

                                            <div class="form-group col-md-6">
                                                <div class="row">
                                                    <label class="col-md-5">Comisiona para:</label>
                                                    @if ($owner->status == 1)
                                                        @can('satellite-owner-percent-create')
                                                            <button type="button" data-toggle="modal"
                                                                data-target="#modal-add-commission"
                                                                class="btn btn-success btn-sm float-right"><i
                                                                    class="fa fa-plus"></i></button>
                                                        @endcan
                                                    @endif
                                                </div>
                                            </div>
                                            <div id="div_commission_for" class="col-lg-12">

                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>

                            <!--Estado cuenta-->
                            <div class="tab-pane fade" id="account_status" role="tabpanel">
                                <div class="card border-secondary">
                                    <div class="card-body">
                                        <form action="{{ route('satellite.update_status') }}" class="form-row"
                                            method="post" id="form-update-status">
                                            @csrf
                                            <input type="hidden" name="id" value="{{ $owner->id }}">
                                            <div class="form-group col-md-6">
                                                <label for="first_name">Estado</label>
                                                <select class="form-control" id="status" name="status">
                                                    <option value="1" @if ($owner->status == 1) selected @endif>Activo</option>
                                                    @can('satellite-owner-disable')
                                                        <option value="2" @if ($owner->status == 2) selected @endif>Vetado</option>
                                                    @endcan
                                                    <option value="3" @if ($owner->status == 3) selected @endif>Inactivo</option>
                                                </select>
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="first_name">Gerente de Cuenta</label>
                                                <select class="form-control" id="user_manager" name="user_manager"
                                                    onchange="paymentMethod()">
                                                    <option></option>
                                                    @foreach ($users_support as $user_support)
                                                        <option value="{{ $user_support->id }}"
                                                            @if ($user_support->id == $owner->user_manager) selected @endif>
                                                            {{ $user_support->first_name . ' ' . $user_support->last_name . ' ' . $user_support->second_last_name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="col-lg-12" id="div_status_comment"
                                                style="display: @if ($owner->status == 1 || $owner->status == 3) none @endif">
                                                <label for="first_name">Comentario de Vetado</label>
                                                <textarea class="form-control" style="height: 150px"
                                                    name="status_comment">{{ $owner->status_comment }}</textarea>
                                            </div>
                                            @can('satellite-owner-convert')
                                                @if ($owner->status == 1 && $owner->is_user == 1)
                                                    <div class="col-lg-6">
                                                        <input type="checkbox" name="convert">
                                                        <label for="first_name" class="ml-2 mb-2">Independizar</label>
                                                    </div>
                                                @endif
                                            @endcan
                                        </form>
                                        <div class="col-md-12">
                                            <button type="button" onclick="changeStatus()"
                                                class="btn btn-success btn-sm float-right"> <i
                                                    class="fa fa-check"></i>
                                                Guardar</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!--Api-->
                            <div class="tab-pane fade" id="api" role="tabpanel">
                                <div class="card border-secondary">
                                    <div class="card-body">
                                        <form action="{{ route('satellite.update_status') }}" class="form-row"
                                            method="post" id="form-update-api">
                                            @csrf
                                            <input type="hidden" name="owner_id" value="{{ $owner->id }}">
                                            <div class="form-group col-md-6">
                                                <label for="">Api Pagos en</label>
                                                <select name="tenant" id=""
                                                    class="form-control form-control-sm col-lg-6">
                                                    <option value="0"></option>
                                                    @foreach ($tenants as $tenant)
                                                        <option value="{{ $tenant->id }}" @if ($tenant->owner_id == $owner->id) selected @endif>
                                                            {{ $tenant->studio_name }}
                                                        </option>
                                                    @endforeach
                                                </select>

                                            </div>
                                            <div class="form-group col-md-6">
                                                <label for="">Api Chaturbate</label>
                                                <div>
                                                    <button id="asign-chaturbate-api" type="button"
                                                        class="btn btn-sm btn-outline-warning">
                                                        Asignar</button>
                                                    <br>
                                                    <h6>Asignadas</h6>
                                                    <ul id="apisRecentAsigneds">
                                                    </ul>
                                                    <ul id="oldApis">
                                                        @foreach ($apis as $api)
                                                            <li>{{ $api->user }}</li>
                                                        @endforeach
                                                    </ul>
                                                </div>

                                            </div>
                                        </form>
                                        <div class="col-md-12">
                                            @if ($owner->status == 1)
                                                <button type="button" onclick="changeStatus()"
                                                    class="btn btn-success btn-sm float-right" id="btn_update_api">
                                                    <i class="fa fa-check"></i> Guardar</button>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

                <!-- Api Chaturbate modal -->
                <div id="api-chaturbate-modal" class="modal fade" role="dialog">
                    <div class="modal-dialog modal-dark modal-lg">
                        <!-- Modal content-->
                        <div class="modal-content" style="overflow:auto">
                            <div class="modal-header">
                                <h4 class="modal-title"> Api Chaturbate</h4>
                            </div>
                            <div class="modal-body">
                                <div class="row">

                                    <div class="col-md-12 mt-2 row" id="api-list">
                                        <!-- <textarea placeholder="Escriba aquí una nueva nota..." class="form-control"
                                                name="note" id="note"></textarea> -->
                                    </div>
                                    <div class="col-md-12 mt-2">
                                        <button class="btn btn-success btn-sm float-right" onclick="assignApis()"><i
                                                class="fa fa-check"></i>Asignar</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- Modal de logs ( notas de propietario) -->
                <div id="modal-owners-notes" class="modal fade" role="dialog">
                    <div class="modal-dialog modal-dark modal-lg">
                        <!-- Modal content-->
                        <div class="modal-content" style="overflow:auto">
                            <div class="modal-header">
                                <h4 class="modal-title"> Api Chaturbate</h4>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-md-12" id="div-body-owner-notes">

                                    </div>
                                    <div class="col-md-12 mt-2" id="api-list">
                                        <textarea placeholder="Escriba aquí una nueva nota..." class="form-control"
                                            name="note" id="note"></textarea>
                                    </div>
                                    <div class="col-md-12 mt-2">
                                        <button class="btn btn-success btn-sm float-right" id="btn-create-note"><i
                                                class="fa fa-check"></i>Guardar</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Modal de Historial ( bitácora de cambios a propietarios) -->
                <div id="modal-owners-logs" class="modal fade" role="dialog">
                    <Owner-Logs-Modal
                        :owner="{{ json_encode($owner) }}"
                        :permissions="{{ json_encode(auth()->user()->getPermissionsViaRoles()->pluck('name')) }}"
                    ></Owner-Logs-Modal>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- embed documents -->
<div id="modal-embed-documents" class="modal fade" role="dialog">
    <div class="modal-dialog modal-xl modal-dark">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Documento</h4>
            </div>
            <div class="modal-body" id="document-pdf">
                <embed id="embed-documents" src="" type="" style="height: 600px; width: 100%"></embed>
                {{-- <iframe id="iframe-documents" src="" type="" style="height: 500px; width: 100%"></iframe> --}}
            </div>
        </div>
    </div>
</div>

<!-- add commission -->
<div id="modal-add-commission" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg modal-dark">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Comisiona Para</h4>
            </div>
            <div class="modal-body row">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-lg-4">Propietario</div>
                        <div class="col-lg-2">% Comision</div>
                        <div class="col-lg-3">Tipo</div>
                        <div class="col-lg-3">Pagina</div>
                    </div>
                </div>
                <form action="" class="col-md-12 form-row" method="post" id="form-add-commission">
                    @csrf
                    <input type="hidden" name="owner_giver" value="{{ $owner->id }}">
                    <div class="col-md-12 mt-2">
                        <div class="row">
                            <div class="col-lg-4">
                                <select class="form-control" name="owner_receiver">
                                    @foreach ($list_owners as $list_owner)
                                        <option value="{{ $list_owner->id }}">{{ $list_owner->owner }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-2">
                                <input type="text" class="form-control" name="percent">
                            </div>
                            <div class="col-lg-3">
                                <select class="form-control" name="type" id="type_add" onchange="showPage()">
                                    <option value="1">Todas las paginas</option>
                                    <option value="2">Solo esta pagina</option>
                                    <option value="3">Todas excepto esta</option>
                                </select>
                            </div>
                            <div class="col-lg-3" id='div_page_add' style="display: none">
                                <select class="form-control" name="page">
                                    <option value=""></option>
                                    @foreach ($pages as $page)
                                        <option value="{{ $page->id }}">{{ $page->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-success" id="btn_add_commission"><i
                        class="fa fa-plus"></i>
                    Crear</button>
            </div>
        </div>
    </div>
</div>

<!-- update commission -->
<div id="modal-update-commission" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg modal-dark">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Comisiona Para</h4>
            </div>
            <div class="modal-body row">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-lg-4">Propietario</div>
                        <div class="col-lg-2">% Comision</div>
                        <div class="col-lg-3">Tipo</div>
                        <div class="col-lg-3">Pagina</div>
                    </div>
                </div>
                <form action="" class="col-md-12 form-row" method="post" id="form-update-commission">
                    @csrf
                    <input type="hidden" name="commission_id" id="commission_id">
                    <div class="col-md-12 mt-2">
                        <div class="row">
                            <div class="col-lg-4">
                                <select class="form-control" name="owner_receiver" id="update_owner_receiver">
                                    @foreach ($list_owners as $list_owner)
                                        <option value="{{ $list_owner->id }}">{{ $list_owner->owner }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-lg-2">
                                <input type="text" class="form-control" name="percent" id="update_percent">
                            </div>
                            <div class="col-lg-3">
                                <select class="form-control" name="type" id="type_update" onchange="showPage()">
                                    <option value="1">Todas las paginas</option>
                                    <option value="2">Solo esta pagina</option>
                                    <option value="3">Todas excepto esta</option>
                                </select>
                            </div>
                            <div class="col-lg-3" id='div_page_update' style="display: none">
                                <select class="form-control" name="page" id="update_page">
                                    <option value=""></option>
                                    @foreach ($pages as $page)
                                        <option value="{{ $page->id }}">{{ $page->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-success" id="btn_update_commission"><i
                        class="fa fa-save"></i> Modificar</button>
            </div>
        </div>
    </div>
</div>

<!-- modal change payment -->
<div id="modal-change-payment" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg modal-dark">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Opciones de Pago</h4>
            </div>
            <div class="modal-body row">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-lg-4">Acumular 2 Semanas</div>
                        <div class="col-lg-2">Cambiar mínimo de pago</div>
                    </div>
                </div>
                <form action="" class="col-md-12 form-row" method="post" id="form-change-payment"
                    enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="id" value="{{ $owner->id }}">
                    <div class="col-md-12 mt-2">
                        <div class="row">
                            <div class="col-lg-4">
                                <input type="checkbox" name="acumulationweek">
                                <label for="first_name" class="ml-2 mb-2"></label>
                            </div>
                            <div class="col-lg-2">
                                <input type="text" class="form-control" name="paymentmin">
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-success" id="btn_change_payment"><i
                        class="fa fa-edit"></i>
                    Actualizar</button>
            </div>
        </div>
    </div>
</div>


@endsection

@push('scripts')
<script>
    $(document).ready(function(){
        var country = $("#country").val();
        try {
          if (country == 49) {
                $("#extraDepartment").css('display','none');
                $("#extraCity").css('display','none');
                $("#Department").css('display','block');
                $("#City").css('display','block');
            } else {
                $("#extraDepartment").css('display','block');
                $("#extraCity").css('display','block');
                $("#Department").css('display','none');
                $("#City").css('display','none');
            }
      } catch (error) {
          console.log(error);
      }
    });

    $("#country").change(function(){
      var country = $("#country").val();
      try {
          if (country == 49) {
                $("#extraDepartment").css('display','none');
                $("#extraCity").css('display','none');
                $("#Department").css('display','block');
                $("#City").css('display','block');
                $("#inputDepartment").val(" ");
                $("#inputCity").val(" ");
            } else {
                $("#extraDepartment").css('display','block');
                $("#extraCity").css('display','block');
                $("#Department").css('display','none');
                $("#City").css('display','none');
                $("#inputDepartment").val(" ");
                $("#inputCity").val(" ");
            }
      } catch (error) {
          console.log(error);
      }

    });

    let selectedApis = [];
    let apisArray = [];

    $('#department').on('change', function() {
        let department = $(this).val();
        if (department != '') {
            $.ajax({
                    url: "{{ route('satellite.get_cities') }}",
                    type: 'GET',
                    data: {
                        department
                    },
                })
                .done(function(res) {
                    $('#city').html("");
                    let options = '';
                    $.each(res, function(i, cities) {
                        let city_id = cities.id;
                        let city_name = cities.name;
                        options += '<option value="' + city_id + '">' + city_name + '</option>';
                    });
                    $('#city').append(options);
                });
        } else {
            $('#city').html("");
        }
    });


    $("#btn-update-personal-info").on("click", function() {
        $("#btn-update-personal-info").prop('disabled', false);
        ResetValidations();
        formData = new FormData(document.getElementById('form-update-personal-info'));
        $.ajax({
                url: '{{ route('satellite.update_personal_info') }}',
                type: 'POST',
                processData: false,
                contentType: false,
                data: formData,
            })
            .done(function(res) {
                if (res.success) {
                    Toast.fire({
                        icon: "success",
                        title: "Se han modificado los datos personales exitosamente",
                    });
                    $("#btn-update-personal-info").prop('disabled', false);
                    $("#rut").val('');
                    $("#chamber_commerce").val('');

                    console.log(res);
                    getDocuments();
                    coincidenceWithBanned();
                } else {
                    Toast.fire({
                        icon: "error",
                        title: "Ha ocurrido un error, comuniquese con el ADMIN",
                    });
                    $("#btn-update-personal-info").prop('disabled', false);
                }
            })
            .fail(function(res) {
                CallBackErrors(res);
                Toast.fire({
                    icon: "error",
                    title: "Verifique la informacion de los campos",
                });
                $("#btn-update-personal-info").prop('disabled', false);
            });

    });



    //Función emitida por el botón de get-logs para desplegar el módal.
    $("#btn-get-logs-owner").on("click", function() {
        $("#modal-owners-logs").modal("show");
    });


    // Función para gestionar las notas enviadas a cada propietario.
    function ownerNotes() {
        $("#note").val("");
        owner_id = '{{ $owner->id }}';
        $.ajax({
                url: '{{ route('satellite.get_notes_owner') }}',
                type: 'GET',
                data: {
                    'owner_id': owner_id
                },
            })
            .done(function(res) {
                $("#div-body-owner-notes").html(res);
                $("#table-notes-owner").DataTable({
                    "lengthMenu": [
                        [100, 200, 300, 400],
                        [100, 200, 300, 400]
                    ],
                    "ordering": false,
                });
            });
    }
    $("#btn-send-note-owner").on("click", function() {
        $("#modal-owners-notes").modal("show");
        ownerNotes();
    })

    $("#btn-create-note").on("click", function() {
        $("#btn-create-note").prop('disabled', true);
        owner_id = '{{ $owner->id }}';
        note = $("#note").val();
        $.ajax({
                url: '{{ route('satellite.store_note_owner') }}',
                type: 'POST',
                data: {
                    '_token': '{{ csrf_token() }}',
                    'owner_id': owner_id,
                    'note': note
                },
            })
            .done(function(res) {
                if (res.success) {
                    Toast.fire({
                        icon: "success",
                        title: "Se ha creado la nota exitosamente",
                    });
                    ownerNotes();
                } else {
                    Toast.fire({
                        icon: "error",
                        title: "Ha ocurrido un error, comuniquese con el ADMIN",
                    });
                }
                $("#btn-create-note").prop('disabled', false);
            })
            .fail(function(res) {
                CallBackErrors(res);
                Toast.fire({
                    icon: "error",
                    title: "Verifique la informacion de los campos",
                });
                $("#btn-create-note").prop('disabled', false);
            });
    })



    $("#btn-update-payment-method").on("click", function() {
        $("#btn-update-payment-method").prop('disabled', false);
        ResetValidations();
        formData = new FormData(document.getElementById('form-update-payment-method'));
        $.ajax({
                url: '{{ route('satellite.update_payment_method') }}',
                type: 'POST',
                processData: false,
                contentType: false,
                data: formData,
            })
            .done(function(res) {
                if (res.success) {
                    Toast.fire({
                        icon: "success",
                        title: "Se ha modificado la forma de pago exitosamente",
                    });
                    $("#btn-update-payment-method").prop('disabled', false);
                    coincidenceWithBanned();
                } else {
                    Toast.fire({
                        icon: "error",
                        title: "Ha ocurrido un error, comuniquese con el ADMIN",
                    });
                    $("#btn-update-payment-method").prop('disabled', false);
                }
            })
            .fail(function(res) {
                CallBackErrors(res);
                Toast.fire({
                    icon: "error",
                    title: "Verifique la informacion de los campos",
                });
                $("#btn-update-payment-method").prop('disabled', false);
            });

    });

    //funcionalidad para cambiar el minimo de pago y acumular 2 semanas.
    $("#btn_change_payment").on("click", function() {
        $("#btn_change_payment").prop('disabled', false);
        ResetValidations();
        formData = new FormData(document.getElementById('form-change-payment'));
        // owner_id = '{{ $owner->id }}';
        $.ajax({
                url: '{{ route('satellite.payment.change_minpay') }}',
                type: 'POST',
                processData: false,
                contentType: false,
                data: formData,
            })
            .done(function(res) {
                if (res.success) {
                    Toast.fire({
                        icon: "success",
                        title: "Se realizarón los cambios exitosamente",
                    });
                    $("#btn_change_payment").prop('disabled', false);
                    $("#modal-change-payment").modal("hide");
                   //ResetModalForm("#form-change-payment");
                } else {
                    Toast.fire({
                        icon: "error",
                        title: "Ha ocurrido un error, comuniquese con el ADMIN",
                    });
                    $("#btn_change_payment").prop('disabled', false);
                }
            })
            .fail(function(res) {
                CallBackErrors(res);
                Toast.fire({
                    icon: "error",
                    title: "Verifique la informacion de los campos",
                });
                $("#btn_change_payment").prop('disabled', false);
            });

    });


    $("#btn_add_commission").on("click", function() {
        $("#btn_add_commission").prop('disabled', false);
        ResetValidations();
        formData = new FormData(document.getElementById('form-add-commission'));
        $.ajax({
                url: '{{ route('satellite.store_commission') }}',
                type: 'POST',
                processData: false,
                contentType: false,
                data: formData,
            })
            .done(function(res) {
                if (res.success) {
                    Toast.fire({
                        icon: "success",
                        title: "Se ha creado la comision exitosamente",
                    });
                    $("#btn_add_commission").prop('disabled', false);
                    ResetModalForm("#form-add-commission");
                    $("#modal-add-commission").modal("hide");
                    getCommissions();
                } else {
                    Toast.fire({
                        icon: "error",
                        title: "Ha ocurrido un error, comuniquese con el ADMIN",
                    });
                    $("#btn_add_commission").prop('disabled', false);
                }
            })
            .fail(function(res) {
                CallBackErrors(res);
                Toast.fire({
                    icon: "error",
                    title: "Verifique la informacion de los campos",
                });
                $("#btn_add_commission").prop('disabled', false);
            });

    });

    $("#btn_update_commission").on("click", function() {
        $("#btn_update_commission").prop('disabled', false);
        ResetValidations();
        formData = new FormData(document.getElementById('form-update-commission'));
        $.ajax({
                url: '{{ route('satellite.update_commission') }}',
                type: 'POST',
                processData: false,
                contentType: false,
                data: formData,
            })
            .done(function(res) {
                if (res.success) {
                    Toast.fire({
                        icon: "success",
                        title: "Se ha modificado la comision exitosamente",
                    });
                    $("#btn_update_commission").prop('disabled', false);
                    $("#modal-update-commission").modal("hide");
                    ResetModalForm("#form-update-commission");
                    getCommissions();
                } else {
                    Toast.fire({
                        icon: "error",
                        title: "Ha ocurrido un error, comuniquese con el ADMIN",
                    });
                    $("#btn_update_commission").prop('disabled', false);
                }
            })
            .fail(function(res) {
                CallBackErrors(res);
                Toast.fire({
                    icon: "error",
                    title: "Verifique la informacion de los campos",
                });
                $("#btn_update_commission").prop('disabled', false);
            });

    });

    $("#btn_update_api").on("click", function() {
        $("#btn_update_api").prop('disabled', false);

        formData = new FormData(document.getElementById('form-update-api'));
        $.ajax({
                url: '{{ route('satellite.update_api') }}',
                type: 'POST',
                processData: false,
                contentType: false,
                data: formData,
            })
            .done(function(res) {
                if (res.success) {
                    Toast.fire({
                        icon: "success",
                        title: "Se ha modificado el Api exitosamente",
                    });
                    $("#btn_update_api").prop('disabled', false);
                } else {
                    Toast.fire({
                        icon: "error",
                        title: "Ha ocurrido un error, comuniquese con el ADMIN",
                    });
                    $("#btn_update_api").prop('disabled', false);
                }
            })
            .fail(function(res) {
                Toast.fire({
                    icon: "error",
                    title: "Verifique la informacion de los campos",
                });
                $("#btn_update_api").prop('disabled', false);
            });

    });

    $("#btn_percent").on("click", function() {
        $("#btn_percent").prop('disabled', false);
        ResetValidations();
        owner_id = '{{ $owner->id }}';
        commission_percent = $("#commission_percent").val();
        $.ajax({
                url: '{{ route('satellite.update_percent') }}',
                type: 'POST',
                data: {
                    "_token": "{{ csrf_token() }}",
                    'owner_id': owner_id,
                    'commission_percent': commission_percent
                },
            })
            .done(function(res) {
                if (res.success) {
                    Toast.fire({
                        icon: "success",
                        title: "Se ha modificado porcentaje de comision exitosamente",
                    });
                    $("#btn_percent").prop('disabled', false);
                } else {
                    Toast.fire({
                        icon: "error",
                        title: "Ha ocurrido un error, comuniquese con el ADMIN",
                    });
                    $("#btn_percent").prop('disabled', false);
                }
            })
            .fail(function(res) {
                CallBackErrors(res);
                Toast.fire({
                    icon: "error",
                    title: "Verifique la informacion de los campos",
                });
                $("#btn_percent").prop('disabled', false);
            });

    });

    function changeStatus() {
        $("#btn_update_status").prop('disabled', false);
        ResetValidations();
        formData = new FormData(document.getElementById('form-update-status'));
        owner_id = '{{ $owner->id }}';
        $.ajax({
                url: '{{ route('satellite.update_status') }}',
                type: 'POST',
                processData: false,
                contentType: false,
                data: formData,
            })
            .done(function(res) {
                if (res.success) {
                    Toast.fire({
                        icon: "success",
                        title: "Informacion modificada exitosamente",
                    });
                    $("#btn_update_status").prop('disabled', false);
                    if ($("#status").val() == 2 || res.convert == true) {
                        location.reload();
                    }


                } else {
                    Toast.fire({
                        icon: "error",
                        title: "Ha ocurrido un error, comuniquese con el ADMIN",
                    });
                    $("#btn_update_status").prop('disabled', false);
                }
            })
            .fail(function(res) {
                CallBackErrors(res);
                Toast.fire({
                    icon: "error",
                    title: "Verifique la informacion de los campos",
                });
                $("#btn_update_status").prop('disabled', false);
            });
    }

    function getDocuments() {
        owner_id = '{{ $owner->id }}';
        $.ajax({
                url: '{{ route('satellite.get_documents') }}',
                type: 'GET',
                data: {
                    'owner_id': owner_id
                },
            })
            .done(function(res) {
                $("#div_rut").html(res.rut);
                $("#div_chamber_commerce").html(res.chamber_commerce);
                $("#div_shareholder_structure").html(res.shareholder_structure);
                $("#div_bank_certification").html(res.bank_certification);
                $("#div_doc").html(res.doc);
                zoomImageGB();
            });
    }

    function embedDocuments(url, type) {
        if (type == "pdf") {
            $("#modal-embed-documents").modal("show");
            document.getElementById('document-pdf').innerHTML =
                "<embed id='embed-documents' src='../../../../storage/app/public/GB/satellite/owner/" + url +
                "' type='' style='height: 600px; width: 100%'></embed>"
        } else {
            window.location.href = "../../../../storage/app/public/GB/satellite/owner/" + url;
        }
    }

    function paymentMethod() {
        payment_method = $("#payment_method").val();

        if (payment_method == 1) {
            $("#div_bank").css("display", "none");
            $("#div_bank_usa").css("display", "none");
            $("#div_holder").css("display", "none");
            $("#div_document_type").css("display", "none");
            $("#div_payment_document_number").css("display", "none");
            $("#div_account_type").css("display", "none");
            $("#div_account_number").css("display", "none");
            $("#div_city").css("display", "none");
            $("#div_address").css("display", "none");
            $("#div_phone").css("display", "none");
            $("#div_country").css("display", "none");
            $("#div_route_number").css("display", "none");
            $("#div_status_usa").css("display", "none");
            $("#div_swift_code").css("display", "none");
            $("#div_zelle").css("display", "none");
            $("#div_postal_code").css("display", "none");
            $("#div_email").css("display", "none");
            $("#div_payment_from").css("display", "none");
        }

        if (payment_method == 2) {
            $("#div_bank").css("display", "");
            $("#div_bank_usa").css("display", "none");
            $("#div_holder").css("display", "");
            $("#div_document_type").css("display", "");
            $("#div_payment_document_number").css("display", "");
            $("#div_account_type").css("display", "");
            $("#div_account_number").css("display", "");
            $("#div_city").css("display", "");
            $("#div_address").css("display", "none");
            $("#div_phone").css("display", "none");
            $("#div_country").css("display", "none");
            $("#div_route_number").css("display", "none");
            $("#div_status_usa").css("display", "none");
            $("#div_swift_code").css("display", "none");
            $("#div_zelle").css("display", "none");
            $("#div_postal_code").css("display", "none");
            $("#div_email").css("display", "none");
            $("#div_payment_from").css("display", "");
        }
        if (payment_method == 3) {
            $("#div_bank").css("display", "none");
            $("#div_bank_usa").css("display", "none");
            $("#div_holder").css("display", "");
            $("#div_document_type").css("display", "");
            $("#div_payment_document_number").css("display", "");
            $("#div_account_type").css("display", "none");
            $("#div_account_number").css("display", "none");
            $("#div_city").css("display", "");
            $("#div_address").css("display", "");
            $("#div_phone").css("display", "");
            $("#div_country").css("display", "none");
            $("#div_route_number").css("display", "none");
            $("#div_status_usa").css("display", "none");
            $("#div_swift_code").css("display", "none");
            $("#div_zelle").css("display", "none");
            $("#div_postal_code").css("display", "none");
            $("#div_email").css("display", "none");
            $("#div_payment_from").css("display", "");
        }
        if (payment_method == 4) {
            $("#div_bank").css("display", "none");
            $("#div_bank_usa").css("display", "none");
            $("#div_holder").css("display", "");
            $("#div_document_type").css("display", "none");
            $("#div_payment_document_number").css("display", "none");
            $("#div_account_type").css("display", "none");
            $("#div_account_number").css("display", "none");
            $("#div_city").css("display", "none");
            $("#div_address").css("display", "none");
            $("#div_phone").css("display", "none");
            $("#div_country").css("display", "none");
            $("#div_route_number").css("display", "none");
            $("#div_status_usa").css("display", "none");
            $("#div_swift_code").css("display", "none");
            $("#div_zelle").css("display", "none");
            $("#div_postal_code").css("display", "none");
            $("#div_email").css("display", "none");
            $("#div_payment_from").css("display", "");
        }
        if (payment_method == 5) {
            $("#div_bank").css("display", "none");
            $("#div_bank_usa").css("display", "none");
            $("#div_holder").css("display", "");
            $("#div_document_type").css("display", "");
            $("#div_payment_document_number").css("display", "");
            $("#div_account_type").css("display", "none");
            $("#div_account_number").css("display", "none");
            $("#div_city").css("display", "");
            $("#div_address").css("display", "");
            $("#div_phone").css("display", "");
            $("#div_country").css("display", "none");
            $("#div_route_number").css("display", "none");
            $("#div_status_usa").css("display", "none");
            $("#div_swift_code").css("display", "none");
            $("#div_zelle").css("display", "none");
            $("#div_postal_code").css("display", "none");
            $("#div_email").css("display", "none");
            $("#div_payment_from").css("display", "");
        }
        if (payment_method == 6 || payment_method == 10 || payment_method == 11) {
            $("#div_bank").css("display", "");
            $("#div_bank_usa").css("display", "none");
            $("#div_holder").css("display", "");
            $("#div_document_type").css("display", "");
            $("#div_payment_document_number").css("display", "");
            $("#div_account_type").css("display", "");
            $("#div_account_number").css("display", "");
            $("#div_city").css("display", "");
            $("#div_address").css("display", "none");
            $("#div_phone").css("display", "none");
            $("#div_country").css("display", "none");
            $("#div_route_number").css("display", "none");
            $("#div_status_usa").css("display", "none");
            $("#div_swift_code").css("display", "none");
            $("#div_zelle").css("display", "none");
            $("#div_postal_code").css("display", "none");
            $("#div_email").css("display", "none");
            $("#div_payment_from").css("display", "");
        }
        if (payment_method == 7) {
            $('#option_document-10').removeClass('d-none');
            $("#div_bank").css("display", "none");
            $("#div_bank_usa").css("display", "");
            $("#div_holder").css("display", "");
            $("#div_document_type").css("display", "");
            $("#div_payment_document_number").css("display", "");
            $("#div_account_type").css("display", "");
            $("#div_account_number").css("display", "");
            $("#div_city").css("display", "");
            $("#div_address").css("display", "");
            $("#div_phone").css("display", "none");
            $("#div_country").css("display", "");
            $("#div_route_number").css("display", "");
            $("#div_status_usa").css("display", "");
            $("#div_swift_code").css("display", "");
            $("#div_zelle").css("display", "");
            $("#div_postal_code").css("display", "");
            $("#div_email").css("display", "");
            $("#div_payment_from").css("display", "");
        } else {
            $('#option_document-10').removeClass('d-none').addClass('d-none');
        }

        if (payment_method == 8) {
            $("#div_bank").css("display", "none");
            $("#div_bank_usa").css("display", "none");
            $("#div_holder").css("display", "");
            $("#div_document_type").css("display", "");
            $("#div_payment_document_number").css("display", "");
            $("#div_account_type").css("display", "none");
            $("#div_account_number").css("display", "none");
            $("#div_city").css("display", "");
            $("#div_address").css("display", "");
            $("#div_phone").css("display", "");
            $("#div_country").css("display", "");
            $("#div_route_number").css("display", "none");
            $("#div_status_usa").css("display", "none");
            $("#div_swift_code").css("display", "none");
            $("#div_zelle").css("display", "none");
            $("#div_postal_code").css("display", "none");
            $("#div_email").css("display", "none");
            $("#div_payment_from").css("display", "");
        }
        if (payment_method == 9) {
            $("#div_bank").css("display", "");
            $("#div_bank_usa").css("display", "none");
            $("#div_holder").css("display", "");
            $("#div_document_type").css("display", "");
            $("#div_payment_document_number").css("display", "");
            $("#div_account_type").css("display", "");
            $("#div_account_number").css("display", "");
            $("#div_city").css("display", "");
            $("#div_address").css("display", "none");
            $("#div_phone").css("display", "none");
            $("#div_country").css("display", "none");
            $("#div_route_number").css("display", "none");
            $("#div_status_usa").css("display", "none");
            $("#div_swift_code").css("display", "none");
            $("#div_zelle").css("display", "none");
            $("#div_postal_code").css("display", "none");
            $("#div_email").css("display", "none");
            $("#div_payment_from").css("display", "");
        }
    }

    function getCommissions() {
        owner_id = '{{ $owner->id }}';
        $.ajax({
                url: '{{ route('satellite.get_commissions') }}',
                type: 'GET',
                data: {
                    'owner_id': owner_id
                },
            })
            .done(function(res) {
                $("#div_commission_for").html(res);
            });
    }

    function modalUpdate(json) {
        $("#commission_id").val(json.id);
        $("#update_owner_receiver").val(json.owner_receiver.id);
        $("#update_percent").val(json.percent);
        $("#type_update").val(json.type);
        $("#update_page").val(json.page);
        showPage();
    }

    function removeCommission(id) {
        $.ajax({
                url: '{{ route('satellite.remove_commission') }}',
                type: 'POST',
                data: {
                    "_token": "{{ csrf_token() }}",
                    'id': id
                },
            })
            .done(function(res) {
                if (res) {
                    Toast.fire({
                        icon: "success",
                        title: "Se ha eliminado la comision exitosamente",
                    });
                    getCommissions();
                } else {
                    Toast.fire({
                        icon: "error",
                        title: "Ha ocurrido un error, comuniquese con el ADMIN",
                    });
                }
            })
            .fail(function(res) {
                Toast.fire({
                    icon: "error",
                    title: "Verifique la informacion de los campos",
                });
            });
    }

    $("#status").on("change", function() {
        if ($(this).val() == 2)
            $("#div_status_comment").css("display", "block");
        else
            $("#div_status_comment").css("display", "none");

    });

    function showPage() {
        if ($("#type_add").val() == 1)
            $("#div_page_add").css("display", "none");
        else
            $("#div_page_add").css("display", "");

        if ($("#type_update").val() == 1)
            $("#div_page_update").css("display", "none");
        else
            $("#div_page_update").css("display", "");
    }

    function coincidenceWithBanned() {
        owner_id = '{{ $owner->id }}';
        status = '{{ $owner->status }}';
        if (status == 1) {
            $.ajax({
                    url: '{{ route('satellite.coincidence_banned') }}',
                    type: 'GET',
                    data: {
                        'owner_id': owner_id
                    },
                })
                .done(function(res) {
                    $.each(res, function(i, item) {
                        $(".invalid-" + i).remove();
                        if (item) {
                            addStyleBanned(i);
                        }
                    });
                });
        }
    }

    function addStyleBanned(id) {
        $("#" + id).addClass('is-invalid');
        $("#" + id).after("<div class='text-danger invalid-" + id + "'>Coincidencia con un propietario vetado</div>");
    }

    $("#asign-chaturbate-api").on("click", function() {
        $("#api-chaturbate-modal").modal("show");
        getApiList();
        // ownerNotes();
    })

    function getApiList() {
        owner_id = '{{ $owner->id }}';

        $.ajax({
                url: '{{ route('satellite.getAllApis') }}',
                type: 'GET',
                data: {
                    'owner_id': owner_id
                },
            })
            .done(function(res) {
                apisArray = res
                let html = '<ul style="column-count: 3;">';
                for (let i = 0; i < res.length; i++) {

                    let checked = '';

                    if (res[i].status == 1) {

                        checked = 'checked';
                        selectedApis.push(res[i].id);
                    }

                    html += '<li style="list-style:none;"><input type="checkbox" ' + checked +
                        ' onclick="addApi(this);" id="' + res[i].id + '" value="' + res[i].id + '"> ' + res[i]
                        .user + '</li>'
                }
                html += '</ul>'

                $("#api-list").html(html);
            });
    }

    Array.prototype.remove = function() {
        var what, a = arguments,
            L = a.length,
            ax;
        while (L && this.length) {
            what = a[--L];
            while ((ax = this.indexOf(what)) !== -1) {
                this.splice(ax, 1);
            }
        }
        return this;
    };

    function addApi(input) {

        if (input.checked) {

            selectedApis.push(parseInt(input.id));
            $('#apisRecentAsigneds').html('');
            $('#oldApis').html('');
            for (let i = 0; i < apisArray.length; i++) {
                if (selectedApis.includes(apisArray[i].id)) $('#apisRecentAsigneds').append('<li>' + apisArray[i].user +
                    '</li>');
            }
        } else {

            selectedApis.remove(parseInt(input.id));
        }
        console.log(selectedApis);
    }

    function assignApis() {

        owner_id = '{{ $owner->id }}';
        $.ajax({
                url: '{{ route('satellite.assignApis') }}',
                type: 'POST',
                data: {
                    "_token": "{{ csrf_token() }}",
                    'owner_id': owner_id,
                    'apis': selectedApis,
                },

            })
            .done(function(res) {
                console.log(res);
                if (res.code == 200) {
                    Toast.fire({
                        icon: "success",
                        title: "Se han asignado las APIs exitosamente",
                    });
                    $('#api-chaturbate-modal').modal('hide');
                    selectedApis = [];

                } else {
                    Toast.fire({
                        icon: "error",
                        title: "Error al asignar APIs",
                    });
                    $('#api-chaturbate-modal').modal('hide');
                    selectedApis = [];
                }

            })
    }

    window.onload = getDocuments();
    window.onload = paymentMethod();
    window.onload = getCommissions();
    window.onload = coincidenceWithBanned();
</script>
@endpush

<style>
.sl-overlay {
    z-index: 1031 !important;
    background: none !important;
}

</style>