@php
    use App\Models\Utility;
    $setting = \App\Models\Utility::settings();

    $logo = \App\Models\Utility::get_file('uploads/logo');

    $company_favicon = $setting['company_favicon'] ?? '';

    $color = !empty($setting['color']) ? $setting['color'] : 'theme-3';

    if(isset($setting['color_flag']) && $setting['color_flag'] == 'true')
    {
        $themeColor = 'custom-color';
    }
    else {
        $themeColor = $color;
    }

    $SITE_RTL = $setting['SITE_RTL'] ?? '';

    $lang = \App::getLocale('lang');
    if ($lang == 'ar' || $lang == 'he') {
        $SITE_RTL = 'on';
    }

    $metatitle = isset($setting['meta_title']) ? $setting['meta_title'] : '';
    $metsdesc = isset($setting['meta_desc']) ? $setting['meta_desc'] : '';
    $meta_image = \App\Models\Utility::get_file('uploads/meta/');
    $meta_logo = isset($setting['meta_image']) ? $setting['meta_image'] : '';

@endphp
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ $SITE_RTL == 'on' ? 'rtl' : '' }}">

<meta name="csrf-token" id="csrf-token" content="{{ csrf_token() }}">

<head>
    <title>{{ $setting['title_text'] ? $setting['title_text'] : config('app.name', 'ERPGO') }} - @yield('page-title')
    </title>

    <meta name="title" content="{{ $metatitle }}">
    <meta name="description" content="{{ $metsdesc }}">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ env('APP_URL') }}">
    <meta property="og:title" content="{{ $metatitle }}">
    <meta property="og:description" content="{{ $metsdesc }}">
    <meta property="og:image" content="{{ $meta_image . $meta_logo }}">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="{{ env('APP_URL') }}">
    <meta property="twitter:title" content="{{ $metatitle }}">
    <meta property="twitter:description" content="{{ $metsdesc }}">
    <meta property="twitter:image" content="{{ $meta_image . $meta_logo }}">


    <script src="{{ asset('js/html5shiv.js') }}"></script>

    {{--    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> --}}

    <!-- Meta -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="url" content="{{ url('') . '/' . config('chatify.path') }}" data-user="{{ Auth::user()->id }}">
    <link rel="icon"
        href="{{ $logo . '/' . (isset($company_favicon) && !empty($company_favicon) ? $company_favicon : 'favicon.png') }}"
        type="image" sizes="16x16">

    <!-- Favicon icon -->
    {{--    <link rel="icon" href="{{ asset('assets/images/favicon.svg') }}" type="image/x-icon"/> --}}
    <!-- Calendar-->
    <link rel="stylesheet" href="{{ asset('assets/css/plugins/main.css') }}">

    <link rel="stylesheet" href="{{ asset('assets/css/plugins/style.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/plugins/flatpickr.min.css') }}">

    <link rel="stylesheet" href="{{ asset('assets/css/plugins/animate.min.css') }}">

    <!-- font css -->
    <link rel="stylesheet" href="{{ asset('assets/fonts/tabler-icons.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/fonts/feather.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/fonts/fontawesome.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/fonts/material.css') }}">

    <!--bootstrap switch-->
    <link rel="stylesheet" href="{{ asset('assets/css/plugins/bootstrap-switch-button.min.css') }}">

    <!-- vendor css -->

    @if ($SITE_RTL == 'on')
        <link rel="stylesheet" href="{{ asset('assets/css/style-rtl.css') }}">
    @endif

    @if ($setting['cust_darklayout'] == 'on')
        <link rel="stylesheet" href="{{ asset('assets/css/style-dark.css') }}" id="main-style-link">
    @endif

    @if ($SITE_RTL != 'on' && $setting['cust_darklayout'] != 'on')
        <link rel="stylesheet" href="{{ asset('assets/css/style.css') }}" id="main-style-link">
    @endif

    <link rel="stylesheet" href="{{ asset('assets/css/customizer.css') }}">
    <link rel="stylesheet" href="{{ asset('css/custom.css') }}">

    @if ($setting['cust_darklayout'] == 'on')
        <link rel="stylesheet" href="{{ asset('css/custom-dark.css') }}">
    @endif

    <style>
        :root {
            --color-customColor: <?= $color ?>;
        }
    </style>

    <link rel="stylesheet" href="{{ asset('css/custom-color.css') }}">
    @stack('css-page')


</head>



