@extends('layouts.app')

@section('content')
    <div class="page-wrapper">
        <!-- Page-header start -->
        <div class="page-header">
            <div class="row align-items-end">
                <div class="col-lg-8">
                    <div class="page-header-breadcrumb-wrp">
                        <div class="page-header-breadcrumb">
                            <ul class="breadcrumb-title">
                                <li class="breadcrumb-item">
                                    <a href="{{ url('') }}"> <i class="feather icon-home"></i> </a>
                                </li>
                                <li class="breadcrumb-item"><a
                                        href="{{ url('questioner') }}">{{ __('Program Hub') }}</a>
                                </li>
                                <li class="breadcrumb-item">{{ __('Add Program') }}</li>
                            </ul>
                        </div>
                        <div class="page-header-title">
                            <div class="d-inline">
                                <h4>Add Program</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Page-header end -->
        <div class="page-body">
            <div class="row">
                <div class="col-sm-12">
                    <!-- Zero config.table start -->
                    <div class="card mb-3">
                        <div class="card-body">
                            @include('common.error')
                            <form class=" " method="POST" action="{{ route('programs.store') }}" id="needs-validation"
                                enctype="multipart/form-data">
                                @csrf
                                <div class="row">
                                    @foreach ($lang_list as $row)
                                        <div class="col-lg-12 col-md-12">
                                            <div class="form-group">
                                                <label for="">Program Name ({{ $row->language_name }}) <span
                                                        class="required" style="color: red;"> *</span></label>
                                                <input type="text"
                                                    class="form-control program-name-input onlyalpha-num rem-onlyspace"
                                                    name="fullName[{{ $row->language_name }}]" id="wordsLimit"
                                                    value="" placeholder="" required>
                                                <div class="invalid-feedback"
                                                    id="emojiFeedback_ProgramName_{{ $loop->index }}"
                                                    style="display:none;">
                                                    Emojis/SpecialChar are not allowed in this field.
                                                </div>
                                                <div class="invalid-feedback"
                                                    id="wordCountFeedback_ProgramName_{{ $loop->index }}"
                                                    style="display:none;">
                                                    You can type only 128 characters.
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <label for="">Description ({{ $row->language_name }})</label>
                                                <textarea rows="10" class="form-control summernote" name="fulldescription[{{ $row->language_name }}]"
                                                    placeholder=""> </textarea>
                                            </div>
                                        </div>
                                    @endforeach
                                    <div class="col-lg-4 col-md-3">
                                        <div class="form-group">
                                            <label for="validationCustom02">Start Date<span class="required"
                                                    style="color: red;"> *</span></label>
                                            <input type="date" min="{{ date('Y-m-d') }}" class="form-control"
                                                name="start_date" id="start_date" value="{{ old('start_date') }}"
                                                autocomplete="off" required>
                                            @error('start_date')
                                                <div class="error text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-3">
                                        <div class="form-group">
                                            <label for="validationCustom02">First Deadline Date <span class="required"
                                                    style="color: red;"> *</span></label>
                                            <input type="date" class="form-control" name="end_date" id="end_date"
                                                min="{{ date('Y-m-d') }}" value="{{ old('end_date') }}" autocomplete="off"
                                                required>
                                            @error('end_date')
                                                <div class="error text-danger">{{ $message }}</div>
                                            @enderror
                                            <div id="end_date_error" class="error text-danger"></div>
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-3">
                                        <div class="form-group">
                                            <label for="validationCustom02">Second Deadline Date<span class="required"
                                                    style="color: red;"> *</span></label>
                                            <input type="date" class="form-control" name="second_deadline_date"
                                                id="second_deadline_date" min="{{ date('Y-m-d') }}"
                                                value="{{ old('second_deadline_date') }}" autocomplete="off" required>
                                            @error('second_deadline_date')
                                                <div class="error text-danger">{{ $message }}</div>
                                            @enderror
                                            <div id="second_deadline_date_error" class="text-danger"></div>
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-3">
                                        <div class="form-group">
                                            <label for="validationCustom02">Program Start Date<span class="required"
                                                    style="color: red;"> *</span></label>
                                            <input type="date" class="form-control" min="{{ date('Y-m-d') }}"
                                                name="fellowship_start_date" id="fellowship_start_date"
                                                min="{{ date('Y-m-d') }}" value="{{ old('fellowship_start_date') }}"
                                                autocomplete="off" required>
                                            @error('start_date')
                                                <div class="error text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-3">
                                        <div class="form-group">
                                            <label for="validationCustom02">Program End Date<span class="required"
                                                    style="color: red;"> *</span></label>
                                            <input type="date" class="form-control" name="fellowship_end_date"
                                                id="fellowship_end_date" min="{{ date('Y-m-d') }}"
                                                value="{{ old('fellowship_end_date') }}" autocomplete="off" required>
                                            @error('fellowship_end_date')
                                                <div class="error text-danger">{{ $message }}</div>
                                            @enderror
                                            <div id="fellowship_end_date_error" class="error text-danger"></div>
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-3">
                                        <div class="form-group">
                                            <label for="">Program Logo<span class="required"
                                                style="color: red;"> *</span></label><br />
                                            <label class="custom-file">
                                                <input type="file" name="program_logo" id="program_logo"
                                                    class="form-control" accept="image/*" required>
                                            </label>
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-3">
                                        <div class="form-group">
                                            <label for="">Banner Image<span class="required"
                                                style="color: red;"> *</span></label><br />
                                            <label class="custom-file">
                                                <input type="file" name="banner_image" id="banner_image"
                                                    class="form-control" accept="image/*" required>
                                            </label>
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-3">
                                        <div class="form-group">
                                            <label for="">isBootcamp? </label><br />
                                            <label class="switch">
                                                <input type="checkbox" name="program_bootcomp" class="form-control">
                                                <span class="slider round"></span>
                                            </label>
                                        </div>
                                    </div>

                                    <div class="col-lg-12">
                                        <div class="text-right">
                                            <input type="submit" value="Save" class="btn btn-success me-2">
                                            <a href="{{ url('questioner') }}"><button type="button"
                                                    class="btn  btn-danger ">Cancel</button></a>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Page-body end -->
        </div>
    </div>

    <!-- Your script for input validation -->
    <script src="{{ asset('assets\js\emoji-spacialChar-validation.js') }}"></script>
    <!-- JavaScript code for validating dates -->
    <script>
        // End Date Error
        document.addEventListener("DOMContentLoaded", function() {
            var startDateInput = document.getElementById("start_date");
            var endDateInput = document.getElementById("end_date");
            startDateInput.addEventListener("input", function() {
                validateDates();
            });
            endDateInput.addEventListener("input", function() {
                validateDates();
            });

            function validateDates() {
                var startDateValue = startDateInput.value;
                var endDateValue = endDateInput.value;

                if (startDateValue && endDateValue) {
                    if (startDateValue === endDateValue) {
                        document.getElementById("end_date_error").innerHTML =
                            "End Date cannot be equal to start date.";
                        endDateInput.value = '';
                    } else if (new Date(startDateValue) > new Date(endDateValue)) {
                        document.getElementById("end_date_error").innerHTML =
                            "End Date cannot be less than start date.";
                        endDateInput.value = '';
                    } else {
                        document.getElementById("end_date_error").innerHTML = "";
                    }
                }
            }
        });

        // Second Deadline Date Error
        document.addEventListener("DOMContentLoaded", function() {
            var startDateInput = document.getElementById("end_date");
            var endDateInput = document.getElementById("second_deadline_date");
            startDateInput.addEventListener("input", function() {
                validateDates();
            });
            endDateInput.addEventListener("input", function() {
                validateDates();
            });

            function validateDates() {
                var startDateValue = startDateInput.value;
                var endDateValue = endDateInput.value;

                if (startDateValue && endDateValue) {
                    if (startDateValue === endDateValue) {
                        document.getElementById("second_deadline_date_error").innerHTML =
                            "Second Deadline date cannot be equal to end date.";
                        endDateInput.value = '';
                    } else if (new Date(startDateValue) > new Date(endDateValue)) {
                        document.getElementById("second_deadline_date_error").innerHTML =
                            "Second Deadline date cannot be less than end date.";
                        endDateInput.value = '';
                    } else {
                        document.getElementById("second_deadline_date_error").innerHTML = "";
                    }
                }
            }
        });

        // Fellowship End Date Error
        document.addEventListener("DOMContentLoaded", function() {
            var startDateInput = document.getElementById("fellowship_start_date");
            var endDateInput = document.getElementById("fellowship_end_date");
            startDateInput.addEventListener("input", function() {
                validateDates();
            });
            endDateInput.addEventListener("input", function() {
                validateDates();
            });

            function validateDates() {
                var startDateValue = startDateInput.value;
                var endDateValue = endDateInput.value;

                if (startDateValue && endDateValue) {
                    if (startDateValue === endDateValue) {
                        document.getElementById("fellowship_end_date_error").innerHTML =
                            "Fellowship End date cannot be equal to fellowship start date.";
                        endDateInput.value = '';
                    } else if (new Date(startDateValue) > new Date(endDateValue)) {
                        document.getElementById("fellowship_end_date_error").innerHTML =
                            "Fellowship End date cannot be less than fellowship start date.";
                        endDateInput.value = '';
                    } else {
                        document.getElementById("fellowship_end_date_error").innerHTML = "";
                    }
                }
            }
        });
    </script>

<script>
    $(document).ready(function() {
        $('.summernote').summernote({
            // Custom toolbar options if needed
            // toolbar: [
            //     ['style', ['style']],
            //     ['font', ['bold', 'italic', 'underline', 'clear']],
            //     ['para', ['ul', 'ol', 'paragraph']],
            //     ['insert', ['link', 'picture', 'video']],
            //     ['view', ['fullscreen', 'codeview']]
            // ],
            // Set custom fonts for the editor
            fontNames: ['Montserrat', 'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Roboto', 'Tahoma', 'Times New Roman', 'Verdana'],
            fontNamesIgnoreCheck: ['Montserrat'], // Exclude Montserrat from being checked as a Web Font
            // Set default font for the editor
            fontNamesDefault: 'Montserrat',
            // Optional: Load Montserrat font from Google Fonts
            styleTags: ['<p>', '<h1>', '<h2>', '<h3>', '<h4>', '<h5>', '<h6>'],
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'italic', 'underline', 'clear']],
                ['fontname', ['fontname']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['insert', ['link', 'picture', 'video']],
                ['view', ['fullscreen', 'codeview']]
            ],
            height: 300 // Set the height of the editor
        });
    });
    </script>
@endsection