@extends('admin/admin_master')
@section('admin')

<script src="{{ asset('backend/assets/libs/jquery/jquery.min.js') }}"></script>

<div class="page-content">
    <div class="container-fluid">
        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                    <h4 class="mb-sm-0 font-size-18">Add New Medical Word</h4>

                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="{{ route('all.allopathic.medicines') }}">All Medicines</a></li>
                            <li class="breadcrumb-item active">Add New Medical Word</li>
                        </ol>
                    </div>

                </div>
            </div>
        </div>
        <!-- end page title -->

    <!-- Add New Allopathic Medicine -->
    <form method="post" action="{{ route('store.medical.word') }}" enctype="multipart/form-data" id="myForm">

        @csrf
            <div class="row">
                    <div class="col-lg-9 col-sm-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title text-center">Add New Medical Word</h4>
                            </div>
                            <div class="card-body p-4">
                                
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="mt-4 mt-lg-0">
                                                <div class="row mb-4">
                                                    <div class="col-sm-12 form-group">
                                                      <input type="text" name="english_title" class="form-control" id="english_title" placeholder="English Title">
                                                      @error('english_title')
                                                      <span class="text-danger"> {{ $message }} </span>
                                                      @enderror
                                                    </div>
                                                </div>

                                                <div class="row mb-4">
                                                    <div class="col-sm-12 form-group">
                                                      <input type="text" name="tamil_title" class="form-control" id="tamil_title" placeholder="Tamil Title" autofocus>
                                                      @error('tamil_title')
                                                      <span class="text-danger"> {{ $message }} </span>
                                                      @enderror
                                                    </div>
                                                </div>

                                                <div class="row mb-4">
                                                    <div class="col-sm-12 form-group">
                                                        <textarea name="content" class="form-control textarea-desc" rows="8" id="content"></textarea>
                                                        <p>60/<span id="content_count"></span></p>
                                                        </div>
                                                      @error('content')
                                                      <span class="text-danger"> {{ $message }} </span>
                                                      @enderror
                                                </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title text-center">Content Details</h4>
                            </div>
                            <div class="card-body p-4">
                                
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="mt-4 mt-lg-0">

                                                <div class="row mb-4">
                                                    <div class="col-sm-12 form-group">
                                                      <input type="text" name="english_word" class="form-control" id="english_word" placeholder="English Word">
                                                      @error('english_word')
                                                      <span class="text-danger"> {{ $message }} </span>
                                                      @enderror
                                                    </div>
                                                </div>

                                                <div class="row mb-4">
                                                    <div class="col-sm-12 form-group">
                                                      <input type="text" name="tamil_word" class="form-control" id="tamil_word" placeholder="Tamil Word">
                                                      @error('tamil_word')
                                                      <span class="text-danger"> {{ $message }} </span>
                                                      @enderror
                                                    </div>
                                                </div>

                                                <div class="row mb-4">
                                                    <div class="col-sm-12 form-group">
                                                      <input type="text" name="first_letter_english" class="form-control" id="first_letter_english" placeholder="First Letter English">
                                                      @error('first_letter_english')
                                                      <span class="text-danger"> {{ $message }} </span>
                                                      @enderror
                                                    </div>
                                                </div>

                                                <div class="row mb-4">
                                                    <div class="col-sm-12 form-group">
                                                      <input type="text" name="first_letter_tamil" class="form-control" id="first_letter_tamil" placeholder="First Letter Tamil">
                                                      @error('first_letter_tamil')
                                                      <span class="text-danger"> {{ $message }} </span>
                                                      @enderror
                                                    </div>
                                                </div>

                                                <div class="row mb-4">
                                                    <div class="col-sm-12 form-group">
                                                        <textarea name="meaning_tamil" class="form-control" id="meaning_tamil" placeholder="Meaning in Tamil" rows="10"></textarea>
                                                        @error('meaning_tamil')
                                                        <span class="text-danger"> {{ $message }} </span>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="row mb-4">
                                                    <div class="col-sm-12 form-group">
                                                        <input type="file" name="content_image" id="content_image" class="form-control">
                                                        @error('content_image')
                                                        <span class="text-danger"> {{ $message }} </span>
                                                        @enderror  
                                                    </div>
                                                </div>

                                                <div class="row mb-4">
                                                    <div class="col-lg-3 col-sm-12 text-center">
                                                        <img id="showImage" class="rounded avatar-lg" src="{{ url('upload/admin_images/no_image.jpg') }}" alt="Card image cap">
                                                    </div>
                                                </div>

                                                <div class="row mb-4">
                                                    <div class="col-sm-12 form-group">
                                                        <input type="input" name="content_image_alt" id="content_image_alt" class="form-control" placeholder="Imag Alt">
                                                        @error('content_image_alt')
                                                        <span class="text-danger"> {{ $message }} </span>
                                                        @enderror          
                                                    </div>
                                                </div>

                                                <div class="row mb-4">
                                                    <div class="col-sm-12 form-group">
                                                        <input type="input" name="content_image_caption" id="content_image_caption" class="form-control" placeholder="Imag Caption">
                                                        @error('content_image_caption')
                                                        <span class="text-danger"> {{ $message }} </span>
                                                        @enderror          
                                                    </div>
                                                </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>

            <!-- English Description and Medical Words -->
            <div class="row">
                <div class="col-lg-9 col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title text-center">English Meaning</h4>
                        </div>
                        <div class="card-body p-4">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="mt-4 mt-lg-0">
                                        <div class="row mb-4">
                                            <div class="col-sm-12 form-group">
                                                <textarea name="meaning_english" class="form-control textarea-desc" id="meaning_english" placeholder="Meaning in English" rows="5"></textarea>
                                                @error('meaning_english')
                                                <span class="text-danger"> {{ $message }} </span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="row">
                                <div class="input-group m-3">
                                    <div class="input-group-prepend">
                                        <button class="btn btn-danger"
                                                id="DeleteRow"
                                                type="button">
                                            <i class="bi bi-trash"></i>
                                            Delete
                                        </button>
                                    </div>
                                    <input type="text" name="related_words[]" id="related_words" onblur="duplicateWord(this)" class="form-control m-input">
                                </div>
                            </div>
                            <div id="newinput"></div>
                            <button id="rowAdder" type="button" class="btn btn-dark">
                                <span class="bi bi-plus-square-dotted">
                                </span> ADD
                            </button>

                            <div id="wordStatus"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End English Description and Medical Words -->

            <!-- SEO -->
            <div class="row">
                    <div class="col-lg-9 col-sm-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title text-center">SEO</h4>
                            </div>
                            <div class="card-body p-4">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="mt-4 mt-lg-0">

                                                <div class="row mb-4">
                                                    <div class="col-sm-12 form-group">
                                                      <input type="text" name="meta_title" class="form-control" id="meta_title" placeholder="Meta Title">
                                                      <p><span id="meta_title_count"></span></p>
                                                      @error('meta_title')
                                                      <span class="text-danger"> {{ $message }} </span>
                                                      @enderror
                                                    </div>
                                                </div>

                                                <div class="row mb-4">
                                                    <div class="col-sm-12 form-group">
                                                    <textarea name="meta_description" class="form-control" id="meta_description" placeholder="Meta Description"></textarea>
                                                      <p><span id="meta_desc_count"></span></p>
                                                      @error('meta_description')
                                                      <span class="text-danger"> {{ $message }} </span>
                                                      @enderror
                                                    </div>
                                                </div>

                                                <div class="row mb-4">
                                                    <div class="col-sm-12 form-group">
                                                    <textarea name="schema_markup" class="form-control" id="schema_markup" placeholder="Schema Markup"></textarea>
                                                    @error('schema_markup')
                                                    <span class="text-danger"> {{ $message }} </span>
                                                    @enderror
                                                    </div>
                                                </div>

                                                <div class="row justify-content-end">
                                                    <div class="col-sm-12">
                                                        <div>
                                                            <button type="submit" class="btn btn-primary w-md">Save</button>
                                                        </div>
                                                    </div>
                                                </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
            <!-- End SEO -->

        </form>
        <!-- End Add New Allopathic Medicine -->
    </div>
