@extends('layouts.welcome')

@section('title')
    Online Application
@endsection

@push('custom-css')
    <style>
        .invalid-feedback {
            display: block !important;
        }
    </style>
@endpush

@section('content')
    <div class="page-content-wrapper">
        <div class="page-content">
            <div class="page-bar">
                <div class="page-title-breadcrumb">
                    <ol class="breadcrumb page-breadcrumb pull-center">
                        <li class="">Personal Details<i class="fa fa-angle-right"></i></li>
                        <li class="">Education Background <i class="fa fa-angle-right"></i></li>
                        <li class="">Programme <i class="fa fa-angle-right"></i></li>
                        <li class="">Confirm Details <i class="fa fa-angle-right"></i></li>
                        <li class=""><strong>Files</strong></li>
                    </ol>
                </div>
            </div>
            {{-- {{dd($application_type)}} --}}
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <div class="card card-box">
                        <div class="card-head">
                            <header>Certificates</header>
                        </div>
                        <div class="row">
                            <div class="card-body col-sm-6" id="bar-parent2">
                                @if ($applicant_type_name == 'Undergraduate')
                                    <div class="row">
                                        <form method="post" action="{{ route('upload-files') }}" class="col-sm-6"
                                            enctype="multipart/form-data" id="form_sample_1" class="form-horizontal">
                                            @csrf
                                            <div id="personalDet" class="row">
                                                <div class="">
                                                    <div class="form-group">
                                                        <label>Certificate</label>
                                                        <select name="certificate" class="form-select">
                                                            <option value="4"> G12Certificate </option>
                                                        </select>
                                                    </div>
                                                    <div class="form-group" id="other">
                                                        <label>Certificate Name</label>
                                                        <input type="text" name="certificate_name"
                                                            placeholder="e.g Certificate 1 " class="form-control"
                                                            style="border-color: @error('certificate_name') red @enderror">
                                                        @error('certificate_name')
                                                            <div class="invalid-feedback">
                                                                {{ $message }}
                                                            </div>
                                                        @enderror
                                                    </div>
                                                    {{-- <input type="hidden" name="applicant_id" value="{{ $applicant->id }}"> --}}
                                                    <!-- textarea -->
                                                    <div class="form-group">
                                                        <label>File (Certificate)</label>
                                                        <input type="file" name="cert_file" class="form-control "
                                                            required>
                                                    </div>
                                                    @error('cert_file')
                                                        <div class="invalid-feedback" style="display: block;">
                                                            {{ $message }}
                                                        </div>
                                                    @enderror
                                                    <button type="submit" class="btn btn-info m-r-20">Upload</button>
                                                </div>
                                            </div>
                                        </form>

                                        <div class="card-body col-sm-6">
                                            <div class="table-scrollable">
                                                <table class="table">
                                                    <thead>
                                                        <tr>
                                                            <th>#</th>
                                                            <th>Certificate Name</th>
                                                            <th>Certification Type</th>
                                                            <th>Action</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($certificates as $certificate)
                                                            <tr>
                                                                <td>{{ $loop->index + 1 }}</td>
                                                                <td>{{ ucfirst($certificate->file_name) }}</td>
                                                                <td>{{ $certificate->file_type_name }}</td>
                                                                <td>
                                                                    <a
                                                                        href="{{ url('file-delete/' . $applicant->id . '/' . $certificate->file_id) }}">
                                                                        <i class="fa fa-trash-o"
                                                                            style="cursor: pointer"></i>
                                                                    </a>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- @endif --}}
                                @elseif($applicant_type_name == 'Postgraduate')
                                    <div class="row">
                                        <div class="card-body col-sm-6">
                                            <form method="post" id="postGradForm" action="{{ route('upload-files') }}"
                                                enctype="multipart/form-data" id="form_sample_1" class="form-horizontal">
                                                @csrf
                                                <div id="personalDet" class="row">
                                                    <div class="">
                                                        <div class="form-group">
                                                            <label>Type</label>
                                                            <select id="certificateType" name="certificate"
                                                                class="form-select" onchange="activateOtherField();">
                                                                @foreach ($file_types as $file_type)
                                                                    <option value="{{ $file_type->id }}">
                                                                        {{ ucfirst($file_type->file_type_name) }} </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="form-group" id="other">
                                                            <label>Certificate Name</label>
                                                            <input type="text" name="certificate_name"
                                                                placeholder="e.g BSc Economics " class="form-control">
                                                            @error('certificate_name')
                                                                <div class="invalid-feedback">
                                                                    {{ $message }}
                                                                </div>
                                                            @enderror
                                                        </div>
                                                        <input type="hidden" name="applicant_id"
                                                            value="{{ $applicant->id }}">
                                                        <!-- textarea -->
                                                        <div class="form-group">
                                                            <label>File (Certificate)</label>
                                                            <input type="file" name="cert_file" class="form-control">
                                                        </div>
                                                        <button type="submit" class="btn btn-info m-r-20">Upload</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>

                                        <div class="card-body col-sm-6">
                                            <div class="table-scrollable">
                                                <table class="table">
                                                    <thead>
                                                        <tr>
                                                            <th>#</th>
                                                            <th>Certificate Name</th>
                                                            <th>Certificate Type</th>
                                                            <th>Action</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($certificates as $certificate)
                                                            <tr>
                                                                <td>{{ $loop->index + 1 }}</td>
                                                                <td>{{ ucfirst($certificate->file_name) }}</td>
                                                                <td>{{ ucfirst($certificate->file_type_name) }}</td>
                                                                <td>
                                                                    <a
                                                                        href="{{ url('file-delete/' . $applicant->id . '/' . $certificate->certificate_id) }}">
                                                                        <i class="fa fa-trash-o"
                                                                            style="cursor: pointer"></i>
                                                                    </a>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @if ($certificates->first() != null)
                <form action="{{ route('application-complete') }}" method="GET">
                    @csrf
                    <button type="submit" class="btn btn-info m-r-20">Complete Application</button>
                </form>
            @endif
        </div>
    </div>
    <!-- end page content -->
    <script>
        var currentTab = 0; // Current tab is set to be the first tab (0)
        showTab(currentTab); // Display the current tab

        function showTab(n) {
            // This function will display the specified tab of the form...
            var x = document.getElementsByClassName("tab");
            x[n].style.display = "block";
            //... and fix the Previous/Next buttons:
            if (n == 0) {
                document.getElementById("prevBtn").style.display = "none";
            } else {
                document.getElementById("prevBtn").style.display = "inline";
            }
            if (n == (x.length - 1)) {
                document.getElementById("nextBtn").innerHTML = "Submit";
            } else {
                document.getElementById("nextBtn").innerHTML = "Next";
            }
            //... and run a function that will display the correct step indicator:
            fixStepIndicator(n)
        }

        function nextPrev(n) {
            // This function will figure out which tab to display
            var x = document.getElementsByClassName("tab");
            // Exit the function if any field in the current tab is invalid:
            if (n == 1 && !validateForm()) return false;
            // Hide the current tab:
            x[currentTab].style.display = "none";
            // Increase or decrease the current tab by 1:
            currentTab = currentTab + n;
            // if you have reached the end of the form...
            if (currentTab >= x.length) {
                // ... the form gets submitted:
                document.getElementById("regForm").submit();
                return false;
            }
            // Otherwise, display the correct tab:
            showTab(currentTab);
        }

        function validateForm() {
            // This function deals with validation of the form fields
            var x, y, i, valid = true;
            x = document.getElementsByClassName("tab");
            y = x[currentTab].getElementsByTagName("input");
            // A loop that checks every input field in the current tab:
            for (i = 0; i < y.length; i++) {
                // If a field is empty...
                if (y[i].value == "") {
                    // add an "invalid" class to the field:
                    y[i].className += " invalid";
                    // and set the current valid status to false
                    valid = false;
                }
            }
            // If the valid status is true, mark the step as finished and valid:
            if (valid) {
                document.getElementsByClassName("step")[currentTab].className += " finish";
            }
            return valid; // return the valid status
        }

        function fixStepIndicator(n) {
            // This function removes the "active" class of all steps...
            var i, x = document.getElementsByClassName("step");
            for (i = 0; i < x.length; i++) {
                x[i].className = x[i].className.replace(" active", "");
            }
            //... and adds the "active" class on the current step:
            x[n].className += " active";
        }
    </script>

@endsection