@extends('layouts.backend')

@section('extra_css')
    <!--<link rel="stylesheet" href="{{ asset('assets/css/custom.min.css') }}">-->
    <link rel="stylesheet" href="{{ asset('assets/vendors/google-code-prettify/bin/prettify.min.css') }}">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css"
          href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tag-it/2.0/css/jquery.tagit.min.css" rel="stylesheet"
          type="text/css">
    <style>
        .ui-autocomplete {
            top: 65px !important;
            left: 10px !important;
        }
    </style>

@endsection



@section('content')

   
<main>
    <div class="container-fluid">
        <div class="mb-4 mt-2"></div>
        
        <div class="card mb-4">
            <div class="card-header">
                <i class="fas fa-table mr-1"></i>
                All Headlines
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th >Id</th>
                                    <th >Headline</th>
                                    <th >Type</th>
                                    <th class="text-center">Action</th>
                            </tr>
                        </thead>
                      
                        <tbody>
                           @foreach($headlines as $headline)
                                    <tr>
                                        <td >{{$headline->id}}</td>
                                        <td >{!!$headline->title !!}</td>
                                        <td>{{$headline->type == 1 ? 'Flash' : 'Ticker' }}</td>
                                        <td class="" style="display: flex; width: 100%; border: none;"> 
                                        <a href="{{ route('headline.edit', ['id' => $headline->id])}}" class="btn btn-success btn-sm"><i class="fa fa-edit"></i></a>
                                        <a href="{{ route('headline.delete', ['id' => $headline->id])}}" onclick="return confirm('Are you sure to delete this item?')" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></a>
                                        </td>
                                        
                                    </tr>
                                    @endforeach


                                </tbody>
                            </table>
                </div>
            </div>
        </div>
    </div>
</main>



@endsection