<!DOCTYPE html>
<html lang="\en">

<head>
    <title>Movana Fleet Management | @yield('title', 'App')</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="icon" type="image/x-icon" href="{{ asset('images/favicon.png') }}">
    <link href="{{ asset('fonts/stylesheet.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/vendor/bootstrap-5.0.2-dist/css/bootstrap.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/vendor/leaflet-1.7.1/leaflet.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/vendor/ionicons-v2.0-1/css/ionicons.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/vendor/select2-4.1.0-rc.0/dist/css/select2.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/vendor/DataTables/datatables.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/css/bootstrap-datepicker.min.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/css/meus.css') }}" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.min.css" integrity="sha512-f0tzWhCwVFS3WeYaofoLWkTP62ObhewQ1EZn65oSYDZUg1+CyywGKkWzm8BxaJj5HGKI72PnMH9jYyIFz+GH7g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        .landscape-photo {
            max-height: max(21vh, 210px);
        }

        .thumb-img-table {
            width: max(4vw, 75px);
            height: max(4vh, 55px);
            object-fit: cover;
        }

        .thumb-img-small {
            width: max(2vw, 45px);
            height: max(2vh, 35px);
            object-fit: cover;
        }

        .thumb-img-landscape {
            width: max(6vw, 275px);
            height: max(5vh, 125px);
            object-fit: cover;
        }

        .thumb-img-landscape-med {
            width: max(4vw, 125px);
            height: max(2vh, 65px);
            object-fit: contain;
        }
    </style>
    @yield('customcss')
</head>

{{-- <body onload="startTime()"> --}}

