<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HRMS - Management System</title>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    
    <!-- Bootstrap 4 & AdminLTE 3 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/css/adminlte.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@1.5.2/dist/select2-bootstrap4.min.css">
    
    <!-- DataTables BS4 -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.bootstrap4.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.4.1/css/responsive.bootstrap4.min.css">

    <link rel="stylesheet" href="{{ asset('css/modern.css') }}?v={{ time() }}">
    
    <style>
        @php
            $themeSettings = \App\Models\BusinessSetting::firstOrNewDefault();
            $primaryColor = $themeSettings->theme_color_primary ?? '#0052cc';
            $fontFamily = $themeSettings->theme_font_family ?? 'Inter';
            
            $fontMap = [
                'Inter' => "'Inter', sans-serif",
                'Roboto' => "'Roboto', sans-serif",
                'Open Sans' => "'Open Sans', sans-serif",
                'Lato' => "'Lato', sans-serif",
                'Poppins' => "'Poppins', sans-serif"
            ];
            $fontCss = $fontMap[$fontFamily] ?? "'Inter', sans-serif";
        @endphp

        :root {
            --zoho-blue: {{ $primaryColor }};
            --zoho-blue-dark: color-mix(in srgb, {{ $primaryColor }}, black 15%);
            --zoho-blue-light: color-mix(in srgb, {{ $primaryColor }}, white 90%);
        }

        body {
            font-family: {!! $fontCss !!} !important;
        }
    </style>
    @stack('css')
</head>
<body class="hold-transition {{ Auth::check() ? 'sidebar-mini layout-fixed' : 'login-page' }}">

@auth
    <div class="wrapper">
        <!-- Navbar -->
        @include('layouts.partials.navbar')

        <!-- Main Sidebar -->
        @include('layouts.partials.sidebar')

        <!-- Content Wrapper -->
        <div class="content-wrapper">
            <!-- Content Header -->
            <div class="content-header">
                <div class="container-fluid">
                    <div class="row mb-2">
                        <div class="col-sm-6">
                            <h1 class="m-0">@yield('title', 'Dashboard')</h1>
                        </div>
                        <div class="col-sm-6 text-right">
                            @yield('panel-actions')
                        </div>
                    </div>
                </div>
            </div>

            <!-- Main content -->
            <section class="content">
                <div class="container-fluid">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                            <h5><i class="icon fas fa-check"></i> Success!</h5>
                            {{ session('success') }}
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                            <h5><i class="icon fas fa-ban"></i> Error!</h5>
                            {{ session('error') }}
                        </div>
                    @endif

                    @yield('content')
                </div>
            </section>
        </div>

        <footer class="main-footer">
            <div class="float-right d-none d-sm-block">
                <b>Version</b> 3.0.0
            </div>
            <strong>Copyright &copy; {{ date('Y') }} HRMS Management.</strong> All rights reserved.
        </footer>

        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
            @csrf
        </form>
    </div>
    @yield('modals')
@else
    <div class="container mt-5">
        @yield('content')
    </div>
@endauth

<!-- REQUIRED SCRIPTS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/js/adminlte.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.4.1/js/responsive.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
$(function () {
    $('[data-toggle="tooltip"]').tooltip();

    @auth
    function updatePunchStatus() {
        $.get("{{ route('attendances.status') }}", function(data) {
            $('#globalPunchBtn').removeClass('d-none').addClass('d-inline-block').removeClass('btn-punch-in btn-punch-out');
            if (data.status === 'in') {
                $('#globalPunchBtn').addClass('btn-punch-out');
                $('#punchText').text('Punch Out (' + data.punch_in + ')');
            } else {
                $('#globalPunchBtn').addClass('btn-punch-in');
                $('#punchText').text('Punch In');
            }
        });
    }

    updatePunchStatus();

    // Global Select2 Initializer
    window.initGlobalSelect2 = function(container) {
        const selector = container ? $(container).find('.select2, .select2-ajax') : $('.select2, .select2-ajax');
        selector.each(function() {
            if ($(this).data('select2')) {
                $(this).select2('destroy');
            }
            
            const config = {
                theme: 'bootstrap4',
                width: '100%',
                placeholder: $(this).attr('placeholder') || 'Select an option',
                allowClear: $(this).data('allow-clear') || false,
                dropdownParent: $(this).closest('.modal').length ? $(this).closest('.modal') : null
            };

            if ($(this).hasClass('select2-ajax')) {
                config.ajax = {
                    url: $(this).data('url') || "{{ route('employees.search') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) { return { term: params.term }; },
                    processResults: function(data) { return { results: data.results }; },
                    cache: true
                };
            }

            $(this).select2(config);
        });
    };

    initGlobalSelect2();

    $('#globalPunchBtn').click(function() {
        var btn = $(this);
        btn.prop('disabled', true);
        $.post("{{ route('attendances.punch') }}", {
            _token: "{{ csrf_token() }}"
        }, function(response) {
            Swal.fire({
                title: 'Success',
                text: response.success,
                icon: 'success',
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000
            });
            updatePunchStatus();
            if (typeof table !== 'undefined') table.draw();
        }).always(function() {
            btn.prop('disabled', false);
        });
    });
    @endauth
});
</script>
@stack('scripts')
</body>
</html>
