@extends('app-new')

@push('head-script')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/wizard/bs-stepper.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/pickadate/pickadate.css">
    <!-- END: Vendor CSS-->

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-validation.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-pickadate.css">
    <!-- END: Page CSS-->
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Employee Health Test</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/home">{{ trans('master/master.home') }}</a>
                    </li>
                    <li class="breadcrumb-item"><a href="/{!! $alias !!}/emp-health-tests">Health Test</a>
                    </li>
                    <li class="breadcrumb-item active">
                        @if (isset($emphealthMaster) && $emphealthMaster->id)
                            Edit Employee Health Test
                        @else
                            Add New Employee Health Test Details
                        @endif
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <!-- Basic multiple Column Form section start -->
    {!! Form::model($emphealthMaster, [
        'method' => isset($emphealthMaster) && $emphealthMaster->id ? 'put' : 'post',
        'files' => 'true',
    ]) !!}
        <section class="vertical-wizard">
            <div class="bs-stepper vertical vertical-wizard-example">
                <div class="bs-stepper-header">
                    <div class="step" data-target="#personal-info-vertical" role="tab"
                        id="personal-info-vertical-trigger">
                        <button type="button" class="step-trigger">
                            <span class="bs-stepper-box">1</span>
                            <span class="bs-stepper-label">
                                <span class="bs-stepper-title">Health Test Details</span>
                                <span class="bs-stepper-subtitle">Add Health Test Details</span>
                            </span>
                        </button>
                    </div>
                </div>
                <div class="bs-stepper-content">
                    <div id="personal-info-vertical" class="content position-relative" role="tabpanel"
                        aria-labelledby="personal-info-vertical-trigger">
                        <div class="content-header">
                            <h5 class="mb-0">Health Test Details</h5>
                            <small class="text-muted">Enter Health Test Details</small>
                        </div>
                        <div class="row">
                                <input type="hidden" id="currDate" value="{{ now()->format('Y-m-d') }}">
                                <div class="mb-1 col-md-4">
                                    <label class="form-label" for="employee_id" class="required">Employee<span class="mendatory-field text-danger">*</span></label>
                                        @if(isset($emphealthMaster)&& $emphealthMaster->id)
                                            <input type="text" class="form-control" value="{{ $emphealthMaster->employee->name ?? '' }}" readonly>
                                            <input type="hidden" name="employee_id"  id="employee_id"  value="{{ $emphealthMaster->employee_id }}">
                                        @else
                                            <select class="form-control select2 {{{ $errors->has('employee_id') ? 'error' : '' }}}" id="employee_id" name="employee_id" >
                                                <option value="">Select Employee</option>
                                                @foreach($employees as $employee)
                                                    <option value="{{$employee->id}}"  @if(isset($emphealthMaster) && ($emphealthMaster->employee_id == $employee->id) || (old('employee_id') == $employee->id)) selected @endif>{{$employee->name}}</option>
                                                @endforeach
                                            </select>
                                        @endif
                                        {!! $errors->first('employee_id', '<label id="basic-default-name-error" for="employee_id" class="error">:message</label>')!!}
                                </div>
                                <div class="mb-1 col-md-4" style="display:none">
                                    <label class="form-label" for="created_at" >Created At</label>
                                    <div class="form-control created_at_display">
                                        Created At
                                    </div>
                                </div>
                                <div class="mb-1 mt-2 col-md-4">
                                    <button type="button" class="btn btn-primary" id="addTraining"> <i data-feather="plus"></i> Add</button>
                                </div>
                                <div id="healthTestContainer">
                                    @php
                                        $healthMasters = old('healthMasters') ?: (isset($emphealthMaster->healthMasters) ? $emphealthMaster->healthMasters : [ [] ]);
                                    @endphp
                                    @foreach ($healthMasters as $index => $healthMaster)
                                        <div class="row training_row mt-1" data-index="{{ $index }}" style="border-bottom: 1px solid #ddd; margin-bottom:10px;">
                                            <div class="mb-1 col-md-3">
                                                <label class="form-label">Health Test<span class="mendatory-field text-danger">*</span></label>
                                                <select class="form-control select2 health_test_id_select {{ $errors->has("healthMasters.$index.health_test_id") ? 'error' : '' }}"
                                                        name="healthMasters[{{ $index }}][health_test_id]">
                                                    <option value="">Select Health Test</option>
                                                            @foreach($healthMastersList as $healthMasterOption)
                                                                <option value="{{ $healthMasterOption->id }}"
                                                                    {{ old("healthMasters.$index.health_test_id", $healthMaster['health_test_id'] ?? '') == $healthMasterOption->id ? 'selected' : '' }}>
                                                                    {{ $healthMasterOption->name }}
                                                                </option>
                                                            @endforeach
                                                </select>
                                                {!! $errors->first("healthMasters.$index.health_test_id", '<label id="basic-default-name-error" for="health_test_id" class="error">:message</label>') !!}
                                            </div>                                         
                                            <div class="mb-1 col-md-3">
                                                <label class="form-label">Due Date</label>
                                                <input type="date" name="healthMasters[{{ $index }}][due_date]" class="form-control due_date_div"
                                                       value="{{ old("healthMasters.$index.due_date", @$healthMaster['due_date'] ?? '') }}" readonly />
                                            </div>
                                            <div class="mb-1 col-md-3">
                                                <label class="form-label">Submission Date<span class="mendatory-field text-danger">*</span></label>
                                                <input type="date" name="healthMasters[{{ $index }}][submission_date]" class="form-control submission_date_select"
                                                       value="{{ old("healthMasters.$index.submission_date", @$healthMaster['submission_date'] ?? '') }}" />
                                                {!! $errors->first("healthMasters.$index.submission_date", '<label id="basic-default-name-error" for="name" class="error">:message</label>') !!}
                                            </div>
                                            <div class="mb-1 col-md-3">
                                                <label class="form-label">Valid Till Date</label>
                                                <input type="date" name="healthMasters[{{ $index }}][valid_till_date]" class="form-control valid_date_div"
                                                       value="{{ old("healthMasters.$index.valid_till_date", @$healthMaster['valid_till_date'] ?? '') }}" readonly />
                                            </div>
                                            <div class="mb-1 col-md-8">
                                                <label class="form-label" for="healthMasters[{{ $index }}][description]">Description</label>
                                                <textarea name="healthMasters[{{ $index }}][description]"
                                                          class="form-control {{ $errors->has("healthMasters.$index.description") ? 'error' : '' }}"
                                                          rows="1">{{ old("healthMasters.$index.description", @$healthMaster['description'] ?? '') }}</textarea>
                                                {!! $errors->first("healthMasters.$index.description", '<label id="basic-default-name-error" for="name" class="error">:message</label>') !!}
                                            </div>
                                            <div class="mb-1 col-md-4">
                                                <label class="form-label">Status<span class="mendatory-field text-danger">*</span></label>
                                                <input type="text" name="healthMasters[{{ $index }}][status]" class="form-control"
                                                       value="{{ old("healthMasters.$index.status", @$healthMaster['status'] ?? '') }}" />
                                                {!! $errors->first("healthMasters.$index.status", '<label id="basic-default-name-error" for="name" class="error">:message</label>') !!}
                                            </div>
                                            <div class="mb-1 col-md-3">
                                                <label class="form-label">Document Required</label>
                                                <select name="healthMasters[{{ $index }}][is_document_required]" class="form-control document_required">
                                                    <option></option>
                                                    <option value="yes" {{ old("healthMasters.$index.is_document_required", @$healthMaster['is_document_required'] ?? '') == 'yes' ? 'selected' : '' }}>Yes</option>
                                                    <option value="no" {{ old("healthMasters.$index.is_document_required", @$healthMaster['is_document_required'] ?? '') == 'no' ? 'selected' : '' }}>No</option>
                                                </select>
                                            </div>
                                            <div class="mb-1 col-md-4 document-upload-div" id="upload-div-{{ $index }}" style="{{ old("healthMasters.$index.is_document_required", @$healthMaster['is_document_required'] ?? '') == 'yes' ? '' : 'display:none;' }}">
                                                <label class="form-label">Upload Document<span> (image,pdf,doc)</span></label>
                                                <input type="file" name="healthMasters[{{ $index }}][attachment]" class="form-control" />
                                                {!! $errors->first("healthMasters.$index.attachment", '<label id="basic-default-name-error" for="name" class="error">:message</label>') !!}
                                            </div>
                                            <div class="col-md-2">
                                                @if(!empty($healthMaster['attachment_url']))
                                                    <div class="mt-2">
                                                        <a href="{{ $healthMaster['attachment_url'] }}" target="_blank" class="btn btn-sm btn-primary">
                                                            View Document
                                                        </a>
                                                    </div>
                                                @endif
                                            </div>
                                            <div class="col-md-1">
                                                <button type="button" class="btn btn-sm btn-secondary mt-2 removeTrainingRow">
                                                    <i data-feather="trash" class="font-4" aria-hidden="true"></i>
                                                </button>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                        </div>
                        <div class="content-footer  bottom-0 col-md-12">
                            <div class="d-flex flex-row-reverse content-footer">
                                <button type="submit" class="btn btn-success btn-submit user-submit">
                                    {{ trans('common/common.submit') }}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    {!! Form::close() !!}
    <!-- Basic Floating Label Form section end -->
