@php 
    $pageName = "application";
    $subpageName = "workshop_enrollment";  
@endphp

@extends('layouts.app')

@section('css')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    <style>
        #indicatorContainer {
            max-height: 70vh;
            overflow-y: auto;
        }

        .indicator-inner-table td {
            word-wrap: break-word;
            white-space: normal;
        }
    </style>
@endsection

@section('content')

    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h4 class="fw-bold">Workshop Enrollment</h4>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb breadcrumb-divide mb-0">
                        <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="#">Enrollment</a></li>
                        <li class="breadcrumb-item active">Workshop Enrollment</li>
                    </ol>
                </nav>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                 @if(Session::has('message'))
             <div class="alert alert-solid-success d-flex align-items-center" role="alert">
                <span class="alert-icon rounded">
                  <i class="ti ti-check"></i>
                </span>
                {{session('message')}}
              </div>
              @endif

                <form method="GET" class="mb-3">
                    <div class="row">
                        <div class="col-md-3">
                            <label>Start Date</label>
                            <input type="date" name="start_date" id="start_date" class="form-control">
                        </div>
                        <div class="col-md-3">
                            <label>End Date</label>
                            <input type="date" name="end_date" id="end_date" class="form-control">
                        </div>
                        <div class="col-md-2">
                            <label>&nbsp;</label>
                            <button class="btn btn-primary w-100">Search</button>
                        </div>
                    </div>
                </form>

                <table class="table table-bordered" id="diagnosticsTable">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Full Name</th>
                            <th>Gender</th>
                            <th>Mobile</th>
                            <th>Age</th>
                            <th>Email</th>
                            <th>Score(App)</th>
                            <th>Competence</th>
                            <th>Total</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($applicants as $i => $ent)
                            <tr>
                                <td>{{ $i + 1 }}</td>
                                <td>{{ $ent->surname }} {{ $ent->first_name }} {{ $ent->other_names }}</td>
                                <td>{{ $ent->gender }}</td>
                                <td>{{ $ent->mobile_number }}</td>
                                <td>{{ $ent->age }}</td>
                                <td>{{ $ent->email_address }}</td>
                                <td>{{ $ent->totalVariableScores() ?? 0 }}</td>
                                <td>{{ $ent->totalCompetenceScores() ?? 0 }}</td>
                                <td>{{ $ent->totalVariableScores() + $ent->totalCompetenceScores() }}</td>
                                <td>
                                    <a data-bs-toggle="modal" data-bs-target="#bigModal"
                                        data-url="{{ route('fetch-applicant-data', $ent->id) }}"
                                        class="btn btn-info btn-sm">Enroll</a>

                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>

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

    <div class="modal fade" id="bigModal" tabindex="-1" aria-hidden="true">
        <form method="post" autocomplete="off" action="{{route('workshop-enrollment-process')}}">
            @csrf
            <div class="modal-dialog modal-lg" role="document" style="width: 100%">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel1">Workshop Enrollment</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">



                        <p align="center" style="display: none; color: limegreen;" id="wait"><img
                                src="{{ asset('images/spinner-grey.gif')}}"> fetching information, please wait ....</p>




                        <div class="row g-3">
                            <div class="col"><b>Full Name:</b> <span id="fullname"></span></div>
                            <div class="col"><b>Gender:</b> <span id="gender"></span></div>
                            <div class="col"><b>Mobile:</b> <span id="phone"></span></div>
                        </div>
                        <div class="row g-3 mt-2">
                            <div class="col"><b>Email:</b> <span id="email"></span></div>
                            <div class="col"><b>Age:</b> <span id="age"></span></div>
                            <div class="col"><b>Business:</b> <span id="business"></span></div>
                            <input type="hidden" name="applicant_id" id="applicant_id">
                            
                        
                        </div>
                        <br>
                        <div class="row">

                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label" for="basic-default-fullname">Category</label>
                                    <select class="form-select changecategory" name="category">
                                        <option selected disabled>--Choose Category--</option>
                                        @foreach($workshopCategory as $item)
                                            <option value="{{$item->id}}">{{$item->name }}</option>
                                        @endforeach
                                    </select>
                                    @error('category')<small class="text-danger">{{$message}}</small> @enderror

                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label" for="basic-default-fullname">Type</label>
                                    <select class="form-select workshop_type" name="type">
                                        <option selected disabled>--Choose Type--</option>
                                        @foreach($workshopType as $item)
                                            <option value="{{$item->id}}">{{$item->name}}</option>
                                        @endforeach
                                    </select>
                                    @error('type')<small class="text-danger">{{$message}}</small> @enderror

                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label class="form-label" for="basic-default-fullname">Title</label>
                                    <select class="form-select workshop_title" name="workshop_id">
                                        <option selected disabled>--Choose Title--</option>
                                        @foreach($workshopTitle as $item)
                                            <option value="{{$item->id}}">{{$item->ttle}}</option>
                                        @endforeach
                                    </select>
                                    @error('workshop_id')<small class="text-danger">{{$message}}</small> @enderror

                                </div>
                            </div>

                        </div>



                        <div class="modal-footer">
                            <div class="float-start">
                                <button type="button" class="btn btn-danger mb-3" data-bs-dismiss="modal">Close</button>
                            </div>
                            <div class="float-end">
                                <button style="color: white;" type="submit" id="submit_btn"
                                    class="btn btn-info mb-3"><small>Admit Applicant</small></button>
                            </div>

                        </div>
                    </div>

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



