@extends('layouts.main')
@section('title', $data['title'])
@section('content')

    <style type="text/css">
        @media print {

            thead,
            tfoot {
                display: none !important
            }

            @page {
                size: 'a4';
                margin: 0mm;
            }
        }

        li.list-inline-item.px-2 {
            padding-left: 0 !important;
        }

        .badge {
            border-radius: 50px;
            margin-left: auto;
            line-height: 1;
            /* padding: 6px 10px; */
            vertical-align: middle;
            font-weight: 400;
            font-size: 11px;
        }

        .badge-info {
            background: #424963;
            padding: 6px 10px;

        }

        .badge-secondary {
            background: #c53f64;
            padding: 6px 10px;

        }

        .badge-primary {
            background: #3751A1;
            padding: 6px 10px;

        }

        .page-content {
            padding: calc(70px + 24px) calc(24px / 2) 60px calc(24px / 2)
        }

        #datatable thead th:first-child {
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }

        #datatable thead th:last-child {
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;

        }

        #datatable thead th {
            color: #000;
            font-size: 13px;
            text-align: center;
            padding: 12px;
            font-weight: 600;
            font-family: 'Montserrat', sans-serif !important;
            background-color: #F1F4F9;
            border-bottom: none;
        }

        #datatable tbody td {
            font-size: 14px;
            font-family: 'Montserrat', sans-serif !important;
            text-align: center;
            background-color: #fff !important;
            color: #000;
        }

        .title-row {
            font-size: 22px;
            font-weight: bold;
            color: #333;
        }

        .form-control-sm {
            padding: 0px 11px !important;

        }

        #datatable_filter input {
            width: 500px;

        }

        @media (max-width:1743px) {
            #datatable_filter input {
                width: 450px;
            }


        }

        @media (max-width:1643px) {
            #datatable_filter input {
                width: 400px;
            }


        }

        @media (max-width:1543px) {
            #datatable_filter input {
                width: 300px;
            }


        }

        @media (max-width:1343px) {
            #datatable_filter input {
                width: 270px;
            }


        }

        @media (max-width:1283px) {
            #datatable_filter input {
                width: 240px;
            }


        }

        @media (max-width:1223px) {
            #datatable_filter input {
                width: 220px;
            }


        }

        @media (max-width:1183px) {
            #datatable_filter input {
                width: 220px;
                margin-left: 36px !important;

            }

        }

        @media (max-width:1155px) {
            #datatable_filter input {
                width: 220px;
                margin-left: 11px !important;

            }

        }

        @media (max-width:1106px) {
            #datatable_filter input {
                width: 220px;
                margin-left: -10px !important;

            }

        }

        @media (max-width:1063px) {
            #datatable_filter input {
                width: 220px;
                margin-left: -20px !important;

            }

        }

        @media (max-width:1043px) {
            #datatable_filter input {
                width: 200px;
                margin-left: 0px !important;

            }

        }

        @media (max-width: 992px) {
            .vertical-menu {
                transform: translateX(-100%);
            }

            .vertical-menu.open {
                transform: translateX(0);
            }
        }

        .modal-title {
            font-weight: bold;
            font-size: 1.25rem;
        }
    </style>


    <div class="page-content">
        <div class="container-fluid">

            <div class="row align-items-center mb-3">
                <!-- Search Input Left -->
                <div class="col-md-6">
                    <div id="datatable-search-container" class="d-flex align-items-center">
                        <!-- This is where DataTable usually injects the search input -->
                    </div>
                </div>

                <!-- Add Button Right -->
                <div class="col-md-6 text-end">
                    <button id="addBtnPackge" onclick="addpackage()"
                        class="btn btn-primary waves-effect waves-light add_new_btn text-nowrap" type="button">
                        <i class="bx bx-plus font-size-16 align-middle me-2"></i>
                        Add Package <small>(Alt + N)</small>
                    </button>
                </div>
            </div>



            <div class="row">
                <div class="col-12">

                    <div class="card-body" style="border-radius: 10px;">
                        <div class="table-responsive table-card">
                            <div class="col-lg-6 col-md-5 d-grid d-lg-block">
                            </div>
                        </div>
                        <table id="datatable"
                            class="table align-middle table-nowrap table-hover table-striped dt-responsive nowrap w-100 text-nowrap mb-0 table-centered">
                            <thead class="table-light">
                                <tr>
                                    <th>Id</th>
                                    <th>Title</th>
                                    <th>Cost</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- end row -->
    </div>
    <!-- container-fluid -->
    <!-- End Page-content -->

@endsection('content')
@section('custom-scripts')

    <script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
    <script src="{{ asset('assets/js/pages/form-validation.init.js') }}"></script>
    <script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>
    {{--
    <script src="{{ asset('assets/css/font.css') }}"></script> --}}
    @include('../package/add_package')

    <script type="text/javascript">
        var ajaxURL = '{{ route('package.management.ajax') }}';
        var csrfToken = $("[name=_token").val();

        var usersPageLength = getCookie('usersPageLength') !== undefined ? getCookie('usersPageLength') : 10;


        var table = $('#datatable').DataTable({
            "aoColumnDefs": [{
                "bSortable": false,
                "aTargets": []
            }],
            "order": [
                [0, 'desc']
            ],
            "processing": true,
            "serverSide": true,
            "pageLength": usersPageLength,
            language: {
                searchPlaceholder: "Search Package",
                "info": "",
            },
            "dom": '<"d-none"f>t<"row"<"col-md-6"l><"col-md-6"p>>',
            "ajax": {
                "url": ajaxURL,
                "type": "POST",
                "data": {
                    "_token": csrfToken,
                }
            },
            "aoColumns": [
                {
                    "mData": "id"
                },
                {
                    "mData": "title"
                },
                {
                    "mData": "price"
                },
                {
                    "mData": "status"
                },
                {
                    "mData": "action"
                },

            ]
        });
        $('#datatable_length').appendTo('#datatable .row');
        $('#datatable_length').css({
            'margin-top': '10px',

        });


        $('#datatable_paginate').appendTo('#datatable .row');
        $('#datatable_paginate').css({
            'text-align': 'center',
            'margin-top': '10px'
        });

        $('#datatable_filter').appendTo('#datatable-search-container');
        $('#datatable-search-container .dataTables_filter').addClass('d-flex align-items-center');

        $('#datatable-search-container input').attr('style', function (i, style) {
            return (style || '') + 'padding-left: 40px !important; max-width: 528px; margin-left: 0;border: 1px solid #fff!important; border-radius: 10px; height: 41px; box-shadow: none;';
        });

        $('#datatable-search-container input').wrap('<div class="search-wrapper"></div>');

        $('.search-wrapper').css({
            'position': 'relative',
            'width': '100%',
            'display': 'flex',
            'align-items': 'center',
        });

        $('.search-wrapper').append('<i class="fas fa-search search-icon"></i>');

        $('.search-icon').css({
            'position': 'absolute',
            'left': '10px',
            'top': '50%',
            'transform': 'translateY(-50%)',
            'font-size': '16px',
            'color': '#aaa',
        });
        $('#datatable').on('length.dt', function (e, settings, len) {

            setCookie('usersPageLength', len, 100);

        });

    </script>

@endsection