{{-- extend layout --}}
@extends('layouts.contentLayoutMaster')

{{-- page title --}}
@section('title', 'Campañas')
{{-- vendor styles --}}
@section('vendor-style')
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/data-tables/css/jquery.dataTables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/data-tables/extensions/responsive/css/responsive.dataTables.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/data-tables/css/dataTables.checkboxes.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/sweetalert/sweetalert.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/flag-icon/css/flag-icon.min.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('vendors/dropify/css/dropify.min.css') }}">

    <style>
        .eliminar_campaing {
            background: none;
            color: inherit;
            border: none;
            padding: 0;
            font: inherit;
            cursor: pointer;
            outline: inherit;
        }
    </style>
@endsection

{{-- page styles --}}
@section('page-style')
    <link rel="stylesheet" type="text/css" href="{{ asset('css/pages/app-invoice.css') }}">
@endsection
{{-- page content --}}
@section('content')
    @include('pages.campaign.modals.campaign-modal')

    <div id="edit_campaign" class="modal"></div>
    <div id="load_progress" class="progress" style="display: none">
        <div class="indeterminate"></div>
    </div>
    <div class="breadcrumbs-dark pb-0 pt-0" id="breadcrumbs-wrapper">
        <!-- Search for small screen-->
        <div class="container">
            <div class="row">
                <div class="col s10 m6 l6">
                    <h5 class="breadcrumbs-title mt-0 mb-0"><span>Campañas </span></h5>
                </div>
            </div>
        </div>
    </div>
    <section class="invoice-list-wrapper section col s12">
        <div class="invoice-create-btn">
            <button onclick="showModalCampaign(this)" class="btn waves-effect waves-light invoice-create border-round z-depth-4 ">
                <i class="material-icons">add</i>
                <span class="hide-on-small-only">Campaña</span>
            </button>
        </div>
        <div class="filter-btn">
            <a class='dropdown-trigger btn waves-effect waves-light purple darken-1 border-round' href='#' data-target='btn-filter'>
              <span class="hide-on-small-only">Filtrar</span>
              <i class="material-icons">keyboard_arrow_down</i>
            </a>

            <ul id='btn-filter' class='dropdown-content'>
                <li><a href="#" onclick="submitFilter(1)">Activos</a></li>
                <li><a href="#" onclick="submitFilter(0)">Inactivos</a></li>
            </ul>
        </div>

        <div class="responsive-table">
            <table id="campaign-table" class="table invoice-data-table white border-radius-4 pt-1">
                <thead>
                    <tr>
                        <th></th>
                        <th></th>
                        <th>#Hashtag</th>
                        <th>Nombre</th>
                        <th>Inicio</th>
                        <th>Fin</th>
                        <th>Empresa</th>
                        <th>Estado</th>
                        <th>Acción</th>
                        <th></th>
                    </tr>
                </thead>

                <tbody>
                    @forelse ($campaigns as $campaign)
                        <tr>
                            <td></td>
                            <td></td>
                            <td>{{ $campaign->slug }}</td>
                            <td>{{ $campaign->name }}</td>
                            <td>{{ \Carbon\Carbon::parse($campaign->openDate)->format('d/m/Y')}}</td>
                            <td>{{ \Carbon\Carbon::parse($campaign->closeDate)->format('d/m/Y')}}</td>
                            @if ( isset($campaign->company))
                                <td>{{ $campaign->company->name }}</td>
                            @else
                                <td>No tiene nombre</td>
                            @endif
                            @if ($campaign->state === 1 )
                                <td>Activa</td>
                            @else
                                <td>Inactiva</td>
                            @endif
                            <td>
                                <div class="invoice-action">
                                    <a  style="cursor:pointer;" onclick="editCampaign(this)" data-toggle="tooltip" data-tooltip="Editar" data-position="bottom" data-id="{{ $campaign->uuidKey }}" data-type="edit">
                                        <i class="material-icons">edit</i>
                                    </a>
                                    <a style="cursor:pointer;" class="eliminar_campaing" onclick="deleteCampaign(this, '{{ $campaign->name }}')" data-toggle="tooltip" data-tooltip="Eliminar" data-position="bottom" data-id="{{ $campaign->uuidKey }}">
                                        <i class="material-icons">clear</i>
                                    </a>

                                </div>
                            </td>
                            <td></td>
                        </tr>
                    @empty

                    @endforelse

                </tbody>
            </table>
        </div>
    </section>
@endsection

