<?php $sximoconfig  = config('sximo');?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
            <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="shortcut icon" href="<?php echo e(asset('favicon.ico')); ?>" type="image/x-icon">
    <title><?php echo e(config('sximo.cnf_appname')); ?></title>
    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" />

    <link href="<?php echo e(asset('')); ?>assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="<?php echo e(asset('')); ?>assets/plugins/perfect-scrollbar/dist/css/perfect-scrollbar.min.css" rel="stylesheet">
    <!-- This page CSS -->
    <!--c3 CSS -->
    
    <link href="<?php echo e(asset('')); ?>assets/plugins/c3-master/c3.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="<?php echo e(asset('')); ?>assets/css/style.css" rel="stylesheet">
    <!-- Dashboard 1 Page CSS -->
    <link href="<?php echo e(asset('')); ?>assets/css/legacy.css" rel="stylesheet">
    <!-- You can change the theme colors from here -->
    <link href="<?php echo e(asset('')); ?>assets/css/colors/colors.css" id="themes" rel="stylesheet">
    <!--Toaster Popup message CSS -->
    <link href="<?php echo e(asset('')); ?>assets/plugins/toast-master/css/jquery.toast.css" rel="stylesheet">
    <link href="<?php echo e(asset('')); ?>assets/plugins/bootstrap-material-datetimepicker/css/bootstrap-material-datetimepicker.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">





    <script src="<?php echo e(asset('')); ?>assets/plugins/moment/moment.js"></script>
    <script src="<?php echo e(asset('')); ?>assets/js/sximo.min.js"></script>
    <!-- Bootstrap popper Core JavaScript -->
    <script src="<?php echo e(asset('')); ?>assets/plugins/bootstrap/js/popper.min.js"></script>
    <script src="<?php echo e(asset('')); ?>assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    
    <!-- slimscrollbar scrollbar JavaScript -->
    <script src="<?php echo e(asset('')); ?>assets/js/perfect-scrollbar.jquery.min.js"></script>
    <!--Wave Effects -->
    <script src="<?php echo e(asset('')); ?>assets/js/waves.js"></script>
    <!--Menu sidebar -->
    <script src="<?php echo e(asset('')); ?>assets/js/sidebarmenu.js"></script>
<!--stickey kit -->
    <script src="<?php echo e(asset('')); ?>assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"></script>
    <script src="<?php echo e(asset('')); ?>assets/plugins/sparkline/jquery.sparkline.min.js"></script>
    <!--Custom JavaScript -->
    <script src="<?php echo e(asset('')); ?>assets/js/custom.min.js"></script>
   
    <!--c3 JavaScript 
    <script src="<?php echo e(asset('')); ?>assets/plugins/d3/d3.min.js"></script>
    <script src="<?php echo e(asset('')); ?>assets/plugins/c3-master/c3.min.js"></script> --> 
     <script src="<?php echo e(asset('')); ?>assets/js/sximo5.js"></script>
     <script src="<?php echo e(asset('')); ?>assets/plugins/styleswitcher/jQuery.style.switcher.js"></script>
    <!-- Chart JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    
    
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>



   
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
      <![endif]-->

</head>

