@extends('layouts.app')
@section('content')
<section class="content">
    <div class="container-fluid">

        <div class="px-sm-4">

            <div class="row mt-2 mt-sm-3">
                <div class="col-md-7 col-10">
                    <div class="top-head">
                        <h1>Livestock</h1>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="/home">Home</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Livestock</li>
                            </ol>
                        </nav>
                    </div>
                </div>
                <div class="col-md-5 col-2 text-right">
                    <div class="d-flex justify-content-end">

                        <div class="top-search-bar d-sm-block d-none">
                            <form class="search-form" role="search">
                                <div class="form-group pull-right {{ isset($search) && $search ? 'sb-search-open' : '' }}" id="searchnew">
                                    <input type="search" name="search" value="{{ $search }}" onchange="this.form.submit()" class="form-control">
                                    <span class="search-label"><img src="{{ asset('assets/img/search.svg') }}" alt="/"></span>
                                </div>
                            </form>
                        </div>

                    </div>
                </div>
            </div>

            <div class="box-select bg-white">
                <form id="community-filter-form">
                    <div class="row">
                        <div class="col-md-3 border-sm-right">
                            <div class="select-innerpadding">
                                <label class="select-label mb-0">Sorting</label>
                                <select class="form-control select-content" id="newsest-filter" name="sort_by" onchange="this.form.submit()">
                                    <option value="newest" {{ $request->sort_by == 'newest' ? 'selected' : '' }}>Newest
                                        to Oldest</option>
                                    <option value="oldest" {{ $request->sort_by == 'oldest' ? 'selected' : '' }}>Oldest
                                        to Newest</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3 border-sm-right">
                            <div class="select-innerpadding">
                                <label class="select-label mb-0">County</label>
                                <select class="form-control select-content select2" id="city-filter" name="county" onchange="this.form.submit()">
                                    <option value="">Select</option>
                                    @foreach ($counties as $county)
                                    <option value="{{$county->id}}" {{$request->county == $county->id ? 'selected' :
                                        ''}}>{{$county->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3 border-sm-right">
                            <div class="select-innerpadding">
                                <label class="select-label mb-0">Date</label>
                                <input type="text" class="form-control" value="{{$request->daterange}}" name="daterange" id="daterange" placeholder="Select">
                            </div>
                        </div>
                        {{--<div class="col-md-2 border-sm-right">
                            <div class="select-innerpadding">
                                <label class="select-label mb-0">User Type</label>
                                <select class="form-control select-content select2" id="user-type" name="user_type"
                                    onchange="this.form.submit()">
                                    <option value="">All</option>
                                    @foreach ($userTypes as $userType)
                                    <option value="{{ $userType }}" {{ $request->user_type == $userType ? 'selected' :
                                        '' }}>
                        {{ strtoupper($userType) }}</option>
                        @endforeach
                        </select>
                    </div>
            </div>--}}
            <div class="col-md-3">
                <div class="select-innerpadding">
                    <label class="select-label mb-0">Other</label>
                    <div class="notificationbar farmers-dropdown">
                        <div data-toggle="dropdown" class="dropdown d-inline-block cursor-pointer">
                            Select
                            <div class="dropdown-menu dropdown-menu-md tableaction notificationtab useraction-dropdown dropdown-menu-right filter-others">
                                <div class="px-3 py-2">
                                    <div class="farmeers-dropcontent">
                                        <div class="row mt-3">
                                            <div class="col-md-6 col-6">
                                                <h2>Age</h2>
                                            </div>
                                            <div class="col-md-6 col-6 text-right">
                                                <p>In Years</p>
                                            </div>
                                        </div>

                                        <div class="row mt-2">
                                            <div class="col-md-6 col-6">
                                                <div class="form-group">
                                                    <label class="drop-label">From</label>
                                                    <input type="text" name="age_from" class="form-control drop-input" value="{{$request->age_from ?? ''}}" id="age_from">
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-6">
                                                <div class="form-group">
                                                    <label class="drop-label">Upto</label>
                                                    <input type="text" name="age_to" value="{{$request->age_to ?? ''}}" class="form-control drop-input" id="age_to">

                                                </div>
                                            </div>
                                        </div>

                                        <div class="row mt-2 mt-sm-3">
                                            <div class="col-md-6 col-6">
                                                <h2>Price</h2>
                                            </div>
                                            <div class="col-md-6 col-6 text-right">
                                                <p>In Numbers</p>
                                            </div>
                                        </div>

                                        <div class="row mt-2">
                                            <div class="col-md-6 col-6">
                                                <div class="form-group">
                                                    <label class="drop-label">From</label>
                                                    <input type="text" name="price_from" value="{{$request->price_from ?? ''}}" class="form-control drop-input" id="price_from">
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-6">
                                                <div class="form-group">
                                                    <label class="drop-label">Upto</label>
                                                    <input type="text" name="price_to" value="{{$request->price_to ?? ''}}" class="form-control drop-input" id="price_to">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row mt-2 mt-sm-3">
                                            <div class="col-md-6">
                                                <h2>Lactation</h2>
                                            </div>
                                            <div class="col-md-6 col-6 text-right">
                                                <p>In Numbers</p>
                                            </div>
                                        </div>

                                        <div class="row mt-2">
                                            <div class="col-md-6 col-6">
                                                <div class="form-group">
                                                    <label class="drop-label">From</label>
                                                    <input type="text" name="lac_from" value="{{$request->lac_from ?? ''}}" class="form-control drop-input" id="lac_from">
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-6">
                                                <div class="form-group">
                                                    <label class="drop-label">Upto</label>
                                                    <input type="text" name="lac_to" value="{{$request->lac_to ?? ''}}" class="form-control drop-input" id="lac_to">
                                                </div>
                                            </div>

                                        </div>

                                        <div class="row mt-2 mt-sm-3">
                                            <div class="col-md-6">
                                                <h2>Yield</h2>
                                            </div>
                                            <div class="col-md-6 col-6 text-right">
                                                <p>In Numbers</p>
                                            </div>
                                        </div>

                                        <div class="row mt-2">
                                            <div class="col-md-6 col-6">
                                                <div class="form-group">
                                                    <label class="drop-label">From</label>
                                                    <input type="text" name="yield_from" value="{{$request->yield_from ?? ''}}" class="form-control drop-input" id="yield_from">
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-6">
                                                <div class="form-group">
                                                    <label class="drop-label">Upto</label>
                                                    <input type="text" name="yield_to" value="{{$request->yield_to ?? ''}}" class="form-control drop-input" id="yield_to">
                                                </div>
                                            </div>

                                        </div>

                                        <div class="row mt-2 mt-sm-3">
                                            <div class="col-md-6">
                                                <h2>Cow breeds</h2>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="slots-days">
                                                    @foreach ($breeds as $breed)
                                                    <input class="filled-in" type="checkbox" name="cow_breed_ids[]" value="{{ $breed->id }}" {{ in_array($breed->id,isset($request->cow_breed_ids) && count($request->cow_breed_ids) > 0 ? $request->cow_breed_ids : [] ) ? 'checked' : ''}} id="Check_{{ $breed->id }}">
                                                    <label class="slots-label" for="Check_{{ $breed->id }}">{{ $breed->name }}</label>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>


                                        <button class="btn save-btn  btn-block mt-4 mb-2" id="submitBtn">Apply</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </form>
    </div>
    <div class="row float-right mt-2">
        <div class="col-md-12 text-right d-flex float-right">
            <div class="clear">
                <a class="clear-filter" href="/live-stock">Clear Filters</a>
            </div>
        </div>
    </div>
    <div class="row" style="margin-top:3.5rem!important;">
        <div class="col-md-12">
            <div class="card p-2">
                <div class="table-responsive">
                    <table class="table dairy-table mb-0">
                        <thead>
                            <tr>
                                <th colspan="2">POST</th>
                                <th>PRICE</th>
                                <th>QTY</th>
                                <th>BALANCE QTY</th>
                                <th>POSTED BY</th>
                                <th>USER TYPE</th>
                                <th>POSTED ON</th>
                                <th class="text-center">ACTION</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(count($communities) > 0)

                            @foreach ($communities as $community)

                            <tr>
                                <td width="100px">
                                    @if(!empty($community->live_stock_document_files))
                                    <img src="{{$community->live_stock_document_files[0]->original_url}}" class="table-cow" alt="default-image" onerror.src="{{asset('assets/cow.png')}}">
                                    @endif
                                </td>

                                <td width="300px" class="contact-table">
                                    <p class="live-tabletext">{{@$community->cowBreed->name}}<span>
                                            ({{$community->advertisement_no}}) </span> </p>
                                    {{-- Kampala, Uganda --}}
                                </td>
                                <td class="livetext-table">{{round($community->price,0)}}</td>
                                <td class="livetext-table">{{$community->cow_qty}}</td>
                                <td class="livetext-table">{{$community->balance_cows}}</td>
                                <td class="livetext-table">
                                    {{ @$community->user->name }}<br>
                                    <span>{{ @$community->user->address->countyData->name }}</span>
                                </td>
                                <td>{{ @$community->user->user_type }}</td>
                                <td>{{ date('d M, Y', strtotime($community->created_at)) }}</td>
                                <td class="text-center cursor-pointer user-profile">
                                    <!-- <img src="{{ asset('assets/img/more-gray.svg') }}" alt=""> -->
                                    <div class="dropdown">
                                        <a data-toggle="dropdown" href="#" aria-expanded="true">
                                            <img src="{{ asset('assets/img/more-gray.svg') }}" alt="">
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-md tableaction useraction-dropdown dropdown-menu-right" style="left: inherit; right: 0px;">
                                            <ul class="p-0">
                                                <li data-toggle="modal" data-target="#join-menu" onclick="joinMenu('{{ implode(',', [@$community->cowBreed->name, @$community->advertisement_no, $community->id]) }}')">
                                                    <img src="{{ asset('assets/img/user.svg') }}" alt="" class="user-newimg">
                                                    Enquiry
                                                </li>

                                                <li data-toggle="modal" data-target="#cowdetails" id="liveStock_Modal" onclick="getLiveStockDetail({{$community->id}})">
                                                    <img src="{{ asset('assets/img/loguot.svg') }}" class="user-newimg" alt="">
                                                    Livestock Details
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                            @else
                            <tr class="text-center">
                                <td></td>
                                <td></td>
                                <td>
                                    <h6>No Livestock Available !</h6>
                                </td>
                            </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


    <!-- start -->

    @include('livestock.livestock-modal.livestockchat-modal')

    <!-- end -->

    <!-- start -->

    <div class="modal fade mobile-header filter-popup join-popup modal-dialog-slideout" id="cowdetails" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header pb-0 mobile-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">

                            <img src="{{asset('assets/img/dash-cross.svg')}}" class="cross-dash" alt="">
                        </span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row mt-sm-2 align-items-center">
                        <div class="col-md-9 col-8">
                            <div class="pop-head">
                                <h2>Cow Details <span class="badge suggested-btn ml-2" id="livestock-status"></span></h2>
                            </div>
                        </div>
                    </div>

                    <div class="row mt-sm-4 mt-2">
                        <div class="col-md-12">
                            <div class="threeCollectioncow owl-carousel">
                                <div class="item">
                                    <div class="cow-popimgbox">
                                        <img src="{{asset('assets/img/cow-pop.png')}}" alt="">
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="cow-popimgbox">
                                        <img src="{{asset('assets/img/cow-pop.png')}}" alt="">
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="cow-popimgbox">
                                        <img src="{{asset('assets/img/cow-pop.png')}}" alt="">
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="cow-popimgbox">
                                        <img src="{{asset('assets/img/cow-pop.png')}}" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="ankole-cowstext mt-4">
                        <div class="row align-items-center">
                            <div class="col-md-8 mb-2">
                                <h6 id="breedName"><span id="advertise-no"></span> </h6>
                                <!-- <p>Kampala, Uganda <i class="fa fa-circle" aria-hidden="true"></i> <span>Posted on 23 June, 23</span> </p> -->
                            </div>
                            <div class="col-md-4 text-sm-right">
                                <h5 id="price"></h5>
                            </div>
                        </div>
                    </div>

                    <div class="date-box mt-sm-3">
                        <h4 id="farmerName">Begumanya Charles</h4>
                        <p id="address"><span class="ml-2"></span> </p>
                    </div>

                    <label class="specifications-label mt-sm-4 mt-2"></label>

                    <div class="row">
                        <div class="col-md-6 col-6">
                            <div class="specifications-contentbox text-center">
                                <p>Age: <span id="age"></span> </p>
                            </div>
                        </div>
                        <div class="col-md-6 col-6">
                            <div class="specifications-contentbox text-center">
                                <p>Quantity: <span id="quantity"></span> </p>
                            </div>
                        </div>
                        <div class="col-md-6 col-6 mt-2">
                            <div class="specifications-contentbox text-center">
                                <p>Pragnant: <span id="pragnant"></span> </p>
                            </div>
                        </div>
                        <div class="col-md-6 col-6 mt-2">
                            <div class="specifications-contentbox text-center">
                                <p>Lactation: <span id="lactation"></span> </p>
                            </div>
                        </div>
                        <div class="col-md-12 mt-2">
                            <div class="specifications-contentbox text-center litre-daybox">
                                <p>Milk: <span id="milk"></span> </p>
                            </div>
                        </div>
                    </div>

                    <div class="description-contentbox mb-3">
                        <label class="specifications-label mt-sm-4 mt-3">Description</label>
                        <p id="description"></p>
                    </div>

                    <label class="specifications-label mt-sm-4 mt-3">Advertisement Status</label>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="farmer-kpibox">
                                <div class="farmer-kpiboximg">
                                    <img src="{{asset('/assets/img/money.svg')}}" alt="">
                                </div>
                                <h3 id="listed-cows"></h3>
                                <h4>Listed Cows</h4>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="farmer-kpibox">
                                <div class="farmer-kpiboximg">
                                    <img src="{{asset('/assets/img/money.svg')}}" alt="">
                                </div>
                                <h3 id="soldToBuyer"></h3>
                                <h4>Sold Directly to Buyers</h4>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="farmer-kpibox">
                                <div class="farmer-kpiboximg">
                                    <img src="{{asset('/assets/img/money.svg')}}" alt="">
                                </div>
                                <h3 id="loan-accepted"></h3>
                                <h4>Loan Accepted</h4>
                            </div>
                        </div>
                        <div class="col-md-4 mt-sm-3 mt-2">
                            <div class="farmer-kpibox">
                                <div class="farmer-kpiboximg">
                                    <img src="{{asset('/assets/img/money.svg')}}" alt="">
                                </div>
                                <h3 id="loan-approved"></h3>
                                <h4>Loan Approved</h4>
                            </div>
                        </div>
                        <div class="col-md-4 mt-sm-3 mt-2">
                            <div class="farmer-kpibox">
                                <div class="farmer-kpiboximg">
                                    <img src="{{asset('/assets/img/money.svg')}}" alt="">
                                </div>
                                <h3 id="balance-cows"></h3>
                                <h4>Remaining Cows</h4>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <div class="modal fade chatmodalcontent live-stocknewmodal  chatmodal-height" id="ChatModalLivestock" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="d-flex align-items-center">
                        <!-- <div class="chat-userimgbox mr-2"> -->
                            <!-- <h5>Enquiry <br> <span></span></h5> -->
                            <!-- <img src="" onerror="this.src='/assets/img/user-default.jpg'" alt=""> -->
                        <!-- </div> -->
                        <div class="pop-head">
                               <h2>Enquiry</h2>
                               <h6><span id="cowBreedName">Ankole cows</span> <span id="advNumber">(A0987)</span> </h6>
                           </div>
                        <div>

                        </div>
                    </div>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        <!-- <img src="{{asset('assets/img/close-iconchat.png')}} alt=""> -->
                    </button>
                </div>
                
                <!-- <div style="padding: 1rem;">
                    <div class="row align-items-center">
                       <div class="col-md-9 col-9">
                           <div class="pop-head">
                               <h2>Enquiry</h2>
                               <h6><span id="cowBreedName">Ankole cows</span> <span id="advNumber">(A0987)</span> </h6>
                           </div>
                       </div>
                   </div>
                </div> -->

                <div class="modal-body" id="modalBody">
                    <!-- Chat messages will be displayed here -->
                </div>


            </div>
        </div>
    </div>

    <!-- end -->

    {{ $communities->appends(request()->input())->links('partials.pagination') }}
    </div>
    </div>
</section>
@endsection
@section('scripts')
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script>
    $('.filter-others').on('click', function(event) {
        event.stopPropagation();
    });

    $(function() {
        $('input[name="daterange"]').daterangepicker({
                opens: 'left',
                autoUpdateInput: true,
            },
            function(start, end, label) {
                console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end
                    .format('YYYY-MM-DD'));
            });
    });

    $('#daterange').on('apply.daterangepicker', function(ev, picker) {
        console.log(picker.startDate.format('YYYY-MM-DD'));
        console.log(picker.endDate.format('YYYY-MM-DD'));

        document.getElementById("community-filter-form").submit();

    });
    // filter reset

    $('#newsest-filter').on('change', function() {
        console.log('filter:', $(this).val());
        $('#daterange').val('');
        document.getElementById("community-filter-form").submit();
    });
    $('#city-filter').on('change', function() {
        console.log('filter:', $(this).val());
        // $('#daterange').val('');
        document.getElementById("community-filter-form").submit();
    });
    $('#user-type').on('change', function() {
        console.log('filter:', $(this).val());
        $('#daterange').val('');
        document.getElementById("community-filter-form").submit();
    });

   
    function getLiveStockDetail(liveStockId) {
        $('#cowdetails').modal('show');
        $.ajax({
            url: "{{url('live-stock/get-livestock-detail')}}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                liveStockId: liveStockId,
            },
            success: function(response) {
            

                $('.threeCollectioncow').trigger('destroy.owl.carousel');
                if (response) {
                  
                    $('#price').text('UGX ' + response.cow_price);
                    $('#farmerName').text(response.details.user.name);
                    $('#breedName').html(response.details.cow_breed.name + '<span>(' + response.details.advertisement_no + ')</span>');
                    $('#age').text(response.details.age + ' yrs');
                    $('#quantity').text(response.details.cow_qty);
                    $('#pragnant').text(response.details.pregnant);
                    $('#lactation').text(response.details.lactation);
                    $('#milk').text(response.details.yield ? Math.floor(response.details.yield) + ' Litre per day' : 0);
                    $('#description').text(response.details.description);
                    let createDate = moment(response.details.created_at);
                    $('#address').html(`${response.details.user.address ? response.details.user.address.address : ''}<span class="ml-2">Posted on ${createDate.format('D MMM, YY')}</span>`);
                    $('#listed-cows').text(response.details.cow_qty);
                    $('#soldToBuyer').text(response.details.sold_qty);
                    $('#loan-accepted').text(response.details.loan_accepted);
                    $('#loan-approved').text(response.details.loan_approved);
                    $('#balance-cows').text(response.details.balance_cows);
                    $('#livestock-status').text(response.details.status.charAt(0).toUpperCase() + response.details.status.slice(1));

                    $('.threeCollectioncow').html();
                    $('#uploaded-image').html();
                    let html = '';
                    let html2 = '';

                    if (response.details.live_stock_document_files != null) {
                        $.each(response.details.live_stock_document_files, (key, file) => {
                            html += `<div class="item">
                                        <div class="cow-popimgbox">
                                            <img src="${file.original_url}" alt="">
                                        </div>
                                    </div>`;
                        });
                    }

                    $('.threeCollectioncow').html(html);
                    $('.threeCollectioncow').owlCarousel({
                        center: false,
                        items: 1,
                        loop: true,
                        margin: 20,
                        nav: false,
                        autoplay: true,
                        dots: true,
                        navText: ['<span class="icon-arrow_back">', '<span class="icon-arrow_forward">'],
                        responsive: {
                            600: {
                                margin: 20,
                                items: 1,
                                loop: false
                            },
                            1000: {
                                margin: 20,
                                items: 1,
                                loop: false
                            },
                            1200: {
                                margin: 20,
                                items: 1,
                                loop: false
                            }
                        }
                    });

                }

            }
        });
    }
    // end filter reset


    function joinMenu(values) {

        const noChatMessage = document.querySelector('.no-chat-message');
        if (noChatMessage) {
            // If it exists, remove it from the DOM
            noChatMessage.remove();
        }
        // Split the values by comma to extract individual values
        var valuesArray = values.split(',');

        // Extract the individual values
        var cowBreedName = valuesArray[0].trim();
        var advertisementNo = valuesArray[1].trim();
        var liveStockId = valuesArray[2].trim();
        // var liveStockId = "53";

        // Update HTML elements with extracted values
        document.getElementById("cowBreedName").textContent = cowBreedName;
        var hiddenInput = document.getElementById("hiddenInput");

        // Setting the value attribute of the hidden input field
        hiddenInput.value = liveStockId;
        document.getElementById("advNumber").textContent = '(' + advertisementNo + ')';


        // Get value from controller
      
        var projectId = "{{ @$projectId ?? 0 }}";
        var user_name = "{{ @Auth::user()->name }}";
        var user_type = "{{ @Auth::user()->user_type }}";
        var currentDate = "{{ now() }}";
        var user_id = "{{ @Auth::user()->id }}";


        // Call the function to display chat messages
        displayChatMessages(liveStockId);

        $('#join-menu').on('hidden.bs.modal', function (e) {
        // Open the ChatModalLivestock modal
        $('#ChatModalLivestock').modal('show');
    });
    }


    function displayChatMessages(liveStockId) {
        const chatMessagesContainer = document.getElementById('modalBody');
        chatMessagesContainer.innerHTML = '';

        const enquiryCollectionRef = firestore.collection("livestock_enquiry").doc(liveStockId).collection('enquiries');

        enquiryCollectionRef.get().then((enquiryQuerySnapshot) => {
           
            let messageDisplayed = false;

            enquiryQuerySnapshot.forEach((enquiryDoc) => {
                const enquiryData = enquiryDoc.data();
                const createdAt = enquiryData.created_at ? formatDate(enquiryData.created_at.toDate()) : '';

                const messageDiv = document.createElement('div');
                messageDiv.classList.add('charles-contentbox', 'newcharles-contentbox', 'mt-4');
                messageDiv.innerHTML = `
                <h2 class="user-name" data-user-id="${enquiryDoc.id}" data-user-name="${enquiryData.user_name}">${enquiryData.user_name}</h2>
                <p>${enquiryData.user_address}</p>
                <h6>${createdAt}</h6>
            `;

                chatMessagesContainer.appendChild(messageDiv);
                    // Retrieve the user name element within the current message div
                    const userNameElement = messageDiv.querySelector('.user-name');
                    userNameElement.addEventListener('click', () => {
                    const userId = userNameElement.getAttribute('data-user-id');
                    const userName = userNameElement.getAttribute('data-user-name');
                    openChatModal(liveStockId, userId, userName);
                });

                messageDisplayed = true;
            });

            if (!messageDisplayed) {
                const noChatMessage = document.createElement('div');
                noChatMessage.textContent = 'No chat details available.';
                noChatMessage.classList.add('no-chat-message');
                chatMessagesContainer.appendChild(noChatMessage);
            }

            // Show the modal after appending the data
            $('#ChatModalLivestock').modal('show');
        }).catch((error) => {
            console.error("Error getting enquiries: ", error);
        });
    }


   
    function openChatModal(liveStockId, userId ,userName) {
        if(userName)
        {
          
            document.getElementById('enquiryNameChat').textContent=userName;
            
        }
        $('#ChatModalLivestock').modal('hide');
     
        const chatCollection = firestore.collection("livestock_enquiry").doc(liveStockId).collection('enquiries').doc(userId).collection('chats');
        const modalBody = document.getElementById('chatMessages');
        modalBody.innerHTML = '';

        chatCollection.get().then((querySnapshot) => {
            querySnapshot.forEach((doc) => {
                const chatData = doc.data();
                const messageDiv = document.createElement('div');
                messageDiv.classList.add('chat-message');

                // const createdAt = chatData.created_at; // Replace with your actual created_at timestamp
                const formattedTimestamp = formatTime(chatData.created_at.seconds, chatData.created_at.nanoseconds); // Format the timestamp
               // Function to format the timestamp into "hh:mm AM/PM" format
            function formatTime(timestamp) {
                if (!timestamp) return ''; // Check if timestamp is valid

                const dateObj = new Date(timestamp);
                if (isNaN(dateObj.getTime())) return ''; // Check if dateObj is valid

                const options = {
                    hour: 'numeric',
                    minute: 'numeric',
                    hour12: true
                };
                return dateObj.toLocaleTimeString('en-US', options);
            }
                

                // Populate message div with chat data
                if (chatData.user_type == 'seller') {
                    messageDiv.innerHTML = `
                    <div class="row justify-content-end">
                        <div class="col-md-8">
                            <div class="newred-chatbox">
                            <h6>${chatData.user_name}(${chatData.user_type})</h6>
                                <h6>${chatData.text}</h6>
                                <div class="text-right mt-2">
                                    <span>${formattedTimestamp}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                } else {
                    messageDiv.innerHTML = `
                    <div class="row mt-sm-3 mt-2">
                        <div class="col-md-10">
                            <div class="chat-whitebox">
                            <h6>${chatData.user_name}(${chatData.user_type})</h6>
                                <h6>${chatData.text}</h6>
                                <div class="text-right mt-2">
                                    <span>${formattedTimestamp}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                }

                // Append message div to modal body
                modalBody.appendChild(messageDiv);
            });

            // Show the modal after appending the chat messages
            $('#join-menu').modal('show');
        }).catch((error) => {
            console.error("Error getting chat messages: ", error);
        });
    }


    function formatDate(date) {
        const options = {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: 'numeric',
            minute: 'numeric',
            hour12: true
        };
        return date ? new Date(date).toLocaleString('en-US', options) : '';
    }


    function formatTime(seconds, nanoseconds) {
    // Combine seconds and nanoseconds to create a valid JavaScript timestamp
    const timestamp = seconds * 1000 + nanoseconds / 1000000; // Convert nanoseconds to milliseconds
    // Create a Date object using the combined timestamp
    const dateObj = new Date(timestamp);
    // Format the date object as needed
    const options = {
        hour: 'numeric',
        minute: 'numeric',
        hour12: true
    };
    return dateObj.toLocaleTimeString('en-US', options);
}


</script>

@endsection