@extends('layouts.app')
@section('style')
    <style>
        .image2 {
            position:relative;
        }
        .image2 img {
            vertical-align:top;
        }
        .image2:after {
            content:'\A';
            position:absolute;
            width:100%; height:100%;
            top:0; left:0;
            background: white;
            opacity:0;
            transition: all 0.5s;
            -webkit-transition: all 0.5s;
        }
        .image2:hover:after {
            opacity:0.4;
        }

         /* The Modal (background) */
        .imgmodal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 10000; /* Sit on top */
            padding-top: 100px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
        }
        /* Modal Content (Image) */
        .cstmmodal {
            margin: auto;
            display: block;
            width: 80%;
            max-width: 700px;
        }

        /* Caption of Modal Image (Image Text) - Same Width as the Image */
        #caption {
            margin: auto;
            display: block;
            width: 80%;
            max-width: 700px;
            text-align: center;
            color: #ccc;
            padding: 10px 0;
            height: 150px;
        }

        /* Add Animation - Zoom in the Modal */
        .cstmmodal, #caption {
            animation-name: zoom;
            animation-duration: 0.6s;
        }

        @keyframes zoom {
            from {transform:scale(0)}
            to {transform:scale(1)}
        }

        /* The Close Button */
        .close {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            transition: 0.3s;
        }

        .close:hover,
        .close:focus {
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }

        /* 100% Image Width on Smaller Screens */
        @media only screen and (max-width: 700px){
            .cstmmodal {
            width: 100%;
            }
        }
    </style>
@endsection
@section('content')
<div class="col-12">

</div>
<div class="col-12 col-md-4">
    <div class="card card-user">
      <div class="image">
        <img src="{{URL::asset('/img/bg5.jpg')}}" alt="...">
      </div>
      <div class="card-body">
        <div class="author">
            {{-- <a href="#"> --}}
            <div class="image2 avatar text-center clickable mx-auto" onClick="viewImage('{{ asset('/uploads/photos/' .  $personnel->photo) }}')">
                <img class="avatar border-gray clickable" src="{{URL::asset('/uploads/photos/' .  $personnel->photo )}}" alt="..." id="imgProfile">
            </div>


            <h5 class="title mb-0">{{ $personnel->first_name . ' ' . $personnel->last_name }}</h5>
            @if(strlen($personnel->id) > 3 )
            <p>{{ 'CDO' . $personnel->created_at->format('Y') . '-' . $personnel->id }}</p>
            @elseif(strlen($personnel->id) > 2 )
            <p>{{ 'CDO' . $personnel->created_at->format('Y') . '-0' . $personnel->id }}</p>
            @elseif (strlen($personnel->id) > 1)
            <p>{{ 'CDO' . $personnel->created_at->format('Y') . '-00' . $personnel->id }}</p>
            @else
            <p>{{ 'CDO' . $personnel->created_at->format('Y') . '-000' . $personnel->id }}</p>
            @endif
            @if($personnel->is_active)
            <small class=" text-success">( ACTIVE )</small>
            @else
            <small class=" text-danger">( INACTIVE )</small>
            @endif

            {{-- </a> --}}
            <p class=" text-black mb-0 mt-3">
                {{ $personnel->contact_number }}
            </p>
            <p class=" text-black">
                {{ $personnel->email }}
            </p>


        </div>
      </div>
      <hr>
      <div class="button-container">
        <a href="{{ route('saving.show', [ 'id' =>$personnel->id ]) }}" class="btn btn-neutral btn-icon btn-round btn-lg" data-toggle="tooltip" data-placement="bottom" title="Loans and Savings">
          <i class="fas fa-piggy-bank"></i>
        </a>
        <button href="#" class="btn btn-neutral btn-icon btn-round btn-lg" onClick="viewImage('{{ asset('/uploads/sketches/' .  $personnel->home_sketch) }}')" data-toggle="tooltip" data-placement="bottom" title="Show Home Sketch">
            <i class="fas fa-home"></i>
        </button>
        <a href="{{ route('personnel.edit.profile', [ 'id' =>$personnel->id ]) }}" class="btn btn-neutral btn-icon btn-round btn-lg" data-toggle="tooltip" data-placement="bottom" title="Update Profile">
            <i class="fas fa-cog"></i>
        </a>
      </div>
    </div>
