@extends('layouts.app')

@section('appjs')
<script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection

@section('content')
@section('page_title')
Whistle Feed Report
@endsection
<style>
.item_url {
    display: flex;
    padding: 15px;
    border: 1px solid #DEE2E6;
    border-radius: 5px;
    background-color: #F8F9FA;
    width: 80%;
    height: 60%;
    flex-direction:column;
}
.input-row, .input-row-1{
    display: flex;
    align-items: center;
    width: 100%;
    background-color: #f0f0f0;
}
textarea {
    overflow: hidden;
    resize: none;
}
.input-row label, .input-row input, .input-row button {
    height: 48px;
    font-size: 1rem;
    border: none;
    padding: 0 8px;
    box-sizing: border-box;
}
.input-row label, .input-row-1 label {
    flex: 1;
    background-color: #dcdcdc;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom:0;
}
.input-row input,.input-row-1 textarea {
    flex: 8.8;
    background-color: #f0f0f0;
}
.input-row button , .input-row-1 button {
    flex: 0.2;
    background-color: #f0f0f0;
    cursor: pointer;
}
.input-row-1 label, .input-row-1 textarea, .input-row-1 button {
    height: 70px;
    font-size: 1rem;
    border: none;
    padding: 0 8px;
    box-sizing: border-box;
}
#email-error,#query-error{
    color: red;
    display: none;
    justify-content: end;
    align-items: end;
    margin-top:5px
}
textarea,input:focus{
    outline:none;
}
</style>
<div class="container-fluid">
    <div class="card">
        <div class="row ml-0 mr-0 mt-4 mb-n4">
            <div class="form-group col-md-3">@include('whistle_feed.menu_dropdown.opsLogs')</div>
            <div class="col-md-9">
                <div class="pull-right mr-3">
                    <button type="submit" class="exportReportSubmit btn excel-btn btn-md">Submit</button>
                </div>
            </div>
        </div>
        <div class="card-body table-responsive">
            <div class="d-flex flex-wrap">
                <div class="form-group col-md-1 pl-0"></div>
                <div class="item_url">
                    <div class="input-row">
                        <label for="email">Email :</label>
                        <input type="email" id="email" placeholder="Enter your email" required/>
                    </div>
                    <span id="email-error" style="color:red;display:none;"></span>
                </div>
                <div class="form-group col-md-1 pl-0"></div>
                <div class="form-group col-md-1 pl-0"></div>
                <div class="item_url" style=" margin:15px 0px">
                    <div class="input-row-1">
                        <label for="email">Query :</label>
                        <textarea id="query" placeholder="Enter your query" required></textarea>
                    </div>
                    <span id="query-error" style="color:red;display:none;"></span>
                </div>
            </div>
        </div>
    </div>
</div>
<link rel="stylesheet" href="{{asset('css/jquery-ui.css')}}" />
<script type="application/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<script type="application/javascript">
$(document).ready(function() {

    const textarea = $("#query");
    textarea.on("input", function () {
        $(this).css("height", "auto");
        $(this).css("height", this.scrollHeight + "px");
    });

    $('#email').on('input paste', function() {
        setTimeout(checkEmail, 50);
    });

    $('#query').on('input paste', function() {
        $('#query-error').css('display', 'none')
    });

    $("body").on("click", ".exportReportSubmit", function() {
        var email = $('#email').val();
        var query = $('#query').val();
        if(!email || !query){
            !email ?  $('#email-error').css('display', 'flex').text('This field is required'): $('#email-error').css('display', 'none')
            !query ? $('#query-error').css('display', 'flex').text('This field is required'):  $('#query-error').css('display', 'none')
            return;
        }
        $.ajax({
            type: "POST",
            url: "{{url('exportReport')}}",
            data: {
                "_token" : "{{ csrf_token() }}",
                email: email,
                query: query
            },
            dataType:'json',
            success: function(data) {
                $('#email').val('');
                $('#query').val('');
                toastr.success('Email and Query Added Successfully!!');
            }
        });
    });

    function validateEmail(email) {
        var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(email);
    }

    function checkEmail() {
        const email = $('#email').val();
        if (validateEmail(email)) {
            $('#email-error').hide();
        } else {
            $('#email-error').css('display', 'flex');
            $('#email-error').text('Invalid email address')
        }
    }
});    
</script>
@endsection