<body class="fix-header fix-sidebar  light-theme ">
    <!-- ============================================================== -->
    <!-- Preloader - style you can find in spinners.css -->
    <!-- ============================================================== -->
    <div class="preloader">
        <div class="loader">
            <div class="loader__figure"></div>
            <p class="loader__label"> <?php echo e(config('sximo.cnf_appname')); ?> </p>
        </div>
    </div>


    <div id="main-wrapper">
      <?php echo $__env->make('layouts.topnav', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
      <?php echo $__env->make('layouts.leftnav', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>   

        <!-- Page Content -->
        <div class="page-wrapper" style="background-image: url('<?php echo e(asset('')); ?>assets/images/bgdepan.png');
                                            background-position: center top -254px;
                                            background-repeat: no-repeat;
                                            background-size: cover;
                                            background-attachment: fixed;
                                            min-height: 928px;">
          <div class="container-fluid" style="background-position: top;
                background: linear-gradient(180deg, rgba(42, 123, 155, 0) 2%, rgba(78, 186, 137, 0) 15%, rgba(87, 199, 133, 0) 15%, rgb(244 240 240) 63%);
                background-attachment: fixed;">
          <div class="ajaxLoading"></div>
         
            <?php echo $__env->yieldContent('content'); ?> 
          </div>      
    </div>
    <!-- /#wrapper -->


</div>

<div class="modal" id="sximo-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1">
    <div class="modal-dialog " role="document" style="max-width: fit-content;">
        <div class="modal-content" style="border-radius: 16px; box-shadow: 0 8px 32px rgba(60,180,75,0.25); border: none;">
            <div class="modal-header bg-gradient-success" style="cursor: move; border-top-left-radius: 16px; border-top-right-radius: 16px; background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%); color: #fff;">
                <div style="display: flex; align-items: center; width: 100%;">
                    <i class="fa fa-envelope-open-text fa-lg mr-2"></i>
                    <h4 class="modal-title mb-0" id="exampleModalLabel1" style="flex: 1;">New Message</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: #fff; opacity: 0.8; font-size: 1.5rem;">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
            <div class="modal-body" id="sximo-modal-content" style="background: #f8fff8; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px;">
                <!-- Modal content goes here -->
            </div>
        </div>
    </div>
</div>


<div class="modal" id="sximo-modal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel2">
    <div class="modal-dialog " role="document" style="max-width: fit-content;">
        <div class="modal-content" style="border-radius: 18px; box-shadow: 0 10px 36px rgba(255,127,80,0.25); border: none;">
            <div class="modal-header" style="cursor: move; border-top-left-radius: 18px; border-top-right-radius: 18px; background: linear-gradient(90deg, #ff9966 0%, #ff5e62 100%); color: #fff;">
                <div style="display: flex; align-items: center; width: 100%;">
                    <i class="fa fa-paper-plane fa-lg mr-2"></i>
                    <h4 class="modal-title mb-0" id="exampleModalLabel2" style="flex: 1;">New Message</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: #fff; opacity: 0.8; font-size: 1.5rem;">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
            <div class="modal-body" id="sximo-modal-content2" style="background: #fff8f4; border-bottom-left-radius: 18px; border-bottom-right-radius: 18px;">
                <!-- Modal content goes here -->
            </div>
        </div>
    </div>
</div>
<script>
$(function() {
    $("#sximo-modal .modal-content").draggable({
        handle: ".modal-header"
    });
    // Buat modal bisa di-drag dengan jQuery UI
    $("#sximo-modal2 .modal-content").draggable({
        handle: ".modal-header"
    });
});


</script>

<?php if(Auth::user()->group_id == 1): ?>
<!-- =========================================================
     MODERN SWITCH USER
     ========================================================= -->
<div class="modal fade df-switch-modal"
     id="switchUserModal"
     tabindex="-1"
     role="dialog"
     aria-labelledby="switchUserModalLabel"
     aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered df-switch-dialog" role="document">

        <div class="modal-content df-switch-content">

            <div class="df-switch-header">

                <div class="df-switch-title-wrap">

                    <div class="df-switch-icon">
                        <i class="fa fa-users"></i>
                    </div>

                    <div>
                        <h4 id="switchUserModalLabel">Switch User</h4>
                        <p>Pilih user untuk mengganti sesi kerja</p>
                    </div>

                </div>

                <button type="button"
                        class="df-switch-close"
                        data-dismiss="modal"
                        aria-label="Close">
                    <i class="ti-close"></i>
                </button>

            </div>


            <div class="df-switch-body">

                <div class="df-switch-info">
                    <div class="df-switch-info-icon">
                        <i class="fa fa-info"></i>
                    </div>
                    <div>
                        <strong>Ganti pengguna aktif</strong>
                        <span>Sistem akan membuka dashboard menggunakan user yang dipilih.</span>
                    </div>
                </div>

                <label class="df-switch-label" for="switchUserSelect">
                    Pilih User
                </label>

                <div class="df-switch-select-wrap">

                    <div class="df-switch-select-icon">
                        <i class="fa fa-user"></i>
                    </div>

                    <select id="switchUserSelect"
                            class="form-control">
                    </select>

                </div>

                <div id="switchUserError" class="df-switch-error">
                    <i class="fa fa-exclamation-circle"></i>
                    <span>Silakan pilih user terlebih dahulu.</span>
                </div>

            </div>


            <div class="df-switch-footer">

                <button type="button"
                        class="df-switch-btn df-switch-cancel"
                        data-dismiss="modal">
                    Batal
                </button>

                <button type="button"
                        class="df-switch-btn df-switch-submit"
                        id="switchUserBtn">

                    <i class="fa fa-sign-in"></i>
                    <span>Switch User</span>

                </button>

            </div>

        </div>

    </div>
</div>


<?php endif; ?>
<style>
/* =========================================================
   SWITCH USER MODERN UI
   ========================================================= */

.df-switch-dialog {
    width: 540px;
    max-width: calc(100vw - 28px);
}

.df-switch-content {
    border: 0 !important;
    border-radius: 20px !important;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .22) !important;
}

.df-switch-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    border-bottom: 1px solid #edf1f5;
}