</div>
<div class="col-12 col-md-8">
    <div class="card">
        <div class="card-header">
            <h5 class="title mb-0">Profile</h5>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb"style="background-color: white; padding-left: 2px">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('personnel') }}">Personnel</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ $personnel->first_name . ' ' . $personnel->last_name }}</li>
                </ol>
            </nav>
        </div>
        <div class="card-body all-icons">
            <div class="row">
                <div class="col-3">
                    <small class="text-secondary">First Name</small>
                    <h5 class="ml-3">{{ $personnel->first_name }}</h5>
                </div>
                <div class="col-3">
                    <small class="text-secondary">Middle Name</small>
                    @if($personnel->middle_name != null)
                        <h5 class="ml-3">{{ $personnel->middle_name }}</h5>
                    @else
                        <p class="ml-3 text-secondary">N/A</p>
                    @endif
                </div>
                <div class="col-3">
                    <small class="text-secondary">Last Name</small>
                    <h5 class="ml-3">{{ $personnel->last_name }}</h5>
                </div>
                <div class="col-3">
                    <small class="text-secondary">Suffix</small>
                    @if($personnel->suffix != null)
                        <h5 class="ml-3">{{ $personnel->suffix }}</h5>
                    @else
                        <p class="ml-3 text-secondary">N/A</p>
                    @endif
                </div>
            </div>
            <div class="row">
                <div class="col-3">
                    <small class="text-secondary">Type</small>
                    <p class="ml-3">{{ $personnel->type }}</p>
                </div>
                <div class="col-3">
                    <small class="text-secondary">Sex</small>
                    <p class="ml-3">{{ $personnel->sex }}</p>
                </div>
                <div class="col-3">
                    <small class="text-secondary">Civil Status</small>
                    <p class="ml-3">{{ $personnel->civil_status }}</p>
                </div>
                <div class="col-3">
                    <small class="text-secondary">Citizenship</small>
                    <p class="ml-3">{{ $personnel->citizen }}</p>
                </div>
            </div>
            <div class="row">

                <div class="col-3">
                    <small class="text-secondary">Height</small>
                    <p class="ml-3">{{ $personnel->height }} cm</p>
                </div>
                <div class="col-3">
                    <small class="text-secondary">Weight</small>
                    <p class="ml-3">{{ $personnel->weight }} kg</p>
                </div>
                <div class="col-3">
                    <small class="text-secondary">Blood Type</small>
                    <p class="ml-3">{{ $personnel->blood_type }}</p>
                </div>
                <div class="col-3">
                    <small class="text-secondary">Date of Birth</small>
                    <p class="ml-3">{{ $personnel->date_of_birth }}</p>
                </div>
            </div>
            <div class="row">

                <div class="col-6">
                    <small class="text-secondary">Permanent Address</small>
                    <p class="ml-3">{{ $personnel->permanent_address }}</p>
                </div>
                <div class="col-6">
                    <small class="text-secondary">Current Address</small>
                    <p class="ml-3">{{ $personnel->current_address }}</p>
                </div>
                <div class="col-6">
                    <small class="text-secondary">Birthplace</small>
                    <p class="ml-3">{{ $personnel->birthplace }}</p>
                </div>
                <div class="col-3">
                    <small class="text-secondary">Mode of Payment</small>
                    <p class="ml-3">{{ $personnel->mode_of_payment }}</p>
                </div>
                <div class="col-3">
                    <small class="text-secondary">Location</small>
                    <p class="ml-3">{{ $personnel->location }}</p>
                </div>
            </div>
        </div>
        <div class="card-footer">
        </div>
    </div>
</div>
<div class="col-12">
    <div class="card">
        <div class="card-body">
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item">
                  <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Basic Information</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Files</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Other Information</a>
                </li>
              </ul>
              <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                    @include('personnels.basic')
                </div>
                <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                    @include('personnels.files')
                </div>
                <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                    @include('personnels.others')
                </div>
              </div>

        </div>
    </div>
</div>


</div>


<div id="psaModal" class="imgmodal" style="display:none">
    <span class="close" onClick="closeModal()">&times;</span>
    <img class="cstmmodal" id="img01">
    <div id="caption"></div>
</div>

@section('script')
    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })

        function viewImage(url) {
            let modal = document.getElementById('psaModal')
            //let img = document.getElementById(imgId)
            let modalImg = document.getElementById('img01')
            //let captionText = document.getElementById("caption");
            modal.style.display = "block"
            modalImg.src = url
            //captionText.innerHTML = img.alt
        }
        function closeModal () {
            let modal = document.getElementById('psaModal')
            modal.style.display = "none"
        }
    </script>
@endsection

@endsection