<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1,
            shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="shortcut icon" href="{{url('')}}/assets/admin/images/logo_icon.png" title="Favicon" sizes="16x16" />
    <!-- <link rel="stylesheet" href="css/style_en.css"> -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <!--With LTR -->
    <link rel="stylesheet" href="{{url('')}}/assets/admin/css/lib/bootstrap.min.css">
    <!--  -->

    <!--With RTL -->
    <!-- <link rel="stylesheet" href="css/lib/bootstrap.rtl.min.css" /> -->
    <!--  -->

    <!-- google roboto font -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
    <!--  -->

    <link rel="stylesheet" href="{{url('')}}/assets/admin/css/lib/animate.css" />
    <link rel="stylesheet" href="{{url('')}}/assets/admin/css/lib/jquery.fancybox.css" />
    <link rel="stylesheet" href="{{url('')}}/assets/admin/css/lib/swiper.min.css" />
    <link rel="stylesheet" href="{{url('')}}/assets/admin/css/lib/all.min.css" />
    <link rel="stylesheet" href="{{url('')}}/assets/admin/css/lib/jq-ui.css" />
    <link rel="stylesheet" href="{{url('')}}/assets/admin/css/style.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <link  rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCOuP7Khf-OXuiervHfHONEq9QmLUarsTA&libraries=places"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">

    <title>{{ config('app.name', 'CMS') .' - '. ($title ?? '') }}</title>
    <style>
        .hidden {
            display: none;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            border-radius: 10px;
            overflow: hidden;
        }

        th,
        td {
            padding: 14px 18px;
            text-align: left;
            border-bottom: 1px solid #30363d;
            position: relative;
        }

        thead {
            background-color: #f4f6f9;
        }

        th {
            font-weight: 600;
        }

        .header-content {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 4px;
            position: relative;
            width: 100%;
        }

        .header-content .header-actions {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 6px;
            position: relative;
        }

        .header-content input[type="checkbox"] {
            margin: 0;
            transform: translateY(1px);
        }

        .header-content label {
            margin: 0;
            padding-left: 4px;
            white-space: nowrap;
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 6px;
            position: relative;
        }

        .dots-btn,
        .arrow-btn {
            background: none;
            border: none;
            color: #3d2e84;
            cursor: pointer;
            font-size: 16px;
            transition: color 0.2s ease, transform 0.2s ease;
        }

        .dots-btn:hover,
        .arrow-btn:hover {
            color: #2dd975;
        }

        .arrow-btn.rotated {
            transform: rotate(180deg);
        }

        .dropdown-filter {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            background-color: #f5f7fa;
            border: 1px solid #30363d;
            border-radius: 6px;
            width: 180px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
            z-index: 100;
        }

        .dropdown-filter.show {
            display: block;
        }

        .dropdown-filter ul {
            list-style: none;
            margin: 0;
            padding: 6px 0;
        }

        .dropdown-filter li {
            padding: 8px 16px;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        .dropdown-filter li:hover {
            background-color: white;
        }

        .dropdown-columns {
            display: none;
            position: absolute;
            top: 100%;
            right: 0;
            background-color: #f5f7fa;
            border: 1px solid #30363d;
            border-radius: 6px;
            width: 180px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
            z-index: 100;
        }

        .dropdown-columns.show {
            display: block;
        }

        .dropdown-columns ul {
            list-style: none;
            margin: 0;
            padding: 6px 0;
        }

        .dropdown-columns li {
            padding: 8px 16px;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        .dropdown-columns li:hover {
            background-color: white;
        }
    </style>

</head>

<body class="light-theme">


@yield('container_content')

@include('admin.layouts.model')

<div class="progress-wrap">
    <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
        <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"
              style="transition: stroke-dashoffset 10ms linear 0s; stroke-dasharray: 307.919, 307.919; stroke-dashoffset: 220.587;">
        </path>
    </svg>
</div>
<script src="{{url('')}}/assets/admin/js/lib/jquery-3.0.0.min.js"></script>
<script src="{{url('')}}/assets/admin/js/lib/jquery-migrate-3.0.0.min.js"></script>
<!-- ------- Sortable -------------- -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>

<script src="{{url('')}}/assets/admin/js/lib/bootstrap.bundle.min.js"></script>
<script src="{{url('')}}/assets/admin/js/lib/wow.min.js"></script>
<script src="{{url('')}}/assets/admin/js/lib/jquery.fancybox.js"></script>
<script src="{{url('')}}/assets/admin/js/lib/swiper.min.js"></script>
<script src="{{url('')}}/assets/admin/js/lib/jquery.waypoints.min.js"></script>
<script src="{{url('')}}/assets/admin/js/lib/jquery.counterup.js"></script>
<script src="{{url('')}}/assets/admin/js/lib/back-to-top.js"></script>
<!-- ------- apex chart -------------- -->
<script src="{{url('')}}/assets/admin/js/lib/apexcharts.js"></script>
<!-- ------- data table  -------------- -->
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
<!-- ----------- datepicker ----------- -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script src="{{url('')}}/assets/admin/js/main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<!-- ------- apex chart -------------- -->
<!-- ------- data table  -------------- -->
<!-- ----------- datepicker ----------- -->>
<script src="{{ asset('assets/admin/js/custom/formAction.js') }}"></script>

<script>
    let route_column_toggle = "{{ route('employee.fetch.route_column_toggle') }}"
</script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const contactContainers = document.querySelectorAll(".drag-column");

        contactContainers.forEach(container => {
            new Sortable(container, {
                group: "shared",
                animation: 200,
                ghostClass: "dragging",
                handle: ".drag-item",
                draggable: ".drag-item"
            });
        });
    });
</script>

@yield('container_js')
</body>

</html>