<body>
    @include('template/navbar')
    @yield('content')
    {{-- Toast --}}
    <div class="position-fixed top-0 end-0 p-3" style="z-index: 99999">
        <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
            <div id="liveToast-type" class="toast-header text-dark">
                {{-- <img src="..." class="rounded me-2" alt="..."> --}}
                <strong id="liveToast-title" class="me-auto">Title</strong>
                <small id="liveToast-time">11 mins ago</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div id="liveToast-msg" class="toast-body">
                Hello, world! This is a toast message.
            </div>
        </div>
    </div>
    {{-- End Toast --}}
    <script src="{{ asset('assets/vendor/jquery-3.6.0/jquery-3.6.0.js') }}"></script>
    <script src="{{ asset('assets/vendor/bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/select2-4.1.0-rc.0/dist/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/DataTables/datatables.js') }}"></script>
    <script src="{{ asset('https://cdn.datatables.net/fixedcolumns/4.0.1/js/dataTables.fixedColumns.min.js') }}"></script>
    <script src="{{ asset('assets/js/moment.min.js') }}"></script>
    <script src="{{ asset('assets/js/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ asset('assets/js/helper.js') }}"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha512-AIOTidJAcHBH2G/oZv9viEGXRqDNmfdPVPYOYKGy3fti0xIplnlgMHUGfuNRzC6FkzIo0iIxgFnr9RikFxK+sw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.34/moment-timezone-with-data.min.js"></script> -->

    <script>
        const AppState = {
            user_role: {
                current: "{{ Auth::user()->role }}",
                admin: "{{ \App\Models\Users::ROLE_ADMIN }}",
            },
            route_segment1: "{{ Request::segment(1) }}",
            route_segment2: "{{ Request::segment(2) }}",
            current_company: 0, // cptid
			// TIMEFIX: new Date().getTimezoneOffset() * -60 
			TIMEFIX: 25200
        }

        // function startTime() {
        //     var today = new Date();
        //     var h = today.getHours();
        //     var m = today.getMinutes();
        //     var s = today.getSeconds();
        //     m = checkTime(m);
        //     document.getElementById('time').innerHTML =
        //         h + ":" + m + ":" + s;
        //     var t = setTimeout(startTime, 1000);
        // }

        function checkTime(i) {
            if (i < 10) {
                i = "0" + i
            };
            return i;
        }
        // check if browser back
        function browserBack() {
            if (window.performance && window.performance.navigation.type == window.performance.navigation
                .TYPE_BACK_FORWARD) {
                return true;
            }
            return false
        }
        $('.select2').select2({
            width: '100%'
        });

        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        })

        if ({{ Auth::user()->role }} == {{ \App\Models\Users::ROLE_ADMIN }}) {
            $('#subNav').remove();
            $('#map, .panel-left, .panel-right').css('height', 'calc(100vh - 87.52px)')
        }

        const downloadPackingList = function(fileName, sheetName, data = []) {
            const listDownload = []
            const merges = []
            if (data.length < 1) {
                data.push({
                    'Item Code': 'AF-213',
                    'Description': 'Penggaris',
                    'Weight (kg)': '0',
                    // 'Qty': '5',
                    'Length (cm)': '10',
                    'Wide (cm)': '4',
                    'Height (cm)': '4',
                    'Volume (m3)': '160',
                }, {
                    'Item Code': 'AF-214',
                    'Description': 'Burble',
                    'Weight (kg)': '3',
                    // 'Qty': '2',
                    'Length (cm)': '0',
                    'Wide (cm)': '0',
                    'Height (cm)': '0',
                    'Volume (m3)': '0',
                }, {
                    'Item Code': 'krg-01',
                    'Description': 'Karung 01',
                    'Weight (kg)': '10',
                    // 'Qty': '1',
                    'Length (cm)': '0',
                    'Wide (cm)': '0',
                    'Height (cm)': '0',
                    'Volume (m3)': '1000',
                }, {
                    'Item Code': 'krg-02',
                    'Description': 'Karung 02',
                    'Weight (kg)': '10',
                    // 'Qty': '3',
                    'Length (cm)': '0',
                    'Wide (cm)': '0',
                    'Height (cm)': '0',
                    'Volume (m3)': '1000',
                }, {
                    'Item Code': 'Note: jika ingin menggunakan comma silahkan gunakan , bukan . Dan jangan gunakan tanda kutip didepan angka :)',
                    'Description': 'Hapus note ini saat upload file',
                    'Weight (kg)': '0',
                    // 'Qty': '0',
                    'Length (cm)': '0',
                    'Wide (cm)': '0',
                    'Height (cm)': '0',
                    'Volume (m3)': '0',
                });
            }

            // set meta header
            listDownload.push({
                'Item Code': 'Item Code',
                'Description': 'Description',
                'Weight (kg)': 'Weight (kg)',
                // 'Qty': 'Qty',
                'Length (cm)': 'Dimension',
                'Wide (cm)': 'Dimension',
                'Height (cm)': 'Dimension',
                'Volume (m3)': 'Volume (m3)',
            });

            // set data header name
            listDownload.push({
                'Item Code': '',
                'Description': '',
                'Weight (kg)': '',
                // 'Qty': '',
                'Length (cm)': 'Length (cm)',
                'Wide (cm)': 'Wide (cm)',
                'Height (cm)': 'Height (cm)',
                'Volume (m3)': '',
            });

            const rowHeaderOne = 0;
            const rowHeaderTwo = 1;
            // start merge col
            const merge = [{
                    s: {
                        r: rowHeaderOne,
                        c: 0,
                    },
                    e: {
                        r: rowHeaderTwo,
                        c: 0,
                    }
                },
                {
                    s: {
                        r: rowHeaderOne,
                        c: 1,
                    },
                    e: {
                        r: rowHeaderTwo,
                        c: 1,
                    }
                },
                {
                    s: {
                        r: rowHeaderOne,
                        c: 2,
                    },
                    e: {
                        r: rowHeaderTwo,
                        c: 2,
                    }
                },
                // {
                //     s: {
                //         r: rowHeaderOne,
                //         c: 3,
                //     },
                //     e: {
                //         r: rowHeaderTwo,
                //         c: 3,
                //     }
                // },
                {
                    s: {
                        r: rowHeaderOne,
                        c: 3,
                    },
                    e: {
                        r: rowHeaderOne,
                        c: 5,
                    }
                },
                {
                    s: {
                        r: rowHeaderOne,
                        c: 6,
                    },
                    e: {
                        r: rowHeaderTwo,
                        c: 6,
                    }
                },
            ];

            // end merge col
            for (const m of merge) {
                // m.e.r = rowNumber + 1
                merges.push(m);
            }

            let rowNumber = 0;
            const rowHeaderStartFrom = 2;
            for (const row of data) {
                const item = {
                    'Item Code': row['Item Code'],
                    'Description': row['Description'],
                    'Weight (kg)': row['Weight (kg)'],
                    // 'Qty': row['Qty'],
                    'Length (cm)': row['Length (cm)'],
                    'Wide (cm)': row['Wide (cm)'],
                    'Height (cm)': row['Height (cm)'],
                    'Volume (m3)': row['Volume (m3)'],
                };
                listDownload.push(item);

                rowNumber++;
            }

            let ws = XLSX.utils.json_to_sheet(listDownload, {
                header: [
                    'Item Code',
                    'Description',
                    'Weight (kg)',
                    // 'Qty',
                    'Length (cm)',
                    'Wide (cm)',
                    'Height (cm)',
                    'Volume (m3)',
                ],
                skipHeader: true
            });
            ws['!merges'] = merges
            // ws['!autofilter'] = { ref: "A1:V1" };

            let wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, sheetName);
            XLSX.writeFile(wb, fileName);
        };

        const FilterOuter = {
            activate: async function() {
                FilterOuter.event();
                const {
                    resp
                } = await FilterOuter.reqData();
                FilterOuter.passData(resp.data);
            },
            event: function() {
                $('#filter-company').on('change', function() {
                    const slc = $('#filter-company :selected');
                    AppState.current_company = slc.data('cptid');
                    Filter.triggerFilterCompany();
                });
            },
            reqData: function(params = {}) {
                return new Promise((resolve, reject) => {
                    let url = "{{ route('api_list_clients') }}?";
                    $.ajax({
                        url,
                        method: 'GET',
                        crossDomain: true,
                        processData: true,
                        headers: {
                            'x-api-key': Helper.getCookie('_trtk'),
                        },
                        data: params,
                        success: (data, textStatus, jqXHR) => {
                            if (data.meta.type != 'success') {
                                resolve({
                                    type: 'fail',
                                    data: null,
                                });
                                Helper.toast('Warning', 'just now', data.meta.message);
                                return false;
                            }
                            resolve({
                                type: 'success',
                                resp: data,
                            });
                        },
                        error: (jqXHR, textStatus, error) => {
                            if (jqXHR.status >= 500) {
                                Helper.toast('Error', 'just now', 'Cannot get lists trucks');
                            } else {
                                Helper.toast('Error', 'just now', jqXHR.responseJSON.meta
                                    .message);
                            }
                            resolve({
                                type: 'error',
                                data: null,
                            });
                        }
                    })
                });
            },
            passData: function(data) {
                $('#filter-company').html(`
                    <option value="all" data-cptid="0" data-cptname="Semua Perusahaan">All Company</option>
                `);
                for (let iData in data) {
                    $('#filter-company').append(`
                        <option value="${data[iData].client_id}" data-cptid="${data[iData].client_id}" data-cptname="${data[iData].c_name}">${data[iData].c_name}</option>
                    `);
                }
                $('#filter-company').select2({
                    width: '100%'
                });
            },
        }

        $(document).ready(function() {
            setTimeout(() => {
                if (AppState.user_role.current != AppState.user_role.admin) return false;
                const AllowRouteSegment1 = ['dashboard', 'transactions', 'clients', 'zone', 'users', 'drivers', 'vehicles'];
                if (!AllowRouteSegment1.includes(AppState.route_segment1)) {
                    const AllowRouteSegment2 = ['pocket'];
                    if (!AllowRouteSegment2.includes(AppState.route_segment2)) {
                        // $('#subNav').addClass('d-none');
                        return false;
                    }
                }
                FilterOuter.activate();
            }, 3000);
        });
    </script>
    @yield('customjs')
</body>

</html
