@extends('company.layouts.main')
@section('content')
<main>
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="mb-3 module-heading">Applicant Profile</h1>
                    </div>

                </div>


                <div class="bs-banner typ-profile-dashboard "
                    style="background-image: url('../assets/images/user-profile/banner-png-vector.png');">
                    <div class="resume-download">
                        <a class="edit btn btn-green btn-sm resume-position" href="#">Download Resume </span></a>
                    </div>
                    <div class="bs-profile-details">

                        <div class="profile-photo">
                            <div class="avatar-upload">
                                <div class="avatar-preview">

                                    <div id="imagePreview"
                                        style="background-image: url('../assets/images/user-profile/upload-photo.png');">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="profile-details">
                            <h2 class="name">Sam Hawkins</h2>
                            <h3 class="update-history">Profile last updated - <span>Yesterday</span>
                            </h3>
                            <div class="other-details">
                                <div class="location-details">
                                    <div class="location-list">
                                        <img src="../assets/images/location-popup.svg" alt="admin-building"
                                            class="img-fluid comp-logo"> Mumbai
                                    </div>
                                    <div class="location-list">
                                        <img src="../assets/images/fresher-popup.svg" alt="admin-building"
                                            class="img-fluid comp-logo"> Fresher
                                    </div>
                                </div>
                                <div class="email-details">
                                    <a href="#" class="location-list">
                                        <img src="../assets/images/call-popup.svg" alt="admin-building"
                                            class="img-fluid comp-logo"> +91 3216549870
                                    </a>
                                    <a href="mailto:SamHawkins22@gmail.com" class="location-list">
                                        <img src="../assets/images/mail-popup.svg" alt="admin-building"
                                            class="img-fluid comp-logo"> SamHawkins22@gmail.com
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        @if(Session::has('success'))
        <div id="successMessage" class="alert alert-success">{{ Session::get('success') }}</div>
        @endif
        <div class="card">
            <div class="card-body">
                <table id="datatable" class="display">
                    <thead>
                        <tr align="left">
                            <th>ID</th>
                            <th>Job Title</th>
                            <th>Applicant Name</th>
                            <th>action</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>



        <div class="tabs">
            <!-- use class 'animate' to set change tab transition animation -->
            <div class="tabs-nav">
                <!--   Must be label element   -->
                <label class="tab-nav active" for="tab-index1">Education</label>
                <label class="tab-nav" for="tab-index2">Experience</label>
                <label class="tab-nav" for="tab-index3">Skills</label>
                <label class="tab-nav" for="tab-index4">Certification</label>

            </div>
            <div class="tab-contents">
                <div class="tab-content">
                    <!--   this input element must be created with same id in label element inside attr 'for'   -->
                    <input type="radio" name="tab-index" id="tab-index1" checked />
                    <div class="content">
                        <div class="table-parent">
                            <table>
                                <tbody>
                                    <tr>
                                        <th>Qualification</th>
                                        <th>Degree Type</th>
                                        <th>Degree </th>
                                        <th>Start Date</th>
                                        <th>End Date</th>
                                        <th>Percentage
                                            CGPA</th>
                                        <th>College
                                            University</th>
                                        <th>Location</th>
                                    </tr>
                                    <tr>
                                        <td>
                                            Masters
                                        </td>
                                        <td>Full Time</td>
                                        <td>Msc. CS</td>
                                        <td>02-10-2024</td>
                                        <td>02-10-2024</td>
                                        <td class="text-center">62.8</td>
                                        <td>DY Patil</td>

                                        <td>
                                            Mumbai
                                        </td>


                                    </tr>
                                    <tr>
                                        <td>
                                            Masters
                                        </td>
                                        <td>Full Time</td>
                                        <td>Msc. CS</td>
                                        <td>02-10-2024</td>
                                        <td>02-10-2024</td>
                                        <td class="text-center">62.8</td>
                                        <td>DY Patil</td>

                                        <td>
                                            Mumbai
                                        </td>


                                    </tr>

                                </tbody>
                            </table>


                        </div>
                    </div>


                </div>
                <div class=" tab-content">
                    <input type="radio" name="tab-index" id="tab-index2" />
                    <div class="content">
                        <div class="table-parent">
                            <table>
                                <tbody>
                                    <tr>
                                        <th>Current
                                            Employment</th>
                                        <th>Designation</th>
                                        <th>Employment Type</th>
                                        <th>Sector </th>
                                        <th>Company Name</th>
                                        <th>Start Date</th>
                                        <th>End Date</th>
                                        <th>Location</th>
                                        <th>Remote</th>
                                    </tr>
                                    <tr>
                                        <td>
                                            Yes
                                        </td>
                                        <td>Advisor</td>
                                        <td>Full-Time</td>
                                        <td>Finance</td>
                                        <td>DSP Mutual Fund</td>
                                        <td>02-10-2024</td>
                                        <td>02-11-2024</td>

                                        <td>
                                            Mumbai
                                        </td>
                                        <td class="text-center">
                                            <p>NO</p>


                                            <i class="fas fa-check-circle fntsize-green"></i>
                                        </td>


                                    </tr>
                                    <tr>
                                        <td>
                                            Yes
                                        </td>
                                        <td>Advisor</td>
                                        <td>Full-Time</td>
                                        <td>Finance</td>
                                        <td>DSP Mutual Fund</td>
                                        <td>02-10-2024</td>
                                        <td>02-11-2024</td>
                                        <td> Mumbai</td>
                                        <td class="text-center">
                                            <p>NO</p>


                                            <i class="fas fa-check-circle fntsize-green"></i>
                                        </td>
                                    </tr>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="tab-content">
                    <input type="radio" name="tab-index" id="tab-index3" />
                    <div class="skill-buttons">
                        <a class="btn btn-addbtn" href="#">Skill 1</a>
                        <a class="btn btn-addbtn" href="#">Skill 2</a>
                        <a class="btn btn-addbtn" href="#">Skill 3</a>
                        <a class="btn btn-addbtn" href="#">Skill 4</a>
                    </div>
                </div>
                <div class="tab-content">
                    <input type="radio" name="tab-index" id="tab-index4" />
                    <div class="content">
                        <div class="table-parent">
                            <table>
                                <tbody>
                                    <tr>
                                        <th>Title of Certificate</th>
                                        <th>Issuing Organization</th>
                                        <th>Start Date </th>
                                        <th>End Date</th>
                                        <th>Location</th>
                                    </tr>
                                    <tr>
                                        <td>
                                            Google Cloud Computing
                                        </td>
                                        <td>Google</td>
                                        <td>02-10-2024</td>
                                        <td>02-11-2024</td>
                                        <td>Mumbai</td>





                                    </tr>
                                    <tr>
                                        <td>
                                            Google Cloud Computing
                                        </td>
                                        <td>Google</td>
                                        <td>02-10-2024</td>
                                        <td>02-11-2024</td>
                                        <td>Mumbai</td>



                                    </tr>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</main>
@endsection

@section('script') $(function () {
var table = $('#datatable').DataTable({
processing: true,
serverSide: true,
responsive:true,
order:['0','desc'],
ajax: "{{ route('job-application.view',$jobId) }}",

"columnDefs": [
{
"targets": [ 0 ],
"visible": false,
"searchable": true
},
],
"columns": [
{ data: 'id' },
{ data: 'title' },
{ data: 'username' },
{data: 'action', name: 'action', orderable: false, searchable: false},
]
});
setTimeout(function() {
$('#successMessage').fadeOut('fast');
}, 1000);
});
@endsection