<body class="{{ $themeColor }}">

    <!-- [ Pre-loader ] start -->
    <div class="loader-bg">
        <div class="loader-track">
            <div class="loader-fill"></div>
        </div>
    </div>

    @include('partials.admin.menu')
    <!-- [ navigation menu ] end -->
    <!-- [ Header ] start -->
    @include('partials.admin.header')

    <!-- Modal -->
    <div class="modal notification-modal fade" id="notification-modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <button type="button" class="btn-close float-end" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                    <h6 class="mt-2">
                        <i data-feather="monitor" class="me-2"></i>Desktop settings
                    </h6>
                    <hr />
                    <div class="form-check form-switch">
                        <input type="checkbox" class="form-check-input" id="pcsetting1" checked />
                        <label class="form-check-label f-w-600 pl-1" for="pcsetting1">Allow desktop notification</label>
                    </div>
                    <p class="text-muted ms-5">
                        you get lettest content at a time when data will updated
                    </p>
                    <div class="form-check form-switch">
                        <input type="checkbox" class="form-check-input" id="pcsetting2" />
                        <label class="form-check-label f-w-600 pl-1" for="pcsetting2">Store Cookie</label>
                    </div>
                    <h6 class="mb-0 mt-5">
                        <i data-feather="save" class="me-2"></i>Application settings
                    </h6>
                    <hr />
                    <div class="form-check form-switch">
                        <input type="checkbox" class="form-check-input" id="pcsetting3" />
                        <label class="form-check-label f-w-600 pl-1" for="pcsetting3">Backup Storage</label>
                    </div>
                    <p class="text-muted mb-4 ms-5">
                        Automaticaly take backup as par schedule
                    </p>
                    <div class="form-check form-switch">
                        <input type="checkbox" class="form-check-input" id="pcsetting4" />
                        <label class="form-check-label f-w-600 pl-1" for="pcsetting4">Allow guest to print
                            file</label>
                    </div>
                    <h6 class="mb-0 mt-5">
                        <i data-feather="cpu" class="me-2"></i>System settings
                    </h6>
                    <hr />
                    <div class="form-check form-switch">
                        <input type="checkbox" class="form-check-input" id="pcsetting5" checked />
                        <label class="form-check-label f-w-600 pl-1" for="pcsetting5">View other user chat</label>
                    </div>
                    <p class="text-muted ms-5">Allow to show public user message</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light-danger btn-sm" data-bs-dismiss="modal">
                        Close
                    </button>
                    <button type="button" class="btn btn-light-primary btn-sm">
                        Save changes
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- [ Header ] end -->

    <!-- [ Main Content ] start -->
    <div class="dash-container">
        <div class="dash-content">
            <div class="page-header">
                <div class="page-block">
                    <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
                        <div>
                            <div class="page-header-title">
                                <h4 class="mb-2">@yield('page-title')</h4>
                            </div>
                            <ul class="breadcrumb">
                                @yield('breadcrumb')
                            </ul>
                        </div>
                        <div class="action-btn-col">
                            @yield('action-btn')
                        </div>
                    </div>
                </div>
            </div>
            @yield('content')
            <!-- [ Main Content ] end -->
        </div>
    </div>
    <div class="modal fade" id="commonModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="body">
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="commonModalOver" tabindex="-1" role="dialog" aria-labelledby="commonModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="commonModalLabel"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                </div>
            </div>
        </div>
    </div>

    <div class="position-fixed top-0 end-0 p-3" style="z-index: 99999">
        <div id="liveToast" class="toast text-white fade" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body"></div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
                    aria-label="Close"></button>
            </div>
        </div>
    </div>
    @include('partials.admin.footer')
    @include('Chatify::layouts.footerLinks')

    <script>
    (function () {
        if (window.__phoneCountryPickerInitialized) {
            return;
        }
        window.__phoneCountryPickerInitialized = true;

                const eastAfricaOptions = [
            { code: '+254', label: 'KE +254' },
            { code: '+255', label: 'TZ +255' },
            { code: '+256', label: 'UG +256' },
            { code: '+250', label: 'RW +250' },
            { code: '+257', label: 'BI +257' },
            { code: '+211', label: 'SS +211' },
            { code: '+251', label: 'ET +251' },
            { code: '+252', label: 'SO +252' },
            { code: '+253', label: 'DJ +253' },
            { code: '+291', label: 'ER +291' },
            { code: '+269', label: 'KM +269' },
            { code: '+248', label: 'SC +248' },
            { code: '+261', label: 'MG +261' },
            { code: '+230', label: 'MU +230' }
        ];

        const africaOptions = [
            { code: '+213', label: 'DZ +213' },
            { code: '+244', label: 'AO +244' },
            { code: '+229', label: 'BJ +229' },
            { code: '+267', label: 'BW +267' },
            { code: '+226', label: 'BF +226' },
            { code: '+237', label: 'CM +237' },
            { code: '+238', label: 'CV +238' },
            { code: '+236', label: 'CF +236' },
            { code: '+235', label: 'TD +235' },
            { code: '+242', label: 'CG +242' },
            { code: '+243', label: 'CD +243' },
            { code: '+225', label: 'CI +225' },
            { code: '+20', label: 'EG +20' },
            { code: '+240', label: 'GQ +240' },
            { code: '+241', label: 'GA +241' },
            { code: '+220', label: 'GM +220' },
            { code: '+233', label: 'GH +233' },
            { code: '+224', label: 'GN +224' },
            { code: '+245', label: 'GW +245' },
            { code: '+266', label: 'LS +266' },
            { code: '+231', label: 'LR +231' },
            { code: '+218', label: 'LY +218' },
            { code: '+265', label: 'MW +265' },
            { code: '+223', label: 'ML +223' },
            { code: '+222', label: 'MR +222' },
            { code: '+212', label: 'MA +212' },
            { code: '+258', label: 'MZ +258' },
            { code: '+264', label: 'NA +264' },
            { code: '+227', label: 'NE +227' },
            { code: '+234', label: 'NG +234' },
            { code: '+239', label: 'ST +239' },
            { code: '+221', label: 'SN +221' },
            { code: '+232', label: 'SL +232' },
            { code: '+27', label: 'ZA +27' },
            { code: '+249', label: 'SD +249' },
            { code: '+268', label: 'SZ +268' },
            { code: '+228', label: 'TG +228' },
            { code: '+216', label: 'TN +216' },
            { code: '+260', label: 'ZM +260' },
            { code: '+263', label: 'ZW +263' }
        ];

        const worldOptions = [
            { code: '+93', label: 'AF +93' },
            { code: '+355', label: 'AL +355' },
            { code: '+376', label: 'AD +376' },
            { code: '+1', label: 'AG +1' },
            { code: '+54', label: 'AR +54' },
            { code: '+374', label: 'AM +374' },
            { code: '+61', label: 'AU +61' },
            { code: '+43', label: 'AT +43' },
            { code: '+994', label: 'AZ +994' },
            { code: '+1', label: 'BS +1' },
            { code: '+973', label: 'BH +973' },
            { code: '+880', label: 'BD +880' },
            { code: '+1', label: 'BB +1' },
            { code: '+375', label: 'BY +375' },
            { code: '+32', label: 'BE +32' },
            { code: '+501', label: 'BZ +501' },
            { code: '+975', label: 'BT +975' },
            { code: '+591', label: 'BO +591' },
            { code: '+387', label: 'BA +387' },
            { code: '+55', label: 'BR +55' },
            { code: '+673', label: 'BN +673' },
            { code: '+359', label: 'BG +359' },
            { code: '+855', label: 'KH +855' },
            { code: '+1', label: 'CA +1' },
            { code: '+56', label: 'CL +56' },
            { code: '+86', label: 'CN +86' },
            { code: '+57', label: 'CO +57' },
            { code: '+506', label: 'CR +506' },
            { code: '+385', label: 'HR +385' },
            { code: '+53', label: 'CU +53' },
            { code: '+357', label: 'CY +357' },
            { code: '+420', label: 'CZ +420' },
            { code: '+45', label: 'DK +45' },
            { code: '+1767', label: 'DM +1767' },
            { code: '+1', label: 'DO +1' },
            { code: '+593', label: 'EC +593' },
            { code: '+503', label: 'SV +503' },
            { code: '+372', label: 'EE +372' },
            { code: '+679', label: 'FJ +679' },
            { code: '+358', label: 'FI +358' },
            { code: '+33', label: 'FR +33' },
            { code: '+995', label: 'GE +995' },
            { code: '+49', label: 'DE +49' },
            { code: '+30', label: 'GR +30' },
            { code: '+1473', label: 'GD +1473' },
            { code: '+502', label: 'GT +502' },
            { code: '+592', label: 'GY +592' },
            { code: '+509', label: 'HT +509' },
            { code: '+504', label: 'HN +504' },
            { code: '+36', label: 'HU +36' },
            { code: '+354', label: 'IS +354' },
            { code: '+91', label: 'IN +91' },
            { code: '+62', label: 'ID +62' },
            { code: '+98', label: 'IR +98' },
            { code: '+964', label: 'IQ +964' },
            { code: '+353', label: 'IE +353' },
            { code: '+972', label: 'IL +972' },
            { code: '+39', label: 'IT +39' },
            { code: '+1', label: 'JM +1' },
            { code: '+81', label: 'JP +81' },
            { code: '+962', label: 'JO +962' },
            { code: '+7', label: 'KZ +7' },
            { code: '+965', label: 'KW +965' },
            { code: '+996', label: 'KG +996' },
            { code: '+856', label: 'LA +856' },
            { code: '+371', label: 'LV +371' },
            { code: '+961', label: 'LB +961' },
            { code: '+423', label: 'LI +423' },
            { code: '+370', label: 'LT +370' },
            { code: '+352', label: 'LU +352' },
            { code: '+60', label: 'MY +60' },
            { code: '+960', label: 'MV +960' },
            { code: '+356', label: 'MT +356' },
            { code: '+692', label: 'MH +692' },
            { code: '+52', label: 'MX +52' },
            { code: '+691', label: 'FM +691' },
            { code: '+373', label: 'MD +373' },
            { code: '+377', label: 'MC +377' },
            { code: '+976', label: 'MN +976' },
            { code: '+382', label: 'ME +382' },
            { code: '+95', label: 'MM +95' },
            { code: '+674', label: 'NR +674' },
            { code: '+977', label: 'NP +977' },
            { code: '+31', label: 'NL +31' },
            { code: '+64', label: 'NZ +64' },
            { code: '+505', label: 'NI +505' },
            { code: '+47', label: 'NO +47' },
            { code: '+968', label: 'OM +968' },
            { code: '+92', label: 'PK +92' },
            { code: '+680', label: 'PW +680' },
            { code: '+507', label: 'PA +507' },
            { code: '+675', label: 'PG +675' },
            { code: '+595', label: 'PY +595' },
            { code: '+51', label: 'PE +51' },
            { code: '+63', label: 'PH +63' },
            { code: '+48', label: 'PL +48' },
            { code: '+351', label: 'PT +351' },
            { code: '+974', label: 'QA +974' },
            { code: '+40', label: 'RO +40' },
            { code: '+7', label: 'RU +7' },
            { code: '+1784', label: 'VC +1784' },
            { code: '+685', label: 'WS +685' },
            { code: '+378', label: 'SM +378' },
            { code: '+966', label: 'SA +966' },
            { code: '+381', label: 'RS +381' },
            { code: '+65', label: 'SG +65' },
            { code: '+421', label: 'SK +421' },
            { code: '+386', label: 'SI +386' },
            { code: '+677', label: 'SB +677' },
            { code: '+34', label: 'ES +34' },
            { code: '+94', label: 'LK +94' },
            { code: '+597', label: 'SR +597' },
            { code: '+46', label: 'SE +46' },
            { code: '+41', label: 'CH +41' },
            { code: '+963', label: 'SY +963' },
            { code: '+886', label: 'TW +886' },
            { code: '+992', label: 'TJ +992' },
            { code: '+66', label: 'TH +66' },
            { code: '+670', label: 'TL +670' },
            { code: '+676', label: 'TO +676' },
            { code: '+1868', label: 'TT +1868' },
            { code: '+90', label: 'TR +90' },
            { code: '+993', label: 'TM +993' },
            { code: '+688', label: 'TV +688' },
            { code: '+380', label: 'UA +380' },
            { code: '+971', label: 'AE +971' },
            { code: '+44', label: 'UK +44' },
            { code: '+1', label: 'US +1' },
            { code: '+598', label: 'UY +598' },
            { code: '+998', label: 'UZ +998' },
            { code: '+678', label: 'VU +678' },
            { code: '+39', label: 'VA +39' },
            { code: '+58', label: 'VE +58' },
            { code: '+84', label: 'VN +84' },
            { code: '+967', label: 'YE +967' },
            { code: '+383', label: 'XK +383' }
        ];

        const countryOptions = eastAfricaOptions
            .concat(africaOptions, worldOptions)
            .filter(function (opt, index, list) {
                return list.findIndex(function (item) {
                    return item.code === opt.code && item.label === opt.label;
                }) === index;
            });

        const sortedCodes = countryOptions
            .map(function (c) { return c.code; })
            .sort(function (a, b) { return b.length - a.length; });

        function detectCode(value) {
            const val = (value || '').trim();
            for (let i = 0; i < sortedCodes.length; i++) {
                const code = sortedCodes[i];
                if (val.indexOf(code) === 0) {
                    return code;
                }
            }
                        return null;
        }

        function normalizeLocalPart(value) {
            let digits = (value || '').replace(/\D/g, '');
            if (!digits) {
                return '';
            }
            if (digits.charAt(0) === '0') {
                digits = digits.substring(1);
            }
            return digits;
        }

        function stripLeadingZero(value) {
            const raw = (value || '');
            if (raw.indexOf('+') === 0) {
                return raw;
            }
            return raw.replace(/^\s*0+/, '').replace(/^\s+/, '');
        }

        function targetPhoneInput(input) {
            if (!input || input.dataset.phoneEnhanced === '1') {
                return false;
            }
            if (input.type === 'hidden' || input.readOnly || input.disabled) {
                return false;
            }
            const name = (input.getAttribute('name') || '').toLowerCase();
            const id = (input.getAttribute('id') || '').toLowerCase();
            if (
                name.indexOf('phone') !== -1 ||
                id.indexOf('phone') !== -1 ||
                name.indexOf('contact') !== -1 ||
                id.indexOf('contact') !== -1
            ) {
                return true;
            }

            const group = input.closest('.form-group');
            if (!group) {
                return false;
            }

            const groupText = (group.textContent || '').toLowerCase();
            return groupText.indexOf('please use with country code') !== -1 || groupText.indexOf('ex. +254') !== -1 || groupText.indexOf('without zero') !== -1;
        }

        function enhancePhoneInput(input) {
            if (!targetPhoneInput(input)) {
                return;
            }

            const parent = input.parentNode;
            if (!parent) {
                return;
            }

            const wrapper = document.createElement('div');
            wrapper.className = 'input-group phone-country-picker-wrapper';

            const select = document.createElement('select');
            select.className = 'form-select phone-country-code';
            select.style.maxWidth = '115px';
            select.style.flex = '0 0 115px';
            select.setAttribute('aria-label', 'Country code');

            countryOptions.forEach(function (opt) {
                const option = document.createElement('option');
                option.value = opt.code;
                option.textContent = opt.label;
                select.appendChild(option);
            });

            const existingValue = (input.value || '').trim();
            const matchedCode = detectCode(existingValue) || '+254';
            select.value = matchedCode;

            if (existingValue.indexOf('+') === 0) {
                input.value = existingValue.substring(matchedCode.length).replace(/^[\s-]+/, '');
            } else {
                input.value = stripLeadingZero(existingValue);
            }

            parent.insertBefore(wrapper, input);
            wrapper.appendChild(select);
            wrapper.appendChild(input);

            input.dataset.phoneEnhanced = '1';
            input.dataset.phoneCodeSelectId = 'phone-country-' + Math.random().toString(36).slice(2, 10);
            select.id = input.dataset.phoneCodeSelectId;
            input.addEventListener('input', function () {
                input.value = stripLeadingZero(input.value);
            });
            input.addEventListener('blur', function () {
                input.value = stripLeadingZero(input.value);
            });
        }

        function syncPhoneNumbersBeforeSubmit(form) {
            const inputs = form.querySelectorAll('input[data-phone-enhanced="1"]');
            inputs.forEach(function (input) {
                const selectId = input.dataset.phoneCodeSelectId;
                const select = selectId ? document.getElementById(selectId) : null;
                if (!select) {
                    return;
                }

                const raw = (input.value || '').trim();
                if (!raw || raw.indexOf('+') === 0) {
                    return;
                }

                const normalized = normalizeLocalPart(raw);
                if (!normalized) {
                    return;
                }

                input.value = select.value + normalized;
            });
        }

        function initPhoneFields(root) {
            const scope = root || document;
            const phoneInputs = scope.querySelectorAll('input[type="text"], input[type="tel"], input:not([type])');
            phoneInputs.forEach(enhancePhoneInput);

            const forms = scope.querySelectorAll('form');
            forms.forEach(function (form) {
                if (form.dataset.phoneSubmitBound === '1') {
                    return;
                }
                form.dataset.phoneSubmitBound = '1';
                form.addEventListener('submit', function () {
                    syncPhoneNumbersBeforeSubmit(form);
                });
            });
        }

        document.addEventListener('DOMContentLoaded', function () {
            initPhoneFields(document);
            const observer = new MutationObserver(function (mutations) {
                mutations.forEach(function (mutation) {
                    mutation.addedNodes.forEach(function (node) {
                        if (node.nodeType === 1) {
                            initPhoneFields(node);
                        }
                    });
                });
            });
            observer.observe(document.body, { childList: true, subtree: true });
        });
    })();
</script>

@include('partials.admin.address-enhancer-script')

</body>

</html>








