@extends('super-admin.layouts.main')
@section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">Add Cource Details</h1><br>
                        <a class="btn btn-outline-info" href="javascript:history.back()">Back</a>
                    </div><!-- /.col -->

                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <div class="content">
            <div class="container-fluid">
                <div class="card">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card-body"> 

                                <form action="{{ route('event.store') }}" method="POST" enctype="multipart/form-data"
                                    id="addEvents">
                                    @if (Session::has('success'))
                                        <div class="alert alert-success">{{ Session::get('success') }}</div>
                                    @endif
                                    @csrf

                                    <div class="form-group">
                                        <label> Title </label><span class="text-danger">*</span>
                                        <input type="text" class="form-control forms" name="title"
                                            value="{{ old('title') }}" placeholder="Enter Your Title">
                                    </div>

                                    <div class="form-group">
                                        <label>Cource Type</label><span class="text-danger">*</span>
                                        <select class="form-select form-control" onchange="handleQuestionType(this.value)"
                                        name="cource_type" id="cource_type">
                                        <option value="0">Select Question Type</option>
                                        <option value="online">Online</option>
                                        <option value="offline">Offline</option>
                                        </select>
                                        @error('department_id')
                                        <span class='text-danger'>{{$message}}</span>
                                        @enderror
                                    </div>

                                    <div class="form-group" id="link_type">
                                    <label>Meeting Link Type</label><span class="text-danger">*</span>
                                    <select class="form-control" name="linkTYpe" id="linkTYpe">
                                        <option value="0">Select Meeting Link Type</option>
                                        <option value="googleMeet">Google Meet</option>
                                        <option value="zoom">Zoom</option>
                                        <option value="microsoft">Microsoft Teams</option>
                                    </select><br>
                                    </div>

                                    <div class="form-group" id="meeting_link">
                                        <label> Meeting Link </label><span class="text-danger">*</span>
                                        <input type="text" class="form-control forms" name="link"
                                            value="{{ old('link') }}" placeholder="Enter Your link">
                                    </div>

                                    <div class="form-group" id="location">
                                    <label>Location</label><span class="text-danger">*</span>
                                    <select class="form-control" name="location" id="city_id">
                                        <option value="0">Select Location</option>
                                        @foreach ($cities as $city_name)
                                            <option value="{{ $city_name->id }}">{{ $city_name->city_name }}</option>
                                        @endforeach
                                    </select><br>
                                    </div>

                                    <div class="form-group" id="address">
                                        <label for="Editor">Cource Address</label><span class="text-danger">*</span>
                                        <textarea class="form-control" name="address" value="{{ old('address') }}" id="course_address"></textarea>
                                        <span class="text-danger error" id="addressError">
                                            @error('address')
                                                {{ $message }}
                                            @enderror
                                        </span><br>
                                    </div>


                                    <div class="form-group">
                                        <label for="Editor">Description</label><span class="text-danger">*</span>
                                        <textarea class="form-control summernote eventsummernoterror" name="description" value="{{ old('description') }}"></textarea>
                                        <span class="text-danger error" id="descriptionError">
                                            @error('description')
                                                {{ $message }}
                                            @enderror
                                        </span><br>
                                    </div>

                                    <div class="form-group">
                                        <label for="Editor">Foundational Description</label><span class="text-danger">*</span>
                                        <textarea class="form-control summernote eventsummernoterror" id="foundational_description" name="foundational_description" value="{{ old('foundational_description') }}"></textarea>
                                        <span class="text-danger error" id="foundational_descriptionError">
                                            @error('foundational_description')
                                                {{ $message }}
                                            @enderror
                                        </span><br>
                                    </div>

                                    <div class="form-group">
                                        <label> Image </label><span class="text-danger">*</span>
                                        <p style="font-size:14px;">Image size should be 305 * 172 px and image file type should be JPG or PNG .</p>
                                        <input type="file" name="banner_image" class="form-control"
                                            value="{{ old('banner_image') }}" accept="image/jpeg, image/png" />
                                    </div>

                                    <div class="form-group">
                                        <label>Background Banner Image </label><span class="text-danger">*</span>
                                        <p style="font-size:14px;">Image size should be 305 * 172 px and image file type should be JPG or PNG .</p>
                                        <input type="file" name="background_banner_image" class="form-control"
                                            value="{{ old('background_banner_image') }}" accept="image/jpeg, image/png" />
                                    </div>

                                    <div class="form-group">
                                        <label>Introduction Video</label><span class="text-danger">*</span>
                                        <input type="file" name="intro_video" class="form-control"
                                            value="{{ old('intro_video') }}" accept="video/*" />
                                    </div>

                                    <!-- <div class="form-group">
                                        <label>Video Thumbnail Image </label><span class="text-danger">*</span>
                                        <p style="font-size:14px;">Image size should be 589 * 411 px and image file type should be JPG or PNG .</p>
                                        <input type="file" name="video_thumbnail_image" class="form-control"
                                            value="{{ old('video_thumbnail_image') }}" accept="image/jpeg, image/png" />
                                    </div> -->

                                    <div class="row">
                                        <div class="form-group col-12 col-md-6">
                                            <label> Start Date </label><span class="text-danger">*</span>
                                            <input type="datetime-local" class="form-control forms" id="start_date" name="start_date"
                                                value="{{ old('start_date') }}">
                                        </div>

                                        <div class="form-group col-12 col-md-6">
                                            <label> End Date </label><span class="text-danger">*</span>
                                            <input type="datetime-local" class="form-control forms" id="end_date" name="end_date"
                                                value="{{ old('end_date') }}">
                                        </div>
                                    </div>


                                    <!-- <div class="form-group ">
                      <label> Location </label><span class="text-danger">*</span>
                      <input type="text" class="form-control forms" name="location" value="{{ old('location') }}"
                        placeholder="Enter Your Location">
                    </div> -->

                                    <label>Department</label><span class="text-danger">*</span>
                                    <select class="form-control" name="departments" id="industry_id">
                                        <option value="0">Select Department</option>
                                        @foreach ($departments as $department)
                                            <option value="{{ $department->id }}">{{ $department->department_name }}
                                            </option>
                                        @endforeach
                                    </select><br>

                                    <label>Dificulty Level</label><span class="text-danger">*</span>
                                    <select class="form-control" name="difficultyLevel" id="difficultyLevel_id">
                                        <option value="0">Select Dificulty Level</option>
                                        @foreach ($difficultyLevels as $difficultyLevel)
                                            <option value="{{ $difficultyLevel->id }}">
                                                {{ $difficultyLevel->difficulty_level }}</option>
                                        @endforeach
                                    </select><br>

                                    <div class="form-group">
                                        <label> Contact Info </label><span class="text-danger">*</span>
                                        <input type="text" class="form-control forms" name="contact_info"
                                            value="{{ old('contact_info') }}"
                                            placeholder="Enter Your Email or Phone Number">
                                    </div>

                                    <!-- <div class="form-group">
                                        <label> Category </label><span class="text-danger">*</span>
                                        <input type="text" class="form-control forms" name="category"
                                            value="{{ old('category') }}" placeholder="Enter Your Category">
                                    </div> -->

                                    <label>Category</label><span class="text-danger">*</span>
                                    <select class="form-control" name="category" id="category">
                                        <option value="0">Select Category</option>
                                        @foreach ($categories as $category)
                                            <option value="{{ $category->id }}">{{ $category->name }}</option>
                                        @endforeach
                                    </select><br>

                                    <div class="form-group">
                                        <label> Skills </label><span class="text-danger">*</span> (Add comma seprated values)<br>
                                        <input type="text" class="form-control forms" id="skills" name="skills"
                                            value="{{ old('skills') }}" placeholder="Enter skills">
                                        <div id="tagsContainer"></div>
                                    </div>

                                    <input type="text" hidden class="form-control forms" id="skill"
                                        name="skill" value="{{ old('skill') }}" placeholder="Enter skills">

                                        <label>Pricing</label><span class="text-danger">*</span>
                                        <select class="form-control" name="pricing" id="">
                                            <option value="0">Select Pricing</option>
                                            <option value="FREE">FREE</option>
                                            <option value="PREMIUM">PREMIUM</option>

                                        </select><br>
                                        @error('price')
                                            <span class='text-danger'>{{ $message }}</span>
                                        @enderror

                                    <div class="form-group">
                                        <label>Actual Amount </label><span class="text-danger">*</span>
                                        <input type="number" class="form-control forms" name="amount" id="amount"
                                            value="{{ old('amount') }}" placeholder="Enter Your Amount">
                                    </div>

                                    <div class="form-group">
                                        <label>Discount Amount </label>
                                        <input type="number" class="form-control forms" name="discoutamount" id="discoutamount"
                                            value="{{ old('discoutamount') }}" placeholder="Enter Your Discount Amount">
                                        <span id="amount_error" class="text-danger"></span>
                                        </div>


                                    <div class="form-group">
                                        <label>Select Instructor</label><span class="text-danger">*</span>
                                        <select name="select[]" id="multiselect" multiple multiselect-search="true">
                                            @foreach ($instructors as $instructor)
                                                <option value="{{ $instructor->id }}"
                                                    {{ in_array($instructor->id, old('select') ?: []) ? 'selected' : '' }}>
                                                    {{ $instructor->name }}</option>
                                            @endforeach
                                        </select><br>
                                        <span class="text-danger error" id="multiselectError"></span>
                                        <span class="text-danger">
                                            @error('select')
                                                {{ 'The Select Category field is required.' }}
                                            @enderror
                                        </span><br>

                                        <!-- <div class="form-group">
                                            <label> Is Online </label>
                                            <input type="checkbox" class=" forms" name="is_online">

                                        </div> -->
                                    </div>




                                    <div class="form-group">
                                        <button class="btn btn-info mt-4" type="submit">Submit</button>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script>
    document.addEventListener("DOMContentLoaded", function() {
        var now = new Date();
        var formattedDate = now.toISOString().slice(0, 16);  // Get date and time in the format YYYY-MM-DDTHH:MM

        var startDateInput = document.getElementById("start_date");
        var endDateInput = document.getElementById("end_date");

        startDateInput.min = formattedDate;
        endDateInput.min = formattedDate;

        // Optional: If the end date should always be after the start date, add this listener
        startDateInput.addEventListener("change", function() {
            endDateInput.min = startDateInput.value;
        });
    });
