@extends('layouts.backend')
@section('contents')
<style>

.das-board {
  text-align: center;
  padding: 40px;
  /*! border: 1px solid #ddd; */
  display: inline-block;
  width: 100%;
  background-color: #5693CD;
  color: #fff !important;
  border-radius: 10px;
  transition: 0.4s;
  opacity: 0.8;
  margin-bottom: 35px;

}
.das-board h4 {
  color: #fff !important;
  font-size: 24px;
  margin-bottom: 0;
}
.das-board:hover {
  background-color: #EB5757;
  opacity: 1;
}
.nav.nav-pills.flex-column.flex-md-row.mb-3, h5 {
	margin-bottom: 0 !important;
}
.nav.nav-pills, .nav.nav-pills h5 {
	margin-bottom: 0 !important;
}
.list-chart .card-header {
	background-color: #2F80ED;
	color: #fff !important;
	text-align: center;
	font-weight: 700;
}
.list-chart .card {
	height: 500px;
	overflow: auto;
}
</style>
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="row">
        <div class="col-xxl">
            <div class="mb-4">
                <!-- Basic Bootstrap Table -->
                <div class="row">
                    <div class="col-md-4">
                        <a href="{{ route('admin.vessel.index') }}" class="das-board">
                            <h4> Vessel </h4>
                        </a>
                    </div>
                    <div class="col-md-4" >
                        <a href="#" class="das-board">
                            <h4> Certificate </h4>
                        </a>
                    </div>
                    <div class="col-md-4" >
                        <a href="{{ route('admin.general-cv.index') }}" class="das-board">
                            <h4> General CV </h4>
                        </a>
                    </div>
                    <div class="col-md-4" >
                        <a href="#" class="das-board">
                            <h4> Hongkong Format </h4>
                        </a>
                    </div>
                    <div class="col-md-4" >
                        <a href="#" class="das-board">
                            <h4> Chinese Format </h4>
                        </a>
                    </div>
                </div>
                  <!--/ Basic Bootstrap Table -->
            </div>
        </div>
    </div>
    <div class="row list-chart">
        <div class="col-md-6">
            <div class="card">
                <h5 class="card-header">Vessel List </h5>
                <div class="table-responsive text-nowrap">
                  <table class="table">
                    <thead>
                      <tr>
                        <th>Vessel Name</th>
                        <th>IMO No</th>
                        <th>Status</th>
                      </tr>
                    </thead>
                    <tbody class="table-border-bottom-0">
                        @forelse ($vassels as $data )
                            <tr>
                                <td> <a href="{{ route('admin.vessel.show', [$data->id]) }}" target="_blank"> <strong>{{ $data->vessel_name }}</strong>  </a> </td>
                                <td><a href="{{ route('admin.vessel.show', [$data->id]) }}" target="_blank"> {{ $data->imo_no }}</a></td>
                                <td><span class="badge bg-label-primary me-1">{{ $data->status }}</span></td>

                            </tr>
                        @empty
                            <tr>
                                <td  colspan="4">No record Found</td>
                            </tr>
                        @endforelse

                    </tbody>
                  </table>
                </div>
              </div>
              <!--/ Basic Bootstrap Table -->
        </div>
        <div class="col-md-6">
            <div class="card mb-4">
                <!-- Basic Bootstrap Table -->
                <div class="card">
                    <h5 class="card-header">Applicant List</h5>
                    <div class="table-responsive text-nowrap">
                      <table class="table">
                        <thead>
                          <tr>
                            <th>Name</th>
                            <th>Vessel Name</th>
                            <th>Certificate</th>
                          </tr>
                        </thead>
                        <tbody class="table-border-bottom-0">
                            @forelse ($crew as $data )
                                <tr>
                                    <td> <a href="{{ route('admin.crew.show', [$data->id]) }}" target="_blank">

                                            <img height="50px" width="50px" style="margin-right: 10px" src="{{ asset($data->img) }}" alt="">
                                            <strong>{{ $data->full_name }}</strong>
                                        </a>
                                    </td>

                                     <td><span class="badge bg-label-primary me-1">{{ $data->vessel_name }}</span></td>
                                     <td><span ><a href="{{ route('admin.crewCertificate', [$data->id]) }}" target="_blank"  type="button" class="btn btn-primary" data-id="{{ $data->id }}" >Certificate</a></span></td>

                                </tr>
                            @empty
                                <tr>
                                    <td  colspan="4">No record Found</td>
                                </tr>
                            @endforelse

                        </tbody>
                      </table>
                    </div>
                  </div>
                  <!--/ Basic Bootstrap Table -->
            </div>
        </div>
    </div>
</div>
@endsection