@extends('layouts.contentNavbarLayout')

@section('title', 'Dashboard - Manage Employee')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <!--begin::Fonts(mandatory for all pages)-->
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700"/>        <!--end::Fonts-->

 <!--begin::Vendor Stylesheets(used for this page only)-->
  {{--        <link href="https://preview.keenthemes.com/craft/assets/plugins/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css"/> --}}
     <!--end::Vendor Stylesheets-->


 <!--begin::Global Stylesheets Bundle(mandatory for all pages)-->
      {{--    <link href="https://preview.keenthemes.com/craft/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/> --}}
        {{--  <link href="https://preview.keenthemes.com/craft/assets/css/style.bundle.css" rel="stylesheet" type="text/css"/> --}}
@section('content')
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="/dashboard">Home</a>
            </li>
            {{--   <li class="breadcrumb-item">
    <a href="/complaints">Support Desk</a>
</li> --}}
            <li class="breadcrumb-item active">
                Employee
            </li>
        </ol>
    </nav>
    <div class="row gy-4">
        <div class="d-flex align-items-center flex-nowrap text-nowrap py-1">
      {{--       <a href="#" class="btn bg-body btn-color-gray-700 btn-active-primary me-4" data-bs-toggle="modal" data-bs-target="#kt_modal_invite_friends">
                Invite Friends
            </a>

                            <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_create_project" id="kt_toolbar_primary_button">
                    New Project                </a> --}}
                    </div>
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <h5 class="card-header">Manage Employee</h5>
                    <div class="card-body">
                        <div class="demo-inline-spacing">
                            @if (isset($userGroupPermissions['staff']) && $userGroupPermissions['staff']['adds'] == 1)
                                <button type="button" class="btn1 btn-primary" data-bs-toggle="modal"
                                    data-bs-target="#addBannerModal">
                                    <span class="tf-icons mdi mdi-checkbox-marked-circle-outline me-1"></span>ADD
                                </button>
                            @endif
                        </div>

                        @if (session('success'))
                            <div class="alert alert-success fade-out" id="success-alert">
                                {{ session('success') }}
                            </div>
                        @endif

                        @if (session('error'))
                            <div class="alert alert-danger fade-out" id="error-alert">
                                {{ session('error') }}
                            </div>
                        @endif

                        @if (isset($userGroupPermissions['staff']) && $userGroupPermissions['staff']['views'] == 1)
                            <div>
                                <div class="table-responsive text-nowrap">
                                    <table class="table table-bordered table-hover" id="example">
                                        <thead class="thead-dark">
                                            <tr>
                                                @foreach ($columns as $column)
                                                    @if (
                                                        $column !== 'created_at' &&
                                                            $column !== 'updated_at' &&
                                                            $column !== 'marital_status' &&
                                                            $column !== 'date_of_birth' &&
                                                            $column !== 'address' &&
                                                            $column !== 'key_skills' &&
                                                            $column !== 'qualification' &&
                                                            $column !== 'description' &&
                                                            $column !== 'date_of_application' &&
                                                            $column !== 'date_of_join' &&
                                                            $column !== 'date_of_resign' &&
                                                            $column !== 'blood_group' &&
                                                            $column !== 'resume' &&
                                                            $column !== 'id_proof' &&
                                                            $column !== 'id_type' &&
                                                            $column !== 'email' &&
                                                            $column !== 'password' &&
                                                            $column !== 'carry_forward_casual_leaves' &&
                                                            $column !== 'carry_forward_sick_leaves' &&
                                                            $column !== 'id_proof_number' &&
                                                            $column !== 'photo')
                                                        {{-- Skip the 'staff_id ' column --}}
                                                        @if ($column === 'image_path')
                                                            <th>Banner Image</th>
                                                        @else
                                                            <th>{{ ucfirst(str_replace('_', ' ', $column)) }}</th>
                                                        @endif
                                                    @endif
                                                @endforeach
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody class="table-border-bottom-0">
                                            @foreach ($paginationdata as $item)
                                                <tr>
                                                    @foreach ($columns as $column)
                                                        @if (
                                                            $column !== 'created_at' &&
                                                                $column !== 'updated_at' &&
                                                                $column !== 'marital_status' &&
                                                                $column !== 'date_of_birth' &&
                                                                $column !== 'address' &&
                                                                $column !== 'key_skills' &&
                                                                $column !== 'qualification' &&
                                                                $column !== 'description' &&
                                                                $column !== 'date_of_application' &&
                                                                $column !== 'date_of_join' &&
                                                                $column !== 'date_of_resign' &&
                                                                $column !== 'blood_group' &&
                                                                $column !== 'resume' &&
                                                                $column !== 'id_proof' &&
                                                                $column !== 'id_type' &&
                                                                $column !== 'email' &&
                                                                $column !== 'password' &&
                                                                $column !== 'id_type' &&
                                                                $column !== 'carry_forward_casual_leaves' &&
                                                                $column !== 'carry_forward_sick_leaves' &&
                                                                $column !== 'id_proof_number' &&
                                                                $column !== 'photo')
                                                            <td>
                                                                @if ($column === 'image_path')
                                                                    @if (!empty($item->{$column}))
                                                                        <img src="{{ asset('storage/' . $item->image_path) }}"
                                                                            alt="{{ $item->alt }}" class="img-thumbnail"
                                                                            style="max-width: 50px; max-height: 50px;">
                                                                    @endif
                                                                @elseif ($column === 'designation')
                                                                    {{ $designations->firstWhere('id', $item->designation)->name ?? $item->designation }}
                                                                @elseif ($column === 'user_type')
                                                                    {{ $usergroup->firstWhere('id', $item->user_type)->user_type ?? $item->user_type }}
                                                                @elseif ($column === 'shop')
                                                                    {{ $shops->firstWhere('id', $item->shop)->shop_name ?? $item->shop }}
                                                                @elseif ($column === 'staff_id')
                                                                    {{ '#' . ($item->staff_id ?? '-') }}
                                                                @elseif ($column === 'status')
                                                                    @php
                                                                        $statusLabels = [
                                                                            1 => 'Active',
                                                                            0 => 'Blocked',
                                                                            2 => 'Resigned',
                                                                            null => 'Not Set', // Handle NULL status if necessary
                                                                        ];
                                                                        $status = $item->{$column};
                                                                        $statusText = isset($statusLabels[$status])
                                                                            ? $statusLabels[$status]
                                                                            : 'Unknown';
                                                                    @endphp
                                                                    {{ $statusText }}
                                                                @else
                                                                    {{ $item->{$column} }}
                                                                @endif
                                                            </td>
                                                        @endif
                                                    @endforeach
                                                    <td>
                                                        <div class="dropdown">
                                                            {{-- View Link --}}
                                                            <div class="d-flex">
                                                                <div>
                                                                    @if (isset($userGroupPermissions['staff']) && $userGroupPermissions['staff']['views'] == 1)
                                                                        <a class="dropdown-item" href="javascript:void(0);"
                                                                            data-bs-toggle="modal"
                                                                            data-bs-target="#exLargeModal12"
                                                                            onclick="viewRow({{ $item->staff_id }})">
                                                                            <i class="mdi mdi-eye-outline me-2"></i>
                                                                </a>
                                                                    @endif
                                                                </div>
                                                                <!-- Edit Link -->
                                                                <div>
                                                                    @if (isset($userGroupPermissions['staff']) && $userGroupPermissions['staff']['edits'] == 1)
                                                                        <a class="dropdown-item" href="javascript:void(0);"
                                                                            data-bs-toggle="modal"
                                                                            data-bs-target="#exLargeModal"
                                                                            onclick="editRow({{ $item->staff_id }})">
                                                                            <i class="mdi mdi-pencil-outline me-2"></i>
                                                                        </a>
                                                                    @endif
                                                                </div>
                                                            </div>


                                                        </div>
                                                    </td>
                                                </tr>

                                                <div class="modal fade" id="exLargeModal12" tabindex="-1"
                                                    aria-hidden="true">
                                                    <div class="modal-dialog modal-xl modal-dialog-centered"
                                                        role="document">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <button type="button" class="btn-close"
                                                                    data-bs-dismiss="modal" aria-label="Close"></button>
                                                            </div>
                                                            <div class="modal-body">
                                                                <div class=" mb-0">
                                                                    <div class="">
                                                                        <div class="row">
                                                                            <div class="col-md-12">
                                                                                <div class="profile-view">
                                                                                    <div class="profile-img-wrap">
                                                                                        <div class="profile-img">
                                                                                            <a href="#"><img
                                                                                                    src=""
                                                                                                    alt="User Image"></a>
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="profile-basic">
                                                                                        <div class="row">
                                                                                            <div class="col-md-5">
                                                                                                <div
                                                                                                    class="profile-info-left">
                                                                                                    <h3 class="m-t-0 mb-0"
                                                                                                        id="user-name"></h3>
                                                                                                    <h6 class="text-muted">
                                                                                                    </h6>
                                                                                                    <div id="staff-id">
                                                                                                    </div>
                                                                                                    <small
                                                                                                        class="text-muted"></small>
                                                                                                    <div id="doj">
                                                                                                    </div>
                                                                                                    <div id="shop">
                                                                                                    </div>
                                                                                                    <div id="designation">
                                                                                                    </div>
                                                                                                    <div
                                                                                                        class="small doj text-muted">
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                            <div
                                                                                                class="col-md-7 profile-info-right">
                                                                                                <ul class="personal-info">
                                                                                                    <li>
                                                                                                        <div class="title">
                                                                                                            Phone:</div>
                                                                                                        <div class="text"
                                                                                                            id="phone">
                                                                                                        </div>
                                                                                                    </li>
                                                                                                    <li>
                                                                                                        <div
                                                                                                            class="title">
                                                                                                            Email:</div>
                                                                                                        <div class="text"
                                                                                                            id="email">
                                                                                                        </div>
                                                                                                    </li>
                                                                                                    <li>
                                                                                                        <div
                                                                                                            class="title">
                                                                                                            Date Of Birth:
                                                                                                        </div>
                                                                                                        <div class="text"
                                                                                                            id="birthday">
                                                                                                        </div>
                                                                                                    </li>
                                                                                                    <li>
                                                                                                        <div
                                                                                                            class="title">
                                                                                                            Qualification:
                                                                                                        </div>
                                                                                                        <div class="text"
                                                                                                            id="qualification">
                                                                                                        </div>
                                                                                                    </li>
                                                                                                    <li>
                                                                                                        <div
                                                                                                            class="title">
                                                                                                            Address:</div>
                                                                                                        <div class="text"
                                                                                                            id="address">
                                                                                                        </div>
                                                                                                    </li>
                                                                                                    <li>
                                                                                                        <div
                                                                                                            class="title">
                                                                                                            Gender:</div>
                                                                                                        <div class="text"
                                                                                                            id="gender">
                                                                                                        </div>
                                                                                                    </li>
                                                                                                </ul>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>

                                                                           {{--  <div class="col-md-12 mt-5 navsbar">

                                                                                <ul class="nav justify-content-start">
                                                                                    <li class="nav-item nav-link">
                                                                                        <p class="active">Leave</p>
                                                                                    </li>
                                                                                    <li class="nav-item nav-link">
                                                                                        <p>Attendance</p>
                                                                                    </li>
                                                                                    <li class="nav-item nav-link">
                                                                                        <p>Messages</p>
                                                                                    </li>
                                                                                </ul>

                                                                            </div> --}}
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>


                                                <script>
                                                    var userGroups = @json($usergroup);
                                                    var Shops = @json($shops);
                                                    var Designations = @json($designations);

                                                    function viewRow(id) {
                                                        // Fetch the row data using AJAX and populate the modal
                                                        $.get('/manageemployee/' + id + '/edit', function(data) {

                                                            var userTypeName = 'Unknown';
                                                            for (var i = 0; i < userGroups.length; i++) {
                                                                if (userGroups[i].id == data.user_type) { // Comparing group.id with data.user_type
                                                                    userTypeName = userGroups[i].user_type; // Get the user_type name from userGroups
                                                                    break;
                                                                }
                                                            }
                                                            var shopName = 'Unknown';
                                                            for (var i = 0; i < Shops.length; i++) {
                                                                if (Shops[i].id == data.shop) { // Comparing group.id with data.user_type
                                                                    shopName = Shops[i].shop_name; // Get the user_type name from userGroups
                                                                    break;
                                                                }
                                                            }
                                                            var designationName = 'Unknown';
                                                            for (var i = 0; i < Designations.length; i++) {
                                                                if (Designations[i].id == data.designation) { // Comparing group.id with data.user_type
                                                                    designationName = Designations[i].name; // Get the user_type name from userGroups
                                                                    break;
                                                                }
                                                            }

                                                            // Ensure the modal elements are properly updated with the fetched data
                                                            if (data.photo) {
                                                                $('#exLargeModal12 .profile-img img').attr('src', '/storage/staff/' + data.photo);
                                                            } else {
                                                                $('#exLargeModal12 .profile-img img').attr('src',
                                                                    '/path/to/default/image.jpg'); // Add a default image path if needed
                                                            }

                                                            $('#exLargeModal12 #user-name').text(data.name || 'N/A');
                                                            $('#exLargeModal12 .profile-basic .text-muted').first().text(userTypeName || 'N/A');
                                                            $('#exLargeModal12 #doj').text('Date of Join: ' + (data.date_of_join || 'N/A'));
                                                            $('#exLargeModal12 #staff-id').text('Employee ID : ' + (data.staff_id || 'N/A'));
                                                            $('#exLargeModal12 #Shop').text('Shop : ' + (shopName || 'N/A'));
                                                            $('#exLargeModal12 #designation').text('Designation : ' + (designationName || 'N/A'));

                                                            // Update personal info section
                                                            $('#exLargeModal12 .personal-info #phone').text(data.phone || 'N/A');
                                                            $('#exLargeModal12 .personal-info #email').text(data.email || 'N/A');
                                                            $('#exLargeModal12 .personal-info #qualification').text(data.qualification || 'N/A');
                                                            $('#exLargeModal12 .personal-info #birthday').text(data.date_of_birth || 'N/A');
                                                            $('#exLargeModal12 .personal-info #address').html(data.address ? data.address.replace(/\r\n/g,
                                                                '<br>') : 'N/A');
                                                            $('#exLargeModal12 .personal-info #gender').text(data.gender || 'N/A');

                                                            // Show the modal
                                                           /*  $('#exLargeModal12').modal('show'); */
                                                        }).fail(function(xhr, status, error) {
                                                            console.error('Failed to fetch data:', error);
                                                        });
                                                    }
                                                </script>

                                                <div class="modal fade" id="exLargeModal" tabindex="-1"
                                                    aria-hidden="true">
                                                    <div class="modal-dialog modal-xl modal-dialog-centered"
                                                        role="document">
                                                        <form id="editForm">
                                                            @csrf
                                                            @method('PUT')
                                                            <div class="modal-content">
                                                                <div class="modal-header">
                                                                    <h5 class="modal-title">Edit Employee
                                                                    </h5>
                                                                    <button type="button" class="btn-close"
                                                                        data-bs-dismiss="modal"
                                                                        aria-label="Close"></button>
                                                                </div>
                                                                <div class="modal-body">
                                                                    <input type="hidden" id="editId" name="editId">
                                                                    <div class="row">
                                                                        @foreach ($columns as $column)
                                                                            @if (
                                                                                $column === 'staff_id' ||
                                                                                    $column === 'carry_forward_casual_leaves' ||
                                                                                    $column === 'carry_forward_sick_leaves' ||
                                                                                    $column === 'created_at' ||
                                                                                    $column === 'updated_at')
                                                                                <!-- Skip the staff_id, created_at, and updated_at fields -->
                                                                            @elseif ($column === 'address')
                                                                                <div class="col-md-3">
                                                                                    <div class="form-floating mb-4">
                                                                                        <textarea class="form-control" name="{{ $column }}" id="address2" placeholder=" " style="height: 100px;"
                                                                                            required></textarea>
                                                                                        <label for="address2">
                                                                                            {{ ucfirst(str_replace('_', ' ', $column)) }}
                                                                                            *</label>
                                                                                    </div>
                                                                                </div>
                                                                            @elseif ($column === 'qualification' || $column === 'key_skills' || $column === 'description')
                                                                                <div class="col-md-3">
                                                                                    <div class="form-floating mb-4">
                                                                                        <textarea class="form-control" name="{{ $column }}"
                                                                                            id="{{ $column === 'qualification' ? 'qualification1' : $column }}" placeholder=" " style="height: 100px;"
                                                                                            @if ($column === 'qualification' || $column === 'key_skills') required @endif></textarea>
                                                                                        <label
                                                                                            for="{{ $column === 'qualification' ? 'qualification1' : $column }}">
                                                                                            {{ ucfirst(str_replace('_', ' ', $column)) }}
                                                                                            @if ($column === 'qualification' || $column === 'key_skills')
                                                                                                *
                                                                                            @endif
                                                                                        </label>
                                                                                    </div>
                                                                                </div>
                                                                            @elseif ($column === 'user_type')
                                                                                <div class="col-md-6">
                                                                                    <div
                                                                                        class="form-floating form-floating-outline mb-4">
                                                                                        <select id="user_type"
                                                                                            name="user_type"
                                                                                            class="form-select" required>
                                                                                            <option value="" disabled
                                                                                                selected>
                                                                                                Select a
                                                                                                User Group
                                                                                            </option>
                                                                                            @foreach ($usergroup as $group)
                                                                                                <option
                                                                                                    value="{{ $group->id }}">
                                                                                                    {{ $group->user_type }}
                                                                                                </option>
                                                                                            @endforeach
                                                                                        </select>
                                                                                        <label for="user_type">User
                                                                                            Group
                                                                                            *</label>
                                                                                    </div>
                                                                                </div>
                                                                            @elseif ($column === 'designation')
                                                                                <div class="col-md-6">
                                                                                    <div
                                                                                        class="form-floating form-floating-outline mb-4">
                                                                                        <select id="designation1"
                                                                                            name="{{ $column }}"
                                                                                            class="form-select" required>
                                                                                            <option value="" disabled
                                                                                                selected>
                                                                                                Select a
                                                                                                Designation
                                                                                            </option>
                                                                                            @foreach ($designations as $designation)
                                                                                                <option
                                                                                                    value="{{ $designation->id }}">
                                                                                                    {{ $designation->name }}
                                                                                                </option>
                                                                                            @endforeach
                                                                                        </select>
                                                                                        <label
                                                                                            for="designation1">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                                                            *</label>
                                                                                    </div>
                                                                                </div>
                                                                            @elseif ($column === 'shop')
                                                                                <div class="col-md-6">
                                                                                    <div
                                                                                        class="form-floating form-floating-outline mb-4">
                                                                                        <select id="shop1"
                                                                                            name="{{ $column }}"
                                                                                            class="form-select" required>
                                                                                            <option value="" disabled
                                                                                                selected>
                                                                                                Select a
                                                                                                Shop
                                                                                            </option>
                                                                                            @foreach ($shops as $shop)
                                                                                                <option
                                                                                                    value="{{ $shop->id }}">
                                                                                                    {{ $shop->shop_name }}
                                                                                                </option>
                                                                                            @endforeach
                                                                                        </select>
                                                                                        <label
                                                                                            for="shop1">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                                                            *</label>
                                                                                    </div>
                                                                                </div>
                                                                            @elseif ($column === 'gender')
                                                                                <div class="col-md-6">
                                                                                    <div
                                                                                        class="form-floating form-floating-outline mb-4">
                                                                                        <select id="{{ $column }}"
                                                                                            class="form-select"
                                                                                            name="{{ $column }}"
                                                                                            required>
                                                                                            <option value="Male">
                                                                                                Male
                                                                                            </option>
                                                                                            <option value="Female">
                                                                                                Female
                                                                                            </option>
                                                                                            <option value="Others">
                                                                                                Others
                                                                                            </option>
                                                                                        </select>
                                                                                        <label
                                                                                            for="{{ $column }}">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                                                            *</label>
                                                                                    </div>
                                                                                </div>
                                                                            @elseif ($column === 'marital_status')
                                                                                <div class="col-md-6">
                                                                                    <div
                                                                                        class="form-floating form-floating-outline mb-4">
                                                                                        <select id="{{ $column }}"
                                                                                            class="form-select"
                                                                                            name="{{ $column }}">
                                                                                            <option value="Single">
                                                                                                Single
                                                                                            </option>
                                                                                            <option value="Married">
                                                                                                Married
                                                                                            </option>
                                                                                        </select>
                                                                                        <label
                                                                                            for="{{ $column }}">{{ ucfirst(str_replace('_', ' ', $column)) }}</label>
                                                                                    </div>
                                                                                </div>
                                                                            @elseif ($column === 'blood_group')
                                                                                <div class="col-md-6">
                                                                                    <div
                                                                                        class="form-floating form-floating-outline mb-4">
                                                                                        <select id="{{ $column }}"
                                                                                            class="form-select"
                                                                                            name="{{ $column }}">
                                                                                            <option value="" disabled
                                                                                                selected>
                                                                                                Select blood
                                                                                                group
                                                                                            </option>
                                                                                            <option value="O+">
                                                                                                O+</option>
                                                                                            <option value="O-">
                                                                                                O-</option>
                                                                                            <option value="A+">
                                                                                                A+</option>
                                                                                            <option value="A-">
                                                                                                A-</option>
                                                                                            <option value="B+">
                                                                                                B+</option>
                                                                                            <option value="B-">
                                                                                                B-</option>
                                                                                            <option value="AB+">
                                                                                                AB+</option>
                                                                                            <option value="AB-">
                                                                                                AB-</option>
                                                                                        </select>
                                                                                        <label
                                                                                            for="{{ $column }}">{{ ucfirst(str_replace('_', ' ', $column)) }}</label>
                                                                                    </div>
                                                                                </div>
                                                                            @elseif ($column === 'id_type')
                                                                                <div class="col-md-6">
                                                                                    <div
                                                                                        class="form-floating form-floating-outline mb-4">
                                                                                        <select id="id_type"
                                                                                            class="form-select"
                                                                                            name="id_type" required>
                                                                                            <option value="" disabled
                                                                                                selected>
                                                                                                Select Id
                                                                                                Type
                                                                                            </option>
                                                                                            <option value="Aadhar Card">
                                                                                                Aadhar
                                                                                                Card
                                                                                            </option>
                                                                                            <option value="Passport">
                                                                                                Passport
                                                                                            </option>
                                                                                            <option value="Pan Card">
                                                                                                Pan Card
                                                                                            </option>
                                                                                            <option
                                                                                                value="Election Identity Card">
                                                                                                Election
                                                                                                Identity
                                                                                                Card
                                                                                            </option>
                                                                                        </select>
                                                                                        <label for="id_type">Id
                                                                                            Type *</label>
                                                                                    </div>
                                                                                </div>
                                                                            @elseif ($column === 'resume')
                                                                                <div class="col-md-6">
                                                                                    <div
                                                                                        class="form-floating form-floating-outline mb-4">
                                                                                        <input type="file"
                                                                                            name="{{ $column }}"
                                                                                            id="{{ $column }}"
                                                                                            class="form-control">
                                                                                        <label
                                                                                            for="{{ $column }}">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                                                            (.pdf,.doc,.docx)
                                                                                        </label>
                                                                                    </div>
                                                                                </div>
                                                                            @elseif ($column === 'id_proof')
                                                                                <div class="col-md-6">
                                                                                    <div
                                                                                        class="form-floating form-floating-outline mb-4">
                                                                                        <input type="file"
                                                                                            name="{{ $column }}"
                                                                                            id="{{ $column }}"
                                                                                            class="form-control">
                                                                                        <label
                                                                                            for="{{ $column }}">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                                                            *
                                                                                            (.jpg,.jpeg,.png)</label>
                                                                                    </div>
                                                                                </div>
                                                                            @elseif ($column === 'photo')
                                                                                <div class="col-md-8">
                                                                                </div>
                                                                                <div class="col-md-4 mb-4">
                                                                                    <div
                                                                                        class="d-flex align-items-center justify-content-end">
                                                                                        <div class="box text-center">
                                                                                            <!-- Display the image -->
                                                                                            <img id="imagePreview2"
                                                                                                src="{{ old('photo') ? asset('storage/staff/' . old('photo')) : asset('assets/img/defaultimage.jpg') }}"
                                                                                                alt="Image Preview"
                                                                                                style="height: 120px; object-fit: cover; cursor: pointer;" />

                                                                                            <label for="fileInput"
                                                                                                class="form-label d-flex justify-content-center">
                                                                                                Upload Image
                                                                                                (.jpg,
                                                                                                .jpeg, .png)
                                                                                            </label>
                                                                                            <input type="file"
                                                                                                name="photo"
                                                                                                id="fileInput"
                                                                                                class="form-control"
                                                                                                accept=".jpg,.jpeg,.png"
                                                                                                onchange="previewImage(event)">
                                                                                        </div>
                                                                                    </div>
                                                                                </div>

                                                                                <script>
                                                                                    function previewImage(event) {
                                                                                        const input = event.target;
                                                                                        const preview = document.getElementById('imagePreview2');
                                                                                        const file = input.files[0];

                                                                                        if (file) {
                                                                                            const reader = new FileReader();
                                                                                            reader.onload = function(e) {
                                                                                                preview.src = e.target.result;
                                                                                            }
                                                                                            reader.readAsDataURL(file);
                                                                                        } else {
                                                                                            // Handle the case when no file is selected
                                                                                            preview.src =
                                                                                                "{{ old('photo') ? asset('storage/staff/' . old('photo')) : asset('assets/img/defaultimage.jpg') }}";
                                                                                        }
                                                                                    }
                                                                                </script>
                                                                            @elseif ($column === 'status')
                                                                                <!-- Dropdown for the status field -->
                                                                                <div class="col-md-6">
                                                                                    <div
                                                                                        class="form-floating form-floating-outline mb-4">
                                                                                        <select id="{{ $column }}"
                                                                                            class="form-select"
                                                                                            name="{{ $column }}">
                                                                                            <option value="1">
                                                                                                Active
                                                                                            </option>
                                                                                            <option value="0">
                                                                                                Blocked
                                                                                            </option>
                                                                                            <option value="2">
                                                                                                Resigned
                                                                                            </option>
                                                                                        </select>
                                                                                        <label for="{{ $column }}"
                                                                                            class="form-label">{{ ucfirst($column) }}</label>
                                                                                    </div>
                                                                                </div>
                                                                            @elseif ($column === 'date_of_application')
                                                                                <div class="col-md-6">
                                                                                    <div
                                                                                        class="form-floating form-floating-outline mb-4">
                                                                                        <input type="date"
                                                                                            id="{{ $column }}"
                                                                                            class="form-control"
                                                                                            name="{{ $column }}">
                                                                                        <label for="{{ $column }}"
                                                                                            class="form-label">{{ ucfirst(str_replace('_', ' ', $column)) }}</label>
                                                                                    </div>
                                                                                </div>
                                                                            @elseif ($column === 'date_of_join')
                                                                                <div class="col-md-6">
                                                                                    <div
                                                                                        class="form-floating form-floating-outline mb-4">
                                                                                        <input type="date"
                                                                                            id="{{ $column }}"
                                                                                            class="form-control"
                                                                                            name="{{ $column }}"
                                                                                            required>
                                                                                        <label for="{{ $column }}"
                                                                                            class="form-label">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                                                            *</label>
                                                                                    </div>
                                                                                </div>
                                                                            @elseif ($column === 'date_of_resign')
                                                                                <div class="col-md-6">
                                                                                    <div
                                                                                        class="form-floating form-floating-outline mb-4">
                                                                                        <input type="date"
                                                                                            id="{{ $column }}"
                                                                                            class="form-control"
                                                                                            name="{{ $column }}">
                                                                                        <label for="{{ $column }}"
                                                                                            class="form-label">{{ ucfirst(str_replace('_', ' ', $column)) }}</label>
                                                                                    </div>
                                                                                </div>
                                                                            @elseif ($column === 'date_of_birth')
                                                                                <div class="col-md-6">
                                                                                    <div
                                                                                        class="form-floating form-floating-outline mb-4">
                                                                                        <input type="date"
                                                                                            id="{{ $column }}"
                                                                                            class="form-control"
                                                                                            name="{{ $column }}"
                                                                                            required>
                                                                                        <label for="{{ $column }}"
                                                                                            class="form-label">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                                                            *</label>
                                                                                    </div>
                                                                                </div>
                                                                            @elseif ($column === 'id_proof_number')
                                                                                <div class="col-md-6">
                                                                                    <div
                                                                                        class="form-floating form-floating-outline mb-4">
                                                                                        <input type="text"
                                                                                            id="{{ $column }}"
                                                                                            class="form-control"
                                                                                            name="{{ $column }}"
                                                                                            value="{{ old($column) }}"
                                                                                            required>
                                                                                        <label for="{{ $column }}"
                                                                                            class="form-label">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                                                            *</label>
                                                                                    </div>
                                                                                </div>
                                                                            @elseif ($column === 'phone')
                                                                                <div class="col-md-6">
                                                                                    <div
                                                                                        class="form-floating form-floating-outline mb-4">
                                                                                        <input type="text"
                                                                                            id="phone1"
                                                                                            class="form-control"
                                                                                            name="{{ $column }}"
                                                                                            value="{{ old($column) }}"
                                                                                            required>
                                                                                        <label for="phone1"
                                                                                            class="form-label">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                                                            *</label>
                                                                                    </div>
                                                                                </div>
                                                                            @elseif ($column === 'email')
                                                                                <div class="col-md-6">
                                                                                    <div
                                                                                        class="form-floating form-floating-outline mb-4">
                                                                                        <input type="text"
                                                                                            id="email1"
                                                                                            class="form-control"
                                                                                            name="{{ $column }}"
                                                                                            value="{{ old($column) }}"
                                                                                            required>
                                                                                        <label for="email1"
                                                                                            class="form-label">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                                                            *</label>
                                                                                    </div>
                                                                                </div>
                                                                            @elseif ($column === 'password')
                                                                                <div class="col-md-6">
                                                                                    <div
                                                                                        class="form-floating form-floating-outline mb-4">
                                                                                        <input type="text"
                                                                                            id="{{ $column }}"
                                                                                            class="form-control"
                                                                                            name="{{ $column }}"
                                                                                            value="{{ old($column) }}"
                                                                                            required>
                                                                                        <label for="{{ $column }}"
                                                                                            class="form-label">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                                                            *</label>
                                                                                        <div id="password-error"
                                                                                            class="text-danger error-message">
                                                                                            (The
                                                                                            password field
                                                                                            must be at
                                                                                            least 8
                                                                                            characters.)
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            @else
                                                                                <div class="col-md-6">
                                                                                    <!-- Text input fields for other columns -->
                                                                                    <div
                                                                                        class="form-floating form-floating-outline mb-4">
                                                                                        <input type="text"
                                                                                            id="{{ $column }}"
                                                                                            class="form-control"
                                                                                            name="{{ $column }}"
                                                                                            placeholder="Enter your {{ $column }}"
                                                                                            value="{{ old($column) }}"
                                                                                            required>
                                                                                        <label
                                                                                            for="{{ $column }}">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                                                            *</label>
                                                                                        <!-- Error message placeholder -->
                                                                                        <div id="{{ $column }}-error"
                                                                                            class="text-danger error-message">
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            @endif
                                                                        @endforeach

                                                                    </div>

                                                                    <!-- Submit button -->
                                                                    <div class="demo-inline-spacing">
                                                                        <button type="submit" class="btn1 btn-primary">
                                                                            <span
                                                                                class="tf-icons mdi mdi-checkbox-marked-circle-outline me-1"></span>ADD
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                                <script>
                                                    function editRow(id) {
                                                        // Fetch the row data using AJAX and populate the modal
                                                        $.get('/manageemployee/' + id + '/edit', function(data) {
                                                            console.log('Received data:', data);

                                                            // Check if the modal element exists
                                                            if ($('#exLargeModal').length) {
                                                                $('#editId').val(data.staff_id);
                                                                $('#id_proof_number').val(data.id_proof_number);
                                                                $('#id_type').val(data.id_type);
                                                                $('#status').val(data.status);
                                                                $('#email1').val(data.email);
                                                                $('#shop1').val(data.shop);
                                                                $('#designation1').val(data.designation);
                                                                $('#phone1').val(data.phone);
                                                                $('#address2').val(data.address);
                                                                $('#qualification1').val(data.qualification);


                                                                // Iterate through columns to set the values
                                                                @foreach ($columns as $column)
                                                                    @if ($column === 'photo')
                                                                        // Display the existing image if it exists
                                                                        if ($('#imagePreview2').length) {
                                                                            $('#imagePreview2').attr('src', data.{{ $column }} ?
                                                                                '{{ asset('storage/staff/') }}/' + data.{{ $column }} :
                                                                                '{{ asset('assets/img/defaultimage.jpg') }}');
                                                                        }
                                                                    @elseif ($column === 'user_type')
                                                                        // Set the selected value for dropdowns
                                                                        if ($('#{{ $column }}').length) {
                                                                            var value = data.{{ $column }};
                                                                            $('#{{ $column }}').val(value).change();

                                                                        }
                                                                    @else
                                                                        // Set the value for text inputs
                                                                        if ($('#{{ $column }}').length) {
                                                                            $('#{{ $column }}').val(data.{{ $column }});
                                                                        }
                                                                    @endif
                                                                @endforeach

                                                                // Show the modal
                                                                /* $('#exLargeModal').modal('show'); */
                                                            } else {
                                                                console.error('Modal element not found.');
                                                            }
                                                        }).fail(function(xhr, status, error) {
                                                            console.error('Failed to fetch data:', error);
                                                        });
                                                    }


                                                    $(document).ready(function() {
                                                        // Submit the form using AJAX
                                                        $('#editForm').submit(function(e) {
                                                            e.preventDefault();

                                                            var id = $('#editId').val(); // Extract the ID from the form
                                                            var formData = new FormData(this);
                                                            formData.append('_method', 'PUT'); // Ensure the PUT method is included
                                                            console.log(formData);

                                                            $.ajax({
                                                                url: '/manageemployee/' + id,
                                                                method: 'POST', // Use POST to support Laravel's method spoofing
                                                                data: formData,
                                                                processData: false,
                                                                contentType: false,
                                                                success: function(response) {
                                                                    // Handle success
                                                                    console.log(response.message);
                                                                    $('#success-alert').hide();
                                                                    $('#error-alert').hide();

                                                                    // Show the success message
                                                                    $('#success-alert').text(response.message).show();

                                                                    // Optionally refresh the page or update the table
                                                                    window.location.href = response.redirect;
                                                                },
                                                                error: function(xhr, status, error) {
                                                                    // Handle error
                                                                    console.error('Update failed:', error);
                                                                    $('#error-alert').text('Update failed: ' + error).show();
                                                                }
                                                            });
                                                        });
                                                    });
                                                </script>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div><br>
                            <div class="d-flex justify-content-center col-md-2 pagination">
                                {{ $paginationdata->links() }}
                            </div>
                        @else
                            <p>You Dont Have Permission to access</p>
                        @endif
                    </div>
                </div>
            </div>
            <div class="modal fade" id="addBannerModal" tabindex="-1" aria-labelledby="addBannerModalLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-xl modal-centered">
                    <div class="modal-content">
                        <div class="modal-header ">
                            <h5 class="modal-title d-flex align-items-center" id="addBannerModalLabel"><span
                                    class="mdi mdi-account-plus-outline me-2"></span> Add Employee</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form id="banner-form" action="{{ route('employees.store') }}" method="post"
                                enctype="multipart/form-data">
                                @csrf
                                <!-- Form fields -->
                                <div class="row">

                                    @foreach ($columns as $column)
                                        @if (
                                            $column === 'staff_id' ||
                                                $column === 'carry_forward_casual_leaves' ||
                                                $column === 'carry_forward_sick_leaves' ||
                                                $column === 'created_at' ||
                                                $column === 'updated_at')
                                            <!-- Skip the staff_id, created_at, and updated_at fields -->
                                        @elseif ($column === 'address')
                                            <div class="col-md-3">
                                                <div class="form-floating mb-4">
                                                    <textarea class="form-control" name="{{ $column }}" id="{{ $column }}" placeholder=" "
                                                        style="height: 100px;" required></textarea>
                                                    <label for="{{ $column }}">{{ ucfirst($column) }} *</label>
                                                </div>
                                            </div>
                                        @elseif ($column === 'email' || $column === 'password' || $column === 'user_type')
                                            <div class="col-md-6">
                                                @if ($column === 'email')
                                                    <div class="form-floating form-floating-outline mb-4">
                                                        <input type="email" id="email" class="form-control"
                                                            name="email" placeholder="Enter your email"
                                                            value="{{ old('email') }}" required>
                                                        <label for="email">Email *</label>
                                                        <div id="email-error" class="text-danger error-message">
                                                        </div>
                                                    </div>
                                                @elseif ($column === 'password')
                                                    <div class="form-floating form-floating-outline mb-4">
                                                        <input type="password" id="password" class="form-control"
                                                            name="password" placeholder="Enter your password" required>
                                                        <label for="password">Password * (The password field must be at
                                                            least 8 characters.)</label>
                                                        <div id="password-error" class="text-danger error-message">(The
                                                            password field must be at
                                                            least 8 characters.)
                                                        </div>
                                                    </div>
                                                @elseif ($column === 'user_type')
                                                    <div class="form-floating form-floating-outline mb-4">
                                                        <select id="user_type" name="user_type" class="form-select"
                                                            required>
                                                            <option value="" disabled selected>Select a User
                                                                Group</option>
                                                            @foreach ($usergroup as $usergroup)
                                                                <option value="{{ $usergroup->id }}">
                                                                    {{ $usergroup->user_type }}</option>
                                                            @endforeach
                                                        </select>
                                                        <label for="user_type">User Group *</label>
                                                    </div>
                                                @endif
                                            </div>
                                        @elseif ($column === 'photo')
                                            <div class="col-md-8"></div>
                                            <div class="col-md-4 mb-4">
                                                <div class="d-flex align-items-center justify-content-end">
                                                    <div class="box text-center">
                                                        <img id="imagePreview1"
                                                            src="{{ asset('assets/img/defaultimage.jpg') }}"
                                                            alt="Image Preview"
                                                            style="height: 120px; object-fit: cover; cursor: pointer;" />
                                                        <label for="fileInput"
                                                            class="form-label d-flex justify-content-center">
                                                            Upload Image1 (.jpg, .jpeg, .png)
                                                        </label>
                                                        <input type="file" name="{{ $column }}" id="fileInput"
                                                            class="form-control" accept=".jpg,.jpeg,.png"
                                                            onchange="previewImage(event)">
                                                    </div>
                                                </div>

                                                <script>
                                                    function previewImage(event) {
                                                        const input = event.target;
                                                        const preview = document.getElementById('imagePreview1');
                                                        const file = input.files[0];

                                                        if (file) {
                                                            const reader = new FileReader();
                                                            reader.onload = function(e) {
                                                                preview.src = e.target.result;
                                                            }
                                                            reader.readAsDataURL(file);
                                                        }
                                                    }
                                                </script>
                                            </div>
                                        @elseif ($column === 'qualification' || $column === 'key_skills' || $column === 'description')
                                            <div class="col-md-3">
                                                <div class="form-floating mb-4">
                                                    <textarea class="form-control" name="{{ $column }}" id="{{ $column }}" placeholder=" "
                                                        style="height: 100px;" @if ($column === 'qualification' || $column === 'key_skills') required @endif></textarea>
                                                    <label for="{{ $column }}">
                                                        {{ ucfirst(str_replace('_', ' ', $column)) }}
                                                        @if ($column === 'qualification' || $column === 'key_skills')
                                                            *
                                                        @endif
                                                    </label>
                                                </div>
                                            </div>

                                            {{-- @elseif ($column === 'address')
                                            <div class="col-md-6">
                                                <div class="input-group mb-4">
                                                    <textarea class="form-control" name="{{ $column }}" aria-label="With textarea"
                                                        placeholder="{{ $column }}" style="height: 60px;"></textarea>
                                                </div>
                                            </div> --}}
                                        @elseif ($column === 'designation')
                                            <div class="col-md-6">
                                                <div class="form-floating form-floating-outline mb-4">
                                                    <select id="{{ $column }}" name="{{ $column }}"
                                                        class="form-select" required>
                                                        <option value="" disabled selected>Select a Designation
                                                        </option>
                                                        @foreach ($designations as $designation)
                                                            <option value="{{ $designation->id }}">
                                                                {{ $designation->name }}</option>
                                                        @endforeach
                                                    </select>
                                                    <label
                                                        for="{{ $column }}">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                        *</label>
                                                </div>
                                            </div>
                                        @elseif ($column === 'shop')
                                            <div class="col-md-6">
                                                <div class="form-floating form-floating-outline mb-4">
                                                    <select id="{{ $column }}" name="{{ $column }}"
                                                        class="form-select" required>
                                                        <option value="" disabled selected>Select a Shop</option>
                                                        @foreach ($shops as $shop)
                                                            <option value="{{ $shop->id }}">
                                                                {{ $shop->shop_name }}</option>
                                                        @endforeach
                                                    </select>
                                                    <label
                                                        for="{{ $column }}">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                        *</label>
                                                </div>
                                            </div>
                                        @elseif ($column === 'gender')
                                            <div class="col-md-6">
                                                <div class="form-floating form-floating-outline mb-4">
                                                    <select id="{{ $column }}" class="form-select"
                                                        name="{{ $column }}" required>
                                                        <option value="Male">Male</option>
                                                        <option value="Female">Female</option>
                                                        <option value="Others">Others</option>
                                                    </select>
                                                    <label
                                                        for="{{ $column }}">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                        *</label>
                                                </div>
                                            </div>
                                        @elseif ($column === 'marital_status')
                                            <div class="col-md-6">
                                                <div class="form-floating form-floating-outline mb-4">
                                                    <select id="{{ $column }}" class="form-select"
                                                        name="{{ $column }}">
                                                        <option value="Single">Single</option>
                                                        <option value="Married">Married</option>
                                                    </select>
                                                    <label
                                                        for="{{ $column }}">{{ ucfirst(str_replace('_', ' ', $column)) }}</label>
                                                </div>
                                            </div>
                                        @elseif ($column === 'blood_group')
                                            <div class="col-md-6">
                                                <div class="form-floating form-floating-outline mb-4">
                                                    <select id="{{ $column }}" class="form-select"
                                                        name="{{ $column }}">
                                                        <option value="" disabled selected>Select blood group
                                                        </option>
                                                        <option value="O+">O+</option>
                                                        <option value="O-">O-</option>
                                                        <option value="A+">A+</option>
                                                        <option value="A-">A-</option>
                                                        <option value="B+">B+</option>
                                                        <option value="B-">B-</option>
                                                        <option value="AB+">AB+</option>
                                                        <option value="AB-">AB-</option>
                                                    </select>
                                                    <label
                                                        for="{{ $column }}">{{ ucfirst(str_replace('_', ' ', $column)) }}</label>
                                                </div>
                                            </div>
                                        @elseif ($column === 'id_type')
                                            <div class="col-md-6">
                                                <div class="form-floating form-floating-outline mb-4">
                                                    <select id="{{ $column }}" class="form-select"
                                                        name="{{ $column }}" required>
                                                        <option value="" disabled selected>Select Id Type
                                                        </option>
                                                        <option value="Aadhar Card">Aadhar Card</option>
                                                        <option value="Passport">Passport</option>
                                                        <option value="Pan Card">Pan Card</option>
                                                        <option value="Election Identity Card">Election Identity Card
                                                        </option>

                                                    </select>
                                                    <label
                                                        for="{{ $column }}">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                        *</label>
                                                </div>
                                            </div>
                                        @elseif ($column === 'resume')
                                            <div class="col-md-6">
                                                <div class="form-floating form-floating-outline mb-4">
                                                    <input type="file" name="{{ $column }}"
                                                        id="{{ $column }}" class="form-control">
                                                    <label
                                                        for="{{ $column }}">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                        (.pdf,.doc,.docx)</label>
                                                </div>
                                            </div>
                                        @elseif ($column === 'id_proof')
                                            <div class="col-md-6">
                                                <div class="form-floating form-floating-outline mb-4">
                                                    <input type="file" name="{{ $column }}"
                                                        id="{{ $column }}" class="form-control" required>
                                                    <label
                                                        for="{{ $column }}">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                        *
                                                        (.jpg,.jpeg,.png)</label>
                                                </div>
                                            </div>
                                        @elseif ($column === 'status')
                                            <!-- Dropdown for the status field -->
                                            <div class="col-md-6">
                                                <div class="form-floating form-floating-outline mb-4">
                                                    <select id="{{ $column }}" class="form-select"
                                                        name="{{ $column }}">
                                                        <option value="1">Active</option>
                                                        <option value="0">Blocked</option>
                                                        <option value="2">Resigned</option>
                                                    </select>
                                                    <label for="{{ $column }}"
                                                        class="form-label">{{ ucfirst($column) }}</label>
                                                </div>
                                            </div>
                                        @elseif ($column === 'date_of_application')
                                            <div class="col-md-6">
                                                <div class="form-floating form-floating-outline mb-4">
                                                    <input type="date" id="{{ $column }}" class="form-control"
                                                        name="{{ $column }}">
                                                    <label for="{{ $column }}"
                                                        class="form-label">{{ ucfirst(str_replace('_', ' ', $column)) }}</label>
                                                </div>
                                            </div>
                                        @elseif ($column === 'date_of_join')
                                            <div class="col-md-6">
                                                <div class="form-floating form-floating-outline mb-4">
                                                    <input type="date" id="{{ $column }}" class="form-control"
                                                        name="{{ $column }}" required>
                                                    <label for="{{ $column }}"
                                                        class="form-label">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                        *</label>
                                                </div>
                                            </div>
                                        @elseif ($column === 'date_of_resign')
                                            <div class="col-md-6">
                                                <div class="form-floating form-floating-outline mb-4">
                                                    <input type="date" id="{{ $column }}" class="form-control"
                                                        name="{{ $column }}">
                                                    <label for="{{ $column }}"
                                                        class="form-label">{{ ucfirst(str_replace('_', ' ', $column)) }}</label>
                                                </div>
                                            </div>
                                        @elseif ($column === 'date_of_birth')
                                            <div class="col-md-6">
                                                <div class="form-floating form-floating-outline mb-4">
                                                    <input type="date" id="{{ $column }}" class="form-control"
                                                        name="{{ $column }}" required>
                                                    <label for="{{ $column }}"
                                                        class="form-label">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                        *</label>
                                                </div>
                                            </div>
                                        @else
                                            <div class="col-md-6">
                                                <!-- Text input fields for other columns -->
                                                <div class="form-floating form-floating-outline mb-4">
                                                    <input type="text" id="{{ $column }}" class="form-control"
                                                        name="{{ $column }}"
                                                        placeholder="Enter your {{ $column }}"
                                                        value="{{ old($column) }}" required>
                                                    <label
                                                        for="{{ $column }}">{{ ucfirst(str_replace('_', ' ', $column)) }}
                                                        *</label>
                                                    <!-- Error message placeholder -->
                                                    <div id="{{ $column }}-error"
                                                        class="text-danger error-message">
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    @endforeach

                                </div>

                                <!-- Submit button -->
                                <div class="demo-inline-spacing">
                                    <button type="submit" class="btn1 btn-primary">
                                        <span class="tf-icons mdi mdi-checkbox-marked-circle-outline me-1"></span>ADD
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const searchInput = document.getElementById('datatable-search-input');
                const tableRows = document.querySelectorAll('#datatable tbody tr');

                searchInput.addEventListener('input', function(e) {
                    const searchValue = e.target.value.toLowerCase();
                    tableRows.forEach(row => {
                        const cells = row.querySelectorAll('td');
                        const rowText = Array.from(cells).map(cell => cell.textContent.toLowerCase())
                            .join(' ');

                        if (rowText.includes(searchValue)) {
                            row.style.display = '';
                        } else {
                            row.style.display = 'none';
                        }
                    });
                });
            });

            document.addEventListener('DOMContentLoaded', function() {
                const deleteButtons = document.querySelectorAll('.delete-banner-btn');
                const deleteConfirmationModal = new bootstrap.Modal(document.getElementById('deleteConfirmationModal'));

                deleteButtons.forEach(button => {
                    button.addEventListener('click', function() {
                        const bannerId = this.getAttribute('data-category-id');
                        document.getElementById('confirmDeleteBtn').setAttribute('data-category-id',
                            bannerId);
                        deleteConfirmationModal.show();
                    });
                });

                const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
                confirmDeleteBtn.addEventListener('click', function() {
                    const bannerId = this.getAttribute('data-category-id');
                    const form = document.getElementById('deleteForm' + bannerId);
                    if (form) {
                        form.submit();
                    }
                    deleteConfirmationModal.hide(); // Hide the modal after form submission
                });
            });

            document.addEventListener('DOMContentLoaded', function() {
                // Function to show and fade out alert
                function showAlert(id) {
                    const alert = document.getElementById(id);
                    if (alert) {
                        alert.style.display = 'block';
                        setTimeout(function() {
                            alert.style.opacity = '0';
                            setTimeout(function() {
                                alert.style.display = 'none';
                            }, 500); // Match this with the CSS transition duration
                        }, 2000); // Show for 2 seconds
                    }
                }
                // Show success and error alerts if they exist
                showAlert('success-alert');
                showAlert('error-alert');
            });
        </script>
    </div>

