@extends('adminlte::page')

@section('title', 'Core Services')

@section('content_header')
    <h1 class="text-dark text-bold text-center my-2">Add Core Service</h1>
@stop

@php 
    $index_count1=1;
    
@endphp

@section('content')
    <div class="card shadow rounded-lg mb-3 px-5 py-2">
        <div class="row mt-3">
            <div class="form-group">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb bg-white">
                        <li class="breadcrumb-item text-bold"><a href="{{ route('admin.home') }}">Home</a></li>
                        <li class="breadcrumb-item text-bold"><a href="{{ route('admin.core.services') }}">Core Services</a></li>
                        <li class="breadcrumb-item active text-bold" aria-current="page">Add</li>
                    </ol>
                </nav>
            </div>
        </div>
        @if ($errors->any())
            <div class="alert alert-danger" role="alert">
                <ul>
                    @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li> 
                    @endforeach
                </ul>
            </div>
        @endif
        <form id="file-upload" method="POST" action="{{ route('admin.service.core.store') }}" enctype="multipart/form-data">
            {{ csrf_field() }}

            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="title">Title</label>
                        <input type="text" name="title" class="form-control" id="title"  placeholder="title..." value="{{ old('title') }}" required>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="form-group">
                        <label for="service_country">Select Country Page</label>
                        <select class="category select2 rounded form-control" required name="service_country" id="service_country">
                            <option value="">- Select country page -</option>
                                <option value="home">Home Page</option>
                                <option value="usa">USA Home Page</option>
                                <option value="uk">UK Home Page</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="short_desc">Short Description</label>
                        <input type="text" name="short_desc" class="form-control" id="short_desc" placeholder="short description..." required>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="form-group">
                        <label for="service_link">Service Link</label>
                        <input type="text" name="service_link" class="form-control" id="service_link"  placeholder="service link..." required>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="form-group" id="notes-wrapper">
                        <label for="meta_description">Notes</label>
                        <div class="input-group mb-2 note-item">
                            <input type="text" name="notes[]" id="note_0" class="form-control" placeholder="note">
                            <button class="btn btn-success add-note" type="button">
                                <i class="fas fa-plus"></i>
                            </button>
                            <div id="note-error" class="text-danger mt-1" style="display:none;">
                                Please enter a note
                            </div>
                        </div>
                    </div>
                </div>
            </div>
           
            <div class="row justify-content-between my-3">
                <div class="col-md-2">
                    <div class="form-group mt-2">
                        <label >Publish</label>

                        <input id="switch" class="switch-chk-input" value="1" name="is_published" type="checkbox">
                        <label for="switch" class="switch-chk"></label>
                    </div>
                    
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <label for="submit">&nbsp;&nbsp;</label>
                        <input class="btn btn-block btn-success btn-lg" type="submit" value="Save">
                    </div>
                </div>
            </div>
        </form>
    </div>
      
@stop

@section('css')
    {{-- Add here extra stylesheets --}}
    <style>
        .input-group .custom-file {
            /* border-radius: 10px;  */
            overflow: hidden; 
        }
    </style>
@stop

@section('js')

    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function() {
            
            $('#file-upload').submit(function(e) {
                let allFilled = true;
                $("#note_0").val("");
                $('input[name="notes[]"]').each(function() {
                    if ($(this).val().trim() === '') {
                        allFilled = false;
                    }
                    else {
                        allFilled = true;
                    }
                });

                if (!allFilled) { 
                    e.preventDefault(); // prevent form submission
                    $('#note-error').show();
                    $("#note_0").focus();
                    setTimeout(function() {
                        $('#note-error').hide();
                    }, 3000);
                    return false;
                }
            });
            
            /*$('.select2').select2();
            $("#heading_name").select2({
                allowClear: true,
                minimumResultsForSearch: -1
            });*/
        });
        
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const wrapper = document.getElementById("notes-wrapper");
            const note0 = document.getElementById("note_0");
            const noteError = document.getElementById("note-error");
            let noteIndex = 1; 

            wrapper.addEventListener("click", function(e) {
                if (e.target.closest(".add-note")) {
                    noteError.style.display = "none";

                    if (note0.value.trim() === "") {
                        noteError.style.display = "block";
                        note0.focus();
                        setTimeout(() => {
                            noteError.style.display = "none";
                        }, 2000);
                        return;
                    }

                    const newNoteDiv = document.createElement("div");
                    newNoteDiv.classList.add("input-group", "mb-2", "note-item");

                    const newInput = document.createElement("input");
                    newInput.type = "text";
                    newInput.name = "notes[]";
                    newInput.id = `note_${noteIndex}`;
                    newInput.classList.add("form-control");
                    newInput.value = note0.value; 

                    const removeBtn = document.createElement("button");
                    removeBtn.type = "button";
                    removeBtn.classList.add("btn", "btn-danger", "remove-note");
                    removeBtn.innerHTML = '<i class="fas fa-minus"></i>';

                    newNoteDiv.appendChild(newInput);
                    newNoteDiv.appendChild(removeBtn);
                    wrapper.appendChild(newNoteDiv);

                    noteIndex++; 

                    note0.value = "";
                }

                // Remove dynamic input
                if (e.target.closest(".remove-note")) {
                    const noteItem = e.target.closest(".note-item");
                    noteItem.remove();
                }
            });
        });

  
    </script>
    
@stop