@extends('include.app')
@section('content')

<div id="page-container" class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed main-content-narrow">
<main id="main-container">
    @include('include.sidebar')
    @include('include.headnavbar')
    <div class="bg-body-light">
        <div class="content content-full">
            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
                <h1 class="flex-sm-fill h3 my-2 text-primary">Banners</h1>
                <nav class="flex-sm-00-auto ml-sm-3" aria-label="breadcrumb">
                    <ol class="breadcrumb breadcrumb-alt">
                        <li class="breadcrumb-item text-dark">
                            <a class="link-fx text-dark" href="{{ url('ab/banners') }}">Banners</a>
                        </li>
                        <li class="breadcrumb-item" aria-current="page">
                            <a class="link-fx" href="">List</a>
                        </li>
                    </ol>
                </nav>
            </div>
        </div>
        </div>
        <div class="content">
            <div class="d-flex justify-content-end">
                <a href="{{ url('ab/banners/create') }}" class="btn bg-primary text-white mb-2 px-5"><i class="fa fa-plus"></i><span class="ml-2">New</span></a>
            </div>
            <div class="block block-rounded">
                <div class="block-header">
                </div>
                <div class="block-content block-content-full">
                    <table class="table table-bordered table-striped table-vcenter js-dataTable-full">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th style="width: 35%;">Heading</th>
                                <th>Image</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($banners as $banner)
                                <tr>
                                    <td class="text-center font-size-sm">{{$loop->iteration}}</td>
                                    <td class="font-w600 font-size-sm text-left">
                                         {!! Str::limit($banner->heading,20) !!}
                                    </td>
                                    <td class="font-w600 font-size-sm text-center">
                                        <img class="img-fluid options-item" src="{{ asset('storage/'.$banner->image)}}" width="100" height="50">
                                    </td>
                                    <td class="d-none d-sm-table-cell text-center">
                                        @if ($banner->status==1)
                                            <a href="{{ route('banner.status',[$banner->id]) }}" class="btn btn-outline-success">Active</a>
                                        @else
                                            <a href="{{ route('banner.status',[$banner->id]) }}" class="btn btn-outline-danger">InActive</a>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="btn-group">
                                            <a href="{{ url('ab/banners/'.$banner->id)}}" class="btn btn-sm btn-light" data-toggle="tooltip" title="View">
                                                <i class="fa fa-lg fa-eye text-dark"></i>
                                            </a>
                                            <a href="{{ url('ab/banners/'.$banner->id.'/edit') }}" class="btn btn-sm btn-light" data-toggle="tooltip" title="Edit">
                                                <i class="fa fa-lg fa-pencil-alt text-primary"></i>
                                            </a>
                                            <a href="{{ route('banner.delete',[$banner->id])}}" onclick="confirmation(event)" class="btn btn-sm btn-light" data-toggle="tooltip" title="Remove">
                                                <i class="fa fa-lg fa-trash text-danger"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </main>
</div>
 @endsection

@section('script')
<script>
    @if(session('status'))
        Swal.fire({
            position: 'center',
            icon: '{{ session('type')}}',
            title: '{{ session('status')}}',
            showConfirmButton: false,
            timer: 1500
            });
    @endif

  function confirmation(ev)
  {
    ev.preventDefault();
    var urlToRedirect = ev.currentTarget.getAttribute('href');
        Swal.fire({
        title: 'Are you sure?',
        text: "You won't be able to revert this!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
        if (result.isConfirmed) {
            Swal.fire(
            'Deleted!',
            'Data has been deleted.',
            'success'
            )
            window.location.href = urlToRedirect;
           }
        })
   }

</script>
@endsection