{{-- invite friends --}}
<div class="modal fade" id="kt_modal_invite_friends" tabindex="-1" aria-hidden="true">
    <!--begin::Modal dialog-->
    <div class="modal-dialog mw-650px">
        <!--begin::Modal content-->
        <div class="modal-content">
            <!--begin::Modal header-->
            <div class="modal-header pb-0 border-0 justify-content-end">
                <!--begin::Close-->
                <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                    <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i>                </div>
                <!--end::Close-->
            </div>
            <!--begin::Modal header-->

            <!--begin::Modal body-->
            <div class="modal-body scroll-y mx-5 mx-xl-18 pt-0 pb-15">
                <!--begin::Heading-->
                <div class="text-center mb-13">
                    <!--begin::Title-->
                    <h1 class="mb-3">Invite a Friend</h1>
                    <!--end::Title-->

                    <!--begin::Description-->
                    <div class="text-muted fw-semibold fs-5">
                        If you need more info, please check out
                        <a href="#" class="link-primary fw-bold">FAQ Page</a>.
                    </div>
                    <!--end::Description-->
                </div>
                <!--end::Heading-->

                <!--begin::Google Contacts Invite-->
                <div class="btn btn-light-primary fw-bold w-100 mb-8">
                    <img alt="Logo" src="https://preview.keenthemes.com/craft/assets/media/svg/brand-logos/google-icon.svg" class="h-20px me-3"/>
                    Invite Gmail Contacts
                </div>
                <!--end::Google Contacts Invite-->

                <!--begin::Separator-->
                <div class="separator d-flex flex-center mb-8">
                    <span class="text-uppercase bg-body fs-7 fw-semibold text-muted px-3">or</span>
                </div>
                <!--end::Separator-->

                <!--begin::Textarea-->
                <textarea class="form-control form-control-solid mb-8" rows="3" placeholder="Type or paste emails here">
                </textarea>
                <!--end::Textarea-->

                <!--begin::Users-->
                <div class="mb-10">
                    <!--begin::Heading-->
                    <div class="fs-6 fw-semibold mb-2">Your Invitations</div>
                    <!--end::Heading-->

                    <!--begin::List-->
                    <div class="mh-300px scroll-y me-n7 pe-7">
                                                                                <!--begin::User-->
                            <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                                <!--begin::Details-->
                                <div class="d-flex align-items-center">
                                    <!--begin::Avatar-->
                                    <div class="symbol symbol-35px symbol-circle">
                                                                                    <img alt="Pic" src="https://preview.keenthemes.com/craft/assets/media/avatars/300-6.jpg" />
                                                                            </div>
                                    <!--end::Avatar-->

                                    <!--begin::Details-->
                                    <div class="ms-5">
                                        <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Emma Smith</a>

                                        <div class="fw-semibold text-muted">smith@kpmg.com</div>
                                    </div>
                                    <!--end::Details-->
                                </div>
                                <!--end::Details-->

                                <!--begin::Access menu-->
                                <div class="ms-2 w-100px">
                                    <select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
                                        <option value="1" >Guest</option>
                                        <option value="2" selected>Owner</option>
                                        <option value="3" >Can Edit</option>
                                    </select>
                                </div>
                                <!--end::Access menu-->
                            </div>
                            <!--end::User-->
                                                                                <!--begin::User-->
                            <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                                <!--begin::Details-->
                                <div class="d-flex align-items-center">
                                    <!--begin::Avatar-->
                                    <div class="symbol symbol-35px symbol-circle">
                                                                                    <span class="symbol-label bg-light-danger text-danger fw-semibold">
                                                M                                            </span>
                                                                            </div>
                                    <!--end::Avatar-->

                                    <!--begin::Details-->
                                    <div class="ms-5">
                                        <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Melody Macy</a>

                                        <div class="fw-semibold text-muted">melody@altbox.com</div>
                                    </div>
                                    <!--end::Details-->
                                </div>
                                <!--end::Details-->

                                <!--begin::Access menu-->
                                <div class="ms-2 w-100px">
                                    <select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
                                        <option value="1" selected>Guest</option>
                                        <option value="2" >Owner</option>
                                        <option value="3" >Can Edit</option>
                                    </select>
                                </div>
                                <!--end::Access menu-->
                            </div>
                            <!--end::User-->
                                                                                <!--begin::User-->
                            <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                                <!--begin::Details-->
                                <div class="d-flex align-items-center">
                                    <!--begin::Avatar-->
                                    <div class="symbol symbol-35px symbol-circle">
                                                                                    <img alt="Pic" src="https://preview.keenthemes.com/craft/assets/media/avatars/300-1.jpg" />
                                                                            </div>
                                    <!--end::Avatar-->

                                    <!--begin::Details-->
                                    <div class="ms-5">
                                        <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Max Smith</a>

                                        <div class="fw-semibold text-muted">max@kt.com</div>
                                    </div>
                                    <!--end::Details-->
                                </div>
                                <!--end::Details-->

                                <!--begin::Access menu-->
                                <div class="ms-2 w-100px">
                                    <select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
                                        <option value="1" >Guest</option>
                                        <option value="2" >Owner</option>
                                        <option value="3" selected>Can Edit</option>
                                    </select>
                                </div>
                                <!--end::Access menu-->
                            </div>
                            <!--end::User-->
                                                                                <!--begin::User-->
                            <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                                <!--begin::Details-->
                                <div class="d-flex align-items-center">
                                    <!--begin::Avatar-->
                                    <div class="symbol symbol-35px symbol-circle">
                                                                                    <img alt="Pic" src="https://preview.keenthemes.com/craft/assets/media/avatars/300-5.jpg" />
                                                                            </div>
                                    <!--end::Avatar-->

                                    <!--begin::Details-->
                                    <div class="ms-5">
                                        <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Sean Bean</a>

                                        <div class="fw-semibold text-muted">sean@dellito.com</div>
                                    </div>
                                    <!--end::Details-->
                                </div>
                                <!--end::Details-->

                                <!--begin::Access menu-->
                                <div class="ms-2 w-100px">
                                    <select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
                                        <option value="1" >Guest</option>
                                        <option value="2" selected>Owner</option>
                                        <option value="3" >Can Edit</option>
                                    </select>
                                </div>
                                <!--end::Access menu-->
                            </div>
                            <!--end::User-->
                                                                                <!--begin::User-->
                            <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                                <!--begin::Details-->
                                <div class="d-flex align-items-center">
                                    <!--begin::Avatar-->
                                    <div class="symbol symbol-35px symbol-circle">
                                                                                    <img alt="Pic" src="https://preview.keenthemes.com/craft/assets/media/avatars/300-25.jpg" />
                                                                            </div>
                                    <!--end::Avatar-->

                                    <!--begin::Details-->
                                    <div class="ms-5">
                                        <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Brian Cox</a>

                                        <div class="fw-semibold text-muted">brian@exchange.com</div>
                                    </div>
                                    <!--end::Details-->
                                </div>
                                <!--end::Details-->

                                <!--begin::Access menu-->
                                <div class="ms-2 w-100px">
                                    <select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
                                        <option value="1" >Guest</option>
                                        <option value="2" >Owner</option>
                                        <option value="3" selected>Can Edit</option>
                                    </select>
                                </div>
                                <!--end::Access menu-->
                            </div>
                            <!--end::User-->
                                                                                <!--begin::User-->
                            <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                                <!--begin::Details-->
                                <div class="d-flex align-items-center">
                                    <!--begin::Avatar-->
                                    <div class="symbol symbol-35px symbol-circle">
                                                                                    <span class="symbol-label bg-light-warning text-warning fw-semibold">
                                                C                                            </span>
                                                                            </div>
                                    <!--end::Avatar-->

                                    <!--begin::Details-->
                                    <div class="ms-5">
                                        <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Mikaela Collins</a>

                                        <div class="fw-semibold text-muted">mik@pex.com</div>
                                    </div>
                                    <!--end::Details-->
                                </div>
                                <!--end::Details-->

                                <!--begin::Access menu-->
                                <div class="ms-2 w-100px">
                                    <select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
                                        <option value="1" >Guest</option>
                                        <option value="2" selected>Owner</option>
                                        <option value="3" >Can Edit</option>
                                    </select>
                                </div>
                                <!--end::Access menu-->
                            </div>
                            <!--end::User-->
                                                                                <!--begin::User-->
                            <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                                <!--begin::Details-->
                                <div class="d-flex align-items-center">
                                    <!--begin::Avatar-->
                                    <div class="symbol symbol-35px symbol-circle">
                                                                                    <img alt="Pic" src="https://preview.keenthemes.com/craft/assets/media/avatars/300-9.jpg" />
                                                                            </div>
                                    <!--end::Avatar-->

                                    <!--begin::Details-->
                                    <div class="ms-5">
                                        <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Francis Mitcham</a>

                                        <div class="fw-semibold text-muted">f.mit@kpmg.com</div>
                                    </div>
                                    <!--end::Details-->
                                </div>
                                <!--end::Details-->

                                <!--begin::Access menu-->
                                <div class="ms-2 w-100px">
                                    <select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
                                        <option value="1" >Guest</option>
                                        <option value="2" >Owner</option>
                                        <option value="3" selected>Can Edit</option>
                                    </select>
                                </div>
                                <!--end::Access menu-->
                            </div>
                            <!--end::User-->
                                                                                <!--begin::User-->
                            <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                                <!--begin::Details-->
                                <div class="d-flex align-items-center">
                                    <!--begin::Avatar-->
                                    <div class="symbol symbol-35px symbol-circle">
                                                                                    <span class="symbol-label bg-light-danger text-danger fw-semibold">
                                                O                                            </span>
                                                                            </div>
                                    <!--end::Avatar-->

                                    <!--begin::Details-->
                                    <div class="ms-5">
                                        <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Olivia Wild</a>

                                        <div class="fw-semibold text-muted">olivia@corpmail.com</div>
                                    </div>
                                    <!--end::Details-->
                                </div>
                                <!--end::Details-->

                                <!--begin::Access menu-->
                                <div class="ms-2 w-100px">
                                    <select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
                                        <option value="1" >Guest</option>
                                        <option value="2" selected>Owner</option>
                                        <option value="3" >Can Edit</option>
                                    </select>
                                </div>
                                <!--end::Access menu-->
                            </div>
                            <!--end::User-->
                                                                                <!--begin::User-->
                            <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                                <!--begin::Details-->
                                <div class="d-flex align-items-center">
                                    <!--begin::Avatar-->
                                    <div class="symbol symbol-35px symbol-circle">
                                                                                    <span class="symbol-label bg-light-primary text-primary fw-semibold">
                                                N                                            </span>
                                                                            </div>
                                    <!--end::Avatar-->

                                    <!--begin::Details-->
                                    <div class="ms-5">
                                        <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Neil Owen</a>

                                        <div class="fw-semibold text-muted">owen.neil@gmail.com</div>
                                    </div>
                                    <!--end::Details-->
                                </div>
                                <!--end::Details-->

                                <!--begin::Access menu-->
                                <div class="ms-2 w-100px">
                                    <select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
                                        <option value="1" selected>Guest</option>
                                        <option value="2" >Owner</option>
                                        <option value="3" >Can Edit</option>
                                    </select>
                                </div>
                                <!--end::Access menu-->
                            </div>
                            <!--end::User-->
                                                                                <!--begin::User-->
                            <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                                <!--begin::Details-->
                                <div class="d-flex align-items-center">
                                    <!--begin::Avatar-->
                                    <div class="symbol symbol-35px symbol-circle">
                                                                                    <img alt="Pic" src="https://preview.keenthemes.com/craft/assets/media/avatars/300-23.jpg" />
                                                                            </div>
                                    <!--end::Avatar-->

                                    <!--begin::Details-->
                                    <div class="ms-5">
                                        <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Dan Wilson</a>

                                        <div class="fw-semibold text-muted">dam@consilting.com</div>
                                    </div>
                                    <!--end::Details-->
                                </div>
                                <!--end::Details-->

                                <!--begin::Access menu-->
                                <div class="ms-2 w-100px">
                                    <select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
                                        <option value="1" >Guest</option>
                                        <option value="2" >Owner</option>
                                        <option value="3" selected>Can Edit</option>
                                    </select>
                                </div>
                                <!--end::Access menu-->
                            </div>
                            <!--end::User-->
                                                                                <!--begin::User-->
                            <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                                <!--begin::Details-->
                                <div class="d-flex align-items-center">
                                    <!--begin::Avatar-->
                                    <div class="symbol symbol-35px symbol-circle">
                                                                                    <span class="symbol-label bg-light-danger text-danger fw-semibold">
                                                E                                            </span>
                                                                            </div>
                                    <!--end::Avatar-->

                                    <!--begin::Details-->
                                    <div class="ms-5">
                                        <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Emma Bold</a>

                                        <div class="fw-semibold text-muted">emma@intenso.com</div>
                                    </div>
                                    <!--end::Details-->
                                </div>
                                <!--end::Details-->

                                <!--begin::Access menu-->
                                <div class="ms-2 w-100px">
                                    <select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
                                        <option value="1" >Guest</option>
                                        <option value="2" selected>Owner</option>
                                        <option value="3" >Can Edit</option>
                                    </select>
                                </div>
                                <!--end::Access menu-->
                            </div>
                            <!--end::User-->
                                                                                <!--begin::User-->
                            <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                                <!--begin::Details-->
                                <div class="d-flex align-items-center">
                                    <!--begin::Avatar-->
                                    <div class="symbol symbol-35px symbol-circle">
                                                                                    <img alt="Pic" src="https://preview.keenthemes.com/craft/assets/media/avatars/300-12.jpg" />
                                                                            </div>
                                    <!--end::Avatar-->

                                    <!--begin::Details-->
                                    <div class="ms-5">
                                        <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Ana Crown</a>

                                        <div class="fw-semibold text-muted">ana.cf@limtel.com</div>
                                    </div>
                                    <!--end::Details-->
                                </div>
                                <!--end::Details-->

                                <!--begin::Access menu-->
                                <div class="ms-2 w-100px">
                                    <select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
                                        <option value="1" selected>Guest</option>
                                        <option value="2" >Owner</option>
                                        <option value="3" >Can Edit</option>
                                    </select>
                                </div>
                                <!--end::Access menu-->
                            </div>
                            <!--end::User-->
                                                                                <!--begin::User-->
                            <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                                <!--begin::Details-->
                                <div class="d-flex align-items-center">
                                    <!--begin::Avatar-->
                                    <div class="symbol symbol-35px symbol-circle">
                                                                                    <span class="symbol-label bg-light-info text-info fw-semibold">
                                                A                                            </span>
                                                                            </div>
                                    <!--end::Avatar-->

                                    <!--begin::Details-->
                                    <div class="ms-5">
                                        <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Robert Doe</a>

                                        <div class="fw-semibold text-muted">robert@benko.com</div>
                                    </div>
                                    <!--end::Details-->
                                </div>
                                <!--end::Details-->

                                <!--begin::Access menu-->
                                <div class="ms-2 w-100px">
                                    <select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
                                        <option value="1" >Guest</option>
                                        <option value="2" >Owner</option>
                                        <option value="3" selected>Can Edit</option>
                                    </select>
                                </div>
                                <!--end::Access menu-->
                            </div>
                            <!--end::User-->
                                                                                <!--begin::User-->
                            <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                                <!--begin::Details-->
                                <div class="d-flex align-items-center">
                                    <!--begin::Avatar-->
                                    <div class="symbol symbol-35px symbol-circle">
                                                                                    <img alt="Pic" src="https://preview.keenthemes.com/craft/assets/media/avatars/300-13.jpg" />
                                                                            </div>
                                    <!--end::Avatar-->

                                    <!--begin::Details-->
                                    <div class="ms-5">
                                        <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">John Miller</a>

                                        <div class="fw-semibold text-muted">miller@mapple.com</div>
                                    </div>
                                    <!--end::Details-->
                                </div>
                                <!--end::Details-->

                                <!--begin::Access menu-->
                                <div class="ms-2 w-100px">
                                    <select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
                                        <option value="1" >Guest</option>
                                        <option value="2" >Owner</option>
                                        <option value="3" selected>Can Edit</option>
                                    </select>
                                </div>
                                <!--end::Access menu-->
                            </div>
                            <!--end::User-->
                                                                                <!--begin::User-->
                            <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                                <!--begin::Details-->
                                <div class="d-flex align-items-center">
                                    <!--begin::Avatar-->
                                    <div class="symbol symbol-35px symbol-circle">
                                                                                    <span class="symbol-label bg-light-success text-success fw-semibold">
                                                L                                            </span>
                                                                            </div>
                                    <!--end::Avatar-->

                                    <!--begin::Details-->
                                    <div class="ms-5">
                                        <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Lucy Kunic</a>

                                        <div class="fw-semibold text-muted">lucy.m@fentech.com</div>
                                    </div>
                                    <!--end::Details-->
                                </div>
                                <!--end::Details-->

                                <!--begin::Access menu-->
                                <div class="ms-2 w-100px">
                                    <select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
                                        <option value="1" >Guest</option>
                                        <option value="2" selected>Owner</option>
                                        <option value="3" >Can Edit</option>
                                    </select>
                                </div>
                                <!--end::Access menu-->
                            </div>
                            <!--end::User-->
                                                                                <!--begin::User-->
                            <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                                <!--begin::Details-->
                                <div class="d-flex align-items-center">
                                    <!--begin::Avatar-->
                                    <div class="symbol symbol-35px symbol-circle">
                                                                                    <img alt="Pic" src="https://preview.keenthemes.com/craft/assets/media/avatars/300-21.jpg" />
                                                                            </div>
                                    <!--end::Avatar-->

                                    <!--begin::Details-->
                                    <div class="ms-5">
                                        <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Ethan Wilder</a>

                                        <div class="fw-semibold text-muted">ethan@loop.com.au</div>
                                    </div>
                                    <!--end::Details-->
                                </div>
                                <!--end::Details-->

                                <!--begin::Access menu-->
                                <div class="ms-2 w-100px">
                                    <select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
                                        <option value="1" selected>Guest</option>
                                        <option value="2" >Owner</option>
                                        <option value="3" >Can Edit</option>
                                    </select>
                                </div>
                                <!--end::Access menu-->
                            </div>
                            <!--end::User-->
                                                                                <!--begin::User-->
                            <div class="d-flex flex-stack py-4 ">
                                <!--begin::Details-->
                                <div class="d-flex align-items-center">
                                    <!--begin::Avatar-->
                                    <div class="symbol symbol-35px symbol-circle">
                                                                                    <span class="symbol-label bg-light-success text-success fw-semibold">
                                                L                                            </span>
                                                                            </div>
                                    <!--end::Avatar-->

                                    <!--begin::Details-->
                                    <div class="ms-5">
                                        <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Lucy Kunic</a>

                                        <div class="fw-semibold text-muted">lucy.m@fentech.com</div>
                                    </div>
                                    <!--end::Details-->
                                </div>
                                <!--end::Details-->

                                <!--begin::Access menu-->
                                <div class="ms-2 w-100px">
                                    <select class="form-select form-select-solid form-select-sm" data-control="select2" data-dropdown-parent="#kt_modal_invite_friends" data-hide-search="true">
                                        <option value="1" >Guest</option>
                                        <option value="2" >Owner</option>
                                        <option value="3" selected>Can Edit</option>
                                    </select>
                                </div>
                                <!--end::Access menu-->
                            </div>
                            <!--end::User-->
                                            </div>
                    <!--end::List-->
                </div>
                <!--end::Users-->

                <!--begin::Notice-->
                <div class="d-flex flex-stack">
                    <!--begin::Label-->                        
                    <div class="me-5 fw-semibold">
                        <label class="fs-6">Adding Users by Team Members</label>
                        <div class="fs-7 text-muted">If you need more info, please check budget planning</div>
                    </div>
                    <!--end::Label-->     

                    <!--begin::Switch-->
                    <label class="form-check form-switch form-check-custom form-check-solid">
                        <input class="form-check-input" type="checkbox" value="1" checked="checked"/>
                        
                        <span class="form-check-label fw-semibold text-muted">
                            Allowed
                        </span>
                    </label>
                    <!--end::Switch-->
                </div>
                <!--end::Notice-->
            </div>
            <!--end::Modal body-->
        </div>
        <!--end::Modal content-->
    </div>
    <!--end::Modal dialog-->