.df-switch-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.df-switch-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #e8f7f2;
    color: #087f6b;
    font-size: 18px;
}

.df-switch-title-wrap h4 {
    margin: 0;
    color: #1e293b;
    font-size: 18px;
    font-weight: 750;
}

.df-switch-title-wrap p {
    margin: 4px 0 0;
    color: #8a98a8;
    font-size: 10px;
}

.df-switch-close {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: #f1f5f9;
    color: #64748b;
    cursor: pointer;
}

.df-switch-close:hover {
    background: #feecec;
    color: #dc2626;
}

.df-switch-body {
    padding: 20px 22px 22px;
}

.df-switch-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 11px 12px;
    border: 1px solid #e2eee9;
    border-radius: 11px;
    background: #f5fbf8;
}

.df-switch-info-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #e0f4ed;
    color: #087f6b;
    font-size: 11px;
}

.df-switch-info div:last-child {
    display: flex;
    flex-direction: column;
}

.df-switch-info strong {
    color: #3b4b5e;
    font-size: 11px;
}

.df-switch-info span {
    margin-top: 2px;
    color: #8997a7;
    font-size: 9px;
}

.df-switch-label {
    display: block;
    margin-bottom: 7px;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
}

.df-switch-select-wrap {
    position: relative;
}

.df-switch-select-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    z-index: 2;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: #eef8f5;
    color: #087f6b;
    font-size: 11px;
    transform: translateY(-50%);
    pointer-events: none;
}

#switchUserSelect {
    width: 100%;
    height: 48px !important;
    padding-left: 50px !important;
    border: 1px solid #dce5eb !important;
    border-radius: 11px !important;
    background: #f8fafb !important;
    color: #334155 !important;
    font-size: 12px !important;
    outline: none !important;
    box-shadow: none !important;
}

#switchUserSelect:focus {
    border-color: #7dd3c0 !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(8,127,107,.08) !important;
}

.df-switch-select-wrap .select2-container {
    width: 100% !important;
}

.df-switch-select-wrap .select2-selection--single {
    height: 48px !important;
    padding-left: 38px !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid #dce5eb !important;
    border-radius: 11px !important;
    background: #f8fafb !important;
}

.df-switch-select-wrap .select2-selection__rendered {
    padding-left: 10px !important;
    color: #334155 !important;
    font-size: 12px !important;
    line-height: 46px !important;
}

.df-switch-select-wrap .select2-selection__arrow {
    top: 11px !important;
    right: 10px !important;
}

.df-switch-error {
    display: none;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: #dc2626;
    font-size: 10px;
}

