@extends('adminlte::page')

@section('title', 'Dashboard')

@section('content_header')
    <span class="container">
        @include('inc.messages')
    </span>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex">
@stop

@section('content')
    @yield('content')
@stop

@section('css')
    <link type="text/css" media="all" rel="stylesheet" href="{{ asset('css/flag-icon.css') }}">

    <style>
        /* theme */

        :root {
            --nav-bg: #ffffff;
            --top-nav-color: rgb(127 127 135);

            --blue-btn-bg: #17a2b8;
            --btn-color: #ffffff;
            --blue-btn-hover-bg: #138496;
            --blue-btn-hover-border-color: #117a8b;

            --thead-bg-color: rgb(244 246 249);
            --bg-color-odd: #e8eaec;
            --bg-color-odd-hover: rgba(0,0,0,.075);

            --barcode-bg: #f8f9fa;
            --barcode-color: #6c757d;

            --btn-default-bg-hover: #dcdcf1;

            --dropdown-item-hover: #138496;

            --wrapper-bg: #f4f6f9;

            --paypal-btn-color: #1f2d3d;

            --payments-bg-color: #eaecef;

            --tox-tbtn-fill-enabled: #222f3e;
            --tox-tbtn-fill-disabled: rgba(34,47,62,.5);

            --nav-switch-active-bg-hover: #c5c6c7;

            --text-color: #000000;
        }

        [data-theme="dark"] {
            --nav-bg: #2b3035;
            --top-nav-color: #ffffff;

            --blue-btn-bg: #343a40;
            --btn-color: #ffffff;
            --blue-btn-hover-bg: #282c31;
            --blue-btn-hover-border-color:  #117a8b;

            --thead-bg-color: rgb(31 36 39);
            --bg-color-odd: #2a3035;
            --bg-color-odd-hover: rgb(31 36 39);

            --go-top-btn-color: #6f95bb;
            --go-top-btn-color-hover: #4985c1;

            --barcode-bg: #343a40;
            --barcode-color: #ffffffd4;

            --btn-default-bg-hover: #282c31;

            --dropdown-item-hover: #282c31;

            --wrapper-bg: #343a40;

            --paypal-btn-color: #ffffff;

            --payments-bg-color: #343a40;

            --tox-tbtn-fill-enabled: #9cadd6;
            --tox-tbtn-fill-disabled: #4c5773;

            --nav-switch-active-bg-hover: #26292d;

            --text-color: #ffffff;
        }

        /*** top nav-bar ***/
        nav.main-header {
            background-color: var(--nav-bg);
            border-color: var(--nav-bg);
        }

        nav.main-header li a {
            color: var(--top-nav-color) !important;
        }

        nav.main-header li.user-footer:hover, nav.main-header li.user-footer a:hover {
            background-color: var(--nav-bg) !important;
        }

        nav.main-header li.user-footer, nav.main-header li.user-footer a {
            background-color: var(--wrapper-bg) !important;
        }

        nav.main-header li.user-footer {
            background-image: linear-gradient(to bottom, var(--wrapper-bg), var(--wrapper-bg)), linear-gradient(to bottom, var(--wrapper-bg), var(--wrapper-bg));
            background-clip: content-box, padding-box;
        }
        /*** top nav-bar ***/

        /*** datatable's first row buttons ***/
        div.dataTables_wrapper > div.row:first-child button {
            background-color: var(--blue-btn-bg) !important;
            color: var(--btn-color) !important;
        }

        div.dataTables_wrapper > div.row:first-child button:hover {
            background-color: var(--blue-btn-hover-bg) !important;
            border-color: var(--blue-btn-hover-border-color) !important;
        }
        /*** datatable's first row buttons ***/

        /** datatables **/
        div.content-wrapper {
            background-color: var(--wrapper-bg) !important;
            color: var(--text-color) !important;
        }

        table thead tr, table thead tr:hover {
            background-color: var(--thead-bg-color) !important;
        }

        table tr.even {
            color: var(--text-color) !important;
        }

        table tr.even:hover {
            background-color: var(--bg-color-odd-hover) !important;
            color: var(--text-color) !important;
        }

        table tr.odd {
            background-color: var(--bg-color-odd) !important;
            color: var(--text-color) !important;
        }

        table tr.odd:hover {
            background-color: var(--bg-color-odd-hover) !important;;
        }

        table, table td, table th {
            border-color: var(--nav-bg) !important;
        }

        table > tbody > tr.selected {
            background-color: #0275d8 !important;
        }

        table > tbody > tr.selected:hover {
            background-color: #0258d8 !important;
        }

        div.card > div.card-header > ul.card-header-tabs > li.nav-item > a.nav-link.switch-table.active {
            color: #007bff !important;
            border-color: #007bff !important;
            background-color: transparent !important;
        }

        div.card > div.card-header > ul.card-header-tabs > li.nav-item > a.nav-link.switch-table.active:hover {
            background-color: var(--nav-switch-active-bg-hover) !important;
        }
        /** datatables **/

        label {
            background-color: transparent !important;
        }

        button.close {
            color: var(--text-color);
        }

        input:not([class~=btn-primary], [class~=btn-secondary], [class~=btn-success], [class~=btn-danger], [class~=btn-warning], [class~=btn-info]),
        button:not([class~=btn-primary], [class~=btn-secondary], [class~=btn-success], [class~=btn-danger], [class~=btn-warning], [class~=btn-info])
        table > thead, ul.pagination li a, select, label, div.dropdown-menu, div.dropdown-menu > a, h1, h2, h3:not(div.small-box h3), h4,
        h5:not(table > tbody > tr > td h5, table > tbody > tr > td h5), h6:not(table > tbody > tr > td h6),
        div.content-wrapper > div.content, div.container, article, article > div.portfolio_description, div.tox-editor-container div, body,
        div.swal2-container div:not(.swal2-timer-progress-bar), textarea, div.tox-collection__item, div.tox-menu, div.tox-split-button, div.tox-dialog div, div.tt-menu,
        div.wrapper {
            background-color: var(--wrapper-bg) !important;
            color: var(--text-color) !important;
        }

        .tox-tbtn svg {
            fill: var(--tox-tbtn-fill-enabled) !important;
        }

        .tox-tbtn.tox-tbtn--disabled svg {
            fill: var(--tox-tbtn-fill-disabled) !important;
        }

        table#paymentsTableAgents > tbody > tr > td h5 > span, table#paymentsTableSellers > tbody > tr > td h5 > span {
            color: var(--paypal-btn-color);
        }

        div.dataTables_wrapper:not([id=productsTable_wrapper], [id=ordersTable_wrapper]).dt-bootstrap4.no-footer > div.row:first-child label {
            background-color: transparent !important;
        }

        button.btn-default:hover {
            background-color: var(--btn-default-bg-hover) !important;
            color: var(--text-color) !important;
        }

        div.dropdown-menu > a:hover {
            background-color: var(--dropdown-item-hover) !important;
        }

        ul.pagination li a:hover {
            background-color: var(--bg-color-odd-hover) !important;
        }

        .modal-content {
            background-color: var(--wrapper-bg);
        }

        .modal-content > div.modal-header {
            border-color: var(--wrapper-bg);
        }

        span.btn-copied {
            background-color: var(--barcode-bg) !important;
            color: var(--barcode-color) !important;
        }

        span.btn {
            background-color: var(--barcode-bg) !important;
            color: var(--barcode-color) !important;
        }

        td .h6 {
            background-color: transparent !important;
        }
        /* theme */

        #go_top_btn {
            background-color: #6f7479 !important;
            color: #c8d2dc !important;
            position: fixed;
            right: 2%;
            bottom: 4%;
            border: 0;
            outline: none;
            display: none;
            z-index: 1000;
            border-radius: 10%;
        }

        #go_top_btn:hover, #go_top_btn > i:hover, #go_top_btn:hover > i {
            background-color: #33363a !important;
        }

        #go_top_btn > i {
            font-size: xxx-large;
            background-color: #6f7479;
        }

        #go_top_btn:focus {
            outline: none;
        }

        span.n_pp_review {
            background-color: transparent;
            color: var(--text-color);
        }

        span.n_pp_review:hover {
            background-color: var(--btn-default-bg-hover);
            color: var(--text-color);
        }

        div.swal2-container div.swal2-success-ring {
            background-color: transparent !important;
        }

        /* Global Dark Mode Overrides for Chat & Notes */
        [data-theme="dark"] .card {
            background-color: var(--wrapper-bg);
            color: var(--text-color);
        }
        [data-theme="dark"] .card-header {
             border-bottom-color: var(--nav-bg);
        }
        [data-theme="dark"] .list-group-item {
             background-color: var(--wrapper-bg);
             border-color: var(--nav-bg);
             color: var(--text-color);
        }
        [data-theme="dark"] .list-group-item:hover {
             background-color: var(--bg-color-odd-hover);
        }
        [data-theme="dark"] .form-control {
             background-color: var(--nav-bg);
             border-color: var(--barcode-color);
             color: var(--text-color);
        }
        [data-theme="dark"] .form-control:focus {
             background-color: var(--bg-color-odd);
             color: var(--text-color);
        }
        [data-theme="dark"] .form-control::placeholder {
            color: #ced4da;
        }
        [data-theme="dark"] .input-group-text {
            background-color: var(--bg-color-odd);
            border-color: var(--barcode-color);
            color: var(--text-color);
        }
        [data-theme="dark"] .text-dark {
            color: var(--text-color) !important;
        }
    </style>
@stop

@section('js')
    <script>
        if (window.localStorage.getItem('theme') === 'dark') {
            $('html').attr('data-theme', 'dark');
        } else {
            $('html').attr('data-theme', '');
        }

        $(document).ready(function (){