@endsection

@section('scripts')

    <script>
        $(document).ready(function () {
            $('#diagnosticsTable').DataTable();
        });
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const year = new Date().getFullYear();
            document.getElementById('start_date').value = `${year}-01-01`;
            document.getElementById('end_date').value = new Date().toISOString().split('T')[0];
        });
    </script>

    <script>
        $(document).on('click', '[data-bs-target="#bigModal"]', function () {
            let url = $(this).data('url');
            $('#indicatorContainer').html('<p class="text-center">Loading...</p>');

            $.get(url, function (res) {
                const d = res.data;
                $('#applicant_id').val(d.id);
                $('#fullname').text(d.first_name + ' ' + d.surname);
                $('#gender').text(d.gender);
                $('#phone').text(d.mobile_number);
                $('#email').text(d.email_address);
                $('#age').text(d.age);
                $('#business').text(d.company_name);

            }).fail(function () {
                $('#indicatorContainer').html('<div class="alert alert-danger text-center">Failed to load data.</div>');
            });
        });
    </script>

    <script>
        $(document).ready(function () {
            $(document).on('change', '.changecategory', function () {
                var cat_id = $(this).val();

                var div = $(this).parent();

                var op = '';
                $.ajax({
                    type: 'get',
                    url: '{!!URL::to('findWorkshopTypeData')!!}',
                    data: { 'id': cat_id },
                    success: function (data) {
                        console.log(data);

                        op += '<option value="0" selected disabled>Select Type</option>';
                        for (var i = 0; i < data.length; i++) {
                            op += '<option value="' + data[i].id + '">' + data[i].name + '</option>';

                        }
                        $(".workshop_type").html(op);

                    },
                    error: function () {
                    }
                });
            });

        });
    </script>

    <script>
        $(document).ready(function () {
            $(document).on('change', '.changetype', function () {
                var type_id = $(this).val();

                var div = $(this).parent();

                var op = '';
                $.ajax({
                    type: 'get',
                    url: '{!!URL::to('findWorkshopTitleData')!!}',
                    data: { 'id': type_id },
                    success: function (data) {
                        console.log(data);

                        op += '<option value="0" selected disabled>Select Title</option>';
                        for (var i = 0; i < data.length; i++) {
                            op += '<option value="' + data[i].id + '">' + data[i].name + '</option>';

                        }
                        $(".workshop_title").html(op);

                    },
                    error: function () {
                    }
                });
            });

        });
    </script>

@endsection