$(document).ready(function(){
  $('#link_type').hide();
  $('#meeting_link').hide();
  $('#location').hide();
  $('#address').hide();
});


$('#addEvents').submit(function (event) {

    var amount = $('#amount').val();
    var discount_amount = $('#discoutamount').val();
    var cource_type = $('#cource_type').val();
    var course_address = $('#course_address').val();
    var foundational_desc = $('#foundational_description').val();


    if(cource_type==="offline" && course_address.trim()=="" ){
        event.preventDefault();
        $('#addressError').text("Please enter address");
    }

    if(foundational_desc.trim()=="" ){
        event.preventDefault();
        $('#foundational_descriptionError').text("Please enter foundational description");
    }

    if (amount && discount_amount) {
        if (!isNaN(Number(amount)) && !isNaN(Number(discount_amount))) {
            // Check if discount_amount is greater than amount
            if (Number(amount) < Number(discount_amount)) {
                event.preventDefault();
                $('#amount_error').text("Discounted amount should not be greater than actual amount");
            }else{
                $('#amount_error').text("");
            }
        } else {
            event.preventDefault();
            $('#amount_error').text("Enter valid number");
        }
    }
});



function handleQuestionType(question_type) {

      if (question_type == "online") {
        $('#link_type').show();
        $('#meeting_link').show();
        $('#location').hide();
        $('#address').hide();
      } else {
        $('#link_type').hide();
        $('#meeting_link').hide();
        $('#location').show();
        $('#address').show();
      }
    }

        document.addEventListener('DOMContentLoaded', function () {
            var today = new Date();
            var tomorrow = new Date();
            tomorrow.setDate(today.getDate() + 1);

            var year = tomorrow.getFullYear();
            var month = ("0" + (tomorrow.getMonth() + 1)).slice(-2); // Months are zero-indexed
            var day = ("0" + tomorrow.getDate()).slice(-2);

            var tomorrowFormatted = year + "-" + month + "-" + day;

            document.getElementById('end_date').setAttribute('min', tomorrowFormatted);
        });
     </script>
@endsection