@extends('layouts.admin')

@section('content')
<div class="page-links">
    <a href="{{ route('basic-settings') }}">Settings</a>
    <span> > </span>
    <a href="javascript:void(0)">{{ $title }}</a>
</div>

<div class="row">
    <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12">
        @include('settings.leftbar')
    </div>
    <div class="col-xxl-9 col-xl-9 col-lg-9 col-md-12 col-sm-12 col-12">
        <div class="card-main">
            <div class="customer-details-form ">
                <h2 class="iheading-man p-1 pb-2">
                    <div class="row">
                        <div class="col-6">{{ $title }} </div>
                        <div class="col-6 text-right action-btns">
                            <a href="{{ route('add-banner') }}" type="button" class="btn btn-primary bg-color20">
                                <img src="{{ asset('imgs/plus.png') }}" /> {{ __('Add') }} </a>

                            <a class="btn btn-primary bg-color20" type="button" id="filters" data-bs-toggle="dropdown"
                                aria-expanded="false">
                                <img src="{{ asset('imgs/filter.png') }}" />
                            </a>
                            <ul class="dropdown-menu" id="filter-items" aria-labelledby="filters">
                                <li><a class="dropdown-item" href="javascript:void(0)" data-id="filter_col1">Title</a></li>
                            </ul>
                        </div>
                    </div>
                </h2>
                <div>
                    @if (Session::has('message'))
                    <p class="alert {{ Session::get('alert-class', 'alert-info') }} flash-msg">
                        {{ Session::get('message') }}
                    </p>
                    @endif
                    <p id="custom-alert" class="alert alert-info d-none"></p>
                </div>

                <div class="row px-1">
                    <div class="col-3 filters">
                        <div class="form-group" id="filter_col1" data-column="1">
                            <label>Title</label>
                            <input type="text" name="" class="form-control column_filter" id="col1_filter"
                                placeholder="Title">
                            <i class="fa fa-remove remove-filter"></i>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end filters-->
            <div class="customer-table-main table-container">
                <table id="jsource-table" class="table nowrap" style="width: 100%"> </table>
            </div>
        </div>
    </div>
</div>
</div>

<script src="{{ asset('js/jquery.min.js') }}"></script>
@endsection

@push('scripts')
<script type="text/javascript">
    listing();

    function listing() {
        var table = $('#jsource-table').DataTable({
            ajax: "{{ route('banners') }}",
            processing: true,
            serverSide: true,
            deferRender: true,
            initComplete: function() {
                // Remove the "Show entries" text from length menu
                $('#jsource-table_length label').contents().filter(function() {
                    return this.nodeType === 3; // NodeType 3 is for text nodes
                }).remove();
            },
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ],
            lengthMenu: [
                [10, 25, 50, -1],
                [10, 25, 50, "All"]
            ],
            order: [
                [0, 'desc']
            ],
            fixedColumns: {
                leftColumns: 2,
                rightColumns: 1
            },
            columns: [{
                    title: '#',
                    data: 'id',
                    name: 'id',
                    visible: false
                },
                {
                    title: 'Title',
                    data: 'title',
                    name: 'title'
                },
                {
                    title: 'Alias',
                    data: 'alias',
                    name: 'alias'
                },
                {
                    title: 'Active',
                    data: 'active',
                    name: 'active',
                    orderable: false,
                    searchable: false
                },
                {
                    title: 'Photo',
                    data: 'photo',
                    name: 'photo',
                    orderable: false,
                    searchable: false
                },
            ]
        });

        // Create the dropdown button
        var dropdownButton = `
        <div class="btn-group">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                Export
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#" id="copy">Copy</a>
                <a class="dropdown-item" href="#" id="csv">CSV</a>
                <a class="dropdown-item" href="#" id="excel">Excel</a>
                <a class="dropdown-item" href="#" id="pdf">PDF</a>
                <a class="dropdown-item" href="#" id="print">Print</a>
            </div>
        </div>
    `;

        // Add the dropdown to the DataTables DOM
        $(dropdownButton).appendTo('#jsource-table_length');
    }
    // active
    $(document).on('click', '.record_active', function() {
        val = $(this).attr('data-value');
        name = $(this).attr('data-name');
        id = $(this).attr('data-id');
        text = name + '! You want to deactivate ?';

        if (val == 0) {
            text = name + '! You want to activate ?';
        }
        const swalWithBootstrapButtons = Swal.mixin({
            customClass: {
                confirmButton: 'btn btn-success',
                cancelButton: 'btn btn-danger'
            },
            buttonsStyling: false
        });
        swalWithBootstrapButtons
            .fire({
                title: 'Are you sure?',
                text: text,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes',
                cancelButtonText: 'No',
                reverseButtons: true
            })
            .then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('banners.updateActive') }}",
                        type: 'POST',
                        data: {
                            id: id,
                            value: val
                        },
                        success: function(res) {
                            if (res.status == true) {
                                swalWithBootstrapButtons.fire('Updated!', res.msg, 'success');
                            }
                        }
                    });
                } else if (result.dismiss === Swal.DismissReason.cancel) {
                    if (val == 0) {
                        $(this).prop('checked', false);
                    } else {
                        $(this).prop('checked', true);
                    }
                    swalWithBootstrapButtons.fire('Cancelled', '', 'error');
                }
            });
    });

    //delete
    $(document).on('click', '.deleteSelSingleBanner', function(e) {
        url = $(this).attr('data-url');
        e.preventDefault();
        text = 'you want to delete ?';
        const swalWithBootstrapButtons = Swal.mixin({
            customClass: {
                confirmButton: 'btn btn-success',
                cancelButton: 'btn btn-danger'
            },
            buttonsStyling: false
        });
        swalWithBootstrapButtons
            .fire({
                title: 'Are you sure?',
                text: text,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes',
                cancelButtonText: 'No',
                reverseButtons: true
            })
            .then((result) => {
                if (result.isConfirmed) {

                    redirectUrl = "{{ route('banners') }}";
                    var favorite = [];
                    favorite.push($(this).attr('data-val'));
                    var ids = favorite.join(",");
                    $.ajax({
                        url: url,
                        type: 'POST',
                        data: {
                            "ids": ids
                        },
                        success: function(res) {
                            if (res.status == true) {
                                window.location.href = redirectUrl;
                            }
                        }
                    });
                } else if (result.dismiss === Swal.DismissReason.cancel) {
                    swalWithBootstrapButtons.fire('Cancelled', '', 'error');
                }
            });
    });
</script>
@endpush