@extends('layouts.default')
@section('content')
            <div class="page-title">
                    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li><h1>Fine Tune Models</h1></li>
            <li class="breadcrumb-item">
                <a href="{{ url('index') }}">
                    <svg width="16" height="16" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M2.125 6.375L8.5 1.41667L14.875 6.375V14.1667C14.875 14.5424 14.7257 14.9027 14.4601 15.1684C14.1944 15.4341 13.8341 15.5833 13.4583 15.5833H3.54167C3.16594 15.5833 2.80561 15.4341 2.53993 15.1684C2.27426 14.9027 2.125 14.5424 2.125 14.1667V6.375Z" stroke="var(--bs-body-color)" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M6.375 15.5833V8.5H10.625V15.5833" stroke="var(--bs-body-color)" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    Home
                </a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">Fine Tune Models</li>
        </ol>
    </nav>
            </div>          
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="alert alert-card-warning alert-alt alert-dismissible fade show">
                            This is a demo of AIKit plugin made for you to test the experience of using the plugin. Text & images generated in this demo are dummy. In real life, AIKit will call OpenAI API and generate relevant text and images based on your prompts
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>                        
                        <ul class="nav nav-tabs-standard pt-4 mb-3 nav-scroll nav-scroll-auto-xl">                            
                            <li class="nav-item"><a class="nav-link" href="{{ url('aikit/auto-write') }}">Auto Writer</a></li>
                            <li class="nav-item"><a class="nav-link" href="{{ url('aikit/scheduled') }}">Scheduler</a></li>
                            <li class="nav-item"><a class="nav-link" href="{{ url('aikit/repurpose') }}">Repurpose</a></li>
                            <li class="nav-item"><a class="nav-link" href="{{ url('aikit/rss') }}">RSS</a></li>
                            <li class="nav-item"><a class="nav-link" href="{{ url('aikit/chatbot') }}">Chatbot</a></li>
                            <li class="nav-item"><a class="nav-link active" aria-current="true" href="{{ url('aikit/fine-tune-models') }}">Fine-tune Models</a></li>
                            <li class="nav-item"><a class="nav-link" href="{{ url('aikit/prompt') }}">AI Menu Prompts</a></li>
                            <li class="nav-item"><a class="nav-link" href="{{ url('aikit/setting') }}">Settings</a></li>
                            <li class="nav-item"><a class="nav-link" href="{{ url('aikit/import') }}">Export/Import Settings</a></li>
                        </ul>
                        <div class="card h-auto">
                            <div class="card-header px-2 pt-1 pb-0 border-0">
                                <ul class="nav nav-underline mb-0 align-items-end" id="myTab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link border-3 active" id="create-tab" data-bs-toggle="tab" data-bs-target="#create-tab-pane" type="button" role="tab" aria-controls="create-tab-pane" aria-selected="true">Create Fine-tune Job</button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link border-3" id="jobs-tab" data-bs-toggle="tab" data-bs-target="#jobs-tab-pane" type="button" role="tab" aria-controls="jobs-tab-pane" aria-selected="false">Jobs<span class="badge rounded-circle text-bg-primary badge-sm ms-2">5</span></button>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="create-tab-pane" role="tabpanel" aria-labelledby="create-tab" tabindex="0">
                                <div class="row">
                                    <div class="col-xl-4">
                                        <div class="card h-auto">
                                            <div class="card-header border-0 pb-0">
                                                <h4 class="card-title">Create Repurpose Job</h4>
                                                <div class="clearfix">
                                                    <select class="selectpicker form-select">
                                                        <option data-content="<img src='{{ asset('images/svg/england.svg') }}' alt=''> England">England</option>
                                                        <option data-content="<img src='{{ asset('images/svg/india.svg') }}' alt=''> India">India</option>
                                                        <option data-content="<img src='{{ asset('images/svg/uae.svg') }}' alt=''> UAE">UAE</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="card-body">
                                                <div class="mb-3">
                                                    <label class="form-label">Choose content type:</label>
                                                    <span class="ms-1">
                                                        <svg class="ms-1" data-bs-toggle="tooltip" data-bs-title="Enter your RapidAPI key for Subtitles for YouTube here." width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M8.00016 14.6663C11.6821 14.6663 14.6668 11.6816 14.6668 7.99967C14.6668 4.31778 11.6821 1.33301 8.00016 1.33301C4.31826 1.33301 1.3335 4.31778 1.3335 7.99967C1.3335 11.6816 4.31826 14.6663 8.00016 14.6663Z" stroke="var(--bs-primary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                            <path d="M8 10.6667V8" stroke="var(--bs-primary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                            <path d="M8 5.33301H8.00667" stroke="var(--bs-primary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                        </svg>
                                                    </span>                                                 
                                                    <div class="my-2 d-flex align-items-center flex-wrap">
                                                        <a href="javascript:void(0);" class="btn btn-outline-primary me-3 mb-2">
                                                            <i class="fa-solid fa-bars-staggered"></i>Post or article
                                                        </a>
                                                        <a href="javascript:void(0);" class="btn btn-outline-primary mb-2">
                                                            <i class="fa-brands fa-youtube"></i> YouTube video
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="mb-3">
                                                    <label for="exampleFormControlInput1" class="form-label">URL of article, post or video</label>
                                                    <input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Find My Device">
                                                </div>
                                                <div class="mb-3">
                                                    <label for="exampleFormControlInput2" class="form-label">Posts to generate:</label>
                                                    <input type="number" class="form-control type-number" id="exampleFormControlInput2" placeholder="1">
                                                </div>
                                                <div class="mb-3">
                                                    <label for="exampleFormControlInput2" class="form-label">Post type</label>
                                                    <select class="selectpicker form-select">
                                                        <option selected>Post</option>
                                                        <option value="1">Product</option>
                                                    </select>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">Post type</label>
                                                    <select class="selectpicker form-select">
                                                        <option selected>Post</option>
                                                        <option value="1">Product</option>
                                                    </select>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">Post category</label>
                                                    <select class="selectpicker form-select">
                                                        <option selected>Uncategorized</option>
                                                        <option value="1">Categorized</option>
                                                    </select>
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">Post status</label>
                                                    <select class="selectpicker form-select">
                                                        <option selected>Draft</option>
                                                        <option value="1">Categorized</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="card-footer">
                                                <div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
                                                    <input type="checkbox" class="btn-check" id="btncheck1">
                                                    <label class="btn btn-outline-primary btn-sm me-1 mb-2" for="btncheck1">Include featured image</label>
                                                </div>
                                            </div>
                                            <div class="card-footer text-center">
                                                <a href="javascript:void(0);" class="btn btn-primary">
                                                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M3.33301 9.16699C5.32213 9.16699 7.22979 9.95717 8.63631 11.3637C10.0428 12.7702 10.833 14.6779 10.833 16.667" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                        <path d="M3.33301 3.33301C6.86923 3.33301 10.2606 4.73777 12.7611 7.23825C15.2616 9.73874 16.6663 13.1301 16.6663 16.6663" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                        <path d="M4.16634 16.6667C4.62658 16.6667 4.99967 16.2936 4.99967 15.8333C4.99967 15.3731 4.62658 15 4.16634 15C3.7061 15 3.33301 15.3731 3.33301 15.8333C3.33301 16.2936 3.7061 16.6667 4.16634 16.6667Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>
                                                    Add RSS Job
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                
                                    <div class="col-xl-8">
                                        <div class="accordion accordion-card mb-3" id="accordionExampleShadow">
                                            <div class="accordion-item">
                                                <h2 class="accordion-header">
                                                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOneCard" aria-expanded="true" aria-controls="collapseOneCard">Prompts</button>
                                                </h2>
                                                <div id="collapseOneCard" class="accordion-collapse collapse show" data-bs-parent="#accordionExampleCard">
                                                    <div class="accordion-body px-0">   
                                                    
                                                        <div class="d-flex align-items-center mb-2">
                                                            <h6 class="mb-0">article-title:</h6>
                                                            <span class="badge badge-sm badge-danger light ms-1">description</span>
                                                            <span class="mx-1">,</span>
                                                            <span class="badge badge-sm badge-danger light">section-headlines</span>
                                                        </div>
                                                        <div class="mb-3">
                                                            <textarea class="form-control bg-transparent" rows="3">
    Generate a title for an article that discusses the following topic:
        [[description]]
        The article will include the following sections:
        [[section-headlines]]

        Title:
                                                            </textarea>
                                                        </div>
                                                    
                                                        <div class="d-flex align-items-center mb-2">
                                                            <h6 class="mb-0">article-title:</h6>
                                                            <span class="badge badge-sm badge-danger light ms-1">description</span>
                                                            <span class="mx-1">,</span>
                                                            <span class="badge badge-sm badge-danger light">section-headlines</span>
                                                        </div>
                                                        <div class="mb-3">
                                                            <textarea class="form-control bg-transparent" rows="3">
    Generate a title for an article that discusses the following topic:
        [[description]]
        The article will include the following sections:
        [[section-headlines]]

        Title:
                                                            </textarea>
                                                        </div>
                                                    
                                                        <div class="d-flex align-items-center mb-2">
                                                            <h6 class="mb-0">article-title:</h6>
                                                            <span class="badge badge-sm badge-danger light ms-1">description</span>
                                                            <span class="mx-1">,</span>
                                                            <span class="badge badge-sm badge-danger light">section-headlines</span>
                                                        </div>
                                                        <div class="mb-3">
                                                            <textarea class="form-control bg-transparent" rows="3">
    Generate a title for an article that discusses the following topic:
        [[description]]
        The article will include the following sections:
        [[section-headlines]]

        Title:
                                                            </textarea>
                                                        </div>
                                                        
                                                        <div class="d-flex align-items-center mb-2">
                                                            <h6 class="mb-0">article-title:</h6>
                                                            <span class="badge badge-sm badge-danger light ms-1">description</span>
                                                            <span class="mx-1">,</span>
                                                            <span class="badge badge-sm badge-danger light">section-headlines</span>
                                                        </div>
                                                        <div class="mb-3">
                                                            <textarea class="form-control bg-transparent" rows="3">
    Generate a title for an article that discusses the following topic:
        [[description]]
        The article will include the following sections:
        [[section-headlines]]

        Title:
                                                            </textarea>
                                                        </div>
                                                    
                                                        <div class="d-flex align-items-center mb-2">
                                                            <h6 class="mb-0">article-title:</h6>
                                                            <span class="badge badge-sm badge-danger light ms-1">description</span>
                                                            <span class="mx-1">,</span>
                                                            <span class="badge badge-sm badge-danger light">section-headlines</span>
                                                        </div>
                                                        <div class="mb-3">
                                                            <textarea class="form-control bg-transparent" rows="3">
    Generate a title for an article that discusses the following topic:
        [[description]]
        The article will include the following sections:
        [[section-headlines]]

        Title:
                                                            </textarea>
                                                        </div>
                                                    
                                                        <div class="d-flex align-items-center mb-2">
                                                            <h6 class="mb-0">article-title:</h6>
                                                            <span class="badge badge-sm badge-danger light ms-1">description</span>
                                                            <span class="mx-1">,</span>
                                                            <span class="badge badge-sm badge-danger light">section-headlines</span>
                                                        </div>
                                                        <div class="mb-3">
                                                            <textarea class="form-control bg-transparent" rows="3">
    Generate a title for an article that discusses the following topic:
            [[description]]
            The article will include the following sections:
            [[section-headlines]]

            Title:
                                                            </textarea>
                                                        </div>
                                                    
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                
                                </div>
                            </div>
                          
                            <div class="tab-pane fade" id="jobs-tab-pane" role="tabpanel" aria-labelledby="jobs-tab" tabindex="0">
                                <div class="card">
                                    <div class="card-body p-0 table-card-body">
                                        <div class="table-responsive mb-2">
                                            <table id="aikitJobTable" class="table table-sm">
                                                <thead class="table-light text-nowrap">
                                                    <tr>
                                                        <th class="mw-150">Model Name Suffix</th>
                                                        <th class="mw-100">Model Name</th>
                                                        <th class="mw-100">Base Model</th>
                                                        <th class="mw-150">Date created</th>
                                                        <th class="mw-100">Status</th>
                                                        <th class="mw-100 text-end">Actions</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Write a rat book</td>
                                                        <td>fox</td>
                                                        <td>hourly</td>
                                                        <td>4:50 am July 11, 2023</td>
                                                        <td><span class="badge bg-light text-black">Pending training data</span></td>
                                                        <td class="text-end text-nowrap">
                                                            <a href="javascript:void(0);" class="btn btn-square btn-primary light btn-sm">
                                                                <i class="fa fa-eye "></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="btn btn-square btn-danger light btn-sm ms-1">
                                                                <i class="fa-solid fa-trash-can"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Write a lion story</td>
                                                        <td>bear</td>
                                                        <td>hourly</td>
                                                        <td>4:50 am July 11, 2023</td>
                                                        <td><span class="badge bg-light text-black">Pending training data</span></td>
                                                        <td class="text-end text-nowrap">
                                                            <a href="javascript:void(0);" class="btn btn-square btn-primary light btn-sm">
                                                                <i class="fa fa-eye "></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="btn btn-square btn-danger light btn-sm ms-1">
                                                                <i class="fa-solid fa-trash-can"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Write a rat story</td>
                                                        <td>lion</td>
                                                        <td>hourly</td>
                                                        <td>4:50 am July 11, 2023</td>
                                                        <td><span class="badge bg-light text-black">Pending training data</span></td>
                                                        <td class="text-end text-nowrap">
                                                            <a href="javascript:void(0);" class="btn btn-square btn-primary light btn-sm">
                                                                <i class="fa fa-eye "></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="btn btn-square btn-danger light btn-sm ms-1">
                                                                <i class="fa-solid fa-trash-can"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Write a jungal book</td>
                                                        <td>tiger</td>
                                                        <td>hourly</td>
                                                        <td>4:50 am July 11, 2023</td>
                                                        <td><span class="badge bg-success">Success</span></td>
                                                        <td class="text-end text-nowrap">
                                                            <a href="javascript:void(0);" class="btn btn-square btn-primary light btn-sm">
                                                                <i class="fa fa-eye "></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="btn btn-square btn-danger light btn-sm ms-1">
                                                                <i class="fa-solid fa-trash-can"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Write a human story</td>
                                                        <td>monkey</td>
                                                        <td>hourly</td>
                                                        <td>4:50 am July 11, 2023</td>
                                                        <td><span class="badge bg-light text-black">Write a rat story</span></td>
                                                        <td class="text-end text-nowrap">
                                                            <a href="javascript:void(0);" class="btn btn-square btn-primary light btn-sm">
                                                                <i class="fa fa-eye "></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="btn btn-square btn-danger light btn-sm ms-1">
                                                                <i class="fa-solid fa-trash-can"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Write a elephant story</td>
                                                        <td>rat</td>
                                                        <td>sagar</td>
                                                        <td>8:50 am July 11, 2023</td>
                                                        <td><span class="badge bg-light text-black">Write a rats story</span></td>
                                                        <td class="text-end text-nowrap">
                                                            <a href="javascript:void(0);" class="btn btn-square btn-primary light btn-sm">
                                                                <i class="fa fa-eye "></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="btn btn-square btn-danger light btn-sm ms-1">
                                                                <i class="fa-solid fa-trash-can"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Write a jungal book</td>
                                                        <td>elephant</td>
                                                        <td>hourly</td>
                                                        <td>4:50 am July 11, 2023</td>
                                                        <td><span class="badge bg-light text-black">Pending training data</span></td>
                                                        <td class="text-end text-nowrap">
                                                            <a href="javascript:void(0);" class="btn btn-square btn-primary light btn-sm">
                                                                <i class="fa fa-eye "></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="btn btn-square btn-danger light btn-sm ms-1">
                                                                <i class="fa-solid fa-trash-can"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Write a mango story</td>
                                                        <td>mango</td>
                                                        <td>hourly</td>
                                                        <td>4:50 am July 11, 2023</td>
                                                        <td><span class="badge bg-success">Success</span></td>
                                                        <td class="text-end text-nowrap">
                                                            <a href="javascript:void(0);" class="btn btn-square btn-primary light btn-sm">
                                                                <i class="fa fa-eye "></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="btn btn-square btn-danger light btn-sm ms-1">
                                                                <i class="fa-solid fa-trash-can"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Write a jungal book</td>
                                                        <td>mogali</td>
                                                        <td>hourly</td>
                                                        <td>4:50 am July 11, 2023</td>
                                                        <td><span class="badge bg-light text-black">Pending training data</span></td>
                                                        <td class="text-end text-nowrap">
                                                            <a href="javascript:void(0);" class="btn btn-square btn-primary light btn-sm">
                                                                <i class="fa fa-eye "></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="btn btn-square btn-danger light btn-sm ms-1">
                                                                <i class="fa-solid fa-trash-can"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Write a animal story</td>
                                                        <td>lion</td>
                                                        <td>hourly</td>
                                                        <td>4:50 am July 11, 2023</td>
                                                        <td><span class="badge bg-light text-black">Pending training data</span></td>
                                                        <td class="text-end text-nowrap">
                                                            <a href="javascript:void(0);" class="btn btn-square btn-primary light btn-sm">
                                                                <i class="fa fa-eye "></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="btn btn-square btn-danger light btn-sm ms-1">
                                                                <i class="fa-solid fa-trash-can"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Write a story</td>
                                                        <td>lion</td>
                                                        <td>hourly</td>
                                                        <td>4:50 am July 11, 2023</td>
                                                        <td><span class="badge bg-light text-black">Pending training data</span></td>
                                                        <td class="text-end text-nowrap">
                                                            <a href="javascript:void(0);" class="btn btn-square btn-primary light btn-sm">
                                                                <i class="fa fa-eye "></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="btn btn-square btn-danger light btn-sm ms-1">
                                                                <i class="fa-solid fa-trash-can"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Pending training data</td>
                                                        <td>lion</td>
                                                        <td>hourly</td>
                                                        <td>4:50 am July 11, 2023</td>
                                                        <td><span class="badge bg-light text-black">Pending training data</span></td>
                                                        <td class="text-end text-nowrap">
                                                            <a href="javascript:void(0);" class="btn btn-square btn-primary light btn-sm">
                                                                <i class="fa fa-eye "></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="btn btn-square btn-danger light btn-sm ms-1">
                                                                <i class="fa-solid fa-trash-can"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Write a butterfly story</td>
                                                        <td>lion</td>
                                                        <td>hourly</td>
                                                        <td>4:50 am July 11, 2023</td>
                                                        <td><span class="badge bg-success">Success</span></td>
                                                        <td class="text-end text-nowrap">
                                                            <a href="javascript:void(0);" class="btn btn-square btn-primary light btn-sm">
                                                                <i class="fa fa-eye "></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="btn btn-square btn-danger light btn-sm ms-1">
                                                                <i class="fa-solid fa-trash-can"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Write a monkey story</td>
                                                        <td>Monkey</td>
                                                        <td>hourly</td>
                                                        <td>4:50 am July 11, 2023</td>
                                                        <td><span class="badge bg-light text-black">Pending training data</span></td>
                                                        <td class="text-end text-nowrap">
                                                            <a href="javascript:void(0);" class="btn btn-square btn-primary light btn-sm">
                                                                <i class="fa fa-eye "></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="btn btn-square btn-danger light btn-sm ms-1">
                                                                <i class="fa-solid fa-trash-can"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Write a butterfly story</td>
                                                        <td>lion</td>
                                                        <td>hourly</td>
                                                        <td>4:50 am July 11, 2023</td>
                                                        <td><span class="badge bg-light text-black">Pending training data</span></td>
                                                        <td class="text-end text-nowrap">
                                                            <a href="javascript:void(0);" class="btn btn-square btn-primary light btn-sm">
                                                                <i class="fa fa-eye "></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="btn btn-square btn-danger light btn-sm ms-1">
                                                                <i class="fa-solid fa-trash-can"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>WPending training data</td>
                                                        <td>penguin</td>
                                                        <td>hourly</td>
                                                        <td>4:50 am July 11, 2023</td>
                                                        <td><span class="badge bg-light text-black">Pending training data</span></td>
                                                        <td class="text-end text-nowrap">
                                                            <a href="javascript:void(0);" class="btn btn-square btn-primary light btn-sm">
                                                                <i class="fa fa-eye "></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="btn btn-square btn-danger light btn-sm ms-1">
                                                                <i class="fa-solid fa-trash-can"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Write a rat story</td>
                                                        <td>lion</td>
                                                        <td>hourly</td>
                                                        <td>4:50 am July 11, 2023</td>
                                                        <td><span class="badge bg-success">Success</span></td>
                                                        <td class="text-end text-nowrap">
                                                            <a href="javascript:void(0);" class="btn btn-square btn-primary light btn-sm">
                                                                <i class="fa fa-eye "></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="btn btn-square btn-danger light btn-sm ms-1">
                                                                <i class="fa-solid fa-trash-can"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>WPending training data</td>
                                                        <td>lion</td>
                                                        <td>hourly</td>
                                                        <td>4:50 am July 11, 2023</td>
                                                        <td><span class="badge bg-light text-black">Pending training data</span></td>
                                                        <td class="text-end text-nowrap">
                                                            <a href="javascript:void(0);" class="btn btn-square btn-primary light btn-sm">
                                                                <i class="fa fa-eye "></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="btn btn-square btn-danger light btn-sm ms-1">
                                                                <i class="fa-solid fa-trash-can"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Write a monkey story</td>
                                                        <td>lion</td>
                                                        <td>hourly</td>
                                                        <td>4:50 am July 11, 2023</td>
                                                        <td><span class="badge bg-light text-black">Pending training data</span></td>
                                                        <td class="text-end text-nowrap">
                                                            <a href="javascript:void(0);" class="btn btn-square btn-primary light btn-sm">
                                                                <i class="fa fa-eye "></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="btn btn-square btn-danger light btn-sm ms-1">
                                                                <i class="fa-solid fa-trash-can"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Pending training data</td>
                                                        <td>lion</td>
                                                        <td>hourly</td>
                                                        <td>4:50 am July 11, 2023</td>
                                                        <td><span class="badge bg-success">Success</span></td>
                                                        <td class="text-end text-nowrap">
                                                            <a href="javascript:void(0);" class="btn btn-square btn-primary light btn-sm">
                                                                <i class="fa fa-eye "></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="btn btn-square btn-danger light btn-sm ms-1">
                                                                <i class="fa-solid fa-trash-can"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Write a rat story</td>
                                                        <td>lion</td>                                                       
                                                        <td>hourly</td>
                                                        <td>4:50 am July 11, 2023</td>
                                                        <td><span class="badge bg-light text-black">Pending training data</span></td>
                                                        <td class="text-end text-nowrap">
                                                            <a href="javascript:void(0);" class="btn btn-square btn-primary light btn-sm">
                                                                <i class="fa fa-eye "></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="btn btn-square btn-danger light btn-sm ms-1">
                                                                <i class="fa-solid fa-trash-can"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Write a animal story</td>
                                                        <td>lion</td>
                                                        <td>hourly</td>
                                                        <td>4:50 am July 11, 2023</td>
                                                        <td><span class="badge badge-light text-black">Pending training data</span></td>
                                                        <td class="text-end text-nowrap">
                                                            <a href="javascript:void(0);" class="btn btn-square btn-primary light btn-sm">
                                                                <i class="fa fa-eye "></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="btn btn-square btn-danger light btn-sm ms-1">
                                                                <i class="fa-solid fa-trash-can"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Write a bear story</td>
                                                        <td>lion</td>
                                                        <td>hourly</td>
                                                        <td>4:50 am July 11, 2023</td>
                                                        <td><span class="badge bg-success">Success</span></td>
                                                        <td class="text-end text-nowrap">
                                                            <a href="javascript:void(0);" class="btn btn-square btn-primary light btn-sm">
                                                                <i class="fa fa-eye "></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="btn btn-square btn-danger light btn-sm ms-1">
                                                                <i class="fa-solid fa-trash-can"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Write a monkey story</td>
                                                        <td>giraffe</td>
                                                        <td>hourly</td>
                                                        <td>4:50 am July 11, 2023</td>
                                                        <td><span class="badge bg-light text-black">Pending training data</span></td>
                                                        <td class="text-end text-nowrap">
                                                            <a href="javascript:void(0);" class="btn btn-square btn-primary light btn-sm">
                                                                <i class="fa fa-eye "></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="btn btn-square btn-danger light btn-sm ms-1">
                                                                <i class="fa-solid fa-trash-can"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Write a monkey story</td>
                                                        <td>monkey</td>
                                                        <td>hourly</td>
                                                        <td>4:50 am July 11, 2023</td>
                                                        <td><span class="badge bg-light text-black">Pending training data</span></td>
                                                        <td class="text-end text-nowrap">
                                                            <a href="javascript:void(0);" class="btn btn-square btn-primary light btn-sm">
                                                                <i class="fa fa-eye "></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="btn btn-square btn-danger light btn-sm ms-1">
                                                                <i class="fa-solid fa-trash-can"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Write a human story</td>
                                                        <td>human</td>
                                                        <td>viashnav</td>
                                                        <td>6:50 pm July 11, 2023</td>
                                                        <td><span class="badge bg-success">Success</span></td>
                                                        <td class="text-end text-nowrap">
                                                            <a href="javascript:void(0);" class="btn btn-square btn-primary light btn-sm">
                                                                <i class="fa fa-eye "></i>
                                                            </a>
                                                            <a href="javascript:void(0);" class="btn btn-square btn-danger light btn-sm ms-1">
                                                                <i class="fa-solid fa-trash-can"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
@endsection
@push('scripts')
<script>

    // Initialize tooltips (if not automatically done by Bootstrap 5)
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
    });

</script>
@endpush
@push('modals')
<div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-center">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel1">Invite Employee</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
              <div class="row">
                  <div class="col-xl-12">
                      <label class="form-label">Email ID<span class="text-danger">*</span></label>
                      <input type="email" class="form-control" placeholder="hello@gmail.com">
                      <label class="form-label mt-3">Employment date<span class="text-danger">*</span></label>
                      <input class="form-control" type="date">
                      <div class="row">
                          <div class="col-xl-6">
                              <label class="form-label mt-3">First Name<span class="text-danger">*</span></label>
                              <div class="input-group">
                                  <input type="text" class="form-control" placeholder="Name">
                              </div>
                          </div>
                          <div class="col-xl-6">
                              <label class="form-label mt-3">Last Name<span class="text-danger">*</span></label>
                              <div class="input-group">
                                  <input type="text" class="form-control" placeholder="Surname">
                              </div>
                          </div>
                      </div>
                      <div class="mt-3 invite">
                          <label class="form-label">Send invitation email<span class="text-danger">*</span></label>
                          <input type ="email" class="form-control " placeholder="+ invite">
                      </div>


                  </div>
              </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger light" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
  
@endpush