@endsection

@push('footer-script')
    <!-- BEGIN: Page Vendor JS-->
    <script src="/app-assets/vendors/js/forms/wizard/bs-stepper.min.js"></script>
    <script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
    <script src="/app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>
    <script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/picker.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/picker.date.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/picker.time.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/legacy.js"></script>
    <!-- END: Page Vendor JS-->

    <!-- BEGIN: Page JS-->
    <script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
    <script src="/app-assets/js/scripts/forms/form-validation.js"></script>
    <script src="/app-assets/js/scripts/forms/pickers/form-pickers.js"></script>
    <script>
        const employeeCreatedAt = @json($createdAt);

        $(document).ready(function () {
            $('.select2').select2();
            let fetchedHealthTests = [];
            let maxHealthTestsAllowed = 1; 
            function loadHealthTestsForEmployee(employeeId) {
                const $healthMasterSelects = $('.health_test_id_select');
                let alias = "{{ request()->route('alias') }}";
                if (!employeeId) {
                    $healthMasterSelects.html('<option value="">Select Health Test</option>').trigger('change');
                    fetchedHealthTests = [];
                    return;
                }

                $.ajax({
                    url: `/${alias}/get-health-tests/${employeeId}`,
                    type: 'GET',
                    success: function (response) {
                        console.log(response);
                        fetchedHealthTests = response.healthMasters || [];
                        maxHealthTestsAllowed = fetchedHealthTests.length;
                        
                        if (fetchedHealthTests.length === 0) {
                            $healthMasterSelects.html('<option value="">No health tests found</option>').trigger('change');
                        } else {
                            $healthMasterSelects.each(function () {
                                const $select = $(this);
                                const selectedVal = $select.val();
                                $select.empty().append('<option value="">Select Health Test</option>');
                                fetchedHealthTests.forEach(function (healthMaster) {
                                    $select.append(
                                        $('<option>', {
                                            value: healthMaster.id,
                                            text: healthMaster.name,
                                            'data-validity': healthMaster.validity,
                                            'data-completion': healthMaster.completion,
                                        })
                                    );
                                });
                                $select.val(selectedVal).trigger('change.select2'); 
                            });
                        }
                    },
                    error: function () {
                        $healthMasterSelects.html('<option value="">Error loading healthMasters</option>').trigger('change');
                        fetchedHealthTests = [];
                    }

                    
                });
                console.log(fetchedHealthTests,'4365464');
            }
    
            $('#employee_id').on('change', function () {
                const employeeId = $(this).val();
                console.log(employeeId);
                loadHealthTestsForEmployee(employeeId);
                
                const createdAt =employeeCreatedAt[employeeId] || '';
                $('.created_at_display').text(createdAt);

                const $healthMasterRows = $('#healthTestContainer .training_row');
                if ($healthMasterRows.length > 1) {
                    $healthMasterRows.slice(1).remove();
                }
            });
    
            const initialEmployeeId = $('#employee_id').val();
            if (initialEmployeeId) {
                loadHealthTestsForEmployee(initialEmployeeId);
                const createdAt =employeeCreatedAt[initialEmployeeId] || '';
                $('.created_at_display').text(createdAt);
            }
    
            let trainingIndex = $('#healthTestContainer .training_row').length;
    
            $('#addTraining').click(function () {
                console.log('Add clicked, fetchedHealthTests:', fetchedHealthTests);
                if ($('#healthTestContainer .training_row').length >= maxHealthTestsAllowed) {
                    return; 
                }
                let newRow = `
                    <div class="row training_row mt-3" data-index="${trainingIndex}" style="border-bottom: 1px solid #ddd; margin-bottom:10px;">
                        <div class="mb-1 col-md-3">
                            <label class="form-label">Health Test<span class="mendatory-field text-danger">*</span></label>
                            <select class="form-control select2 health_test_id_select" name="healthMasters[${trainingIndex}][health_test_id]">
                                <option value="">Select Health Test</option>
                            </select>
                        </div>
                        <div class="mb-1 col-md-3">
                            <label class="form-label">Due Date</label>
                            <input type="date" name="healthMasters[${trainingIndex}][due_date]" class="form-control due_date_div" readonly />
                        </div>
                        <div class="mb-1 col-md-3">
                            <label class="form-label">Submission Date</label>
                            <input type="date" name="healthMasters[${trainingIndex}][submission_date]" class="form-control submission_date_select" />
                        </div>
                        <div class="mb-1 col-md-3">
                            <label class="form-label">Valid Till Date</label>
                            <input type="date" name="healthMasters[${trainingIndex}][valid_till_date]" class="form-control valid_date_div" readonly />
                        </div>
                        <div class="mb-1 col-md-8">
                            <label class="form-label">Description</label>
                            <textarea name="healthMasters[${trainingIndex}][description]" class="form-control" rows="1"></textarea>
                        </div>
                        <div class="mb-1 col-md-4">
                            <label class="form-label">Status<span class="mendatory-field text-danger">*</span></label>
                            <input type="text" name="healthMasters[${trainingIndex}][status]" class="form-control" />
                        </div>
                        <div class="mb-1 col-md-3">
                            <label class="form-label">Document Required</label>
                            <select name="healthMasters[${trainingIndex}][is_document_required]" class="form-control document_required">
                                <option></option>
                                <option value="yes" {{ old("healthMasters.$index.is_document_required", @$healthMaster['is_document_required'] ?? '') == 'yes' ? 'selected' : '' }}>Yes</option>
                                <option value="no" {{ old("healthMasters.$index.is_document_required", @$healthMaster['is_document_required'] ?? '') == 'no' ? 'selected' : '' }}>No</option>
                            </select>
                        </div>
                        <div class="mb-1 col-md-4 document-upload-div" id="upload-div-${trainingIndex}" style="{{ old("healthMasters.$index.is_document_required", @$healthMaster['is_document_required'] ?? '') == 'yes' ? '' : 'display:none;' }}">
                            <label class="form-label">Upload Document<span> (image,pdf,doc)</span></label>
                            <input type="file" name="healthMasters[${trainingIndex}][attachment]" class="form-control" />
                        </div>
                        <div class="col-md-2">
                            @if(!empty($healthMaster['attachment_url']))
                                <div class="mt-2">
                                    <a href="{{ $healthMaster['attachment_url'] }}" target="_blank" class="btn btn-sm btn-primary">
                                        View Document
                                    </a>
                                </div>
                            @endif
                        </div>
                        <div class="col-md-1">
                            <button type="button" class="btn btn-sm btn-secondary mt-2 removeTrainingRow">
                                <i data-feather="trash"></i>
                            </button>
                        </div>
                    </div>
                `;
    
                $('#healthTestContainer').append(newRow);
                const $newCompletionDateInput = $('#healthTestContainer .training_row:last .submission_date_select');
                $newCompletionDateInput.attr('max', today);
   
                // Populate healthMasters dropdown for the new row
                const $newSelect = $('#healthTestContainer .training_row:last .health_test_id_select');
                $newSelect.empty().append('<option value="">Select Health Test</option>');
                fetchedHealthTests.forEach(function (healthMaster) {
                    $newSelect.append(
                        $('<option>', {
                            value: healthMaster.id,
                            text: healthMaster.name,
                            'data-validity': healthMaster.validity,
                            'data-completion': healthMaster.completion
                        })
                    );
                });
                $newSelect.select2();
    
                trainingIndex++;
    
                if (typeof feather !== 'undefined') {
                    feather.replace();
                }
            });
    
            $('#healthTestContainer').on('click', '.removeTrainingRow', function () {
                if ($('.training_row').length > 1) {
                    $(this).closest('.training_row').remove();
                } else {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Cannot remove',
                        text: 'At least one entry must remain.'
                    });
                }
            });
    
            $('#healthTestContainer').on('change', '.health_test_id_select', function () {
                const selectedValue = $(this).val();
                const $selectedOption = $(this).find(`option[value="${selectedValue}"]`);
                const completionDays = parseInt($selectedOption.attr('data-completion'), 10);
    
                if (isNaN(completionDays)) return;
                const $row = $(this).closest('.training_row');
                const createdAtText = $('.created_at_display').text().trim();
                if (!createdAtText || isNaN(Date.parse(createdAtText))) return;
                
                const createdAt = new Date(createdAtText);
                const dueDate = new Date(createdAt);
                
                dueDate.setDate(createdAt.getDate() + completionDays);
                const formatDate = date => date.toISOString().split('T')[0];
    
                $row.find('input[name*="[due_date]"]').val(formatDate(dueDate));
            });

            $('#healthTestContainer').on('change', '.submission_date_select', function () {
                const $row = $(this).closest('.training_row');
                const selectedCompletionDate = $(this).val();
                if (!selectedCompletionDate || isNaN(Date.parse(selectedCompletionDate))) return;

                const $selectedTraining = $row.find('.health_test_id_select option:selected');
                const validityDays = parseInt($selectedTraining.attr('data-validity'), 10);

                if (isNaN(validityDays)) return;

                const completionDate = new Date(selectedCompletionDate);
                const validTillDate = new Date(completionDate);
                validTillDate.setDate(validTillDate.getDate() + validityDays);

                const formatDate = date => date.toISOString().split('T')[0];
                $row.find('input[name*="[valid_till_date]"]').val(formatDate(validTillDate));
            });

            const today = $('#currDate').val();
            
            $('#healthTestContainer .submission_date_select').each(function () {
                $(this).attr('max', today);
            });

            $('#healthTestContainer').on('change', '.document_required', function () {
                const $row = $(this).closest('.training_row');
                const $uploadDiv = $row.find('.document-upload-div');

                if ($(this).val() === 'yes') {
                    $uploadDiv.show();
                } else {
                    $uploadDiv.hide();
                }
            });
        });
    </script>
@endpush