@extends('layouts.app')

@section('title')
    Applicant Details
@endsection

@section('content')
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <div class="page-title-breadcrumb">
                    <div class=" pull-left">
                        <div class="page-title">Applicant's Details</div>
                    </div>
                </div>
            </div>
            @if (session('success'))
                <div class="alert alert-success alert-dismissible show" role="alert">
                   {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                        <span aria-hidden="false"></span>
                    </button>
                </div>
            @elseif(session('rejected'))
                <div class="alert alert-success alert-dismissible show" role="alert">
                   {{ session('rejected') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                        <span aria-hidden="false"></span>
                    </button>
                </div>
            @elseif(session('error'))
                <div class="alert alert-danger alert-dismissible show" role="alert">
                   {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                        <span aria-hidden="false"></span>
                    </button>
                </div>
            @endif
            <div class="row">
                <div class="col-md-12">
                    <!-- BEGIN PROFILE SIDEBAR -->
                    <div class="profile-sidebar">
                        <div class="card">
                            <div class="card-body no-padding height-9">
                                <div class="profile-userbuttons">

                                    @if ($applicant->applicant_status == 'incomplete')
                                        <span class="badge bg-warning mt-3">Incomplete</span>
                                    @elseif($applicant->applicant_status == 'verified')
                                        <span class="badge bg-primary mt-3">Verified</span>
                                    @elseif($applicant->applicant_status == 'selected')
                                        <span class="badge bg-success mt-3">Selected</span>
                                    @elseif($applicant->applicant_status == 'rejected')
                                        <span class="badge bg-danger mt-3">Rejected</span>
                                    @endif
                                    </a>
                                </div>
                                <br>
                                <div class="row">
                                    <div style="margin:auto;width:300px;height:300px">
                                        <img style="margin:auto;width:300px;height:300px;object-fit: cover;"
                                            src="../public/Images/{{ $user->size_photo_file_path }}" class="img-responsive"
                                            alt="">
                                    </div>
                                </div>
                                <div class="profile-usertitle">
                                    <div class="profile-usertitle-name">{{ $user->first_name }} {{ $user->last_name }}
                                    </div>
                                </div>
                                <ul class="list-group list-group-unbordered">
                                    <li class="list-group-item">
                                        <b>NRC/Passport</b>: <span class="pull-right">{{ $user->nrc_passport }}</span>
                                    </li>
                                    <li class="list-group-item">
                                        <b>Phone</b>: <span class="pull-right">{{ $user->phone }}</span>
                                    </li>
                                    <li class="list-group-item">
                                        <b>Email</b>: <span class="pull-right">{{ $user->email }}</span>
                                    </li>


                                </ul>
                                <!-- END SIDEBAR USER TITLE -->
                                <!-- SIDEBAR BUTTONS -->
                                <div class="profile-userbuttons">
                                    <form method="get" action="{{ url('update-applicant') }}">
                                        <input type="hidden" name="applicant_id" value="{{ $applicant->id }}">
                                        @if ($applicant->applicant_status == 'complete')
                                            <button type="submit" name="status" value="selected"
                                                class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect m-b-10 btn-circle btn-success">Select</button>
                                            <button type="submit" name="status" value="rejected"
                                                class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect m-b-10 btn-circle btn-danger">Reject</button>
                                        @elseif($applicant->applicant_status == 'selected')
                                            <button type="submit" name="status" value="rejected"
                                                class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect m-b-10 btn-circle btn-danger">Reject</button>
                                        @elseif($applicant->applicant_status == 'rejected')
                                            <button type="submit" name="status" value="selected"
                                                class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect m-b-10 btn-circle btn-success">Select</button>
                                        @endif
                                    </form>
                                </div>
                                <!-- END SIDEBAR BUTTONS -->
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-head">
                                <header>Personal Details</header>
                            </div>
                            <div class="card-body no-padding height-9">
                                <ul class="list-group list-group-unbordered">
                                    <li class="list-group-item">
                                        <b>Gender </b>
                                        <div class="profile-desc-item pull-right">{{ $user->gender }}</div>
                                    </li>
                                    <li class="list-group-item">
                                        <b>Date of Birth</b>
                                        <div class="profile-desc-item pull-right">
                                            {{ date('d-m-Y', strtotime($user->dob)) }}</div>
                                    </li>
                                    <li class="list-group-item">
                                        <b>Religion </b>
                                        <div class="profile-desc-item pull-right">{{ $user->religion }}</div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-head">
                                <header>Address</header>
                            </div>
                            <div class="card-body no-padding height-9">
                                <div class="row text-center m-t-10">
                                    <div class="col-md-12">
                                        <p>{{ $user->address }}
                                            <br>{{ $user->city }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- END BEGIN PROFILE SIDEBAR -->
                    <!-- BEGIN PROFILE CONTENT -->
                    <div class="profile-content">
                        <div class="row">
                            <div class="card">
                                <div class="card-topline-aqua">
                                    <header></header>
                                </div>
                                <div class="white-box">
                                    <!-- Nav tabs -->
                                    <div class="p-rl-20">
                                        <ul class="nav customtab nav-tabs" role="tablist">
                                            <li class="nav-item"><a onclick="tab1()" class="nav-link active"
                                                    data-bs-toggle="tab">Academics</a></li>
                                            <li class="nav-item"><a onclick="tab2()" class="nav-link"
                                                    data-bs-toggle="tab">Identity Files</a></li>
                                            <li class="nav-item"><a onclick="tab3()" class="nav-link"
                                                    data-bs-toggle="tab">Academic Files</a></li>
                                        </ul>
                                    </div>
                                    <!-- Tab panes -->
                                    <div id="academics" class="tab-content">
                                        <br>
                                        <h4 class="font-bold">Application Details</h4>
                                        {{-- <hr> --}}

                                        <ul class="list-group list-group-unbordered">
                                            <li class="list-group-item">
                                                <b>Intake Year Applied for </b>
                                                <div class="profile-desc-item pull-right">{{ $applicant->entry_year }}
                                                </div>
                                            </li>
                                            <li class="list-group-item">
                                                <b>Program</b>
                                                <div class="profile-desc-item pull-right">
                                                    @foreach ($programs as $program)
                                                        @if ($program->id == $applicant->program_id)
                                                            {{ $program->program_name }}
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </li>
                                        </ul>
                                        <br>
                                        <hr>
                                        {{-- <ul>
											<li>
												@foreach ($programs as $program)
													@if ($program->id == $applicant->program_id)
														{{$program->program_name}}
													@endif
												@endforeach
											</li>												
										</ul> --}}
                                        <h4 class="font-bold">Educational Background</h4>
                                        @if ($applicant->applicant_type_id)
                                            <ul class="list-group list-group-unbordered">
                                                <li class="list-group-item">
                                                    <b>High School Year of Completion </b>
                                                    <div class="profile-desc-item pull-right">
                                                        {{ $applicant->highschool_compl_date }}</div>
                                                </li>
                                                <li class="list-group-item">
                                                    <b>Hgh School Name</b>
                                                    <div class="profile-desc-item pull-right">
                                                        {{ $applicant->highschool_name }}</div>
                                                </li>
                                                <li class="list-group-item">
                                                    <b>Qualification </b>
                                                    <div class="profile-desc-item pull-right">
                                                        {{ $applicant->highest_qualification }}</div>
                                                </li>
                                            </ul>
                                        @endif

                                    </div>
                                    <div id="identity" class="tab-content">
                                        <br>
                                        <div class="post-box"> <span class="text-muted text-small">
                                                Front NRC</span>
                                            <div style="border:5px solid grey; width:600px;height:400px; border-radius: 30px;object-fit: cover;"
                                                class="post-img">
                                                @if ($user->front_nrc_path == null)
                                                    <img style="margin:auto;" src="../assets/img/slider/fullimage1.png"
                                                        class="img-responsive" alt="">
                                                @elseif($user->front_nrc_path)
                                                    <img style="margin:auto;width:550px;height:380px"
                                                        src="../public/Images/{{ $user->front_nrc_path }}"
                                                        class="img-responsive" alt="">
                                                @endif
                                            </div>
                                        </div>

                                        <br>
                                        <div class="post-box"> <span class="text-muted text-small"><i
                                                    class="fa fa-clock-o" aria-hidden="true"></i>
                                                Back NRC</span>
                                            <div style="border:5px solid grey; width:600px;height:400px; border-radius: 30px;"
                                                class="post-img">
                                                @if ($user->back_nrc_path == null)
                                                    <img style="margin:auto;" src="../assets/img/slider/fullimage1.png"
                                                        class="img-responsive" alt="">
                                                @elseif($user->back_nrc_path)
                                                    <img style="margin:auto;width:550px;height:380px"
                                                        src="../public/Images/{{ $user->back_nrc_path }}"
                                                        class="img-responsive" alt="">
                                                @endif
                                            </div>

                                        </div>

                                    </div>
                                    <div id="files" class="tab-content">
                                        <br>
                                        <div class="card-body ">

                                            <span style="text-align: right">
                                                <form method="get" action="{{ url('download-files') }}">
                                                    <input type="hidden" name="applicant_id"
                                                        value="{{ $applicant->id }}">
                                                    <button type="submit" name="status" value="verified"
                                                        class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect m-b-10 btn-circle btn-primary">Download
                                                        All</button>
                                                </form>
                                            </span>
                                            <div class="table-scrollable">
                                                <table class="table">
                                                    <thead>
                                                        <tr>
                                                            <th>#</th>
                                                            <th>File Name</th>
                                                            <th>File Type</th>
                                                            <th>Action</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($applicant_files as $applicant_file)
                                                            <tr>
                                                                <td>{{ $loop->index + 1 }}</td>
                                                                <td>{{ $applicant_file->file_name }}</td>
                                                                <td>
                                                                    @foreach ($file_types as $file_type)
                                                                        @if ($file_type->id == $applicant_file->file_type_id)
                                                                            {{ $file_type->file_type_name }}
                                                                        @endif
                                                                    @endforeach
                                                                </td>
                                                                <td>
                                                                    {{-- <button onclick="view({{$applicant_file->id}})">view</button> --}}
                                                                    <!-- Full screen modal -->
                                                                    <button type="button" class="btn btn-primary"
                                                                        data-bs-toggle="modal"
                                                                        data-bs-target="#fileViewer">
                                                                        View
                                                                    </button>
                                                                    <div class="modal" id="fileViewer"
                                                                        aria-labelledby="exampleModalFullscreenLabel"
                                                                        style="padding-top: 0 !important;"
                                                                        aria-modal="true" role="dialog">
                                                                        <div class="modal-dialog modal-fullscreen">
                                                                            <div class="modal-content"
                                                                                style="width: 100% !important;">
                                                                                <div class="modal-header">
                                                                                    <button type="button"
                                                                                        class="btn-close"
                                                                                        data-bs-dismiss="modal"
                                                                                        aria-label="Close"></button>
                                                                                </div>
                                                                                <div class="modal-body">
                                                                                    <iframe
                                                                                        src="../{{ $applicant_file->file_path }}"
                                                                                        width="100%" height="800px">
                                                                                </div>
                                                                                <div class="modal-footer">
                                                                                    <button type="button"
                                                                                        class="btn btn-secondary"
                                                                                        data-bs-dismiss="modal">Close</button>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                    <div id="pdf{{ $applicant_file->id }}"
                                                                        class="modal">
                                                                        <!-- Modal content -->
                                                                        <div style="width:100%" class="modal-content">

                                                                            <span style="text-align: right"><a
                                                                                    onclick="cls()"><button
                                                                                        style="background-color: red;color:white">
                                                                                        Close</button></a></span><br>

                                                                            <iframe
                                                                                src="../{{ $applicant_file->file_path }}"
                                                                                width="100%" height="800px">
                                                                            </iframe>
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- END PROFILE CONTENT -->
                </div>
            </div>
        </div>
    </div>
@endsection


<script>
    window.onload = function() {
        $('#identity')[0].style.display = "none";
        $('#files')[0].style.display = "none";
    };


    function view(pdf) {
        $('#pdf' + pdf)[0].style.display = "block";
    }

    function cls() {
        $('#pdf')[0].style.display = "none !important";
    }

    function tab1() {

        console.log($('#academics')[0]);
        $('#academics')[0].style.display = "block";
        $('#identity')[0].style.display = "none";
        $('#files')[0].style.display = "none";
    }

    function tab2() {
        console.log($('#academics')[0]);
        $('#identity')[0].style.display = "block";
        $('#academics')[0].style.display = "none";
        $('#files')[0].style.display = "none";
    }

    function tab3() {
        console.log($('#academics')[0]);
        $('#files')[0].style.display = "block";
        $('#identity')[0].style.display = "none";
        $('#academics')[0].style.display = "none";
    }
</script>