@extends('layouts.tables')

@section('tables-head')
    <title>Categorias | PBX Hosting</title>
@endsection

@section('tables-title')
    Categorias
@endsection

@section('tables-btn')
    <button class="btn btn-primary addCategory">Crear categoria</button>
@endsection

@section('tables-content')
    <thead>
        <tr>
            <th>Tag</th>
            <th>Icono</th>
            <th>Publicado</th>
            <th>Acciones</th>
        </tr>
    </thead>
    <tbody>
        @if(isset($entries))
            @foreach($entries as $entry)
                <tr>
                    <td>{!! $entry['tag'] !!}</td>
                    <td>{!! $entry['icon'] !!}</td>
                    <td>{{$entry['published'] == true?'Si':'No'}}</td>
                    <td>
                        @if($entry['published'] == true)
                        <button class="btn btn-secondary hideCategory" data-id="{{$entry['id']}}">Ocultar</button>
                        @else
                        <button class="btn btn-success publishCategory" data-id="{{$entry['id']}}">Publicar</button>
                        @endif
                        <button class="btn btn-primary editCategory" data-id="{{$entry['id']}}">Editar</button>
                        <button class="btn btn-danger deleteCategory" data-id="{{$entry['id']}}">Eliminar</button>
                    </td>
                </tr>
            @endforeach
        @endif
    </tbody>
    <tfoot>
        <tr>
            <th>Tag</th>
            <th>Icono</th>
            <th>Publicado</th>
            <th>Acciones</th>
        </tr>
    </tfoot>
@endsection

@section('tables-scripts')
    <script>
        $(document).ready(function(){
            $(document).on('click', '.addCategory', function(){
                $.ajax({
                    url: `{{route('blog.categories.create.modal')}}`,
                    type: 'GET',
                    success: (response)=>{
                        response = JSON.parse(response);
                        if(response.success){
                            $('.editUs').html(response.html);
                            $('.mainModal').modal('toggle');
                        }else{
                            toastError(`${response.msg}`, 'Error');
                        }
                    },
                    error: (error)=>{
                        console.log(error);
                    }
                });
            });
            
            $(document).on('click', '.editCategory', function(){
                const id = $(this).data('id');
                $.ajax({
                    url: `{{route('blog.categories.edit.modal')}}`,
                    type: 'GET',
                    data: {
                        id:id
                    },
                    success: (response)=>{
                        response = JSON.parse(response);
                        if(response.success){
                            $('.editUs').html(response.html);
                            $('.mainModal').modal('toggle');
                        }else{
                            toastError(`${response.msg}`, 'Error');
                        }
                    },
                    error: (error)=>{
                        console.log(error);
                    }
                })
            });

            $(document).on('click', '.publishCategory', function(){
                const id = $(this).data('id');
                ajaxCall(id, '¿Esta seguro que quiere publicar esta categoria?', `{{route('blog.categories.publish')}}`, 'PATCH');
            });

            $(document).on('click', '.hideCategory', function(){
                const id = $(this).data('id');
                ajaxCall(id, '¿Esta seguro que quiere ocultar esta categoria?', `{{route('blog.categories.hide')}}`, 'PATCH');
            });
            $(document).on('click', '.deleteCategory', function(){
                const id = $(this).data('id');
                ajaxCall(id, '¿Esta seguro que quiere eliminar esta categoria?', `{{route('blog.categories.delete')}}`, 'DELETE');
            });
        });

        function ajaxCall(id, askMsg, route, type){
            if(confirm(`${askMsg}`)){
                $.ajax({
                    url: `${route}`,
                    type: type,
                    data: {
                        _token:$('input[name="_token"]').val(),
                        id:id
                    },
                    success: (response)=>{
                        response = JSON.parse(response);
                        if(response.success){
                            toastSuccess(`${response.msg}`, 'Exito');
                            setTimeout(()=>{window.location.reload();}, 3000);
                        }else{
                            toastError(`${response.msg}`, 'Error');
                        }
                    },
                    error: (error)=>{
                        console.log(error);
                    }
                });
            }else{
                return false;
            }
        }
    </script>
@endsection