</div>

<!-- Form Validation -->
<script type="text/javascript">
    $(document).ready(function(){
        $('#myForm').validate({
            rules: { 
                english_title: { required : true, },
                tamil_title: { required : true, },
                content: { required : true, },
                english_word: { required : true, },
                tamil_word: { required : true, },
                first_letter_english: { required : true, },
                first_letter_tamil: { required : true, },
                meaning_english: { required : true, },
                meaning_tamil: { required : true, },
                content_image: { required : true, },
                content_image_alt: { required : true, },
                content_image_caption: { required : true, },
                meta_title: { required : true, },
                meta_description: { required : true, },
            },

            messages : { 
                english_title: { required : 'English Title is Required', },
                tamil_title: { required : 'Tamil Title is Required', },
                content: { required : 'Content is Tamil is Required', },
                english_word: { required : 'English Word is Required', },
                tamil_word: { required : 'Tamil Word is Required', },
                first_letter_english: { required : 'First Letter English is Required', },
                first_letter_tamil: { required : 'First Letter Tamil is Required', },
                meaning_english: { required : 'Meaning in English is Required', },
                meaning_tamil: { required : 'Meaning in Tamil is Required', },
                content_image: { required : 'Content Image is Required', },
                content_image_alt: { required : 'Content Image Alt is Required', },
                content_image_caption: { required : 'Content Image Caption is Required', },
                meta_title: { required : 'Meta Title is Required', },
                meta_description: { required : 'Meta Description is Required', },
            },

            errorElement : 'span',

            errorPlacement: function(error,element){
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
                
            highlight : function(element, errorClass, validClass){
                    $(element).addClass('is-invalid');
            },

            unhighlight : function(element, errorClass, validClass){
                    $(element).removeClass('is-invalid');
            },
        });
    });
</script>

<!-- Select 2 Dropdown -->
<script type="text/javascript">
    $(document).ready(function() {
     $('.select2').select2();
    });
</script>

<!-- Show Upload Image -->
<script type="text/javascript">
    $(document).ready(function(){
        $('#medicine_image').change(function(e){
            var reader = new FileReader();
            reader.onload = function(e){
                $('#showImage').attr('src', e.target.result);
            }
            reader.readAsDataURL(e.target.files['0']);
        });
    });
</script>

<!-- Meta Character Count -->
<script type="text/javascript">
$(document).ready(function () { 
    $('#meta_title').keyup(function() {
        var meta_title = $('#meta_title').val().length;
        $("#meta_title_count").text(meta_title);
        if (meta_title > 60) 
        {
            $("#meta_title_count").css("color", "#D50000");
        }
        else
        {
            $("#meta_title_count").css("color", "#04AA6D");   
        }
    });

    $('#meta_description').keyup(function() {
        var meta_desc = $('#meta_description').val().length;
        $("#meta_desc_count").text(meta_desc);
        if(meta_desc > 160) 
        {
            $("#meta_desc_count").css("color", "#D50000");
        }
        else
        {
            $("#meta_desc_count").css("color", "#04AA6D");   
        }
    });
}); 
</script>
<!-- End Meta Character Count -->

<script type="text/javascript">
    $("#rowAdder").click(function () {
        newRowAdd =
            '<div id="row"> <div class="input-group m-3">' +
            '<div class="input-group-prepend">' +
            '<button class="btn btn-danger" id="DeleteRow" type="button">' +
            '<i class="bi bi-trash"></i> Delete</button> </div>' +
            '<input type="text" name="related_words[]" onblur="duplicateWord(this)" class="form-control m-input"> </div> </div>';

        $('#newinput').append(newRowAdd);
    });
    $("body").on("click", "#DeleteRow", function () {
        $(this).parents("#row").remove();
    })
</script>

<script type="text/javascript">
    function duplicateWord(element)
    {
        var related_word = $(element).val();
          
        $.ajax({
            url:"{{ route('check.word') }}",
            method:"POST",
            data:{related_word:related_word, _token:"{{csrf_token()}}"},
            success:function(result)
            {
                if(result > '0')
                {
                    $('#wordStatus').html('<label class="text-success">Word Already Exists</label>');
                }
                else
                {
                    $('#wordStatus').html('<label class="text-danger"></label>');
                }
            }
        });

    }
</script>

@endsection