<!doctype html>
<html lang="en" dir="ltr">
<head>
    <!-- META DATA -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Salon Admin">

    <!-- FAVICON -->
    <link rel="shortcut icon" type="image/x-icon" href="{{ asset('assets/images/brand/favicon.ico') }}">

    <!-- TITLE -->
    <title>@yield('title', config('app.name').' – Admin')</title>

    <!-- BOOTSTRAP CSS -->
    <link id="style" href="{{ asset('assets/plugins/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">

    <!-- STYLE CSS -->
    <link href="{{ asset('assets/css/style.css') }}" rel="stylesheet">

    <!-- Plugins CSS -->
    <link href="{{ asset('assets/css/plugins.css') }}" rel="stylesheet">

    <!-- FONT-ICONS CSS -->
    <link href="{{ asset('assets/css/icons.css') }}" rel="stylesheet">

    <!-- INTERNAL Switcher css -->
    <link href="{{ asset('assets/switcher/css/switcher.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/switcher/demo.css') }}" rel="stylesheet">

    {{-- Table action links and status badges (salon) --}}
    <style>
        .table-actions { display: flex; justify-content: flex-end; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
        .table-actions a { font-size: 0.875rem; font-weight: 500; color: #475569; text-decoration: none; }
        .table-actions a:hover { color: #0f172a; }
        .table-actions .link-danger, .table-actions button.link-danger { color: #dc2626; background: none; border: none; padding: 0; cursor: pointer; font-size: 0.875rem; font-weight: 500; }
        .table-actions .link-danger:hover, .table-actions button.link-danger:hover { color: #b91c1c; }
        .badge-success { background-color: #dcfce7; color: #166534; }
        .badge-warning { background-color: #fef9c3; color: #854d0e; }
        .badge-info { background-color: #dbeafe; color: #1d4ed8; }
        .badge-muted { background-color: #e5e7eb; color: #374151; }
        .badge-danger { background-color: #fee2e2; color: #b91c1c; }
    </style>

    @stack('styles')
</head>
<body class="app sidebar-mini ltr light-mode">
    <!-- GLOBAL-LOADER -->
    <div id="global-loader">
        <img src="{{ asset('assets/images/loader.svg') }}" class="loader-img" alt="Loader">
    </div>
    <!-- /GLOBAL-LOADER -->

    <!-- PAGE -->
    <div class="page">
        <div class="page-main">

            {{-- BEGIN: Header from template --}}
            @includeIf('layouts.partials.sash-header')
            {{-- END: Header --}}

            {{-- BEGIN: Sidebar from template --}}
            @includeIf('layouts.partials.sash-sidebar')
            {{-- END: Sidebar --}}

            <!-- app-content -->
            <div class="app-content main-content">
                <div class="side-app">
                    <!-- CONTAINER -->
                    <div class="main-container container-fluid">
                        @yield('content')
                    </div>
                    <!-- CONTAINER END -->
                </div>
            </div>
            <!-- app-content end -->

        </div>

        {{-- BEGIN: Footer from template --}}
        @includeIf('layouts.partials.sash-footer')
        {{-- END: Footer --}}
    </div>
    <!-- PAGE END -->

    <!-- SCRIPTS (jQuery must load first - template uses assets/js/jquery.min.js) -->
    <script src="{{ asset('assets/js/jquery.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('assets/js/custom.js') }}"></script>
    {{-- Fallback: hide loader on load in case custom.js fails (e.g. 404) --}}
    <script>
        (function () {
            function hideLoader() {
                var el = document.getElementById('global-loader');
                if (el) el.style.display = 'none';
            }
            if (document.readyState === 'complete') hideLoader();
            else window.addEventListener('load', hideLoader);
        })();
    </script>
    @stack('scripts')
</body>
</html>