.df-switch-error.is-visible {
    display: flex;
}

.df-switch-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 15px 22px 20px;
    border-top: 1px solid #edf1f5;
}

.df-switch-btn {
    min-height: 40px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease;
}

.df-switch-cancel {
    background: #f1f5f9;
    color: #64748b;
}

.df-switch-cancel:hover {
    background: #e2e8f0;
    color: #334155;
}

.df-switch-submit {
    min-width: 125px;
    background: linear-gradient(135deg, #087f6b, #056653);
    color: #fff;
    box-shadow: 0 7px 16px rgba(8,127,107,.20);
}

.df-switch-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(8,127,107,.27);
}

.df-switch-submit.is-loading {
    opacity: .75;
    pointer-events: none;
}

@media (max-width: 480px) {
    .df-switch-dialog {
        max-width: calc(100vw - 18px);
    }

    .df-switch-header,
    .df-switch-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .df-switch-footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .df-switch-btn {
        flex: 1;
    }
}
</style>


<script>
(function () {
    'use strict';

    function showSwitchUserModal() {
        var modal = $('#switchUserModal');

        if (!modal.length) {
            return;
        }

        /*
         * Bootstrap 4/Sximo:
         * use the native Bootstrap modal plugin when available.
         */
        if ($.fn.modal) {
            modal.modal({
                backdrop: true,
                keyboard: true,
                show: true
            });
            return;
        }

        /*
         * Fallback if Bootstrap modal JS is unavailable.
         */
        modal.addClass('show')
             .css('display', 'block')
             .attr('aria-hidden', 'false');

        $('body').addClass('modal-open');

        if (!$('.modal-backdrop').length) {
            $('<div class="modal-backdrop fade show"></div>').appendTo('body');
        }
    }

    // Keep the function globally accessible by the existing menu onclick.
    window.switchUser = showSwitchUserModal;


    $(function () {

        <?php if(Auth::user()->group_id == 1): ?>

        var select = $('#switchUserSelect');

        /*
         * Load users using the existing Sximo jCombo endpoint.
         */
        if (select.length && $.fn.jCombo) {
            select.jCombo(
                "<?php echo url('dataprodisconsole/comboselect?filter=tb_users:id:email'); ?>",
                {
                    initial_text: 'Pilih User'
                }
            );
        }

        /*
         * Initialize Select2 only after the modal exists.
         */
        if (select.length && $.fn.select2) {

            select.select2({
                placeholder: 'Pilih User',
                allowClear: true,
                width: '100%',
                dropdownParent: $('#switchUserModal')
            });
        }


        $('#switchUserSelect').on('change', function () {
            $('#switchUserError').removeClass('is-visible');
        });


        $('#switchUserBtn').on('click', function () {

            var btn = $(this);
            var selectedUserId = $('#switchUserSelect').val();

            if (!selectedUserId) {
                $('#switchUserError').addClass('is-visible');
                return;
            }

            $('#switchUserError').removeClass('is-visible');

            btn.addClass('is-loading');
            btn.find('i')
               .removeClass('fa-sign-in')
               .addClass('fa-spinner fa-spin');

            btn.find('span').text('Mengalihkan...');


            $.ajax({
                url: "<?php echo e(url('dashboard?action_task=switchuser')); ?>",
                type: "POST",
                data: {
                    user_id: selectedUserId
                },
                dataType: "json",

                success: function (response) {

                    if (response && response.status === 'success') {
                        window.location.href = "<?php echo e(url('dashboard')); ?>";
                        return;
                    }

                    btn.removeClass('is-loading');
                    btn.find('i')
                       .removeClass('fa-spinner fa-spin')
                       .addClass('fa-sign-in');

                    btn.find('span').text('Switch User');

                    $('#switchUserError')
                        .addClass('is-visible')
                        .find('span')
                        .text(
                            response && response.message
                                ? response.message
                                : 'Gagal mengganti user. Silakan coba lagi.'
                        );
                },

                error: function () {

                    btn.removeClass('is-loading');

                    btn.find('i')
                       .removeClass('fa-spinner fa-spin')
                       .addClass('fa-sign-in');

                    btn.find('span').text('Switch User');

                    $('#switchUserError')
                        .addClass('is-visible')
                        .find('span')
                        .text('Terjadi kesalahan saat mengganti user.');
                }
            });

        });

        <?php endif; ?>

    });

})();
</script>

