@extends('layouts.cms')

@section('content')

<div class="section-heading clearfix">
    <h2 class="section-title"><i class="fas fa-store"></i> Ocultar Convenios</h2>
</div>

<div class="panel-content">
    <h2 class="heading">Listado de Comercios</h2>
    <div class="row">
        <div class="col-sm-12">
            <table id="tbl-partners" class="table table-hover table-bordered table-responsive">
                <thead>
                    <tr>
                        <th>Convenio</th>
                        <th>Mostrar / Ocultar</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>

@endsection

@section('footer')
<script>
    $(document).ready(function() {
        $('#tbl-partners').DataTable({
            "responsive": true,
            "language": {
                "url": "//cdn.datatables.net/plug-ins/1.10.12/i18n/Spanish.json" // Lenguaje Español
            },
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "/admin/cms/getSomePartners",
                "type": "POST",
                "data": {
                    "account": '{{ $account }}',
                    "_token": "{{ csrf_token() }}",
                },
            },
            "columns": [
                { "data": "name" },
                { "data": "deleted" },
            ],
            "columnDefs": [
                {
                    "render": function(data, type, row){
                        var html = '';
                        if(data == false){
                            html += '<div class="col-sm-1 material-switch" style="padding-right: 50px;">';
                            html += "<input class='switch' id='switch" + row.id + "' data-id='" + row.id + "' checked type='checkbox'/>";
                            html += '<label for="switch' + row.id + '" class="label-primary"></label>';
                            html += '</div><div class="col-md-6 text"><span>Ocultar</span></div>';
                        } else {
                            html += '<div class="col-sm-1 material-switch" style="padding-right: 50px;">';
                            html += "<input class='switch' id='switch" + row.id + "' data-id='" + row.id + "' type='checkbox'/>";
                            html += '<label for="switch' + row.id + '" class="label-primary"></label>';
                            html += '</div><div class="col-md-6 text"><span>Mostrar</span></div>';
                        }
                        return html;
                    },
                    "targets": 1
                },
            ],
        });
    });

    $('body').on('click', '.switch', function(){
        var text = $(this).parent().parent().find('span').text();
        text = (text == 'Ocultar') ? 'Mostrar' : 'Ocultar';
        $(this).parent().parent().find('span').text(text);

        var checked = ($(this).prop("checked") == true) ? 0 : 1;
        var id = $(this).attr("data-id");

        $('.switch').attr('disabled', true);

        $.post('/admin/cms/partners/changeStatus', {_token: "{{ csrf_token() }}", account: '{{ $account }}', id: id, deleted: checked }, function( response ) {
            $('.switch').attr('disabled', false);
            if(response.msg){
                alert(response.msg);
            }else{
                console.log(response);
                alert('Error del servidor, validar consola.');
            }
        }).fail(function(err){
            $('.switch').attr('disabled', false);
            console.log(err);
            alert('Error del servidor, validar consola.');
        });
    });
</script>
@endsection