@extends('layouts.app')

@section('content')
    <div class="container mt-5">
        @if ($status)
            <div class="alert alert-success" role="alert">
                <h4 class="alert-heading">Last step in order to submit your quote!</h4>
                <p>
                <h6>{{ $message }} Please provide additional information of your quote</h6>
                </p>
            </div>
        @else
            <div class="alert alert-danger" role="alert">
                <h4 class="alert-heading">Oops!</h4>
                <p>
                <h6>{{ $message }}</h6>
                </p>
                Try to <a href="/" class="badge badge-success">Submit</a> quote again
            </div>
        @endif
    </div>
    @if ($status)
        <div class="container mt-2">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="card">
                        <div class="card-header">
                            Additional Quote Information
                        </div>
                        <div class="card-body">
                            <form class="form-horizontal" method="POST" action="{{ route('get.user.dashboard') }}"
                                id="additional-quote-info-form" enctype="multipart/form-data">
                                <input type="hidden" class="form-control" name="case" id="case"
                                    value="first-quote" />
                                <input type="hidden" class="form-control" name="email" id="email"
                                    value="{{ $user_email }}" />
                                {{ csrf_field() }}

                                <div class="form-group shadow-textarea">
                                    <label for="describe_problem">
                                        <i class="fas fa-pencil-alt prefix"></i>
                                        Describe your problem
                                    </label>
                                    <textarea class="form-control z-depth-1" name="describe_problem" id="describe_problem" 
                                        onkeyup="countNoCharacters()" rows="3" placeholder="Write here..."></textarea>
                                        <div id="characterValidationMessage" style="color: red;"></div>
                                        <span hidden id="characterNoCount"></span>
                                        <span id="pagebreakNoCount"></span>
                                </div>

                                <div class="form-group">
                                    <label for="quote_request_file">
                                        Please upload your medical records for understanding your case by hospitals (.pdf,
                                        .jpeg, .jpg, .png),
                                        Max 3 files allowed &
                                        Each file should be smaller than <strong>2 MB</strong>
                                    </label><br />
                                    <input type="file" class="" name="choose-files[]" id="quote_request_file"
                                        accept=".pdf, .jpeg, .jpg, .png" multiple>
                                        <div id="fileValidationMessage" style="color: red;"></div>

                                </div>

                                <div class="form-group">
                                    <div class="">
                                        <button type="button" class="btn btn-primary" id="additional-quote-info-submit">
                                            Submit Quote
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            function countNoCharacters() {
                const description = document.getElementById("describe_problem");
                const characterCount = document.getElementById("characterNoCount");
                const pagebreakCount = document.getElementById("pagebreakNoCount");

                // Replace "Enter" key press with two characters
                const descriptionValue = description.value.replace(/\n/g, "\r\n");

                const remainingCharacters = 512 - descriptionValue.length;
                characterCount.innerText = `${descriptionValue.length} / 512 characters. ${remainingCharacters} remaining.`;

                // Count the number of page breaks
                const pageCount = (description.value.match(/\n/g) || []).length;
                pagebreakCount.innerText = `${descriptionValue.length - pageCount} / 512 characters.`;
            }
        </script>
        <script>
            $(document).ready(function () {
                // Character count validation
                $('#describe_problem').on('input', function () {
                    var maxCharacters = 512;
                    var currentCharacters = $(this).val().length;
                    $('#characterNoCount').text(currentCharacters + ' / ' + maxCharacters + ' characters.');
        
                    // Check if the character limit is exceeded
                    if (currentCharacters > maxCharacters) {
                        // Display the validation message
                        $('#characterValidationMessage').text('Maximum 512 characters allowed.');
                        $(this).val($(this).val().substring(0, maxCharacters));
                    } else {
                        // Clear the validation message
                        $('#characterValidationMessage').text('');
                    }
                });
        
               
        
                // // Additional functionality (e.g., form submission) can be added here.
                // $('#additional-quote-info-submit').on('click', function () {
                //     // Add any additional logic or form submission code here
                //     alert('Form submitted successfully!');
                // });
            });
        </script>
        <script src="{{ asset('js/pages/new_user_activated.js') }}"></script>
    @endif
@endsection