@extends('layouts.app')

@section('head')
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" />

<style>
    td.details-control {
        background: url('../images/details_open.png') no-repeat center center;
        cursor: pointer;
    }
    tr.shown td.details-control {
        background: url('../images/details_close.png') no-repeat center center;
    }
</style>

@endsection

@section('activeInicio')
active
@endsection

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">Nueva ID de campaña</div>

                <div class="card-body">
                    <form action="{{url('/admin/campaña/nueva')}}" method="POST">
                        {{ csrf_field() }}
                        <div class="form-group">
                          <label for="exampleInputEmail1">Formularios</label>
                          <select required class="form-control" name="formulario_id">
                              <option value="5">Formulario 5</option>
                              <option value="4">Formulario 4</option>
                          </select>

                              <div class="row">
                                <div class="col-md-6">
                          <label for="exampleInputEmail1">ID de Open Orange</label>
                          <select class="form-control" name="openorange_id">
                              @foreach ($campañasOpen as $item)
                                 <option value="{{$item->Code}}">({{$item->Code}}) {{$item->CampaignName}}</option>
                              @endforeach
                          </select>
                              </div>
                              <div class="col-md-6">
                                <label for="exampleInputEmail1">Nombre</label>
                                <input type="text" class="form-control" name="nombre">
                                    </div>

                        </div>

                        </div>
                        <button type="submit" class="btn btn-primary">Crear ID de campaña</button>
                      </form>
                    </div>

                    <div class="card-header">Lista de campañas</div>
                <div class="card-body">
                    <table id="example" class="display" style="width:100%">
                        <thead>
                            <tr>
                                <th></th>
                                <th>ID</th>
                                <th>Open ID</th>
                                <th>Formulario</th>
                                <th>Nombre</th>
                                <th>Fecha</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th></th>
                                <th>ID</th>
                                <th>Open ID</th>
                                <th>Formulario</th>
                                <th>Nombre</th>
                                <th>Fecha</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection


@section('script')
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>


<script>
    /* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Instagram:</td>'+
            '<td>'+d.instagram+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Facebook:</td>'+
            '<td>'+d.facebook+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Web:</td>'+
            '<td>'+d.web+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Email:</td>'+
            '<td>'+d.email+'</td>'+
        '</tr>'+
    '</table>';
}

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "ajax": '{{url('/admin/campaña/get')}}',
        "language": {
            "url": "https://cdn.datatables.net/plug-ins/1.10.21/i18n/Spanish.json"
        },
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "id" },
            { "data": "openorange_id" },
            { "data": "formulario_id" },
            { "data": "nombre" },
            { "data": "created_at" },
        ],
        "order": [[1, 'desc']]
    } );

    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
} );

</script>

@endsection