<!-- Modal Pilih Tahun Tanam -->
<div class="modal fade df-year-modal"
     id="modalTahunTanam"
     tabindex="-1"
     role="dialog"
     aria-labelledby="modalTahunTanamLabel"
     aria-hidden="true">

    <div class="modal-dialog df-year-dialog" role="document">
        <form id="formTahunTanam"
              method="GET"
              action="<?php echo e(url('dashboard/setdbsession')); ?>"
              class="df-year-form">
            <?php echo csrf_field(); ?>

            <div class="modal-content df-year-modal-content">

                <div class="df-year-modal-header">
                    <div class="df-year-heading">
                        <div class="df-year-heading-icon">
                            <i class="fa fa-exchange"></i>
                        </div>
                        <div>
                            <h4 id="modalTahunTanamLabel">Pilih Tahun Tanam</h4>
                            <p>Pilih periode tanam yang ingin digunakan</p>
                        </div>
                    </div>

                    <button type="button"
                            class="df-year-close"
                            data-dismiss="modal"
                            aria-label="Close">
                        <i class="fa fa-times"></i>
                    </button>
                </div>

                <div class="df-year-modal-body">

                    <?php
                        $currentTahunTanam = \Session::get('tahuntanam');
                        $tahunTanamList = array_filter(
                            array_map('trim', explode(',', env('ARRAY_DB_DATABASES')))
                        );
                    ?>

                    <div class="df-year-section-title">
                        <span>Tahun Tanam</span>
                        <small><?php echo e(count($tahunTanamList)); ?> periode tersedia</small>
                    </div>

                    <div class="df-year-grid">

                        <?php $__currentLoopData = $tahunTanamList; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $db_database): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>

                            <?php
                                $isSelected = $currentTahunTanam == $db_database;

                                $tahunDisplay = strlen($db_database) >= 4
                                    ? substr($db_database, 0, 2) . '/' . substr($db_database, 2)
                                    : $db_database;
                            ?>

                            <button type="submit"
                                    class="df-year-card <?php echo e($isSelected ? 'is-selected' : ''); ?>"
                                    name="dbget"
                                    value="<?php echo e($db_database); ?>"
                                    title="Gunakan Tahun Tanam <?php echo e($tahunDisplay); ?>">

                                <?php if($isSelected): ?>
                                    <span class="df-year-card-current">
                                        AKTIF
                                    </span>
                                <?php endif; ?>

                                <span class="df-year-card-icon">
                                    <i class="fa fa-exchange"></i>
                                </span>

                                <span class="df-year-card-content">
                                    <strong><?php echo e($tahunDisplay); ?></strong>
                                    <small>Tahun Tanam</small>
                                </span>

                                <span class="df-year-card-action">
                                    <i class="fa fa-arrow-right"></i>
                                </span>

                            </button>

                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                    </div>

                    <div class="df-year-current">
                        <span class="df-year-current-icon">
                            <i class="fa fa-info"></i>
                        </span>
                        <span>
                            Tahun tanam aktif saat ini:
                            <strong>
                                <?php echo e(strlen($currentTahunTanam ?? '') >= 4
                                    ? substr($currentTahunTanam, 0, 2) . '/' . substr($currentTahunTanam, 2)
                                    : ($currentTahunTanam ?: '-')); ?>

                            </strong>
                        </span>
                    </div>

                </div>
            </form>
    </div>
</div>
                            </div>


<style>
/* =========================================================
   MODERN TAHUN TANAM SELECTOR
   Card selector inspired by the Mode Generator UI
   ========================================================= */

