@extends('layouts.master')

 @section('page-content')
 <div class="title-bar">
    <h1 class="title-bar-title">
        <span class="d-ib">PopUp</span>
    </h1>
</div>
<div class="row gutter-xs">

    <div class="col-xs-12">
        <div class="card">
            <div class="card-header bg-primary">
                <div class="card-actions">
                    <button type="button" class="card-action card-toggler" title="Collapse"></button>
                </div>
                <strong>PopUp List</strong>
            </div> 
            <div class="card-body">                
                <table class="table table-bordered table-striped table-nowrap dataTable" cellspacing="0" width="100%">
                    <thead>
                        <tr>                            
                            <th>#</th>
                            <th>Title</th>
                            <th>URL</th>
                            <th>Image</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($popup as $popup)
                        <tr>
                            <td>
                                {{ $loop->iteration }}
                            </td>
                            <td>
                                {{ $popup->title }}
                            </td>
                            <td>
                                <!-- {{ $popup->url }} -->
                                <a href="{{ $popup->url }}" target="_blank">{{ $popup->url }}</a>
                            </td>

                             <td>
                              <img class="rounded" src="{{asset('/popup_images/'.$popup->images)}}"  width="80" height="80"  alt="">   
                            </td>
                            <td>
                                {{-- <a href="" class="btn btn-outline-success btn-xs edit" title="Edit Member" tooltip>
                                    <i class="icon icon-edit"></i>
                                </a>--}}
                                <!--  <a href="{{route('popup.show',$popup->id)}}" class="btn btn-outline-success btn-xs view" title="View Member" tooltip>
                                    <i class="icon icon-eye"></i>
                                </a>  -->
                               {{-- <button class="btn btn-outline-warning btn-xs sms" title="SMS Member" tooltip>
                                    <i class="icon icon-envelope-o"></i>
                                </button>
                                 --}} 

                                 <a href="deletepopup/{{ $popup['id'] }}" class="btn btn-outline-danger btn-xs" title="" tooltip="" data-original-title="Delete PopUp" onclick="confirm('Are you sure delete this records..!');">
                                  <i class="icon icon-trash"></i>
                                </a>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection
@push('page-script')
<script>
    $(document).on('click', '.delete', function(){
        let id = $(this).attr('data-id');

        swal({
            title: "Are you sure?",
            text: "Once deleted, you will not be able to recover this imaginary file!",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        })
        .then((willDelete) => {
            if (willDelete) {
                $.ajax({
                    url:'/deletepopup/'+ id,
                    type:'get',
                    data:{_method:'delete',_token:'{{ csrf_token() }}'},
                    success : function(response) {
                        swal("Poof! Your imaginary file has been deleted!", {
                            icon: "success",
                        });
                        $( ".dataTable" ).load( "/popup .dataTable" );
                    }
                })
            } else {

            }
        });
    });
</script>
@endpush