OwlCyberSecurity - MANAGER

Edit File: index.blade.php

{{-- Note: User any library only in master/main.blade.php --}}
{{-- DO NOT OVERRIDE UNNECESSARY LIBRARIES --}}
{{-- Extending main layout --}}
@extends('master.main')
{{-- Content starts here --}}
{{-- This section is already wrapped --}}
@section('content')
    {{-- page css --}}
    <style>
        .error_div {
            background-color: #ffc8c8;
            border-radius: 4px;
            padding: 0.4rem;
            padding-left: 1rem;
            color: #f11a1a;
            border: 1px solid #ff2a2a;
        }
        .success_div{
            background-color: #aedcaf;
            border-radius: 4px;
            padding: 0.4rem;
            padding-left: 1rem;
            color: #1f6d26;
            border: 1px solid #248526;
        }
    </style>
    <div class="row p-2">
        {{-- validation errors --}}
        @if (!empty($errors->all()))
        <div class="col-12 error_div">
            {{ $errors->first() }}
        </div>
        @endif
        {{-- session error --}}
        @if (session()->has('message'))
        <div class="col-12 error_div">
            {{ session()->get('message') }}
        </div>
        @endif
        {{-- session success --}}
        @if (session()->has('success'))
        <div class="col-12 success_div">
            {{ session()->get('success') }}
        </div>
        @endif
    </div>
    <div class="row p-2">
        {{-- Head row --}}
        <div class="col">
            <h3>Stores Listing</h3>
        </div>
        <div class="col-sm-12 col-md-1 col-lg-1 text-right">
            <a href="{{ route('get_stores_add.add_stores') }}"><button class="custom-blue-btn w-100">Add</button></a>
        </div>
        <div class="col-sm-12 col-md-1 col-lg-1 text-right">
            <a href="{{ route('get_export_store.stores_export') }}"><button class="custom-blue-btn w-100">Export</button></a>
        </div>
        <div class="col-sm-12 col-md-1 col-lg-1  text-right" id="bulkstoresDeleteCol" style="display: none;">
            <a><button class="custom-red-btn w-100" id="bulkstoresDeleteBtn" onclick="bulkstoreDelete()">Delete</button></a>
        </div>
    </div>
    <div class="col" id="storeListingMessageDiv" style="display: none;">
    </div>
    {{-- User listing table --}}
    <div class="row p-2">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <table id="storesTable" class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th><input type="checkbox" name="allstoresCheckbox" id="allstoresCheckbox"></th>
                                <th>Title</th>
                                <th>Status</th>
                                <th>Created at</th>
                                <th>Updated at</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <script>
        // variables
        var storesTable;
        var totalstoresRecords = 0;
        var showHideBulkDeleteBtn = '';
        var selectAllstoresCheckbox = $('#allstoresCheckbox');
        var storesBulkDeleteBtnCol = $('#bulkstoresDeleteCol');
        var storesBulkDeleteBtnBtn = $('#bulkstoresDeleteBtn');

// for messages
        function storeListingMessage(type = '' , message = '' , timeout = 3000){
            var selectedClass = '';
            var holder = $('#storeListingMessageDiv');
            if(type.toLowerCase() == 'success'){
                selectedClass = 'success_div';
            }
            else {
                selectedClass = 'error_div';
            }
            var ht = `<div class="${selectedClass}">${message}</div>`;
            holder.html(ht);
            holder.hide().show().fadeIn('fast').delay(timeout).fadeOut('slow' , function(){
                $(this).stop(true);
            });
        }

// all store select unselect function
        selectUnselectAll = (type) => {
            $('.checkboxes').prop('checked' , type);
        }

// all store select
        $('#allstoresCheckbox').on('change' , (a) => {
            selectUnselectAll(a.target.checked);
        });

// store delete functionality start
        showHideBulkDeleteBtn = () => {
            if($('.checkboxes:checked').length > 0 && totalstoresRecords > 0){
                storesBulkDeleteBtnCol.show();
            }
            else{
                storesBulkDeleteBtnCol.hide();
            }
        }

// Bulk store delete function
        bulkstoreDelete = () => {
            var selectedstoreIDS = $('.checkboxes:checked').map((a , v) => {
                return v.value;
            }).get();
            sweetAlert('warning', 'Delete store'+ (selectedstoreIDS.length > 1 ? "s" : "" ) , 'Do you really want to delete?' , 'Yes' , 'No').then((response) => {
                if(response){
                    $.ajax({
                        url: "{{ route('post_stores_delete.delete_stores') }}",
                        type: "post",
                        dataType: "json",
                        data: {
                            _token: "{{ csrf_token() }}",
                            ids: selectedstoreIDS
                        },
                        beforeSend: function(){
                            storesBulkDeleteBtnCol.hide();
                        },
                        success: function (response){
                            storesTable.ajax.reload(null,false);
                            storeListingMessage('success' , response.message)
                        },
                        error: function (response){
                            storesBulkDeleteBtnCol.show();
                            storeListingMessage('error' , response.responseJSON.message)
                        }
                    });
                }
            });
        }

// add tags and keywords to search
        function addThisToSearch(p = ''){
            storesTable.search(p).draw();
        }
        // document ready start
        $(document).ready(function () {
            // Main store listing datatable
            storesTable = $('#storesTable').DataTable({
                scrollX: true,
                scrollCollapse: true,
                autoWidth: false,
                responsive: true,
                autoWidth: false,
                processing: true,
                serverSide: true,
                order: [ 1 , 'ASC' ],
                columnDefs: [{
                    targets: [0 , -1],
                    orderable: false
                }],
                ajax : {
                    url: "{{ route('post_stores_listing.view_stores') }}",
                    type: "POST",
                    dataType: "JSON",
                    data: {
                        _token: "{{ csrf_token() }}"
                    }
                },
                columns:[
                    { data: 'checkbox' },
                    { data: 'title' },
                    { data: 'status' },
                    { data: 'created_at' },
                    { data: 'updated_at' },
                    { data: 'action' },
                ],
                initComplete: function () {
                },
                drawCallback: function (response){
                    totalstoresRecords = response.json.iTotalDisplayRecords;
                    // bind delete function to all checkboxes
                    $('.checkboxes , #allstoresCheckbox').bind('change' , showHideBulkDeleteBtn);
                    // if redraw uncheck all select
                    selectAllstoresCheckbox.prop('checked' , false);
                    // hide delet btn
                    storesBulkDeleteBtnCol.hide();
                },
            });
            // error and succes message time outs
            setTimeout(() => {
                $('.error_div').fadeOut('slow');
                $('.success_div').fadeOut('slow');
            }, 3000);

});
        // document ready end
    </script>
@endsection

{{-- Content ends here --}}
{{-- Note: User any library only in master/main.blade.php --}}
{{-- DO NOT OVERRIDE UNNECESSARY LIBRARIES --}}