@extends('layouts.admin.main')
@section('title', 'Cancel Reason')
@section('header')
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-lg-6 col-7">
                <h6 class="h2 text-white d-inline-block mb-0"> </h6>
            </div>
        </div>
    </div>    
@endsection

@section('content')


<div class="row">
    <div class="col">
        <div class="card">
            <div class="card-header border-0">
                <div class="row align-items-center">
                    <div class="col">
                        <h3 class="mb-0">Notification List</h3>
                    </div>
                    <div class="col text-right">
                    
                        <a href="{{ route('admin.notification.add') }}" class="btn btn-sm btn-primary">Add Notification</a>
                        <br/>  
                    </div>
                </div>
            </div>

            <form action="{{ url()->full() }}" method="get" id="get_data">
                <input type="hidden" name="page" id="page" class="form-control">
            </form>

            <div class="card-body pt-0">
                <div class="loading-overlay hide-loading-overlay">
                    <div class="loading-content">
                        <img src="{{ asset('/img/loading.gif') }}" alt="Loading..." />
                    </div>
                </div>
                @include('layouts.messages')
                <div class="ajax-content"></div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts') 
    @parent
    <script>
        function showPermissionAlertadd() {
    alert("This is for demo, you are not allow to add this content.");
        }

</script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css">

    <script>
        function get_data_ajax() {
            var form = $('form#get_data');
            $('.loading-overlay').removeClass('hide-loading-overlay');

            $.ajax({
                type: form.attr('method'),
                url: form.attr('action'),
                data: form.serialize(),
                success: function (data) {
                    $('.ajax-content').html(data);
                    $('.loading-overlay').addClass('hide-loading-overlay');
                },
                error: function (xhr) {
                    alert('Error in fetching data. Please try again.');
                    $('.loading-overlay').addClass('hide-loading-overlay');
                }
            });
        }

        $(document).on('click', '.pagination>li>a', function (event) {
            event.preventDefault();
            $('#page').val($(this).text());
            get_data_ajax();
        });

        $(document).on('submit', 'form#get_data', function (event) {
            event.preventDefault();
            get_data_ajax();
        });

        $(document).ready(function() {
            $('form#get_data').submit();
        });

        $(document).on('submit', 'form.delete-action', function (event) {
            if (confirm('Are you sure you want to delete this Notification?')) {
                $.ajax({
                    dataType: 'json',
                    type: 'POST',
                    url: $(this).attr('action'),
                    data: $(this).serialize(),
                    success: function(data) {
                        show_toastrs(data);
                        $('#page').val('1');
                        get_data_ajax();
                    },
                    error: function(err) {
                        console.log(err);
                    }
                });
            }
            return false;
        });
    </script>
@endsection
<style>
h6.h2 {
    font-size: 32px;
}

div#tamplete_info {
    padding-bottom: 5px;
    padding-top:5px;
    padding-left:0px;
}

h3 {
    color: green !important;
    font-size: 18px !important;
}

.card-header.border-0 {
    border-bottom: solid green 2px !important;
}

.navbar-top.border-bottom.navbar-dark {
    background-color: white !important;
    border-style: doted !important;
}

.pb-6,
.py-6 {
    padding: 0 27px;
}

label {
    color: gray;
    font-family: sans-serif;
    font-weight: bold;
}

label input[type="search"] {
    border: solid green 1px;
    border-radius: 5px;
}

.navbarflex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.navbar-expand .navbar-nav {
    margin-left: 0 !important;
}

div#tamplete_info {
    color: #4F8A10;
}

th {
    color: black !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.page-item.active .page-link {

    background-color: green !important;
    border-color: green !important;
    color: white !important;
}

.page-link {
    color: black !important;
    font-size: 15px !important;
    font-weight: 700;
}


table#tamplete {
    margin-bottom: 0px !important;
}
.pagination-block.text-center.mt-2 {
    margin-top: 0px !important;
}
ul.pagination {
    margin-bottom: 0px !important;
}
.card-body.pt-0{
    padding-bottom: 20px;
}
.pb-6  {
    padding: 40px 0px !important;
   }
   .page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #00571c !important;
    border-color: #00571c !important;
}
/*tablate*/
@media (min-width:768px) and (max-width:1023px) {
    .main-content .navbar-top .collapse {
        justify-content: space-between;
        ;
    }

    .navbar-expand .navbar-nav {
        margin-left: 0 !important;
    }

    .table td {
        font-size: 16px !important;
    }

    th {
        color: black !important;
        font-size: 16px !important;
        font-weight: 800 !important;
    }

    H3 {
        font-size: 20px !important;
    }

    .btn {
        font-size: 16px !important;

    }

    .card-body {
        padding: 0 !important;
    }

    .actions .delete-action .btn {
        font-size: 14px !important;
    }

    table.dataTable.no-footer {
        padding: 15px 0 0 0;
    }

    div#planlist_filter {
        padding: 15px 0px;
    }
}

/*mobile*/
@media (min-width:320px) and (max-width:767px) {
    .table td {
        font-size: 14px !important;
    }

    label {
        padding: 0 17px;
    }

    th {
        color: black !important;
        font-size: 14px !important;
        font-weight: 800 !important;
    }

    H3 {
        font-size: 17px !important;
    }

    .btn {
        font-size: 14px !important;
    }

    .actions .delete-action .btn {
        font-size: 12px !important;
    }

    table.dataTable.no-footer {
        padding: 15px 0 0 0;
    }

    div#tamplete_filter {
        padding: 15px 0px;
    }
    div#tamplete_info {
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 0px;
}
.pagination-block.text-center.mt-2 {
    padding-top: 5px;
    padding-bottom: 10px;
}
ul.pagination {
    margin-bottom: 10px !important;
}
}

label {
    display: flex !important;
    margin-bottom: 0.5rem;
}
</style>