@extends('layouts.vertical', ["page_title"=> "Dashboard", "mode" => $mode ?? "", "demo" => $demo ?? ""])
@section('content')
    <div class="account-pages">
        <div class="container">
            <div class="row">
                <div class="col-8 p-2">
                    <h4 class="page-title">Quick Actions</h4>
                </div>
            </div>
            
            <div class="row">
            @foreach($actions as $action)
                <div class="col-sm-6 col-md-4 col-xl-3">
                    <div class="card">
                        <div class="card-body action-card" url="{{$action->url}}" style="cursor: pointer;">
                            <img src="{{$action->icon}}" alt="image" class="img-fluid rounded" width="200" />
                            <p class="mt-1 text-truncate">{{$action->name}}</p>
                        </div>
                    </div> <!-- end card-->
                </div> <!-- end col -->
            @endforeach
            </div>
        <!-- end row-->
        </div>
        <!-- end container -->
    </div>


<!-- Long Content Scroll Modal -->
<div class="modal fade" id="scrollable-modal" tabindex="-1" role="dialog" aria-labelledby="scrollableModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="scrollableModalTitle">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<style type="text/css">
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
.modal-content {
    height: 90vh;
}
</style>
@endsection


@section('script')
<script type="text/javascript">
    $(document).ready(function(){
        $('.action-card').click(function(){
            $('#scrollable-modal #scrollableModalTitle').html( $(this).find('.text-truncate').html() );
            $('#scrollable-modal .modal-body').html('<iframe class="responsive-iframe" src="'+ $(this).attr('url') +'" frameborder="0"></iframe>')
            $('#scrollable-modal').modal('show')
        })
    });
</script>
@endsection