<!DOCTYPE html >
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">


    <link rel="shortcut icon" href="{{ asset('images/favicon.ico')}}">
    <link rel="stylesheet" href="{{ asset('css/font-awesome.min.css')}}">
    <title>@yield('title')
        | {{isset(app('CompanyDetails')->comp_name) ? app('CompanyDetails')->comp_name : ""}} {{auth()->user() ? " - ".auth()->user()->firstName ." ". auth()->user()->lastName : ''}}
    </title>
    <link type="text/css" rel="stylesheet" href="{{asset('css/style1.css')}}">
    <script src="{{asset('js/jquery-3.6.0.js')}}"></script>
    <!--Datatables CSS-->
    <link rel="stylesheet" href="{{asset('css/dataTables.css')}}">
    <!--Datatables JS-->
    <script src="{{asset('js/dataTables.js')}}"></script>

    {{--Download Buttons--}}
    <script src="{{asset('js/dataTables.buttons.min.js')}}"></script>
    <script src="{{asset('js/jszip.min.js')}}"></script>
    <script src="{{asset('js/pdfmake.min.js')}}"></script>
    <script src="{{asset('js/vfs_fonts.js')}}"></script>
    {{--<script src="{{asset('js/buttons.flash.min.js')}}"></script>--}}
    <script src="{{asset('js/buttons.html5.min.js')}}"></script>
    <script src="{{asset('js/buttons.print.min.js')}}"></script>

    <!--jQuery UI-->
    <link rel="stylesheet" href="{{asset('css/dialogueBoxes.css')}}">
    <script src="{{asset('js/dialogueBoxes.js')}}"></script>

    <!--Canvas JS-->
    {{--<script src="{{asset('js/canvas.js')}}"></script>--}}
    <script src="{{asset('js/jquery.canvasjs.js')}}"></script>

    <!--JS Selectize-->
    <link href="{{asset('css/select2.min.css')}}" rel="stylesheet"/>
    <script src="{{asset('js/select2.min.js')}}"></script>

    <!--SCEDITOR FOR TEXT AREAS-->
    <!-- BBcode editor -->
    <script src="{{asset('sceditor/minified/jquery.sceditor.bbcode.min.js')}}"></script>
    <!-- HTML editor -->
    <script src="{{asset('sceditor/minified/jquery.sceditor.xhtml.min.js')}}"></script>
    <link rel="stylesheet" href="{{asset('sceditor/minified/themes/default.min.css')}}">

    <script>
        $(document).ready(function (){
            /**Automatically Hide any Notification classes**/
            $('.error-section').fadeOut(6000);

        });

        //Auto-focus on search window
        $(document).on('select2:open', () => {
            document.querySelector('.select2-search__field').focus();
        });
        {{--REFRESH PAGE--}}
        function reloadPage(){
            location.reload();
        }
        {{--FORWARD PAGE--}}
        function forwardPage(){
            history.forward();
        }
        {{--BACK PAGE--}}
        function backPage(){
            history.back();
        }
        {{--Duplicate Page for Quick working--}}
        function duplicatePage(){
            var currentURL = window.location.href;
            window.open(currentURL, '_blank');
        }
    </script>
    <!--Internal JS code goes in here. For JQuery, remember to add document.ready tags-->
    @yield('internal-js')
    <style>
        .select2-container--default .select2-selection--single {
            background-color: #f1efef;
        }
    </style>
    <!--Internal CSS Code goes in here-->
    @yield('internal-css')
</head>
<body>
<div class="main">
    <!--SIDE BAR STARTS HERE-->
    @include('layouts.sidebar')

    <!--Include Topbar-->
    @include('layouts.topbar')

    @yield('headers')
    <!--Page Heading Division-->
    <div class="heading">
        <table style="width: 100%; border-collapse: collapse">
            <tr>
                <th align="left"><h3>@yield('heading')</th>
                <th style="font-size: 7pt; text-align: center">@yield('done-by')</th>
                <th align="right" >@yield('searches')</th>
            </tr>
        </table>
    </div>

    <!--Page Body Division-->
    <div class="section">
        <div class="body-section">
            @yield('content')
            <!--Modal Box section-->
            <div class="modal-box">
                <i><b>@yield('created-by')</b></i>
                @yield('hints')
                @include('layouts.hints')
            </div>
        </div>
        <!--Include the footer now-->
        <div class="footer">
            @include('layouts.footer')
        </div>
    </div>
</div>
@yield('other-js')

@yield('other-css')

</body>
<!--Start of Tawk.to Script-->
@include('layouts.tawk-to')

<!--End of Tawk.to Script-->
</html>