</div>
{{-- /end invite friends --}}






    <div class="modal fade" id="kt_modal_create_project" tabindex="-1" aria-hidden="true">
        <!--begin::Modal dialog-->
        <div class="modal-dialog modal-fullscreen p-9">
            <!--begin::Modal content-->
            <div class="modal-content modal-rounded">
                <!--begin::Modal header-->
                <div class="modal-header">
                    <!--begin::Modal title-->
                    <h2>Create Project</h2>
                    <!--end::Modal title-->
    
                    <!--begin::Close-->
                    <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                        <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i>                </div>
                    <!--end::Close-->
                </div>
                <!--end::Modal header-->
    
                <!--begin::Modal body-->
                <div class="modal-body scroll-y m-5">
                    <!--begin::Stepper-->
                    <div class="stepper stepper-links d-flex flex-column" id="kt_modal_create_project_stepper">
                        <!--begin::Container-->
                        <div class="container">
                            <!--begin::Nav-->
                            <div class="stepper-nav justify-content-center py-2">
                                <!--begin::Step 1-->
                                <div class="stepper-item me-5 me-md-15 current" data-kt-stepper-element="nav">
                                    <h3 class="stepper-title">
                                        Project Type
                                    </h3>
                                </div>
                                <!--end::Step 1-->
    
                                <!--begin::Step 2-->
                                <div class="stepper-item me-5 me-md-15" data-kt-stepper-element="nav">
                                    <h3 class="stepper-title">
                                        Project Settings
                                    </h3>
                                </div>
                                <!--end::Step 2-->
    
                                <!--begin::Step 3-->
                                <div class="stepper-item me-5 me-md-15" data-kt-stepper-element="nav">
                                    <h3 class="stepper-title">
                                        Budget
                                    </h3>
                                </div>
                                <!--end::Step 3-->
    
                                <!--begin::Step 4-->
                                <div class="stepper-item me-5 me-md-15" data-kt-stepper-element="nav">
                                    <h3 class="stepper-title">
                                        Build A Team
                                    </h3>
                                </div>
                                <!--end::Step 4-->
    
                                <!--begin::Step 5-->
                                <div class="stepper-item me-5 me-md-15" data-kt-stepper-element="nav">
                                    <h3 class="stepper-title">
                                        Set First Target
                                    </h3>
                                </div>
                                <!--end::Step 5-->
    
                                <!--begin::Step 6-->
                                <div class="stepper-item me-5 me-md-15" data-kt-stepper-element="nav">
                                    <h3 class="stepper-title">
                                        Upload Files
                                    </h3>
                                </div>
                                <!--end::Step 6-->
    
                                <!--begin::Step 7-->
                                <div class="stepper-item" data-kt-stepper-element="nav">
                                    <h3 class="stepper-title">
                                        Completed
                                    </h3>
                                </div>
                                <!--end::Step 7-->
                            </div>
                            <!--end::Nav-->
    
                            <!--begin::Form-->
                            <form class="mx-auto w-100 mw-600px pt-15 pb-10" novalidate="novalidate" id="kt_modal_create_project_form" method="post">
                                <!--begin::Type-->
    <div class="current" data-kt-stepper-element="content">
        <!--begin::Wrapper-->
        <div class="w-100">
            <!--begin::Heading-->
            <div class="pb-7 pb-lg-12">
                <!--begin::Title-->
                <h1 class="fw-bold text-dark">Project Type</h1>
                <!--end::Title-->
    
                <!--begin::Description-->
                <div class="text-muted fw-semibold fs-4">
                    If you need more info, please check out
                    <a href="#" class="link-primary fw-bold">FAQ Page</a>
                </div>
                <!--end::Description-->
            </div>
            <!--end::Heading-->
    
            <!--begin::Input group-->
            <div class="fv-row mb-15" data-kt-buttons="true">
                <!--begin::Option-->
                <label class="btn btn-outline btn-outline-dashed btn-active-light-primary d-flex text-start p-6 mb-6 active">
                    <!--begin::Input-->
                    <input class="btn-check" type="radio" checked="checked" name="project_type" value="1"/>
                    <!--end::Input-->
    
                    <!--begin::Label-->
                    <span class="d-flex">
                        <!--begin::Icon-->
                        <i class="ki-duotone ki-profile-circle fs-3hx"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i>                    <!--end::Icon-->
    
                        <!--begin::Info-->
                        <span class="ms-4">
                            <span class="fs-3 fw-bold text-gray-900 mb-2 d-block">Personal Project</span>
    
                            <span class="fw-semibold fs-4 text-muted">
                                If you need more info, please check it out
                            </span>
                        </span>
                        <!--end::Info-->
                    </span>
                    <!--end::Label-->
                </label>
                <!--end::Option-->
    
                <!--begin::Option-->
                <label class="btn btn-outline btn-outline-dashed btn-active-light-primary d-flex text-start p-6">
                    <!--begin::Input-->
                    <input class="btn-check" type="radio" name="project_type" value="2"/>
                    <!--end::Input-->
    
                    <!--begin::Label-->
                    <span class="d-flex">
                        <!--begin::Icon-->
                        <i class="ki-duotone ki-rocket fs-3hx"><span class="path1"></span><span class="path2"></span></i>                    <!--end::Icon-->
    
                        <!--begin::Info-->
                        <span class="ms-4">
                            <span class="fs-3 fw-bold text-gray-900 mb-2 d-block">Team Project</span>
    
                            <span class="fw-semibold fs-4 text-muted">
                                Create corporate account to manage users
                            </span>
                        </span>
                        <!--end::Info-->
                    </span>
                    <!--end::Label-->
                </label>
                <!--end::Option-->
            </div>
            <!--end::Input group-->
            
            <!--begin::Actions-->
            <div class="d-flex justify-content-end">
                <button type="button" class="btn btn-lg btn-primary" data-kt-element="type-next">
                    <span class="indicator-label">
                        Project Settings
                    </span>
                    <span class="indicator-progress">
                        Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                    </span>
                </button>
            </div>
            <!--end::Actions-->
        </div>
        <!--end::Wrapper-->
    </div>
    <!--end::Type-->
                                <!--begin::Settings-->
    <div data-kt-stepper-element="content">
        <!--begin::Wrapper-->
        <div class="w-100">
            <!--begin::Heading-->
            <div class="pb-12">
                <!--begin::Title-->
                <h1 class="fw-bold text-dark">Project Settings</h1>
                <!--end::Title-->
    
                <!--begin::Description-->
                <div class="text-muted fw-semibold fs-4">
                    If you need more info, please check
                    <a href="#" class="link-primary">Project Guidelines</a>
                </div>
                <!--end::Description-->
            </div>
            <!--end::Heading-->
    
            <!--begin::Input group-->
            <div class="fv-row mb-8">            
                <!--begin::Dropzone-->
                <div class="dropzone" id="kt_modal_create_project_settings_logo">
                    <!--begin::Message-->
                    <div class="dz-message needsclick">
                        <!--begin::Icon-->
                        <i class="ki-duotone ki-file-up fs-3hx text-primary"><span class="path1"></span><span class="path2"></span></i>                    <!--end::Icon-->
    
                        <!--begin::Info-->
                        <div class="ms-4">
                            <h3 class="dfs-3 fw-bold text-gray-900 mb-1">Drop files here or click to upload.</h3>
                            <span class="fw-semibold fs-4 text-muted">Upload up to 10 files</span>
                        </div>
                        <!--end::Info-->
                    </div>
                </div>
                <!--end::Dropzone-->
            </div>
            <!--end::Input group-->
    
            <!--begin::Input group-->
            <div class="fv-row mb-8">
                <!--begin::Label-->
                <label class="required fs-6 fw-semibold mb-2">Customer</label>
                <!--end::Label-->
    
                <!--begin::Input-->
                <select class="form-select form-select-solid" data-control="select2" data-hide-search="true" data-placeholder="Select..." name="settings_customer">
                    <option></option>
                    <option value="1">Keenthemes</option>
                    <option value="2">CRM App</option>
                </select>
                <!--end::Input-->
            </div>
            <!--end::Input group-->
    
            <!--begin::Input group-->
            <div class="fv-row mb-8">
                <!--begin::Label-->
                <label class="d-flex align-items-center fs-6 fw-semibold form-label mb-2">
                    <span class="required">Project Name</span>
    
                    
    <span class="ms-1"  data-bs-toggle="tooltip" title="Specify project name" >
        <i class="ki-duotone ki-information-5 text-gray-500 fs-6"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i></span>            </label>
                <!--end::Label-->
                
                <!--begin::Input-->
                <input type="text" class="form-control form-control-solid" placeholder="Enter Project Name" value="StockPro Mobile App" name="settings_name"/>
                <!--end::Input-->
            </div>
            <!--end::Input group-->
    
            <!--begin::Input group-->
            <div class="fv-row mb-8">
                <!--begin::Label-->
                <label class="required fs-6 fw-semibold mb-2">Project Description</label>
                <!--end::Label-->
    
                <!--begin::Input-->
                <textarea class="form-control form-control-solid" rows="3" placeholder="Enter Project Description" name="settings_description">
                Experience share market at your fingertips with TICK PRO stock investment mobile trading app
                </textarea>
                <!--end::Input-->
            </div>
            <!--end::Input group-->
    
            <!--begin::Input group-->
            <div class="fv-row mb-8">
                <!--begin::Label-->
                <label class="required fs-6 fw-semibold mb-2">Release Date</label>
                <!--end::Label-->
    
                <!--begin::Wrapper-->
                <div class="position-relative d-flex align-items-center">
                    <!--begin::Icon-->
                    <i class="ki-duotone ki-calendar-8 fs-2 position-absolute mx-4"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span></i>                <!--end::Icon-->
    
                    <!--begin::Input-->
                    <input class="form-control form-control-solid ps-12" placeholder="Pick date range" name="settings_release_date"/>
                    <!--end::Input-->
                </div>
                <!--end::Wrapper-->
            </div>
            <!--end::Input group-->
    
            <!--begin::Input group-->
            <div class="fv-row mb-15">
                <!--begin::Wrapper-->
                <div class="d-flex flex-stack">
                    <!--begin::Label-->
                    <div class="me-5">
                        <label class="required fs-6 fw-semibold">Notifications</label>
                        <div class="fs-7 fw-semibold text-muted">Allow Notifications by Phone or Email</div>
                    </div>
                    <!--end::Label-->
                    
                    <!--begin::Checkboxes-->
                    <div class="d-flex">
                        <!--begin::Checkbox-->
                        <label class="form-check form-check-custom form-check-solid me-10">
                            <!--begin::Input-->
                            <input class="form-check-input h-20px w-20px" type="checkbox" value="email" name="settings_notifications[]"/>
                            <!--end::Input-->
    
                            <!--begin::Label-->
                            <span class="form-check-label fw-semibold">
                                Email
                            </span>
                            <!--end::Label-->
                        </label>
                        <!--end::Checkbox-->
    
                        <!--begin::Checkbox-->
                        <label class="form-check form-check-custom form-check-solid">
                            <!--begin::Input-->
                            <input class="form-check-input h-20px w-20px" type="checkbox" value="phone" checked name="settings_notifications[]"/>
                            <!--end::Input-->
    
                            <!--begin::Label-->
                            <span class="form-check-label fw-semibold">
                                Phone
                            </span>
                            <!--end::Label-->
                        </label>
                        <!--end::Checkbox-->
                    </div>
                    <!--end::Checkboxes-->
                </div>
                <!--begin::Wrapper-->
            </div>
            <!--end::Input group-->
    
            <!--begin::Actions-->
            <div class="d-flex flex-stack">
                <button type="button" class="btn btn-lg btn-light me-3" data-kt-element="settings-previous">
                    Project Type
                </button>
                
                <button type="button" class="btn btn-lg btn-primary" data-kt-element="settings-next">
                    <span class="indicator-label">
                        Budget
                    </span>
                    <span class="indicator-progress">
                        Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                    </span>
                </button>
            </div>
            <!--end::Actions-->
        </div>
        <!--end::Wrapper-->
    </div>
    <!--end::Settings-->
                                <!--begin::Budget-->
    <div data-kt-stepper-element="content">
        <!--begin::Wrapper-->
        <div class="w-100">
            <!--begin::Heading-->
            <div class="pb-10 pb-lg-12">
                <!--begin::Title-->
                <h1 class="fw-bold text-dark">Budget</h1>
                <!--end::Title-->
    
                <!--begin::Description-->
                <div class="text-muted fw-semibold fs-4">
                    If you need more info, please check
                    <a href="#" class="link-primary">Project Guidelines</a>
                </div>
                <!--end::Description-->
            </div>
            <!--end::Heading-->
    
            <!--begin::Input group-->
            <div class="fv-row mb-8">
                <!--begin::Label-->
                <label class="d-flex align-items-center fs-6 fw-semibold mb-2">
                    <span class="required">Setup Budget</span>
                    
    <span class="lh-1 ms-1"  data-bs-toggle="popover" data-bs-trigger="hover" data-bs-html="true" data-bs-content="
            &lt;div class=&#039;p-4 rounded bg-light&#039;&gt;
                &lt;div class=&#039;d-flex flex-stack text-muted mb-4&#039;&gt;
                    &lt;i class=&quot;ki-duotone ki-bank fs-3 me-3&quot;&gt;&lt;span class=&quot;path1&quot;&gt;&lt;/span&gt;&lt;span class=&quot;path2&quot;&gt;&lt;/span&gt;&lt;/i&gt;
                    &lt;div class=&#039;fw-bold&#039;&gt;INCBANK **** 1245 STATEMENT&lt;/div&gt;
                &lt;/div&gt;
    
                &lt;div class=&#039;d-flex flex-stack fw-semibold text-gray-600&#039;&gt;
                    &lt;div&gt;Amount&lt;/div&gt;
                    &lt;div&gt;Transaction&lt;/div&gt;
                &lt;/div&gt;
    
                &lt;div class=&#039;separator separator-dashed my-2&#039;&gt;&lt;/div&gt;
    
                &lt;div class=&#039;d-flex flex-stack text-dark fw-bold mb-2&#039;&gt;
                    &lt;div&gt;USD345.00&lt;/div&gt;
                    &lt;div&gt;KEENTHEMES*&lt;/div&gt;
                &lt;/div&gt;
    
                &lt;div class=&#039;d-flex flex-stack text-muted mb-2&#039;&gt;
                    &lt;div&gt;USD75.00&lt;/div&gt;
                    &lt;div&gt;Hosting fee&lt;/div&gt;
                &lt;/div&gt;
    
                &lt;div class=&#039;d-flex flex-stack text-muted&#039;&gt;
                    &lt;div&gt;USD3,950.00&lt;/div&gt;
                    &lt;div&gt;Payrol&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        " >
        <i class="ki-duotone ki-information-5 text-gray-500 fs-6"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i></span>            </label>
                <!--end::Label-->
    
                <!--begin::Dialer-->
                <div class="position-relative w-lg-250px"
                    id="kt_modal_create_project_budget_setup"
                    data-kt-dialer="true"
                    data-kt-dialer-min="50"
                    data-kt-dialer-max="50000"
                    data-kt-dialer-step="100"
                    data-kt-dialer-prefix="$"
                    data-kt-dialer-decimals="2">
    
                    <!--begin::Decrease control-->
                    <button type="button" class="btn btn-icon btn-active-color-gray-700 position-absolute translate-middle-y top-50 start-0" data-kt-dialer-control="decrease">
                        <i class="ki-duotone ki-minus-circle fs-1"><span class="path1"></span><span class="path2"></span></i>                </button>
                    <!--end::Decrease control-->
    
                    <!--begin::Input control-->
                    <input type="text" class="form-control form-control-solid border-0 ps-12" data-kt-dialer-control="input" placeholder="Amount" name="budget_setup" readonly value="$50"/>
                    <!--end::Input control-->
    
                    <!--begin::Increase control-->
                    <button type="button" class="btn btn-icon btn-active-color-gray-700 position-absolute translate-middle-y top-50 end-0" data-kt-dialer-control="increase">
                        <i class="ki-duotone ki-plus-circle fs-1"><span class="path1"></span><span class="path2"></span></i>                </button>
                    <!--end::Increase control-->
                </div>
                <!--end::Dialer-->  
            </div>
            <!--end::Input group-->
    
            <!--begin::Input group-->
            <div class="fv-row mb-8">
                <!--begin::Label-->
                <label class="fs-6 fw-semibold mb-2">Budget Usage</label>
                <!--end::Label-->
    
                <!--begin::Row-->
                <div class="row g-9" data-kt-buttons="true" data-kt-buttons-target="[data-kt-button='true']">
                    <!--begin::Col-->
                    <div class="col-md-6 col-lg-12 col-xxl-6">
                        <!--begin::Option-->
                        <label class="btn btn-outline btn-outline-dashed btn-active-light-primary active d-flex text-start p-6" data-kt-button="true">
                            <!--begin::Radio-->
                            <span class="form-check form-check-custom form-check-solid form-check-sm align-items-start mt-1">
                                <input class="form-check-input" type="radio" name="budget_usage" value="1" checked="checked" />
                            </span>
                            <!--end::Radio-->
    
                            <!--begin::Info-->
                            <span class="ms-5">
                                <span class="fs-4 fw-bold text-gray-800 mb-2 d-block">Precise Usage</span>
    
                                <span class="fw-semibold fs-7 text-gray-600">
                                    Withdraw money to your bank account per transaction under $50,000 budget
                                </span>
                            </span>
                            <!--end::Info-->
                        </label>
                        <!--end::Option-->
                    </div>
                    <!--end::Col-->
    
                    <!--begin::Col-->
                    <div class="col-md-6 col-lg-12 col-xxl-6">
                        <!--begin::Option-->
                        <label class="btn btn-outline btn-outline-dashed btn-active-light-primary d-flex text-start p-6" data-kt-button="true">
                            <!--begin::Radio-->
                            <span class="form-check form-check-custom form-check-solid form-check-sm align-items-start mt-1">
                                <input class="form-check-input" type="radio" name="budget_usage" value="2" />
                            </span>
                            <!--end::Radio-->
    
                            <!--begin::Info-->
                            <span class="ms-5">
                                <span class="fs-4 fw-bold text-gray-800 mb-2 d-block">Extreme Usage</span>
                                <span class="fw-semibold fs-7 text-gray-600">
                                    Withdraw money to your bank account per transaction under $50,000 budget
                                </span>
                            </span>
                            <!--end::Info-->
                        </label>
                        <!--end::Option-->
                    </div>
                    <!--end::Col-->
                </div>
                <!--end::Row-->
            </div>
            <!--end::Input group-->
    
            <!--begin::Input group-->
            <div class="fv-row mb-15">
                <!--begin::Wrapper-->
                <div class="d-flex flex-stack">
                    <!--begin::Label-->
                    <div class="me-5">
                        <label class="fs-6 fw-semibold">Allow Changes in Budget</label>
                        <div class="fs-7 fw-semibold text-muted">If you need more info, please check budget planning</div>
                    </div>
                    <!--end::Label-->
    
                    <!--begin::Switch-->
                    <label class="form-check form-switch form-check-custom form-check-solid">
                        <input class="form-check-input" type="checkbox" value="1" name="budget_allow" checked="checked"/>
                        <span class="form-check-label fw-semibold text-muted">
                            Allowed
                        </span>
                    </label>
                    <!--end::Switch-->
                </div>
                <!--end::Wrapper-->
            </div>
            <!--end::Input group-->
    
            <!--begin::Actions-->
            <div class="d-flex flex-stack">
                <button type="button" class="btn btn-lg btn-light me-3" data-kt-element="budget-previous">
                    Project Settings
                </button>
                
                <button type="button" class="btn btn-lg btn-primary" data-kt-element="budget-next">
                    <span class="indicator-label">
                        Build Team
                    </span>
                    <span class="indicator-progress">
                        Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                    </span>
                </button>
            </div>
            <!--end::Actions-->
        </div>
        <!--end::Wrapper-->
    </div>
    <!--end::Budget-->
                                
    <!--begin::Team-->
    <div data-kt-stepper-element="content">
        <!--begin::Wrapper-->
        <div class="w-100">
            <!--begin::Heading-->
            <div class="pb-12">
                <!--begin::Title-->
                <h1 class="fw-bold text-dark">Build a Team</h1>
                <!--end::Title-->
    
                <!--begin::Description-->
                <div class="text-muted fw-semibold fs-4">
                    If you need more info, please check
                    <a href="#" class="link-primary">Project Guidelines</a>
                </div>
                <!--end::Description-->
            </div>
            <!--end::Heading-->
    
            <!--begin::Input group-->
            <div class="mb-8">
                <!--begin::Label-->
                <label class="fs-6 fw-semibold mb-2">Invite Teammates</label>
                <!--end::Label-->
    
                <!--begin::Input-->
                <input type="text" class="form-control form-control-solid" placeholder="Add project memnbers by name or email.." name="invite_teammates" />
                <!--end::Input-->
            </div>
            <!--end::Input group-->
    
            <!--begin::Input group-->
            <div class="mb-8">
                <!--begin::Label-->
                <div class="fs-6 fw-semibold mb-2">Team Members</div>
                <!--end::Label-->
    
                <!--begin::Users-->
                <div class="mh-300px scroll-y me-n7 pe-7">
                                                            <!--begin::User-->
                        <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                            <!--begin::Details-->
                            <div class="d-flex align-items-center">
                                <!--begin::Avatar-->
                                <div class="symbol symbol-35px symbol-circle">
                                                                        <img alt="Pic" src="https://preview.keenthemes.com/craft/assets/media/avatars/300-6.jpg" />
                                                                </div>
                                <!--end::Avatar-->
    
                                <!--begin::Details-->
                                <div class="ms-5">
                                    <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Emma Smith</a>
    
                                    <div class="fw-semibold text-muted">smith@kpmg.com</div>
                                </div>
                                <!--end::Details-->
                            </div>
                            <!--end::Details-->
    
                            <!--begin::Access menu-->
                            <div class="ms-2 w-100px">
                                <select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
                                    <option value="1" >Guest</option>
                                    <option value="2" selected>Owner</option>
                                    <option value="3" >Can Edit</option>
                                </select>
                            </div>
                            <!--end::Access menu-->
                        </div>
                        <!--end::User-->
                                                            <!--begin::User-->
                        <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                            <!--begin::Details-->
                            <div class="d-flex align-items-center">
                                <!--begin::Avatar-->
                                <div class="symbol symbol-35px symbol-circle">
                                                                        <span class="symbol-label bg-light-danger text-danger fw-semibold">
                                            M                                    </span>
                                                                </div>
                                <!--end::Avatar-->
    
                                <!--begin::Details-->
                                <div class="ms-5">
                                    <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Melody Macy</a>
    
                                    <div class="fw-semibold text-muted">melody@altbox.com</div>
                                </div>
                                <!--end::Details-->
                            </div>
                            <!--end::Details-->
    
                            <!--begin::Access menu-->
                            <div class="ms-2 w-100px">
                                <select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
                                    <option value="1" selected>Guest</option>
                                    <option value="2" >Owner</option>
                                    <option value="3" >Can Edit</option>
                                </select>
                            </div>
                            <!--end::Access menu-->
                        </div>
                        <!--end::User-->
                                                            <!--begin::User-->
                        <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                            <!--begin::Details-->
                            <div class="d-flex align-items-center">
                                <!--begin::Avatar-->
                                <div class="symbol symbol-35px symbol-circle">
                                                                        <img alt="Pic" src="https://preview.keenthemes.com/craft/assets/media/avatars/300-1.jpg" />
                                                                </div>
                                <!--end::Avatar-->
    
                                <!--begin::Details-->
                                <div class="ms-5">
                                    <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Max Smith</a>
    
                                    <div class="fw-semibold text-muted">max@kt.com</div>
                                </div>
                                <!--end::Details-->
                            </div>
                            <!--end::Details-->
    
                            <!--begin::Access menu-->
                            <div class="ms-2 w-100px">
                                <select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
                                    <option value="1" >Guest</option>
                                    <option value="2" >Owner</option>
                                    <option value="3" selected>Can Edit</option>
                                </select>
                            </div>
                            <!--end::Access menu-->
                        </div>
                        <!--end::User-->
                                                            <!--begin::User-->
                        <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                            <!--begin::Details-->
                            <div class="d-flex align-items-center">
                                <!--begin::Avatar-->
                                <div class="symbol symbol-35px symbol-circle">
                                                                        <img alt="Pic" src="https://preview.keenthemes.com/craft/assets/media/avatars/300-5.jpg" />
                                                                </div>
                                <!--end::Avatar-->
    
                                <!--begin::Details-->
                                <div class="ms-5">
                                    <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Sean Bean</a>
    
                                    <div class="fw-semibold text-muted">sean@dellito.com</div>
                                </div>
                                <!--end::Details-->
                            </div>
                            <!--end::Details-->
    
                            <!--begin::Access menu-->
                            <div class="ms-2 w-100px">
                                <select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
                                    <option value="1" >Guest</option>
                                    <option value="2" selected>Owner</option>
                                    <option value="3" >Can Edit</option>
                                </select>
                            </div>
                            <!--end::Access menu-->
                        </div>
                        <!--end::User-->
                                                            <!--begin::User-->
                        <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                            <!--begin::Details-->
                            <div class="d-flex align-items-center">
                                <!--begin::Avatar-->
                                <div class="symbol symbol-35px symbol-circle">
                                                                        <img alt="Pic" src="https://preview.keenthemes.com/craft/assets/media/avatars/300-25.jpg" />
                                                                </div>
                                <!--end::Avatar-->
    
                                <!--begin::Details-->
                                <div class="ms-5">
                                    <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Brian Cox</a>
    
                                    <div class="fw-semibold text-muted">brian@exchange.com</div>
                                </div>
                                <!--end::Details-->
                            </div>
                            <!--end::Details-->
    
                            <!--begin::Access menu-->
                            <div class="ms-2 w-100px">
                                <select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
                                    <option value="1" >Guest</option>
                                    <option value="2" >Owner</option>
                                    <option value="3" selected>Can Edit</option>
                                </select>
                            </div>
                            <!--end::Access menu-->
                        </div>
                        <!--end::User-->
                                                            <!--begin::User-->
                        <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                            <!--begin::Details-->
                            <div class="d-flex align-items-center">
                                <!--begin::Avatar-->
                                <div class="symbol symbol-35px symbol-circle">
                                                                        <span class="symbol-label bg-light-warning text-warning fw-semibold">
                                            C                                    </span>
                                                                </div>
                                <!--end::Avatar-->
    
                                <!--begin::Details-->
                                <div class="ms-5">
                                    <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Mikaela Collins</a>
    
                                    <div class="fw-semibold text-muted">mik@pex.com</div>
                                </div>
                                <!--end::Details-->
                            </div>
                            <!--end::Details-->
    
                            <!--begin::Access menu-->
                            <div class="ms-2 w-100px">
                                <select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
                                    <option value="1" >Guest</option>
                                    <option value="2" selected>Owner</option>
                                    <option value="3" >Can Edit</option>
                                </select>
                            </div>
                            <!--end::Access menu-->
                        </div>
                        <!--end::User-->
                                                            <!--begin::User-->
                        <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                            <!--begin::Details-->
                            <div class="d-flex align-items-center">
                                <!--begin::Avatar-->
                                <div class="symbol symbol-35px symbol-circle">
                                                                        <img alt="Pic" src="https://preview.keenthemes.com/craft/assets/media/avatars/300-9.jpg" />
                                                                </div>
                                <!--end::Avatar-->
    
                                <!--begin::Details-->
                                <div class="ms-5">
                                    <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Francis Mitcham</a>
    
                                    <div class="fw-semibold text-muted">f.mit@kpmg.com</div>
                                </div>
                                <!--end::Details-->
                            </div>
                            <!--end::Details-->
    
                            <!--begin::Access menu-->
                            <div class="ms-2 w-100px">
                                <select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
                                    <option value="1" >Guest</option>
                                    <option value="2" >Owner</option>
                                    <option value="3" selected>Can Edit</option>
                                </select>
                            </div>
                            <!--end::Access menu-->
                        </div>
                        <!--end::User-->
                                                            <!--begin::User-->
                        <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                            <!--begin::Details-->
                            <div class="d-flex align-items-center">
                                <!--begin::Avatar-->
                                <div class="symbol symbol-35px symbol-circle">
                                                                        <span class="symbol-label bg-light-danger text-danger fw-semibold">
                                            O                                    </span>
                                                                </div>
                                <!--end::Avatar-->
    
                                <!--begin::Details-->
                                <div class="ms-5">
                                    <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Olivia Wild</a>
    
                                    <div class="fw-semibold text-muted">olivia@corpmail.com</div>
                                </div>
                                <!--end::Details-->
                            </div>
                            <!--end::Details-->
    
                            <!--begin::Access menu-->
                            <div class="ms-2 w-100px">
                                <select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
                                    <option value="1" >Guest</option>
                                    <option value="2" selected>Owner</option>
                                    <option value="3" >Can Edit</option>
                                </select>
                            </div>
                            <!--end::Access menu-->
                        </div>
                        <!--end::User-->
                                                            <!--begin::User-->
                        <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                            <!--begin::Details-->
                            <div class="d-flex align-items-center">
                                <!--begin::Avatar-->
                                <div class="symbol symbol-35px symbol-circle">
                                                                        <span class="symbol-label bg-light-primary text-primary fw-semibold">
                                            N                                    </span>
                                                                </div>
                                <!--end::Avatar-->
    
                                <!--begin::Details-->
                                <div class="ms-5">
                                    <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Neil Owen</a>
    
                                    <div class="fw-semibold text-muted">owen.neil@gmail.com</div>
                                </div>
                                <!--end::Details-->
                            </div>
                            <!--end::Details-->
    
                            <!--begin::Access menu-->
                            <div class="ms-2 w-100px">
                                <select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
                                    <option value="1" selected>Guest</option>
                                    <option value="2" >Owner</option>
                                    <option value="3" >Can Edit</option>
                                </select>
                            </div>
                            <!--end::Access menu-->
                        </div>
                        <!--end::User-->
                                                            <!--begin::User-->
                        <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                            <!--begin::Details-->
                            <div class="d-flex align-items-center">
                                <!--begin::Avatar-->
                                <div class="symbol symbol-35px symbol-circle">
                                                                        <img alt="Pic" src="https://preview.keenthemes.com/craft/assets/media/avatars/300-23.jpg" />
                                                                </div>
                                <!--end::Avatar-->
    
                                <!--begin::Details-->
                                <div class="ms-5">
                                    <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Dan Wilson</a>
    
                                    <div class="fw-semibold text-muted">dam@consilting.com</div>
                                </div>
                                <!--end::Details-->
                            </div>
                            <!--end::Details-->
    
                            <!--begin::Access menu-->
                            <div class="ms-2 w-100px">
                                <select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
                                    <option value="1" >Guest</option>
                                    <option value="2" >Owner</option>
                                    <option value="3" selected>Can Edit</option>
                                </select>
                            </div>
                            <!--end::Access menu-->
                        </div>
                        <!--end::User-->
                                                            <!--begin::User-->
                        <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                            <!--begin::Details-->
                            <div class="d-flex align-items-center">
                                <!--begin::Avatar-->
                                <div class="symbol symbol-35px symbol-circle">
                                                                        <span class="symbol-label bg-light-danger text-danger fw-semibold">
                                            E                                    </span>
                                                                </div>
                                <!--end::Avatar-->
    
                                <!--begin::Details-->
                                <div class="ms-5">
                                    <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Emma Bold</a>
    
                                    <div class="fw-semibold text-muted">emma@intenso.com</div>
                                </div>
                                <!--end::Details-->
                            </div>
                            <!--end::Details-->
    
                            <!--begin::Access menu-->
                            <div class="ms-2 w-100px">
                                <select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
                                    <option value="1" >Guest</option>
                                    <option value="2" selected>Owner</option>
                                    <option value="3" >Can Edit</option>
                                </select>
                            </div>
                            <!--end::Access menu-->
                        </div>
                        <!--end::User-->
                                                            <!--begin::User-->
                        <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                            <!--begin::Details-->
                            <div class="d-flex align-items-center">
                                <!--begin::Avatar-->
                                <div class="symbol symbol-35px symbol-circle">
                                                                        <img alt="Pic" src="https://preview.keenthemes.com/craft/assets/media/avatars/300-12.jpg" />
                                                                </div>
                                <!--end::Avatar-->
    
                                <!--begin::Details-->
                                <div class="ms-5">
                                    <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Ana Crown</a>
    
                                    <div class="fw-semibold text-muted">ana.cf@limtel.com</div>
                                </div>
                                <!--end::Details-->
                            </div>
                            <!--end::Details-->
    
                            <!--begin::Access menu-->
                            <div class="ms-2 w-100px">
                                <select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
                                    <option value="1" selected>Guest</option>
                                    <option value="2" >Owner</option>
                                    <option value="3" >Can Edit</option>
                                </select>
                            </div>
                            <!--end::Access menu-->
                        </div>
                        <!--end::User-->
                                                            <!--begin::User-->
                        <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                            <!--begin::Details-->
                            <div class="d-flex align-items-center">
                                <!--begin::Avatar-->
                                <div class="symbol symbol-35px symbol-circle">
                                                                        <span class="symbol-label bg-light-info text-info fw-semibold">
                                            A                                    </span>
                                                                </div>
                                <!--end::Avatar-->
    
                                <!--begin::Details-->
                                <div class="ms-5">
                                    <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Robert Doe</a>
    
                                    <div class="fw-semibold text-muted">robert@benko.com</div>
                                </div>
                                <!--end::Details-->
                            </div>
                            <!--end::Details-->
    
                            <!--begin::Access menu-->
                            <div class="ms-2 w-100px">
                                <select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
                                    <option value="1" >Guest</option>
                                    <option value="2" >Owner</option>
                                    <option value="3" selected>Can Edit</option>
                                </select>
                            </div>
                            <!--end::Access menu-->
                        </div>
                        <!--end::User-->
                                                            <!--begin::User-->
                        <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                            <!--begin::Details-->
                            <div class="d-flex align-items-center">
                                <!--begin::Avatar-->
                                <div class="symbol symbol-35px symbol-circle">
                                                                        <img alt="Pic" src="https://preview.keenthemes.com/craft/assets/media/avatars/300-13.jpg" />
                                                                </div>
                                <!--end::Avatar-->
    
                                <!--begin::Details-->
                                <div class="ms-5">
                                    <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">John Miller</a>
    
                                    <div class="fw-semibold text-muted">miller@mapple.com</div>
                                </div>
                                <!--end::Details-->
                            </div>
                            <!--end::Details-->
    
                            <!--begin::Access menu-->
                            <div class="ms-2 w-100px">
                                <select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
                                    <option value="1" >Guest</option>
                                    <option value="2" >Owner</option>
                                    <option value="3" selected>Can Edit</option>
                                </select>
                            </div>
                            <!--end::Access menu-->
                        </div>
                        <!--end::User-->
                                                            <!--begin::User-->
                        <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                            <!--begin::Details-->
                            <div class="d-flex align-items-center">
                                <!--begin::Avatar-->
                                <div class="symbol symbol-35px symbol-circle">
                                                                        <span class="symbol-label bg-light-success text-success fw-semibold">
                                            L                                    </span>
                                                                </div>
                                <!--end::Avatar-->
    
                                <!--begin::Details-->
                                <div class="ms-5">
                                    <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Lucy Kunic</a>
    
                                    <div class="fw-semibold text-muted">lucy.m@fentech.com</div>
                                </div>
                                <!--end::Details-->
                            </div>
                            <!--end::Details-->
    
                            <!--begin::Access menu-->
                            <div class="ms-2 w-100px">
                                <select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
                                    <option value="1" >Guest</option>
                                    <option value="2" selected>Owner</option>
                                    <option value="3" >Can Edit</option>
                                </select>
                            </div>
                            <!--end::Access menu-->
                        </div>
                        <!--end::User-->
                                                            <!--begin::User-->
                        <div class="d-flex flex-stack py-4 border-bottom border-gray-300 border-bottom-dashed">
                            <!--begin::Details-->
                            <div class="d-flex align-items-center">
                                <!--begin::Avatar-->
                                <div class="symbol symbol-35px symbol-circle">
                                                                        <img alt="Pic" src="https://preview.keenthemes.com/craft/assets/media/avatars/300-21.jpg" />
                                                                </div>
                                <!--end::Avatar-->
    
                                <!--begin::Details-->
                                <div class="ms-5">
                                    <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Ethan Wilder</a>
    
                                    <div class="fw-semibold text-muted">ethan@loop.com.au</div>
                                </div>
                                <!--end::Details-->
                            </div>
                            <!--end::Details-->
    
                            <!--begin::Access menu-->
                            <div class="ms-2 w-100px">
                                <select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
                                    <option value="1" selected>Guest</option>
                                    <option value="2" >Owner</option>
                                    <option value="3" >Can Edit</option>
                                </select>
                            </div>
                            <!--end::Access menu-->
                        </div>
                        <!--end::User-->
                                                            <!--begin::User-->
                        <div class="d-flex flex-stack py-4 ">
                            <!--begin::Details-->
                            <div class="d-flex align-items-center">
                                <!--begin::Avatar-->
                                <div class="symbol symbol-35px symbol-circle">
                                                                        <img alt="Pic" src="https://preview.keenthemes.com/craft/assets/media/avatars/300-12.jpg" />
                                                                </div>
                                <!--end::Avatar-->
    
                                <!--begin::Details-->
                                <div class="ms-5">
                                    <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Ana Crown</a>
    
                                    <div class="fw-semibold text-muted">ana.cf@limtel.com</div>
                                </div>
                                <!--end::Details-->
                            </div>
                            <!--end::Details-->
    
                            <!--begin::Access menu-->
                            <div class="ms-2 w-100px">
                                <select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true">
                                    <option value="1" >Guest</option>
                                    <option value="2" >Owner</option>
                                    <option value="3" selected>Can Edit</option>
                                </select>
                            </div>
                            <!--end::Access menu-->
                        </div>
                        <!--end::User-->
                                </div>
                <!--end::Users-->
            </div>
            <!--end::Input group-->
    
            <!--begin::Notice-->
            <div class="d-flex flex-stack mb-15">
                <!--begin::Label-->                        
                <div class="me-5 fw-semibold">
                    <label class="fs-6">Adding Users by Team Members</label>
                    <div class="fs-7 text-muted">If you need more info, please check budget planning</div>
                </div>
                <!--end::Label-->     
    
                <!--begin::Switch-->
                <label class="form-check form-switch form-check-custom form-check-solid">
                    <input class="form-check-input" type="checkbox" value="" checked="checked"/>
                </label>
                <!--end::Switch-->
            </div>
            <!--end::Notice-->
    
            <!--begin::Actions-->
            <div class="d-flex flex-stack">
                <button type="button" class="btn btn-lg btn-light me-3" data-kt-element="team-previous">
                    Budget
                </button>
                
                <button type="button" class="btn btn-lg btn-primary" data-kt-element="team-next">
                    <span class="indicator-label">
                        Set Target
                    </span>
                    <span class="indicator-progress">
                        Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                    </span>                
                </button>
            </div>
            <!--end::Actions-->
        </div>
        <!--end::Wrapper-->
    </div>
    <!--end::Team-->
                                
    <!--begin::Targets-->
    <div data-kt-stepper-element="content">
        <!--begin::Wrapper-->
        <div class="w-100">
            <!--begin::Heading-->
            <div class="pb-12">
                <!--begin::Title-->
                <h1 class="fw-bold text-dark">Set First Target</h1>
                <!--end::Title-->
    
                <!--begin::Title-->
                <div class="text-muted fw-semibold fs-4">
                    If you need more info, please check
                    <a href="#" class="link-primary">Project Guidelines</a>
                </div>
                <!--end::Title-->
            </div>
            <!--end::Heading-->
    
            <!--begin::Input group-->
            <div class="fv-row mb-8">
                <label class="fs-6 fw-semibold mb-2">Target Title</label>
                <input type="text" class="form-control form-control-solid" placeholder="Enter Target Title" name="target_title" name="Project Launch" />
            </div>
            <!--end::Input group-->
    
            <!--begin::Input group-->
            <div class="row g-9 mb-8">
                <!--begin::Col-->
                <div class="col-md-6 fv-row">
                    <label class="required fs-6 fw-semibold mb-2">Assign</label>
                    <select class="form-select form-select-solid" data-control="select2" data-hide-search="true" data-placeholder="Select a Team Member" name="target_assign">
                        <option></option>
                        <option value="1">Karina Clark</option>
                        <option value="2" selected>Robert Doe</option>
                        <option value="3">Niel Owen</option>
                        <option value="4">Olivia Wild</option>
                        <option value="5">Sean Bean</option>
                    </select>
                </div>
                <!--end::Col-->
    
                <!--begin::Col-->
                <div class="col-md-6 fv-row">
                    <label class="required fs-6 fw-semibold mb-2">Due Date</label>
                    <div class="position-relative d-flex align-items-center">
                        <!--begin::Icon-->
                        <i class="ki-duotone ki-calendar-8 fs-2 position-absolute mx-4"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span></i>                    <!--end::Icon-->
    
                        <!--begin::Datepicker-->
                        <input class="form-control form-control-solid ps-12" placeholder="Pick date range" name="target_due_date" />
                        <!--end::Datepicker-->
                    </div>
                </div>
                <!--end::Col-->
            </div>
            <!--end::Input group-->
    
            <!--begin::Input group-->
            <div class="fv-row mb-8">
                <label class="fs-6 fw-semibold mb-2">Target Details</label>
                <textarea class="form-control form-control-solid" rows="2" name="target_details" placeholder="Type Target Details">
                Experience share market at your fingertips with TICK PRO stock investment mobile trading app
                </textarea>
            </div>
            <!--end::Input group-->
    
            <!--begin::Input group-->
            <div class="fv-row mb-8">
                <label class="required fs-6 fw-semibold mb-2">Tags</label>
                <input class="form-control form-control-solid" value="Important, Urgent" name="target_tags"/>
            </div>
            <!--end::Input group-->
    
            <!--begin::Input group-->
            <div class="fv-row mb-8">
                <!--begin::Wrapper-->
                <div class="d-flex flex-stack">
                    <!--begin::Label-->
                    <div class="me-5">
                        <label class="fs-6 fw-semibold">Allow Changes in Budget</label>
                        <div class="fs-7 fw-semibold text-muted">If you need more info, please check budget planning</div>
                    </div>
                    <!--end::Label-->
    
                    <!--begin::Switch-->
                    <label class="form-check form-switch form-check-custom form-check-solid">
                        <input class="form-check-input" type="checkbox" value="1" name="target_allow" checked="checked"/>
                        <span class="form-check-label fw-semibold text-muted">
                            Allowed
                        </span>
                    </label>
                    <!--end::Switch-->
                </div>
                <!--end::Wrapper-->
            </div>
            <!--end::Input group-->
    
            <!--begin::Input group-->
            <div class="fv-row mb-15">
                <!--begin::Wrapper-->
                <div class="d-flex flex-stack">
                    <!--begin::Label-->
                    <div class="me-5">
                        <label class="fs-6 fw-semibold">Notifications</label>
                        <div class="fs-7 fw-semibold text-muted">Allow Notifications by Phone or Email</div>
                    </div>
                    <!--end::Label-->
                    
                    <!--begin::Checkboxes-->
                    <div class="d-flex">
                        <!--begin::Checkbox-->
                        <label class="form-check form-check-custom form-check-solid me-10">
                            <!--begin::Input-->
                            <input class="form-check-input h-20px w-20px" type="checkbox" value="email" name="target_notifications[]"/>
                            <!--end::Input-->
    
                            <!--begin::Label-->
                            <span class="form-check-label fw-semibold">
                                Email
                            </span>
                            <!--end::Label-->
                        </label>
                        <!--end::Checkbox-->
    
                        <!--begin::Checkbox-->
                        <label class="form-check form-check-custom form-check-solid">
                            <!--begin::Input-->
                            <input class="form-check-input h-20px w-20px" type="checkbox" value="phone" checked name="target_notifications[]"/>
                            <!--end::Input-->
    
                            <!--begin::Label-->
                            <span class="form-check-label fw-semibold">
                                Phone
                            </span>
                            <!--end::Label-->
                        </label>
                        <!--end::Checkbox-->
                    </div>
                    <!--end::Checkboxes-->
                </div>
                <!--end::Wrapper-->
            </div>
            <!--end::Input group-->
    
            <!--begin::Actions-->
            <div class="d-flex flex-stack">
                <button type="button" class="btn btn-lg btn-light me-3" data-kt-element="targets-previous">
                    Build a Team
                </button>
                    
                <button type="button" class="btn btn-lg btn-primary" data-kt-element="targets-next">
                    <span class="indicator-label">
                        Upload Files
                    </span>
                    <span class="indicator-progress">
                        Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                    </span>
                </button>
            </div>
            <!--end::Actions-->
        </div>
        <!--end::Wrapper-->
    </div>
    <!--end::Targets-->
                                
    <!--begin::Files-->
    <div data-kt-stepper-element="content">
        <!--begin::Wrapper-->   
        <div class="w-100">
            <!--begin::Heading-->
            <div class="pb-10 pb-lg-12">
                <!--begin::Title-->
                <h1 class="fw-bold text-dark">Upload Files</h1>
                <!--end::Title-->
    
                <!--begin::Description-->
                <div class="text-muted fw-semibold fs-4">
                    If you need more info, please check
                    <a href="#" class="link-primary">Project Guidelines</a>
                </div>
                <!--end::Description-->
            </div>
            <!--end::Heading-->
    
            <!--begin::Input group-->
            <div class="fv-row mb-8">            
                <!--begin::Dropzone-->
                <div class="dropzone" id="kt_modal_create_project_files_upload">
                    <!--begin::Message-->
                    <div class="dz-message needsclick">
                        <!--begin::Icon-->
                        <i class="ki-duotone ki-file-up fs-3hx text-primary"><span class="path1"></span><span class="path2"></span></i>                    <!--end::Icon-->
    
                        <!--begin::Info-->
                        <div class="ms-4">
                            <h3 class="dfs-3 fw-bold text-gray-900 mb-1">Drop files here or click to upload.</h3>
                            <span class="fw-semibold fs-4 text-muted">Upload up to 10 files</span>
                        </div>
                        <!--end::Info-->
                    </div>
                </div>
                <!--end::Dropzone-->
            </div>
            <!--end::Input group-->
    
            <!--begin::Input group-->
            <div class="mb-8">
                <!--begin::Label-->
                <label class="fs-6 fw-semibold mb-2">Uploaded File</label>
                <!--End::Label-->
    
                <!--begin::Files-->
                <div class="mh-300px scroll-y me-n7 pe-7">
                                        <!--begin::File-->
                        <div class="d-flex flex-stack py-4 border border-top-0 border-left-0 border-right-0 border-dashed">
                            <div class="d-flex align-items-center">
                                <!--begin::Avatar-->
                                <div class="symbol symbol-35px">
                                    <img src="https://preview.keenthemes.com/craft/assets/media/svg/files/pdf.svg" alt="icon" />
                                </div>
                                <!--end::Avatar-->
    
                                <!--begin::Details-->
                                <div class="ms-6">
                                    <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Avionica Technical Requirements</a>
                                    <div class="fw-semibold text-muted">230kb</div>
                                </div>
                                <!--end::Details-->
                            </div>
    
                            <!--begin::Menu-->
                            <div class="min-w-100px">
                                <select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true" data-placeholder="Edit">
                                    <option></option>
                                    <option value="1">Remove</option>
                                    <option value="2">Modify</option>
                                    <option value="3">Select</option>
                                </select>
                            </div>
                            <!--end::Menu-->
                        </div>
                        <!--end::File-->
                                        <!--begin::File-->
                        <div class="d-flex flex-stack py-4 border border-top-0 border-left-0 border-right-0 border-dashed">
                            <div class="d-flex align-items-center">
                                <!--begin::Avatar-->
                                <div class="symbol symbol-35px">
                                    <img src="https://preview.keenthemes.com/craft/assets/media/svg/files/doc.svg" alt="icon" />
                                </div>
                                <!--end::Avatar-->
    
                                <!--begin::Details-->
                                <div class="ms-6">
                                    <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">9 Degree CURD draftplan</a>
                                    <div class="fw-semibold text-muted">3.6mb</div>
                                </div>
                                <!--end::Details-->
                            </div>
    
                            <!--begin::Menu-->
                            <div class="min-w-100px">
                                <select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true" data-placeholder="Edit">
                                    <option></option>
                                    <option value="1">Remove</option>
                                    <option value="2">Modify</option>
                                    <option value="3">Select</option>
                                </select>
                            </div>
                            <!--end::Menu-->
                        </div>
                        <!--end::File-->
                                        <!--begin::File-->
                        <div class="d-flex flex-stack py-4 border border-top-0 border-left-0 border-right-0 border-dashed">
                            <div class="d-flex align-items-center">
                                <!--begin::Avatar-->
                                <div class="symbol symbol-35px">
                                    <img src="https://preview.keenthemes.com/craft/assets/media/svg/files/css.svg" alt="icon" />
                                </div>
                                <!--end::Avatar-->
    
                                <!--begin::Details-->
                                <div class="ms-6">
                                    <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">User CRUD Styles</a>
                                    <div class="fw-semibold text-muted">85kb</div>
                                </div>
                                <!--end::Details-->
                            </div>
    
                            <!--begin::Menu-->
                            <div class="min-w-100px">
                                <select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true" data-placeholder="Edit">
                                    <option></option>
                                    <option value="1">Remove</option>
                                    <option value="2">Modify</option>
                                    <option value="3">Select</option>
                                </select>
                            </div>
                            <!--end::Menu-->
                        </div>
                        <!--end::File-->
                                        <!--begin::File-->
                        <div class="d-flex flex-stack py-4 border border-top-0 border-left-0 border-right-0 border-dashed">
                            <div class="d-flex align-items-center">
                                <!--begin::Avatar-->
                                <div class="symbol symbol-35px">
                                    <img src="https://preview.keenthemes.com/craft/assets/media/svg/files/ai.svg" alt="icon" />
                                </div>
                                <!--end::Avatar-->
    
                                <!--begin::Details-->
                                <div class="ms-6">
                                    <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Design Initial Logo</a>
                                    <div class="fw-semibold text-muted">40kb</div>
                                </div>
                                <!--end::Details-->
                            </div>
    
                            <!--begin::Menu-->
                            <div class="min-w-100px">
                                <select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true" data-placeholder="Edit">
                                    <option></option>
                                    <option value="1">Remove</option>
                                    <option value="2">Modify</option>
                                    <option value="3">Select</option>
                                </select>
                            </div>
                            <!--end::Menu-->
                        </div>
                        <!--end::File-->
                                        <!--begin::File-->
                        <div class="d-flex flex-stack py-4 ">
                            <div class="d-flex align-items-center">
                                <!--begin::Avatar-->
                                <div class="symbol symbol-35px">
                                    <img src="https://preview.keenthemes.com/craft/assets/media/svg/files/tif.svg" alt="icon" />
                                </div>
                                <!--end::Avatar-->
    
                                <!--begin::Details-->
                                <div class="ms-6">
                                    <a href="#" class="fs-5 fw-bold text-gray-900 text-hover-primary mb-2">Tower Hill Bilboard</a>
                                    <div class="fw-semibold text-muted">27mb</div>
                                </div>
                                <!--end::Details-->
                            </div>
    
                            <!--begin::Menu-->
                            <div class="min-w-100px">
                                <select class="form-select form-select-solid form-select-sm" data-control="select2" data-hide-search="true" data-placeholder="Edit">
                                    <option></option>
                                    <option value="1">Remove</option>
                                    <option value="2">Modify</option>
                                    <option value="3">Select</option>
                                </select>
                            </div>
                            <!--end::Menu-->
                        </div>
                        <!--end::File-->
                                </div>
                <!--end::Files-->
            </div>
            <!--end::Input group-->
    
            <!--begin::Input group-->
            <div class="fv-row mb-8">
                <!--begin::Wrapper-->
                <div class="d-flex flex-stack">
                    <!--begin::Label-->
                    <div class="me-5">
                        <label class="fs-6 fw-semibold">Allow Changes in Budget</label>
                        <div class="fs-7 fw-semibold text-muted">If you need more info, please check budget planning</div>
                    </div>
                    <!--end::Label-->
    
                    <!--begin::Switch-->
                    <label class="form-check form-switch form-check-custom form-check-solid">
                        <input class="form-check-input" type="checkbox" value="1" name="target_allow" checked="checked"/>
                        <span class="form-check-label fw-semibold text-muted">
                            Allowed
                        </span>
                    </label>
                    <!--end::Switch-->
                </div>
                <!--end::Wrapper-->
            </div>
            <!--end::Input group-->
    
            <!--begin::Actions-->
            <div class="d-flex flex-stack">
                <button type="button" class="btn btn-lg btn-light me-3" data-kt-element="files-previous">
                    Set First Target
                </button>
    
                <button type="button" class="btn btn-lg btn-primary" data-kt-element="files-next">
                    <span class="indicator-label">
                        Complete
                    </span>
                    <span class="indicator-progress">
                        Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                    </span>                
                </button>
            </div>
            <!--end::Actions-->
        </div>
        <!--end::Wrapper-->   
    </div>
    <!--end::Files-->
                                <!--begin::Complete-->
    <div data-kt-stepper-element="content">
        <!--begin::Wrapper-->
        <div class="w-100">
            <!--begin::Heading-->
            <div class="pb-12 text-center">
                <!--begin::Title-->
                <h1 class="fw-bold text-dark">Project Created!</h1>
                <!--end::Title-->
    
                <!--begin::Description-->
                <div class="text-muted fw-semibold fs-4">
                    If you need more info, please check how to create project
                </div>
                <!--end::Description-->
            </div>
            <!--end::Heading-->
    
             <!--begin::Actions-->
             <div class="d-flex flex-center pb-20">
                <button type="button" class="btn btn-lg btn-light me-3" data-kt-element="complete-start">
                    Create New Project
                </button>
    
                <a href="" class="btn btn-lg btn-primary" data-bs-toggle="tooltip" title="Coming Soon">
                    View Project
                </a>
            </div>
            <!--end::Actions-->
    
            <!--begin::Illustration-->
            <div class="text-center px-4">
                <img src="https://preview.keenthemes.com/craft/assets/media/illustrations/sigma-1/9.png" alt="" class="mww-100 mh-350px"/>          
            </div>
            <!--end::Illustration-->
        </div>
    </div>
    <!--end::Complete-->                        </form>
                            <!--end::Form-->
                        </div>
                        <!--begin::Container-->
                    </div>
                    <!--end::Stepper-->
                </div>
                <!--end::Modal body-->
            </div>
            <!--end::Modal content-->
        </div>
        <!--end::Modal dialog-->
    </div>
