@extends('layouts.master')
@section('title')
    @lang('translation.settings')
@endsection
@section('content')

    <!-- Job Recomendation -->
     <style>
        .bg-overlay-pattern {
    background-image: url('https://themesbrand.com/velzon/html/default/assets/images/landing/bg-pattern.png') !important;
  
}
     </style>
    <section class="section job-hero-section bg-primary" id="hero">
        <div class="bg-overlay bg-overlay-pattern opacity-50"></div>
        <div class="container">
            <div class="row justify-content-between align-items-center pt-5">
                <div class="col-lg-8 text-center m-auto">
                    <div>
                        <h1 class="text-light display-6 fw-semibold text-capitalize mb-3 lh-base"> Find Your Perfect Job Match</h1>
                        <p class="lead text-light lh-base mb-4">Find jobs, create trackable resumes and enrich your
                            applications. Carefully crafted after analyzing the needs of different industries.</p>

                    </div>
                </div>

            </div>
            <!-- end row -->
        </div>
        <!-- end container -->
    </section>

   

    <section class="section" id="findJob">
        <div class="container">

        <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <form>
                    <div class="row g-3">
                        <div class=" col-sm-3">
                            <div class="search-box">
                                <input type="text" class="form-control search bg-light border-light" id="searchJob"
                                    autocomplete="off" placeholder="Search by name...">
                                <i class="ri-search-line search-icon"></i>
                            </div>
                        </div>
                        <!--end col-->

                        <!--end col-->
                        <div class="col-sm-3">
                            <div class="input-light">
                                <select class="form-control" data-choices data-choices-search-false name="choices-idType"
                                    id="idType">
                                    <option value="all" selected>All</option>
                                    <option value="Full Time">Full Time</option>
                                    <option value="Part Time">Part Time</option>
                                    <option value="Intership">Intership</option>
                                    <option value="Freelance">Freelance</option>
                                </select>
                            </div>
                        </div>
                        <!--end col-->

                        <div class="col-sm-3">
                            <div class="input-light">
                                <select class="form-control" data-choices data-choices-search-false
                                    name="choices-single-default" id="idStatus">
                                    <option value="all" selected>All</option>
                                    <option value="Active">Active</option>
                                    <option value="New">New</option>
                                    <option value="Close">Close</option>
                                </select>
                            </div>
                        </div>
                        <!--end col-->

                        <div class="col-sm-3">
                            <button type="button" class="btn btn-primary w-100" onclick="filterData();">
                                <i class="ri-equalizer-fill me-1 align-bottom"></i> Filters
                            </button>
                        </div>
                        <!--end col-->
                    </div>
                    <!--end row-->
                </form>
            </div>
        </div>
    </div>
            <div class="row mt-5">
                <div class="col-md-12">
                    <div class="card shadow-lg">
                        <div class="card-body">
                            <div class="d-flex">
                                <div class="avatar-sm">
                                    <div class="avatar-title bg-warning-subtle rounded">
                                        <img src="assets/images/companies/img-3.png" alt="" class="avatar-xxs">
                                    </div>
                                </div>
                                <div class="ms-3 flex-grow-1">
                                    <a href="#!">
                                        <h5>UI/UX designer</h5>
                                    </a>
                                    <ul class="list-inline text-muted mb-3">
                                        <li class="list-inline-item">
                                            <i class="ri-building-line align-bottom me-1"></i> Nesta Technologies
                                        </li>
                                        <li class="list-inline-item">
                                            <i class="ri-map-pin-2-line align-bottom me-1"></i> USA
                                        </li>
                                        <li class="list-inline-item">
                                            <i class="ri-money-dollar-circle-line align-bottom me-1"></i> $23k - 35k
                                        </li>
                                    </ul>
                                    <p class="text-muted job-description mt-3 mb-3">A UI/UX designer's job is to create user-friendly interfaces that enable users to understand how to use complex technical products. If you're passionate about the latest technology trends and devices, you'll find great fulfillment in being involved in the design process for the next hot gadget.</p>
                                    <div class="hstack gap-2">
                                        <span class="badge bg-success-subtle text-success">Design</span>
                                        <span class="badge bg-danger-subtle text-danger">UI/UX</span>
                                        <span class="badge bg-primary-subtle text-primary">Adobe XD</span>
                                    </div>
                                    <a href="#!" class="btn btn-primary btn-sm viewjob-list mt-4">View More <i class="ri-arrow-right-line align-bottom ms-1"></i></a>
                                </div>
                                <div>
                                    <button type="button" class="btn btn-ghost-primary btn-icon custom-toggle"
                                        data-bs-toggle="button">
                                        <span class="icon-on"><i class="ri-bookmark-line"></i></span>
                                        <span class="icon-off"><i class="ri-bookmark-fill"></i></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="card shadow-lg">
                        <div class="card-body">
                            <div class="d-flex">
                                <div class="avatar-sm">
                                    <div class="avatar-title bg-primary-subtle rounded">
                                        <img src="assets/images/companies/img-2.png" alt="" class="avatar-xxs">
                                    </div>
                                </div>
                                <div class="ms-3 flex-grow-1">
                                    <a href="#!">
                                        <h5>Product Sales Specialist</h5>
                                    </a>
                                    <ul class="list-inline text-muted mb-3">
                                        <li class="list-inline-item">
                                            <i class="ri-building-line align-bottom me-1"></i> Digitech Galaxy
                                        </li>
                                        <li class="list-inline-item">
                                            <i class="ri-map-pin-2-line align-bottom me-1"></i> Spain
                                        </li>
                                        <li class="list-inline-item">
                                            <i class="ri-money-dollar-circle-line align-bottom me-1"></i> $10k - 15k
                                        </li>
                                    </ul>
                                    <p class="text-muted job-description mt-3 mb-3">A UI/UX designer's job is to create user-friendly interfaces that enable users to understand how to use complex technical products. If you're passionate about the latest technology trends and devices, you'll find great fulfillment in being involved in the design process for the next hot gadget.</p>
                                    <div class="hstack gap-2">
                                        <span class="badge bg-primary-subtle text-primary">Sales</span>
                                        <span class="badge bg-secondary-subtle text-secondary">Product</span>
                                        <span class="badge bg-info-subtle text-info">Business</span>
                                    </div>
                                    <a href="#!" class="btn btn-primary btn-sm viewjob-list mt-4">View More <i class="ri-arrow-right-line align-bottom ms-1"></i></a>
                                </div>
                                <div>
                                    <button type="button" class="btn btn-ghost-primary btn-icon custom-toggle active"
                                        data-bs-toggle="button">
                                        <span class="icon-on"><i class="ri-bookmark-line"></i></span>
                                        <span class="icon-off"><i class="ri-bookmark-fill"></i></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="card shadow-lg">
                        <div class="card-body">
                            <div class="d-flex">
                                <div class="avatar-sm">
                                    <div class="avatar-title bg-danger-subtle rounded">
                                        <img src="assets/images/companies/img-4.png" alt="" class="avatar-xxs">
                                    </div>
                                </div>
                                <div class="ms-3 flex-grow-1">
                                    <a href="#!">
                                        <h5>Marketing Director</h5>
                                    </a>
                                    <ul class="list-inline text-muted mb-3">
                                        <li class="list-inline-item">
                                            <i class="ri-building-line align-bottom me-1"></i> Meta4Systems
                                        </li>
                                        <li class="list-inline-item">
                                            <i class="ri-map-pin-2-line align-bottom me-1"></i> Sweden
                                        </li>
                                        <li class="list-inline-item">
                                            <i class="ri-money-dollar-circle-line align-bottom me-1"></i> $20k - 25k
                                        </li>
                                    </ul>
                                    <p class="text-muted job-description mt-3 mb-3">A UI/UX designer's job is to create user-friendly interfaces that enable users to understand how to use complex technical products. If you're passionate about the latest technology trends and devices, you'll find great fulfillment in being involved in the design process for the next hot gadget.</p>
                                    <div class="hstack gap-2">
                                        <span class="badge bg-warning-subtle text-warning">Marketing</span>
                                        <span class="badge bg-info-subtle text-info">Bussiness</span>
                                    </div>
                                    <a href="#!" class="btn btn-primary btn-sm viewjob-list mt-4">View More <i class="ri-arrow-right-line align-bottom ms-1"></i></a>
                                </div>
                                <div>
                                    <button type="button" class="btn btn-ghost-primary btn-icon custom-toggle active"
                                        data-bs-toggle="button">
                                        <span class="icon-on"><i class="ri-bookmark-line"></i></span>
                                        <span class="icon-off"><i class="ri-bookmark-fill"></i></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="card shadow-lg">
                        <div class="card-body">
                            <div class="d-flex">
                                <div class="avatar-sm">
                                    <div class="avatar-title bg-success-subtle rounded">
                                        <img src="assets/images/companies/img-9.png" alt="" class="avatar-xxs">
                                    </div>
                                </div>
                                <div class="ms-3 flex-grow-1">
                                    <a href="#!">
                                        <h5>Product Designer</h5>
                                    </a>
                                    <ul class="list-inline text-muted mb-3">
                                        <li class="list-inline-item">
                                            <i class="ri-building-line align-bottom me-1"></i> Themesbrand
                                        </li>
                                        <li class="list-inline-item">
                                            <i class="ri-map-pin-2-line align-bottom me-1"></i> USA
                                        </li>
                                        <li class="list-inline-item">
                                            <i class="ri-money-dollar-circle-line align-bottom me-1"></i> $40k+
                                        </li>
                                    </ul>
                                    <p class="text-muted job-description mt-3 mb-3">A UI/UX designer's job is to create user-friendly interfaces that enable users to understand how to use complex technical products. If you're passionate about the latest technology trends and devices, you'll find great fulfillment in being involved in the design process for the next hot gadget.</p>
                                    <div class="hstack gap-2">
                                        <span class="badge bg-success-subtle text-success">Design</span>
                                        <span class="badge bg-danger-subtle text-danger">UI/UX</span>
                                        <span class="badge bg-primary-subtle text-primary">Adobe XD</span>
                                    </div>
                                    <a href="#!" class="btn btn-primary btn-sm viewjob-list mt-4">View More <i class="ri-arrow-right-line align-bottom ms-1"></i></a>
                                </div>
                                <div>
                                    <button type="button" class="btn btn-ghost-primary btn-icon custom-toggle"
                                        data-bs-toggle="button">
                                        <span class="icon-on"><i class="ri-bookmark-line"></i></span>
                                        <span class="icon-off"><i class="ri-bookmark-fill"></i></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="card shadow-lg">
                        <div class="card-body">
                            <div class="d-flex">
                                <div class="avatar-sm">
                                    <div class="avatar-title bg-info-subtle rounded">
                                        <img src="assets/images/companies/img-1.png" alt="" class="avatar-xxs">
                                    </div>
                                </div>
                                <div class="ms-3 flex-grow-1">
                                    <a href="#!">
                                        <h5>Project Manager</h5>
                                    </a>
                                    <ul class="list-inline text-muted mb-3">
                                        <li class="list-inline-item">
                                            <i class="ri-building-line align-bottom me-1"></i> Syntyce Solutions
                                        </li>
                                        <li class="list-inline-item">
                                            <i class="ri-map-pin-2-line align-bottom me-1"></i> Germany
                                        </li>
                                        <li class="list-inline-item">
                                            <i class="ri-money-dollar-circle-line align-bottom me-1"></i> $18k - 26k
                                        </li>
                                    </ul>
                                    <p class="text-muted job-description mt-3 mb-3">A UI/UX designer's job is to create user-friendly interfaces that enable users to understand how to use complex technical products. If you're passionate about the latest technology trends and devices, you'll find great fulfillment in being involved in the design process for the next hot gadget.</p>
                                    <div class="hstack gap-2">
                                        <span class="badge bg-danger-subtle text-danger">HR</span>
                                        <span class="badge bg-success-subtle text-success">Manager</span>
                                    </div>
                                    <a href="#!" class="btn btn-primary btn-sm viewjob-list mt-4">View More <i class="ri-arrow-right-line align-bottom ms-1"></i></a>
                                </div>
                                <div>
                                    <button type="button" class="btn btn-ghost-primary btn-icon custom-toggle"
                                        data-bs-toggle="button">
                                        <span class="icon-on"><i class="ri-bookmark-line"></i></span>
                                        <span class="icon-off"><i class="ri-bookmark-fill"></i></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="card shadow-lg">
                        <div class="card-body">
                            <div class="d-flex">
                                <div class="avatar-sm">
                                    <div class="avatar-title bg-success-subtle rounded">
                                        <img src="assets/images/companies/img-7.png" alt="" class="avatar-xxs">
                                    </div>
                                </div>
                                <div class="ms-3 flex-grow-1">
                                    <a href="#!">
                                        <h5>Business Associate</h5>
                                    </a>
                                    <p class="text-muted job-description mt-3 mb-3">A UI/UX designer's job is to create user-friendly interfaces that enable users to understand how to use complex technical products. If you're passionate about the latest technology trends and devices, you'll find great fulfillment in being involved in the design process for the next hot gadget.</p>
                                    <ul class="list-inline text-muted mb-3">
                                        <li class="list-inline-item">
                                            <i class="ri-building-line align-bottom me-1"></i> Nesta Technologies
                                        </li>
                                        <li class="list-inline-item">
                                            <i class="ri-map-pin-2-line align-bottom me-1"></i> USA
                                        </li>
                                        <li class="list-inline-item">
                                            <i class="ri-money-dollar-circle-line align-bottom me-1"></i> $23k - 35k
                                        </li>
                                    </ul>
                                    <div class="hstack gap-2">
                                        <span class="badge bg-success-subtle text-success">Design</span>
                                        <span class="badge bg-danger-subtle text-danger">UI/UX</span>
                                        <span class="badge bg-primary-subtle text-primary">Adobe XD</span>
                                    </div>
                                    <a href="#!" class="btn btn-primary btn-sm viewjob-list mt-4">View More <i class="ri-arrow-right-line align-bottom ms-1"></i></a>
                                </div>
                                <div>
                                    <button type="button" class="btn btn-ghost-primary btn-icon custom-toggle active"
                                        data-bs-toggle="button">
                                        <span class="icon-on"><i class="ri-bookmark-line"></i></span>
                                        <span class="icon-off"><i class="ri-bookmark-fill"></i></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="card shadow-lg">
                        <div class="card-body">
                            <div class="d-flex">
                                <div class="avatar-sm">
                                    <div class="avatar-title bg-info-subtle rounded">
                                        <img src="assets/images/companies/img-8.png" alt="" class="avatar-xxs">
                                    </div>
                                </div>
                                <div class="ms-3 flex-grow-1">
                                    <a href="#!">
                                        <h5>Recruiting Coordinator</h5>
                                    </a>
                                    <ul class="list-inline text-muted mb-3">
                                        <li class="list-inline-item">
                                            <i class="ri-building-line align-bottom me-1"></i> Zoetic Fashion
                                        </li>
                                        <li class="list-inline-item">
                                            <i class="ri-map-pin-2-line align-bottom me-1"></i> Namibia
                                        </li>
                                        <li class="list-inline-item">
                                            <i class="ri-money-dollar-circle-line align-bottom me-1"></i> $12k - 15k
                                        </li>
                                    </ul>
                                    <p class="text-muted job-description mt-3 mb-3">A UI/UX designer's job is to create user-friendly interfaces that enable users to understand how to use complex technical products. If you're passionate about the latest technology trends and devices, you'll find great fulfillment in being involved in the design process for the next hot gadget.</p>
                                    <div class="hstack gap-2">
                                        <span class="badge bg-success-subtle text-success">Full Time</span>
                                        <span class="badge bg-info-subtle text-info">Remote</span>
                                        <span class="badge bg-primary-subtle text-primary">Fashion</span>
                                    </div>
                                    <a href="#!" class="btn btn-primary btn-sm viewjob-list mt-4">View More <i class="ri-arrow-right-line align-bottom ms-1"></i></a>
                                </div>
                                <div>
                                    <button type="button" class="btn btn-ghost-primary btn-icon custom-toggle active"
                                        data-bs-toggle="button">
                                        <span class="icon-on"><i class="ri-bookmark-line"></i></span>
                                        <span class="icon-off"><i class="ri-bookmark-fill"></i></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="card shadow-lg">
                        <div class="card-body">
                            <div class="d-flex">
                                <div class="avatar-sm">
                                    <div class="avatar-title bg-warning-subtle rounded">
                                        <img src="assets/images/companies/img-5.png" alt="" class="avatar-xxs">
                                    </div>
                                </div>
                                <div class="ms-3 flex-grow-1">
                                    <a href="#!">
                                        <h5>Customs officer</h5>
                                    </a>
                                    <ul class="list-inline text-muted mb-3">
                                        <li class="list-inline-item">
                                            <i class="ri-building-line align-bottom me-1"></i> Nesta Technologies
                                        </li>
                                        <li class="list-inline-item">
                                            <i class="ri-map-pin-2-line align-bottom me-1"></i> USA
                                        </li>
                                        <li class="list-inline-item">
                                            <i class="ri-money-dollar-circle-line align-bottom me-1"></i> $41k - 45k
                                        </li>
                                    </ul>
                                    <p class="text-muted job-description mt-3 mb-3">A UI/UX designer's job is to create user-friendly interfaces that enable users to understand how to use complex technical products. If you're passionate about the latest technology trends and devices, you'll find great fulfillment in being involved in the design process for the next hot gadget.</p>
                                    <div class="hstack gap-2">
                                        <span class="badge bg-success-subtle text-success">Design</span>
                                        <span class="badge bg-danger-subtle text-danger">UI/UX</span>
                                        <span class="badge bg-primary-subtle text-primary">Adobe XD</span>
                                    </div>
                                    <a href="#!" class="btn btn-primary btn-sm viewjob-list mt-4">View More <i class="ri-arrow-right-line align-bottom ms-1"></i></a>
                                </div>
                                <div>
                                    <button type="button" class="btn btn-ghost-primary btn-icon custom-toggle"
                                        data-bs-toggle="button">
                                        <span class="icon-on"><i class="ri-bookmark-line"></i></span>
                                        <span class="icon-off"><i class="ri-bookmark-fill"></i></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="text-center mt-4">
                        <a href="#!" class="btn btn-ghost-primary">View More Jobs <i
                                class="ri-arrow-right-line align-bottom"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Job Recomendation -->
    <div class="row">

        <!-- job listing -->
        <div class="row">
            <div class="col-lg-12">
                <div class="card" id="applicationList">
                    <div class="card-header  border-0">
                        <div class="d-md-flex align-items-center">
                            <h5 class="card-title mb-3 mb-md-0 flex-grow-1">Job Listing</h5>
                            <div class="flex-shrink-0">
                                <div class="d-flex gap-1 flex-wrap">
                                    <button type="button" class="btn btn-success add-btn" data-bs-toggle="modal"
                                        id="create-btn" data-bs-target="#showModal"><i
                                            class="ri-add-line align-bottom me-1"></i> Add New Job</button>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body border border-dashed border-end-0 border-start-0">
                        <form>
                            <div class="row g-3">

                                <!--end col-->
                                <div class="col-sm-4">
                                    <div>
                                        <select class="form-control" data-choices data-choices-search-false
                                            name="choices-single-default" id="idStatus">
                                            <option value="">Status</option>
                                            <option value="all" selected>All</option>
                                            <option value="Approved">Approved</option>
                                            <option value="New">New</option>
                                            <option value="Pending">Pending</option>
                                            <option value="Rejected">Rejected</option>
                                        </select>
                                    </div>
                                </div>
                                <!--end col-->
                                <div class="col-sm-4">
                                    <div class="search-box">
                                        <input type="text" class="form-control search"
                                            placeholder="Search for application ID, company, designation status or something...">
                                        <i class="ri-search-line search-icon"></i>
                                    </div>
                                </div>
                                <!--end col-->
                                <div class="col-sm-4">
                                    <div>
                                        <button type="button" class="btn btn-primary w-100" onclick="filterData();"> <i
                                                class="ri-equalizer-fill me-1 align-bottom"></i>
                                            Filters
                                        </button>
                                    </div>
                                </div>
                                <!--end col-->
                            </div>
                            <!--end row-->
                        </form>
                    </div>
                    <div class="card-body pt-0">
                        <div>
                            <ul class="nav nav-tabs nav-tabs-custom nav-success mb-3" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link All py-3 active" data-bs-toggle="tab" id="All" href="#" role="tab"
                                        aria-selected="false" tabindex="-1">
                                        All Jobs
                                    </a>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link py-3 Featured" data-bs-toggle="tab" id="Featured" href="#" role="tab"
                                        aria-selected="false" tabindex="-1">
                                        Approved Jobs
                                    </a>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link py-3 Remote" data-bs-toggle="tab" id="Remote" href="#" role="tab"
                                        aria-selected="false" tabindex="-1">
                                        Pending Jobs
                                    </a>
                                </li>

                            </ul>

                            <div class="table-responsive table-card mb-1">
                                <table class="table table-nowrap align-middle" id="jobListTable">
                                    <thead class="text-muted table-light">
                                        <tr class="text-uppercase">
                                            <th scope="col" style="width: 25px;">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="checkAll">
                                                </div>
                                            </th>
                                            <th class="sort" data-sort="id" style="width: 140px;">Job ID</th>
                                            <th class="sort" data-sort="company">Company</th>
                                            <th class="sort" data-sort="position">Position</th>
                                            <th class="sort" data-sort="location">Location</th>
                                            <th class="sort" data-sort="salary">Salary</th>
                                            <th class="sort" data-sort="type">Job Type</th>
                                            <th class="sort" data-sort="status">Status</th>
                                            <th class="sort" data-sort="actions">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody class="list form-check-all">
                                        <tr>
                                            <th scope="row">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" name="checkAll">
                                                </div>
                                            </th>
                                            <td class="id"><a href="#" class="fw-medium link-primary">#JOB123</a></td>
                                            <td class="company">
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-shrink-0">
                                                        <img src="assets/images/companies/meta.png" alt=""
                                                            class="avatar-xxs rounded-circle">
                                                    </div>
                                                    <div class="flex-grow-1 ms-2 name">Meta Inc.</div>
                                                </div>
                                            </td>
                                            <td class="position">Software Engineer</td>
                                            <td class="location">New York, USA</td>
                                            <td class="salary">$80,000/yr</td>
                                            <td class="type">Full-Time</td>
                                            <td class="status"><span
                                                    class="badge bg-success-subtle text-success text-uppercase">Open</span>
                                            </td>
                                            <td>
                                                <ul class="list-inline hstack gap-2 mb-0">
                                                    <li class="list-inline-item" data-bs-toggle="tooltip"
                                                        data-bs-placement="top" title="View">
                                                        <a href="job-details.html" class="text-primary">
                                                            <i class="ri-eye-fill fs-16"></i>
                                                        </a>
                                                    </li>
                                                    <li class="list-inline-item edit" data-bs-toggle="tooltip"
                                                        data-bs-placement="top" title="Edit">
                                                        <a href="#editModal" data-bs-toggle="modal" class="text-primary">
                                                            <i class="ri-pencil-fill fs-16"></i>
                                                        </a>
                                                    </li>
                                                    <li class="list-inline-item" data-bs-toggle="tooltip"
                                                        data-bs-placement="top" title="Delete">
                                                        <a class="text-danger" data-bs-toggle="modal" href="#deleteJob">
                                                            <i class="ri-delete-bin-5-fill fs-16"></i>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th scope="row">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" name="checkAll">
                                                </div>
                                            </th>
                                            <td class="id"><a href="#" class="fw-medium link-primary">#JOB124</a></td>
                                            <td class="company">
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-shrink-0">
                                                        <img src="assets/images/companies/google.png" alt=""
                                                            class="avatar-xxs rounded-circle">
                                                    </div>
                                                    <div class="flex-grow-1 ms-2 name">Google</div>
                                                </div>
                                            </td>
                                            <td class="position">UI/UX Designer</td>
                                            <td class="location">San Francisco, USA</td>
                                            <td class="salary">$90,000/yr</td>
                                            <td class="type">Remote</td>
                                            <td class="status"><span
                                                    class="badge bg-warning-subtle text-warning text-uppercase">Hiring
                                                    Soon</span></td>
                                            <td>
                                                <ul class="list-inline hstack gap-2 mb-0">
                                                    <li class="list-inline-item" data-bs-toggle="tooltip"
                                                        data-bs-placement="top" title="View">
                                                        <a href="job-details.html" class="text-primary">
                                                            <i class="ri-eye-fill fs-16"></i>
                                                        </a>
                                                    </li>
                                                    <li class="list-inline-item edit" data-bs-toggle="tooltip"
                                                        data-bs-placement="top" title="Edit">
                                                        <a href="#editModal" data-bs-toggle="modal" class="text-primary">
                                                            <i class="ri-pencil-fill fs-16"></i>
                                                        </a>
                                                    </li>
                                                    <li class="list-inline-item" data-bs-toggle="tooltip"
                                                        data-bs-placement="top" title="Delete">
                                                        <a class="text-danger" data-bs-toggle="modal" href="#deleteJob">
                                                            <i class="ri-delete-bin-5-fill fs-16"></i>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th scope="row">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" name="checkAll">
                                                </div>
                                            </th>
                                            <td class="id"><a href="#" class="fw-medium link-primary">#JOB123</a></td>
                                            <td class="company">
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-shrink-0">
                                                        <img src="assets/images/companies/meta.png" alt=""
                                                            class="avatar-xxs rounded-circle">
                                                    </div>
                                                    <div class="flex-grow-1 ms-2 name">Meta Inc.</div>
                                                </div>
                                            </td>
                                            <td class="position">Software Engineer</td>
                                            <td class="location">New York, USA</td>
                                            <td class="salary">$80,000/yr</td>
                                            <td class="type">Full-Time</td>
                                            <td class="status"><span
                                                    class="badge bg-success-subtle text-success text-uppercase">Open</span>
                                            </td>
                                            <td>
                                                <ul class="list-inline hstack gap-2 mb-0">
                                                    <li class="list-inline-item" data-bs-toggle="tooltip"
                                                        data-bs-placement="top" title="View">
                                                        <a href="job-details.html" class="text-primary">
                                                            <i class="ri-eye-fill fs-16"></i>
                                                        </a>
                                                    </li>
                                                    <li class="list-inline-item edit" data-bs-toggle="tooltip"
                                                        data-bs-placement="top" title="Edit">
                                                        <a href="#editModal" data-bs-toggle="modal" class="text-primary">
                                                            <i class="ri-pencil-fill fs-16"></i>
                                                        </a>
                                                    </li>
                                                    <li class="list-inline-item" data-bs-toggle="tooltip"
                                                        data-bs-placement="top" title="Delete">
                                                        <a class="text-danger" data-bs-toggle="modal" href="#deleteJob">
                                                            <i class="ri-delete-bin-5-fill fs-16"></i>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th scope="row">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" name="checkAll">
                                                </div>
                                            </th>
                                            <td class="id"><a href="#" class="fw-medium link-primary">#JOB124</a></td>
                                            <td class="company">
                                                <div class="d-flex align-items-center">
                                                    <div class="flex-shrink-0">
                                                        <img src="assets/images/companies/google.png" alt=""
                                                            class="avatar-xxs rounded-circle">
                                                    </div>
                                                    <div class="flex-grow-1 ms-2 name">Google</div>
                                                </div>
                                            </td>
                                            <td class="position">UI/UX Designer</td>
                                            <td class="location">San Francisco, USA</td>
                                            <td class="salary">$90,000/yr</td>
                                            <td class="type">Remote</td>
                                            <td class="status"><span
                                                    class="badge bg-warning-subtle text-warning text-uppercase">Hiring
                                                    Soon</span></td>
                                            <td>
                                                <ul class="list-inline hstack gap-2 mb-0">
                                                    <li class="list-inline-item" data-bs-toggle="tooltip"
                                                        data-bs-placement="top" title="View">
                                                        <a href="job-details.html" class="text-primary">
                                                            <i class="ri-eye-fill fs-16"></i>
                                                        </a>
                                                    </li>
                                                    <li class="list-inline-item edit" data-bs-toggle="tooltip"
                                                        data-bs-placement="top" title="Edit">
                                                        <a href="#editModal" data-bs-toggle="modal" class="text-primary">
                                                            <i class="ri-pencil-fill fs-16"></i>
                                                        </a>
                                                    </li>
                                                    <li class="list-inline-item" data-bs-toggle="tooltip"
                                                        data-bs-placement="top" title="Delete">
                                                        <a class="text-danger" data-bs-toggle="modal" href="#deleteJob">
                                                            <i class="ri-delete-bin-5-fill fs-16"></i>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

                                <div class="noresult" style="display: none">
                                    <div class="text-center">
                                        <lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop"
                                            colors="primary:#405189,secondary:#0ab39c"
                                            style="width:75px;height:75px"></lord-icon>
                                        <h5 class="mt-2">No Jobs Found</h5>
                                        <p class="text-muted">We couldn't find any matching job listings.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-end">
                                <div class="pagination-wrap hstack gap-2" style="display: none;">
                                    <a class="page-item pagination-prev disabled" href="#">Previous</a>
                                    <ul class="pagination listjs-pagination mb-0">
                                        <li class="active"><a class="page" href="#" data-page="1">1</a></li>
                                    </ul>
                                    <a class="page-item pagination-next disabled" href="#">Next</a>
                                </div>
                            </div>
                        </div>

                        <div class="modal fade" id="showModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                            aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                    <div class="modal-header bg-light p-3">
                                        <h5 class="modal-title" id="exampleModalLabel">&nbsp;</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                                            id="close-modal"></button>
                                    </div>
                                    <form class="tablelist-form" autocomplete="off">
                                        <div class="modal-body">
                                            <input type="hidden" id="id-field">

                                            <div class="mb-3 d-none" id="modal-id">
                                                <label for="applicationId" class="form-label">ID</label>
                                                <input type="text" id="applicationId" class="form-control" placeholder="ID"
                                                    readonly="">
                                            </div>

                                            <div class="text-center">
                                                <div class="position-relative d-inline-block">
                                                    <div class="position-absolute  bottom-0 end-0">
                                                        <label for="companylogo-image-input" class="mb-0"
                                                            data-bs-toggle="tooltip" data-bs-placement="right"
                                                            aria-label="Select Image" data-bs-original-title="Select Image">
                                                            <div class="avatar-xs cursor-pointer">
                                                                <div
                                                                    class="avatar-title bg-light border rounded-circle text-muted">
                                                                    <i class="ri-image-fill"></i>
                                                                </div>
                                                            </div>
                                                        </label>
                                                        <input class="form-control d-none" value=""
                                                            id="companylogo-image-input" type="file"
                                                            accept="image/png, image/gif, image/jpeg">
                                                    </div>
                                                    <div class="avatar-lg p-1">
                                                        <div class="avatar-title bg-light rounded-circle">
                                                            <img src="assets/images/users/multi-user.jpg"
                                                                id="companylogo-img"
                                                                class="avatar-md h-auto rounded-circle object-fit-cover">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="mb-3">
                                                <label for="company-field" class="form-label">Company</label>
                                                <input type="text" id="company-field" class="form-control"
                                                    placeholder="Enter company name" required="">
                                            </div>

                                            <div class="mb-3">
                                                <label for="designation-field" class="form-label">Designation</label>
                                                <input type="text" id="designation-field" class="form-control"
                                                    placeholder="Enter designation" required="">
                                            </div>

                                            <div class="mb-3">
                                                <label for="date-field" class="form-label">Apply Date</label>
                                                <input type="text" id="date-field" class="form-control flatpickr-input"
                                                    data-provider="flatpickr" data-date-format="d M, Y" required=""
                                                    placeholder="Select date" readonly="readonly">
                                            </div>

                                            <div class="mb-3">
                                                <label for="contact-field" class="form-label">Contacts</label>
                                                <input type="text" id="contact-field" class="form-control"
                                                    placeholder="Enter contact" required="">
                                            </div>

                                            <div class="row gy-4 mb-3">
                                                <div class="col-md-6">
                                                    <div>
                                                        <label for="status-input" class="form-label">Status</label>
                                                        <div class="choices" data-type="select-one" tabindex="0"
                                                            role="listbox" aria-label="Status" aria-haspopup="true"
                                                            aria-expanded="false">
                                                            <div class="choices__inner"><select
                                                                    class="form-control choices__input" data-trigger=""
                                                                    name="status-input" id="status-input" hidden=""
                                                                    tabindex="-1" data-choice="active">
                                                                    <option value="" selected="">Status</option>
                                                                    <option value="Approved">Approved</option>
                                                                    <option value="New">New</option>
                                                                    <option value="Pending">Pending</option>
                                                                    <option value="Rejected">Rejected</option>
                                                                </select>
                                                                <div class="choices__list choices__list--single">
                                                                    <div class="choices__item choices__placeholder choices__item--selectable"
                                                                        data-item="" data-id="1" data-value=""
                                                                        aria-selected="true" role="option"
                                                                        data-placeholder="">Status</div>
                                                                </div>
                                                            </div>
                                                            <div class="choices__list choices__list--dropdown"
                                                                aria-expanded="false">
                                                                <div class="choices__list" role="listbox">
                                                                    <div id="choices--status-input-item-choice-1"
                                                                        class="choices__item choices__item--choice is-selected choices__placeholder choices__item--selectable is-highlighted"
                                                                        role="option" data-choice="" data-id="1"
                                                                        data-value="" data-select-text="Press to select"
                                                                        data-choice-selectable="" aria-selected="true">
                                                                        Status</div>
                                                                    <div id="choices--status-input-item-choice-2"
                                                                        class="choices__item choices__item--choice choices__item--selectable"
                                                                        role="option" data-choice="" data-id="2"
                                                                        data-value="Approved"
                                                                        data-select-text="Press to select"
                                                                        data-choice-selectable="">Approved</div>
                                                                    <div id="choices--status-input-item-choice-3"
                                                                        class="choices__item choices__item--choice choices__item--selectable"
                                                                        role="option" data-choice="" data-id="3"
                                                                        data-value="New" data-select-text="Press to select"
                                                                        data-choice-selectable="">New</div>
                                                                    <div id="choices--status-input-item-choice-4"
                                                                        class="choices__item choices__item--choice choices__item--selectable"
                                                                        role="option" data-choice="" data-id="4"
                                                                        data-value="Pending"
                                                                        data-select-text="Press to select"
                                                                        data-choice-selectable="">Pending</div>
                                                                    <div id="choices--status-input-item-choice-5"
                                                                        class="choices__item choices__item--choice choices__item--selectable"
                                                                        role="option" data-choice="" data-id="5"
                                                                        data-value="Rejected"
                                                                        data-select-text="Press to select"
                                                                        data-choice-selectable="">Rejected</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div>
                                                        <label for="type-input" class="form-label">Type</label>
                                                        <div class="choices" data-type="select-one" tabindex="0"
                                                            role="listbox" aria-label="Type" aria-haspopup="true"
                                                            aria-expanded="false">
                                                            <div class="choices__inner"><select
                                                                    class="form-control choices__input" data-trigger=""
                                                                    name="type-input" id="type-input" hidden=""
                                                                    tabindex="-1" data-choice="active">
                                                                    <option value="" selected="">Select Type</option>
                                                                    <option value="Full Time">Full Time</option>
                                                                    <option value="Part Time">Part Time</option>
                                                                </select>
                                                                <div class="choices__list choices__list--single">
                                                                    <div class="choices__item choices__placeholder choices__item--selectable"
                                                                        data-item="" data-id="1" data-value=""
                                                                        aria-selected="true" role="option"
                                                                        data-placeholder="">Select Type</div>
                                                                </div>
                                                            </div>
                                                            <div class="choices__list choices__list--dropdown"
                                                                aria-expanded="false">
                                                                <div class="choices__list" role="listbox">
                                                                    <div id="choices--type-input-item-choice-1"
                                                                        class="choices__item choices__item--choice is-selected choices__placeholder choices__item--selectable is-highlighted"
                                                                        role="option" data-choice="" data-id="1"
                                                                        data-value="" data-select-text="Press to select"
                                                                        data-choice-selectable="" aria-selected="true">
                                                                        Select Type</div>
                                                                    <div id="choices--type-input-item-choice-2"
                                                                        class="choices__item choices__item--choice choices__item--selectable"
                                                                        role="option" data-choice="" data-id="2"
                                                                        data-value="Full Time"
                                                                        data-select-text="Press to select"
                                                                        data-choice-selectable="">Full Time</div>
                                                                    <div id="choices--type-input-item-choice-3"
                                                                        class="choices__item choices__item--choice choices__item--selectable"
                                                                        role="option" data-choice="" data-id="3"
                                                                        data-value="Part Time"
                                                                        data-select-text="Press to select"
                                                                        data-choice-selectable="">Part Time</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <div class="hstack gap-2 justify-content-end">
                                                <button type="button" class="btn btn-light"
                                                    data-bs-dismiss="modal">Close</button>
                                                <button type="submit" class="btn btn-success" id="add-btn">Add</button>
                                                <!-- <button type="button" class="btn btn-success" id="edit-btn">Update</button> -->
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <!-- Modal -->
                        <div class="modal fade flip" id="deleteOrder" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                    <div class="modal-body p-5 text-center">
                                        <lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop"
                                            colors="primary:#405189,secondary:#f06548"
                                            style="width:90px;height:90px"></lord-icon>
                                        <div class="mt-4 text-center">
                                            <h4>You are about to delete a order ?</h4>
                                            <p class="text-muted fs-15 mb-4">Deleting your order will remove all of your
                                                information from our database.</p>
                                            <div class="hstack gap-2 justify-content-center remove">
                                                <button class="btn btn-link link-success fw-medium text-decoration-none"
                                                    id="deleteRecord-close" data-bs-dismiss="modal"><i
                                                        class="ri-close-line me-1 align-middle"></i> Close</button>
                                                <button class="btn btn-danger" id="delete-record">Yes, Delete It</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--end modal -->
                    </div>
                </div>

            </div>
            <!--end col-->
        </div>
        <!-- Job listing -->


        <!-- Edit Profile -->
        <div class="container my-5 pt-5">
            <div class="row">
                <div class="col-xxl-3">
                    <div class="card mt-n5">
                        <div class="card-body p-4">
                            <div class="text-center">
                                <div class="profile-user position-relative d-inline-block mx-auto  mb-4">
                                    <img src="{{ URL::asset('build/images/users/avatar-1.jpg') }}"
                                        class="rounded-circle avatar-xl img-thumbnail user-profile-image material-shadow"
                                        alt="user-profile-image">
                                    <div class="avatar-xs p-0 rounded-circle profile-photo-edit">
                                        <input id="profile-img-file-input" type="file" class="profile-img-file-input">
                                        <label for="profile-img-file-input" class="profile-photo-edit avatar-xs">
                                            <span class="avatar-title rounded-circle bg-light text-body material-shadow">
                                                <i class="ri-camera-fill"></i>
                                            </span>
                                        </label>
                                    </div>
                                </div>
                                <h5 class="fs-16 mb-1">Anna Adame</h5>
                                <p class="text-muted mb-0">Lead Designer / Developer</p>
                            </div>
                        </div>
                    </div>
                    <!--end card-->

                    <div class="card">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-4">
                                <div class="flex-grow-1">
                                    <h5 class="card-title mb-0">Portfolio</h5>
                                </div>
                                <div class="flex-shrink-0">
                                    <a href="javascript:void(0);" class="badge bg-light text-primary fs-12"><i
                                            class="ri-add-fill align-bottom me-1"></i> Add</a>
                                </div>
                            </div>
                            <div class="mb-3 d-flex">
                                <div class="avatar-xs d-block flex-shrink-0 me-3">
                                    <span class="avatar-title rounded-circle fs-16 bg-body text-body material-shadow">
                                        <i class="ri-github-fill"></i>
                                    </span>
                                </div>
                                <input type="email" class="form-control" id="gitUsername" placeholder="Username"
                                    value="@daveadame">
                            </div>
                            <div class="mb-3 d-flex">
                                <div class="avatar-xs d-block flex-shrink-0 me-3">
                                    <span class="avatar-title rounded-circle fs-16 bg-primary material-shadow">
                                        <i class="ri-global-fill"></i>
                                    </span>
                                </div>
                                <input type="text" class="form-control" id="websiteInput" placeholder="www.example.com"
                                    value="www.velzon.com">
                            </div>
                            <div class="mb-3 d-flex">
                                <div class="avatar-xs d-block flex-shrink-0 me-3">
                                    <span class="avatar-title rounded-circle fs-16 bg-success material-shadow">
                                        <i class="ri-dribbble-fill"></i>
                                    </span>
                                </div>
                                <input type="text" class="form-control" id="dribbleName" placeholder="Username"
                                    value="@dave_adame">
                            </div>
                            <div class="d-flex">
                                <div class="avatar-xs d-block flex-shrink-0 me-3">
                                    <span class="avatar-title rounded-circle fs-16 bg-danger material-shadow">
                                        <i class="ri-pinterest-fill"></i>
                                    </span>
                                </div>
                                <input type="text" class="form-control" id="pinterestName" placeholder="Username"
                                    value="Advance Dave">
                            </div>
                        </div>
                    </div>
                    <!--end card-->
                </div>
                <!--end col-->
                <div class="col-xxl-9">
                    <div class="card mt-xxl-n5">
                        <div class="card-header">
                            <ul class="nav nav-tabs-custom rounded card-header-tabs border-bottom-0" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" data-bs-toggle="tab" href="#personalDetails" role="tab">
                                        <i class="fas fa-home"></i> Personal Details
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-bs-toggle="tab" href="#changePassword" role="tab">
                                        <i class="far fa-user"></i> Change Password
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-bs-toggle="tab" href="#experience" role="tab">
                                        <i class="far fa-envelope"></i> Experience
                                    </a>
                                </li>

                            </ul>
                        </div>
                        <div class="card-body p-4">
                            <div class="tab-content">
                                <div class="tab-pane active" id="personalDetails" role="tabpanel">
                                    <form action="javascript:void(0);">
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="firstnameInput" class="form-label">First Name</label>
                                                    <input type="text" class="form-control" id="firstnameInput"
                                                        placeholder="Enter your firstname" value="Dave">
                                                </div>
                                            </div>
                                            <!--end col-->
                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="lastnameInput" class="form-label">Last Name</label>
                                                    <input type="text" class="form-control" id="lastnameInput"
                                                        placeholder="Enter your lastname" value="Adame">
                                                </div>
                                            </div>
                                            <!--end col-->
                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="phonenumberInput" class="form-label">Phone Number</label>
                                                    <input type="text" class="form-control" id="phonenumberInput"
                                                        placeholder="Enter your phone number" value="+(1) 987 6543">
                                                </div>
                                            </div>
                                            <!--end col-->
                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="emailInput" class="form-label">Email Address</label>
                                                    <input type="email" class="form-control" id="emailInput"
                                                        placeholder="Enter your email" value="daveadame@velzon.com">
                                                </div>
                                            </div>
                                            <!--end col-->
                                            <div class="col-lg-12">
                                                <div class="mb-3">
                                                    <label for="JoiningdatInput" class="form-label">Joining Date</label>
                                                    <input type="text" class="form-control" data-provider="flatpickr"
                                                        id="JoiningdatInput" data-date-format="d M, Y"
                                                        data-deafult-date="24 Nov, 2021" placeholder="Select date" />
                                                </div>
                                            </div>
                                            <!--end col-->
                                            <div class="col-lg-12">
                                                <div class="mb-3">
                                                    <label for="skillsInput" class="form-label">Skills</label>
                                                    <select class="form-control" name="skillsInput" data-choices
                                                        data-choices-text-unique-true multiple id="skillsInput">
                                                        <option value="illustrator">Illustrator</option>
                                                        <option value="photoshop">Photoshop</option>
                                                        <option value="css">CSS</option>
                                                        <option value="html">HTML</option>
                                                        <option value="javascript" selected>Javascript</option>
                                                        <option value="python">Python</option>
                                                        <option value="php">PHP</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <!--end col-->
                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="designationInput" class="form-label">Designation</label>
                                                    <input type="text" class="form-control" id="designationInput"
                                                        placeholder="Designation" value="Lead Designer / Developer">
                                                </div>
                                            </div>
                                            <!--end col-->
                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="websiteInput1" class="form-label">Website</label>
                                                    <input type="text" class="form-control" id="websiteInput1"
                                                        placeholder="www.example.com" value="www.velzon.com" />
                                                </div>
                                            </div>
                                            <!--end col-->
                                            <div class="col-lg-4">
                                                <div class="mb-3">
                                                    <label for="cityInput" class="form-label">City</label>
                                                    <input type="text" class="form-control" id="cityInput"
                                                        placeholder="City" value="California" />
                                                </div>
                                            </div>
                                            <!--end col-->
                                            <div class="col-lg-4">
                                                <div class="mb-3">
                                                    <label for="countryInput" class="form-label">Country</label>
                                                    <input type="text" class="form-control" id="countryInput"
                                                        placeholder="Country" value="United States" />
                                                </div>
                                            </div>
                                            <!--end col-->
                                            <div class="col-lg-4">
                                                <div class="mb-3">
                                                    <label for="zipcodeInput" class="form-label">Zip Code</label>
                                                    <input type="text" class="form-control" minlength="5" maxlength="6"
                                                        id="zipcodeInput" placeholder="Enter zipcode" value="90011">
                                                </div>
                                            </div>
                                            <!--end col-->
                                            <div class="col-lg-12">
                                                <div class="mb-3 pb-2">
                                                    <label for="exampleFormControlTextarea"
                                                        class="form-label">Description</label>
                                                    <textarea class="form-control" id="exampleFormControlTextarea"
                                                        placeholder="Enter your description"
                                                        rows="3">Hi I'm Anna Adame,It will be as simple as Occidental; in fact, it will be Occidental. To an English person, it will seem like simplified English, as a skeptical Cambridge friend of mine told me what Occidental is European languages are members of the same family.</textarea>
                                                </div>
                                            </div>
                                            <!--end col-->
                                            <div class="col-lg-12">
                                                <div class="hstack gap-2 justify-content-end">
                                                    <button type="submit" class="btn btn-primary">Updates</button>
                                                    <button type="button" class="btn btn-soft-success">Cancel</button>
                                                </div>
                                            </div>
                                            <!--end col-->
                                        </div>
                                        <!--end row-->
                                    </form>
                                </div>
                                <!--end tab-pane-->
                                <div class="tab-pane" id="changePassword" role="tabpanel">
                                    <form action="javascript:void(0);">
                                        <div class="row g-2">
                                            <div class="col-lg-4">
                                                <div>
                                                    <label for="oldpasswordInput" class="form-label">Old Password*</label>
                                                    <input type="password" class="form-control" id="oldpasswordInput"
                                                        placeholder="Enter current password">
                                                </div>
                                            </div>
                                            <!--end col-->
                                            <div class="col-lg-4">
                                                <div>
                                                    <label for="newpasswordInput" class="form-label">New Password*</label>
                                                    <input type="password" class="form-control" id="newpasswordInput"
                                                        placeholder="Enter new password">
                                                </div>
                                            </div>
                                            <!--end col-->
                                            <div class="col-lg-4">
                                                <div>
                                                    <label for="confirmpasswordInput" class="form-label">Confirm
                                                        Password*</label>
                                                    <input type="password" class="form-control" id="confirmpasswordInput"
                                                        placeholder="Confirm password">
                                                </div>
                                            </div>
                                            <!--end col-->
                                            <div class="col-lg-12">
                                                <div class="mb-3">
                                                    <a href="javascript:void(0);"
                                                        class="link-primary text-decoration-underline">Forgot Password ?</a>
                                                </div>
                                            </div>
                                            <!--end col-->
                                            <div class="col-lg-12">
                                                <div class="text-end">
                                                    <button type="submit" class="btn btn-success">Change Password</button>
                                                </div>
                                            </div>
                                            <!--end col-->
                                        </div>
                                        <!--end row-->
                                    </form>
                                    <div class="mt-4 mb-3 border-bottom pb-2">
                                        <div class="float-end">
                                            <a href="javascript:void(0);" class="link-primary">All Logout</a>
                                        </div>
                                        <h5 class="card-title">Login History</h5>
                                    </div>
                                    <div class="d-flex align-items-center mb-3">
                                        <div class="flex-shrink-0 avatar-sm">
                                            <div class="avatar-title bg-light text-primary rounded-3 fs-18 material-shadow">
                                                <i class="ri-smartphone-line"></i>
                                            </div>
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <h6>iPhone 12 Pro</h6>
                                            <p class="text-muted mb-0">Los Angeles, United States - March 16 at 2:47PM</p>
                                        </div>
                                        <div>
                                            <a href="javascript:void(0);">Logout</a>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center mb-3">
                                        <div class="flex-shrink-0 avatar-sm">
                                            <div class="avatar-title bg-light text-primary rounded-3 fs-18 material-shadow">
                                                <i class="ri-tablet-line"></i>
                                            </div>
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <h6>Apple iPad Pro</h6>
                                            <p class="text-muted mb-0">Washington, United States - November 06 at 10:43AM
                                            </p>
                                        </div>
                                        <div>
                                            <a href="javascript:void(0);">Logout</a>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center mb-3">
                                        <div class="flex-shrink-0 avatar-sm">
                                            <div class="avatar-title bg-light text-primary rounded-3 fs-18 material-shadow">
                                                <i class="ri-smartphone-line"></i>
                                            </div>
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <h6>Galaxy S21 Ultra 5G</h6>
                                            <p class="text-muted mb-0">Conneticut, United States - June 12 at 3:24PM</p>
                                        </div>
                                        <div>
                                            <a href="javascript:void(0);">Logout</a>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 avatar-sm">
                                            <div class="avatar-title bg-light text-primary rounded-3 fs-18 material-shadow">
                                                <i class="ri-macbook-line"></i>
                                            </div>
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <h6>Dell Inspiron 14</h6>
                                            <p class="text-muted mb-0">Phoenix, United States - July 26 at 8:10AM</p>
                                        </div>
                                        <div>
                                            <a href="javascript:void(0);">Logout</a>
                                        </div>
                                    </div>
                                </div>
                                <!--end tab-pane-->
                                <div class="tab-pane" id="experience" role="tabpanel">
                                    <form>
                                        <div id="newlink">
                                            <div id="1">
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <div class="mb-3">
                                                            <label for="jobTitle" class="form-label">Job Title</label>
                                                            <input type="text" class="form-control" id="jobTitle"
                                                                placeholder="Job title" value="Lead Designer / Developer">
                                                        </div>
                                                    </div>
                                                    <!--end col-->
                                                    <div class="col-lg-6">
                                                        <div class="mb-3">
                                                            <label for="companyName" class="form-label">Company Name</label>
                                                            <input type="text" class="form-control" id="companyName"
                                                                placeholder="Company name" value="Themesbrand">
                                                        </div>
                                                    </div>
                                                    <!--end col-->
                                                    <div class="col-lg-6">
                                                        <div class="mb-3">
                                                            <label for="experienceYear" class="form-label">Experience
                                                                Years</label>
                                                            <div class="row">
                                                                <div class="col-lg-5">
                                                                    <select class="form-control" data-choices
                                                                        data-choices-search-false name="experienceYear"
                                                                        id="experienceYear">
                                                                        <option value="">Select years</option>
                                                                        <option value="Choice 1">2001</option>
                                                                        <option value="Choice 2">2002</option>
                                                                        <option value="Choice 3">2003</option>
                                                                        <option value="Choice 4">2004</option>
                                                                        <option value="Choice 5">2005</option>
                                                                        <option value="Choice 6">2006</option>
                                                                        <option value="Choice 7">2007</option>
                                                                        <option value="Choice 8">2008</option>
                                                                        <option value="Choice 9">2009</option>
                                                                        <option value="Choice 10">2010</option>
                                                                        <option value="Choice 11">2011</option>
                                                                        <option value="Choice 12">2012</option>
                                                                        <option value="Choice 13">2013</option>
                                                                        <option value="Choice 14">2014</option>
                                                                        <option value="Choice 15">2015</option>
                                                                        <option value="Choice 16">2016</option>
                                                                        <option value="Choice 17" selected>2017</option>
                                                                        <option value="Choice 18">2018</option>
                                                                        <option value="Choice 19">2019</option>
                                                                        <option value="Choice 20">2020</option>
                                                                        <option value="Choice 21">2021</option>
                                                                        <option value="Choice 22">2022</option>
                                                                    </select>
                                                                </div>
                                                                <!--end col-->
                                                                <div class="col-auto align-self-center">
                                                                    to
                                                                </div>
                                                                <!--end col-->
                                                                <div class="col-lg-5">
                                                                    <select class="form-control" data-choices
                                                                        data-choices-search-false
                                                                        name="choices-single-default2">
                                                                        <option value="">Select years</option>
                                                                        <option value="Choice 1">2001</option>
                                                                        <option value="Choice 2">2002</option>
                                                                        <option value="Choice 3">2003</option>
                                                                        <option value="Choice 4">2004</option>
                                                                        <option value="Choice 5">2005</option>
                                                                        <option value="Choice 6">2006</option>
                                                                        <option value="Choice 7">2007</option>
                                                                        <option value="Choice 8">2008</option>
                                                                        <option value="Choice 9">2009</option>
                                                                        <option value="Choice 10">2010</option>
                                                                        <option value="Choice 11">2011</option>
                                                                        <option value="Choice 12">2012</option>
                                                                        <option value="Choice 13">2013</option>
                                                                        <option value="Choice 14">2014</option>
                                                                        <option value="Choice 15">2015</option>
                                                                        <option value="Choice 16">2016</option>
                                                                        <option value="Choice 17">2017</option>
                                                                        <option value="Choice 18">2018</option>
                                                                        <option value="Choice 19">2019</option>
                                                                        <option value="Choice 20" selected>2020</option>
                                                                        <option value="Choice 21">2021</option>
                                                                        <option value="Choice 22">2022</option>
                                                                    </select>
                                                                </div>
                                                                <!--end col-->
                                                            </div>
                                                            <!--end row-->
                                                        </div>
                                                    </div>
                                                    <!--end col-->
                                                    <div class="col-lg-12">
                                                        <div class="mb-3">
                                                            <label for="jobDescription" class="form-label">Job
                                                                Description</label>
                                                            <textarea class="form-control" id="jobDescription" rows="3"
                                                                placeholder="Enter description">You always want to make sure that your fonts work well together and try to limit the number of fonts you use to three or less. Experiment and play around with the fonts that you already have in the software you're working with reputable font websites. </textarea>
                                                        </div>
                                                    </div>
                                                    <!--end col-->
                                                    <div class="hstack gap-2 justify-content-end">
                                                        <a class="btn btn-success" href="javascript:deleteEl(1)">Delete</a>
                                                    </div>
                                                </div>
                                                <!--end row-->
                                            </div>
                                        </div>
                                        <div id="newForm" style="display: none;">

                                        </div>
                                        <div class="col-lg-12">
                                            <div class="hstack gap-2">
                                                <button type="submit" class="btn btn-success">Update</button>
                                                <a href="javascript:new_link()" class="btn btn-primary">Add New</a>
                                            </div>
                                        </div>
                                        <!--end col-->
                                    </form>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <!--end col-->
            </div>
        </div>
        <!-- Edit Profile -->
        <!--end row-->
@endsection
    @section('script')
        <script src="{{ URL::asset('build/js/pages/profile-setting.init.js') }}"></script>
        <script src="{{ URL::asset('build/js/app.js') }}"></script>
    @endsection