.df-year-dialog {
    width: 920px;
    max-width: calc(100vw - 30px);
}

.df-year-modal-content {
    border: 0 !important;
    border-radius: 22px !important;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .20) !important;
}

.df-year-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px 18px;
    border-bottom: 1px solid #edf1f5;
    background: #fff;
}

.df-year-heading {
    display: flex;
    align-items: center;
    gap: 13px;
}

.df-year-heading-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #e9f8f3;
    color: #087f6b;
    font-size: 18px;
}

.df-year-heading h4 {
    margin: 0;
    color: #1e293b;
    font-size: 19px;
    line-height: 1.2;
    font-weight: 750;
}

.df-year-heading p {
    margin: 5px 0 0;
    color: #718096;
    font-size: 11px;
}

.df-year-close {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: #f1f5f9;
    color: #64748b;
    cursor: pointer;
}

.df-year-close:hover {
    background: #feecec;
    color: #dc2626;
}

.df-year-modal-body {
    padding: 22px 24px 18px;
    background: #fff;
}

.df-year-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
}

.df-year-section-title span {
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.df-year-section-title small {
    color: #94a3b8;
    font-size: 10px;
}

.df-year-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.df-year-card {
    position: relative;
    min-height: 185px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 2px solid #e2e8f0;
    border-radius: 20px;
    background: linear-gradient(145deg, #fff 0%, #f8fafc 100%);
    cursor: pointer;
    overflow: hidden;
    transition: border-color .22s ease, background .22s ease,
                box-shadow .22s ease, transform .22s ease;
}

.df-year-card:hover {
    border-color: #b7dcd2;
    background: linear-gradient(145deg, #fff 0%, #f2faf7 100%);
    box-shadow: 0 12px 25px rgba(15, 23, 42, .08);
    transform: translateY(-2px);
}

.df-year-card input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.df-year-card.is-selected {
    border-color: #2878f0;
    background: linear-gradient(145deg, #eef5ff 0%, #f8fbff 100%);
    box-shadow: 0 0 0 5px rgba(40, 120, 240, .08),
                0 12px 28px rgba(40, 120, 240, .10);
}

/* Native submit card */
.df-year-card {
    width: 100%;
    font-family: inherit;
    text-align: left;
    appearance: none;
    -webkit-appearance: none;
}

.df-year-card-current {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 5px 8px;
    border-radius: 999px;
    background: #e6efff;
    color: #286ee0;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
}

.df-year-card-action {
    position: absolute;
    right: 17px;
    bottom: 17px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #f1f5f9;
    color: #94a3b8;
    font-size: 10px;
    transition: all .2s ease;
}

.df-year-card:hover .df-year-card-action {
    background: #e6f7f2;
    color: #087f6b;
    transform: translateX(2px);
}

.df-year-card.is-selected .df-year-card-action {
    background: #e6efff;
    color: #286ee0;
}

.df-year-card-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    background: #e7f8f2;
    color: #087f6b;
    font-size: 24px;
}

.df-year-card.is-selected .df-year-card-icon {
    background: #e6efff;
    color: #286ee0;
}

.df-year-card-content {
    display: flex;
    flex-direction: column;
    margin-top: 16px;
}

.df-year-card-content strong {
    color: #1e293b;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 750;
    letter-spacing: -.02em;
}

.df-year-card-content small {
    margin-top: 7px;
    color: #718096;
    font-size: 11px;
    font-weight: 500;
}

.df-year-current {
    margin-top: 16px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid #e6edf2;
    border-radius: 11px;
    background: #f8fafb;
    color: #7a8999;
    font-size: 10px;
}

.df-year-current-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: #e6f7f2;
    color: #087f6b;
    font-size: 10px;
}

.df-year-current strong {
    color: #087f6b;
    font-weight: 700;
}

.df-year-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 15px 24px 20px;
    border-top: 1px solid #edf1f5;
    background: #fff;
}

.df-year-btn {
    min-height: 40px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 10px;
    border: 0;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.df-year-btn-secondary {
    background: #f1f5f9;
    color: #64748b;
}

.df-year-btn-primary {
    background: linear-gradient(135deg, #2878f0 0%, #2563eb 100%);
    color: #fff;
    box-shadow: 0 7px 16px rgba(37, 99, 235, .20);
}

.df-year-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(37, 99, 235, .28);
}

@media (max-width: 768px) {
    .df-year-dialog {
        max-width: calc(100vw - 20px);
    }

    .df-year-modal-header,
    .df-year-modal-body {
        padding-left: 17px;
        padding-right: 17px;
    }

    .df-year-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .df-year-card {
        min-height: 160px;
        padding: 16px;
    }

    .df-year-card-content strong {
        font-size: 19px;
    }
}

@media (max-width: 480px) {
    .df-year-grid {
        grid-template-columns: 1fr;
    }

    .df-year-card {
        min-height: 125px;
        flex-direction: row;
        align-items: center;
        gap: 14px;
    }

    .df-year-card-content {
        margin-top: 0;
    }
}
</style>


<!-- Modal Image Preview -->
<div class="modal fade" id="imagePreviewModal" tabindex="-1" role="dialog" aria-labelledby="imagePreviewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content" style="border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.25); border: none; background: transparent;">
            <div class="modal-header" style="border: none; background: transparent; position: absolute; right: 0; z-index: 1;">
                <button type="button" class="btn btn-light btn-sm mr-2" id="rotateImageBtn" style="border-radius: 50%; width: 40px; height: 40px; box-shadow: 0 2px 4px rgba(0,0,0,0.3);">
                    <i class="fa fa-rotate-right"></i>
                </button>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: #fff; opacity: 1; font-size: 2rem; text-shadow: 0 2px 4px rgba(0,0,0,0.5);">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body text-center" style="padding: 0; background: transparent;">
                <img id="imagePreviewContent" src="" alt="Preview" style="max-width: 100%; max-height: 80vh; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); transition: transform 0.3s ease;">
            </div>
        </div>
    </div>
</div>



<script>
$(function() {
    <?php if(Auth::user()->group_id == 1  ): ?>

    <?php endif; ?>                               
    var currentRotation = 0;
    
    // Click handler for img-circle to show image in modal
    $(document).on('click', '.previewImage', function() {
        var imgSrc = $(this).children('img').attr('src');
        $('#imagePreviewContent').attr('src', imgSrc);
        currentRotation = 0;
        $('#imagePreviewContent').css('transform', 'rotate(0deg)');
        $('#imagePreviewModal').modal('show');
    });
    
    // Rotate image button handler
    $('#rotateImageBtn').on('click', function() {
        currentRotation += 90;
        if (currentRotation >= 360) {
            currentRotation = 0;
        }
        $('#imagePreviewContent').css('transform', 'rotate(' + currentRotation + 'deg)');
    });
    
    // Reset rotation when modal is closed
    $('#imagePreviewModal').on('hidden.bs.modal', function() {
        currentRotation = 0;
        $('#imagePreviewContent').css('transform', 'rotate(0deg)');
    });
});
</script>

<style>
.img-circle {
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.img-circle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
#imagePreviewModal .modal-content {
    background: transparent;
}
#imagePreviewModal .modal-dialog {
    max-width: fit-content;
}
</style>
<script>
    function desktopModeCallback(){
        // Simpan settingan viewport di sessionStorage
        sessionStorage.setItem('viewport', 'width=1024');
        document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=1024');
    }

    function mobileModeCallback(){
        // Simpan settingan viewport di sessionStorage
        sessionStorage.setItem('viewport', 'width=device-width, initial-scale=1');
        document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=device-width, initial-scale=1');
    }

     $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

     function switchUser() {
        // Tampilkan modal switch user
        $('#switchUserModal').modal('show');
    }   
    </script>
</body>
</html>


<?php /**PATH /var/www/html/resources/views/layouts/app.blade.php ENDPATH**/ ?>