{{-- vendor scripts --}}
@section('vendor-script')
    <script src="{{ asset('vendors/data-tables/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('vendors/data-tables/extensions/responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('vendors/data-tables/js/datatables.checkboxes.min.js') }}"></script>
    <script src="{{ asset('vendors/sweetalert/sweetalert.min.js') }}"></script>
    <script src="{{ asset('vendors/jquery-validation/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('vendors/dropify/js/dropify.min.js') }}"></script>
    <script src="{{ asset('vendors/color-picker-drawr-palette/src/jquery.drawrpalette.js') }}"></script>
    <script src="{{ asset('/vendors/ckeditor/ckeditor.js') }}"></script>
@endsection

{{-- page scripts --}}
@section('page-script')
    <script src="{{ asset('js/scripts/form-validation.js') }}"></script>
    <script src="{{ asset('js/scripts/app-campaign.js') }}"></script>

    @if (session('error') === 'ok')
        <script>
            Swal.fire(
                'Errores!',
                'Existe un error',
                 console.log(session('errores')),
                'warning'
            )
        </script>
    @endif

    <script>
        let routeSaveCampaign = '{{ route('api.campaign.save') }}';
        let routeDeleteCampaign = '{{ route('api.campaign.delete', ['campaign' => ':idCampaign']) }}';
        let routeObtainCampaign = '{{ route('web.campaign.obtain', ['campaign' => ':idCampaign']) }}';
        let routeUpdateCampaignInformation = '{{ route('web.manager.information.update', ['uuid' => ':idCampaign']) }}';
        let timeout = null
        $("#slug").on("keyup", function() {
            clearTimeout(timeout);
            timeout = setTimeout(function(){
                let slug = $("#slug").val(); //CAPTURANDO EL VALOR DE INPUT CON ID CEDULA
                let longitudSlug = $("#slug").val().length; //CUENTO LONGITUD

                //Valido la longitud
                if(longitudSlug >= 3){
                    let dataString = 'slugParam=' + slug;
                    $.ajax({
                        url: 'validhashtag',
                        type: "GET",
                        data: dataString,
                        dataType: "JSON",
                        success: function(datos){
                            if( datos.length === 1 ){
                                $("#slugValid").text('invalido el hashtag ingresado ya existe');
                                $("#slug").get(0).setCustomValidity("invalido el hashtag ingresado ya existe");
                                $("#slug").get(0).reportValidity();
                            }else{
                                $("#slugValid").text('');
                                }
                            }
                    });
                } else {
                    $("#slugValid").text('');
                }
            }, 500 );
        });
    </script>

    <script>
        $(function() {
            $('.modal').modal();
            $('#modal3').modal('open');
            $('#modal3').modal('close');

        });

        function showPreview(objFileInput) {
            if (objFileInput.files[0]) {
                let fileReader = new FileReader();
                fileReader.onload = function(e) {
                    $('#imgCat').attr('src', e.target.result);
                }
                fileReader.readAsDataURL(objFileInput.files[0]);

                let formData = new FormData();
                formData.append('fileItem', objFileInput.files[0]);
                let routeUPLOAD = $("#media").attr("data-url");
                $.ajax({
                    url: routeUPLOAD,
                    method: 'PUT',
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: function(xhr) {
                        xhr.setRequestHeader('Authorization', 'Bearer {{ session()->get('token') }} ');

                    },
                }).done(function(data) {
                    window.location.reload();
                }).fail(function() {

                });
            }
        }

        function submitFilter(frm) {
            let url = `{{ route('campaign.index') }}`;
            let addon  = (url.indexOf('?') !== -1) ? '&' : '?';
                addon += 'stateParam=' + frm;
            window.location.assign(url + addon);
        }

        $(document).ready(function() {
            // Basic
            $('.dropify').dropify();

            // Translated
            $('.dropify-fr').dropify({
                messages: {
                    default: 'Glissez-déposez un fichier ici ou cliquez',
                    replace: 'Glissez-déposez un fichier ou cliquez pour remplacer',
                    remove: 'Supprimer',
                    error: 'Désolé, le fichier trop volumineux'
                }
            });

            // Used events
            let drEvent = $('.dropify-event').dropify();

            drEvent.on('dropify.beforeClear', function(event, element) {
                return confirm("Do you really want to delete \"" + element.filename + "\" ?");
            });

            drEvent.on('dropify.afterClear', function(event, element) {
                alert('File deleted');
            });
        });
    </script>
@endsection