@endsection
@section('page-script')

    <link href="https://cdn.datatables.net/1.13.4/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <script src="https://preview.keenthemes.com/craft/assets/plugins/global/plugins.bundle.js"></script>
    <script src="https://preview.keenthemes.com/craft/assets/js/scripts.bundle.js"></script>
<!--end::Global Javascript Bundle-->

<!--begin::Vendors Javascript(used for this page only)-->
    <script src="https://preview.keenthemes.com/craft/assets/plugins/custom/datatables/datatables.bundle.js"></script>
<!--end::Vendors Javascript-->

<!--begin::Custom Javascript(used for this page only)-->
    <script src="https://preview.keenthemes.com/craft/assets/js/custom/apps/user-management/users/view/view.js"></script>
    <script src="https://preview.keenthemes.com/craft/assets/js/custom/apps/user-management/users/view/update-details.js"></script>
    <script src="https://preview.keenthemes.com/craft/assets/js/custom/apps/user-management/users/view/add-schedule.js"></script>
    <script src="https://preview.keenthemes.com/craft/assets/js/custom/apps/user-management/users/view/add-task.js"></script>
    <script src="https://preview.keenthemes.com/craft/assets/js/custom/apps/user-management/users/view/update-email.js"></script>
    <script src="https://preview.keenthemes.com/craft/assets/js/custom/apps/user-management/users/view/update-password.js"></script>
    <script src="https://preview.keenthemes.com/craft/assets/js/custom/apps/user-management/users/view/update-role.js"></script>
    <script src="https://preview.keenthemes.com/craft/assets/js/custom/apps/user-management/users/view/add-auth-app.js"></script>
    <script src="https://preview.keenthemes.com/craft/assets/js/custom/apps/user-management/users/view/add-one-time-password.js"></script>
    <script src="https://preview.keenthemes.com/craft/assets/js/widgets.bundle.js"></script>
    <script src="https://preview.keenthemes.com/craft/assets/js/custom/widgets.js"></script>
    <script src="https://preview.keenthemes.com/craft/assets/js/custom/apps/chat/chat.js"></script>
    <script src="https://preview.keenthemes.com/craft/assets/js/custom/utilities/modals/upgrade-plan.js"></script>
    <script src="https://preview.keenthemes.com/craft/assets/js/custom/utilities/modals/create-project/type.js"></script>
    <script src="https://preview.keenthemes.com/craft/assets/js/custom/utilities/modals/create-project/budget.js"></script>
    <script src="https://preview.keenthemes.com/craft/assets/js/custom/utilities/modals/create-project/settings.js"></script>
    <script src="https://preview.keenthemes.com/craft/assets/js/custom/utilities/modals/create-project/team.js"></script>
    <script src="https://preview.keenthemes.com/craft/assets/js/custom/utilities/modals/create-project/targets.js"></script>
    <script src="https://preview.keenthemes.com/craft/assets/js/custom/utilities/modals/create-project/files.js"></script>
    <script src="https://preview.keenthemes.com/craft/assets/js/custom/utilities/modals/create-project/complete.js"></script>
    <script src="https://preview.keenthemes.com/craft/assets/js/custom/utilities/modals/create-project/main.js"></script>
    <script src="https://preview.keenthemes.com/craft/assets/js/custom/utilities/modals/users-search.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- DataTables JS -->
    <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.bootstrap5.min.js"></script>

    <!-- Bootstrap 5 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#example').DataTable({
                "paging": true,
                "lengthChange": true,
                "searching": true,
                "ordering": true,
                "info": true,
                "autoWidth": false,
                "responsive": true
            });
        });
    </script>

@endsection