@extends('fo::layouts.app')

@section('head')

<meta charset="ISO-8859-1">

<!-- DataTable -->
<link rel="stylesheet" href="{{ url('vendors/dataTable/datatables.min.css') }}" type="text/css">
<link rel="stylesheet" href="{{ url('vendors/datepicker/daterangepicker.css') }}" type="text/css">
<link rel="stylesheet" href="{{ url('vendors/clockpicker/bootstrap-clockpicker.min.css') }}" type="text/css">

<!-- Fullcalendar -->
<link rel="stylesheet" href="{{ url('vendors/fullcalendar/fullcalendar.min.css') }}" type="text/css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Map JS  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-map/3.0-rc1/jquery.ui.map.js"></script>
<!-- <script src="https://maps.googleapis.com/maps/api/js"></script> -->



<!-- AutoComplete -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<script>
    var uid = "{{Auth::user()->user_id}}";

</script>

<style>
    /* Existing styles */
    .text-wrap {
        white-space: normal !important;
    }

    .dataTables_wrapper .dataTables_scroll td {
        vertical-align: top;
    }

    /* New styles for horizontal scroll */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #tblSupplierPlan {
        width: 100% !important;
        margin: 0 !important;
    }

    #tblSupplierPlan td {
        white-space: normal;
        word-wrap: break-word;
        max-width: 200px;
    }

    #tblSupplierPlan th {
        white-space: nowrap;
    }

    .modal-body {
        max-height: 70vh;
        /* Set maximum height to 70% of viewport height */
        overflow-y: auto;
        /* Enable vertical scrolling */
    }

    #attachmentImages {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    #attachmentImages img {
        width: 250px;
        height: 250px;
        object-fit: cover;
    }

</style>

@endsection

@section('content')

<div class="row">
    

    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <h6 class="card-title">Supplier Visit Comments</h6>
                <div class="row">
                    <div class="col-12">
                        <div class="row">
                            <div class="col-md-2"></div>
                            <div class="col">
                                <h6 class="card-title mb-4 text-center">Supplier Name: <strong id="supplierName"></strong></h6>
                            </div>
                            <div class="col-md-2"></div>
                        </div>
                        <ul class="list-unstyled">
                            <!-- Example Comment 1 -->
                            <div class="" id="comment_header_section">
                            </div>
                            
                            <div class="" id="comment_body_section">
                            </div>
                           
                        </ul>
                    </div>
                </div>

                <!-- New Comment Input -->
                <hr>
                <div class="d-flex align-items-start">
                    <img src="{{ asset('images/user.jpg') }}"
                        alt="Your Avatar" class="rounded-circle me-2" style="width: 40px; height: 40px; margin-right: 10px;">
                    <div class="flex-grow-1 ">
                        <form>
                            <div class="mb-3">
                                <textarea class="form-control" rows="3" id="txtComment" placeholder="Add a new comment..."></textarea>
                            </div>
                            <button type="submit" id="btnAddComment" class="btn btn-primary float-end">Post Comment</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- begin::add comment Modal -->
    <div class="modal fade" id="addCommentModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <span class="event-icon mr-2"></span>
                        <span class="event-title">Add Comment</span>
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i class="ti-close"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="event-body">
                        <div class="form-row">
                            <div class="col-md-12 mb-3" id="divSection">
                                <input type="hidden" id="hiddenSupVisitId" name="hidden_sup_visit_id">
                                <input type="hidden" id="hiddenEmployeeID" name="hidden_employee_id">
                                <label for="txtName" id="lblSupplierName">Supplier Name</label>
                                <input type="text" class="form-control" id="txtSupplierName" name="txtSupplierName"
                                    disabled>

                            </div>
                            <div class="col-md-12 mb-3">
                                <label for="txtComment">Comment</label>
                                <textarea class="form-control" id="txtComment" name="txtComment"
                                    placeholder="Write Comment"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="btnAddComment">Save</button>
                </div>
            </div>
        </div>
    </div>
    <!-- end::add comment Modal -->


    @endsection

    <!-- Javascript -->
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
    @section('script')
    <!-- DataTable -->
    <script src="{{ url('vendors/dataTable/datatables.min.js') }}"></script>
    <script src="{{ url('assets/js/examples/datatable.js') }}"></script>



    <!-- Fullcalendar -->
    <script src="{{ url('vendors/fullcalendar/moment.min.js') }}"></script>
    <script src="{{ url('vendors/fullcalendar/fullcalendar.min.js') }}"></script>

    <!-- Javascript -->
    <script src="{{ url('vendors/datepicker/daterangepicker.js') }}"></script>

    <!-- AutoComplete -->
    <script src="{{ Module::asset('fo:js/autocomplete2/js/autocomplete.min.js') }}"></script>

    <!-- Module JS -->
    <script src="{{ Module::asset('fo:js/fo/supplier_visit_comment.js') }}?random=693bbb9cf1786"></script>



    <!-- Prism -->
    <script src="{{ url('vendors/prism/prism.js') }}"></script>


    @endsection