@extends('admin.layout.master')
@section('title', 'Chat')
<meta name="csrf-token" content="{{ csrf_token() }}">

<style>
    .chat-wrapper .chat-content .chat-body {
        max-height: 400px !important;
    }

    .chat-wrapper .chat-content .chat-body .messages {
        max-height: 400px !important;
    }

    .nav-tabs {
        --bs-nav-tabs-border-width: 0px !important;

    }

    /* Show the dropdown on hover */
    .dropdown:hover .dropdown-menu {
        display: block;
    }

    /* Prevent the dropdown from closing when clicked inside */
    .dropdown-menu {
        margin-top: 0;
    }

    .gstr1-hover {
        cursor: pointer;
    }

    .gstr1-hover:hover {
        background-color: lightgray;
        /* Change to any background color you prefer */
    }

    ul.messages {
        max-height: 400px;
        overflow-y: auto;
        /* Enable scrolling */
    }
</style>
@section('content')
    <div class="container">
        <div class="col-md-12">
            <div class="card">
                <h2 style="text-align: center">Dashboard (Admin)</h2>
            </div>
        </div>
        <div class="col-md-12">
            <div class="card">
                <h3 style="text-align: center"></h3>
                <table class="table table-bordered text-center">
                    <thead>
                        <tr>
                            <th class="gstr1-hover">
                                <div class="dropdown">
                                    <a style="color: gray; text-decoration: none !important;" id="gstr1Dropdown"
                                        href="#" role="button" aria-expanded="false">
                                        @php
                                            use App\Models\ReturnFiling;
                                            use Carbon\Carbon;

                                            $filing_count = ReturnFiling::count();
                                            $current = Carbon::now()->format('M Y');
                                            $currentMonthCount = ReturnFiling::where('year', $current)->count();
                                            $previousMonthCount = ReturnFiling::where('year', '!=', $current)->count();
                                        @endphp
                                        GSTR 1 ({{ $filing_count }})
                                    </a>
                                    <ul class="dropdown-menu" aria-labelledby="gstr1Dropdown" id="myTab" role="tablist">
                                        <li><a class="dropdown-item old-tab" id="contacts-tab" data-bs-toggle="tab"
                                                href="#contacts" role="tab" aria-controls="contacts"
                                                aria-selected="false">Old ({{ $previousMonthCount }})</a></li>
                                        <li><a class="dropdown-item current-tab" id="contacts-tab" data-bs-toggle="tab"
                                                href="#contacts" role="tab" aria-controls="contacts"
                                                aria-selected="false">Current ({{ $currentMonthCount }})</a></li>
                                    </ul>
                                </div>
                            </th>
                            <th>
                                <ul class="nav nav-tabs" id="myTab" role="tablist">
                                    <a style="color: gray; text-decoration: none !important;" id="contacts1-tabbb"
                                        data-bs-toggle="tab" href="#contacts111" role="tab" aria-controls="contacts1"
                                        aria-selected="false">
                                        GSTR-3B
                                    </a>
                                </ul>
                            </th>
                            <th><a style="color: gray" href="#">ITC-04</a></th>
                            <th><a style="color: gray" href="#">GSTR-9</a></th>
                            <th><a style="color: gray" href="#">GSTR-9C</a></th>
                            <th><a style="color: gray" href="#">Refunds</a></th>
                            <th><a style="color: gray" href="#">Amendments</a></th>
                            <th><a style="color: gray" href="#">LUT</a></th>
                            <th><a style="color: gray" href="#">Cancellation</a>
                            </th>
                            <th><a style="color: gray" href="#">Other Filings</a>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>

            </div>
        </div>
        <div class="row chat-wrapper">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row position-relative">
                            <div class="col-lg-4 chat-aside border-end-lg">
                                <div class="aside-content">
                                    <div class="aside-header">
                                        <div class="d-flex justify-content-between align-items-center pb-2 mb-2">
                                            {{-- <button class="btn btn-primary input-group">Filter</button> --}}
                                            {{-- <select name="" id="filterSelect" class="form-control">
                                                <option value="">Select Filter</option>
                                                <option value="{{ route('admin.chat') }}">Chats</option>

                                                <option value="{{ route('admin.chat') }}">GSTR 3B</option>
                                                <option value="{{ route('admin.chat') }}">Other Chats</option>



                                            </select> --}}

                                            <div class="d-flex align-items-center">
                                                <figure class="me-2 mb-0">
                                                    {{--    @if (Auth::guard('admin')->user()->image == null)
                                                        <img class="wd-30 ht-30 rounded-circle"
                                                            src="{{ url('https://via.placeholder.com/30x30') }}"
                                                            alt="profile">
                                                    @else
                                                        <img class="wd-30 ht-30 rounded-circle"
                                                            src="{{ asset('uploads/profile/' . Auth::guard('admin')->user()->image) }}"
                                                            alt="profile">
                                                    @endif
                                                    <div class="status online"></div> --}}
                                                </figure>
                                                <div>
                                                    {{-- <h6>{{ Auth::guard('admin')->user()->name }}</h6> --}}
                                                    <!--<input type="text" class="form-control" placeholder="Search">-->
                                                    {{-- <p class="text-muted tx-13">Software Developer</p> --}}
                                                </div>
                                            </div>
                                            {{-- <div class="dropdown">
                                                <button class="btn btn-link p-0" type="button" id="dropdownMenuButton"
                                                    data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="icon-lg text-muted pb-3px" data-feather="settings"></i>
                                                </button>
                                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                    <a class="dropdown-item d-flex align-items-center"
                                                        href="javascript:;"><i data-feather="eye" class="icon-sm me-2"></i>
                                                        <span class="">View Profile</span></a>
                                                    <a class="dropdown-item d-flex align-items-center"
                                                        href="javascript:;"><i data-feather="edit-2"
                                                            class="icon-sm me-2"></i> <span class="">Edit
                                                            Profile</span></a>
                                                    <a class="dropdown-item d-flex align-items-center"
                                                        href="javascript:;"><i data-feather="aperture"
                                                            class="icon-sm me-2"></i> <span class="">Add
                                                            status</span></a>
                                                    <a class="dropdown-item d-flex align-items-center"
                                                        href="javascript:;"><i data-feather="settings"
                                                            class="icon-sm me-2"></i> <span
                                                            class="">Settings</span></a>
                                                </div>
                                            </div> --}}
                                        </div>
                                        {{-- <form class="search-form">
                                            <div class="input-group">

                                                <input type="text" class="form-control" id="searchForm"
                                                    placeholder="Search here...">
                                                <div class="input-group-text">
                                                    <i data-feather="search" class="icon-md cursor-pointer"></i>
                                                </div>
                                            </div>
                                        </form> --}}
                                    </div>
                                    <div class="aside-body">
                                        {{-- <ul class="nav nav-tabs nav-fill mt-3" role="tablist">
                                            <li class="nav-item">
                                                <a class="nav-link active" id="chats-tab" data-bs-toggle="tab"
                                                    data-bs-target="#chats" role="tab" aria-controls="chats"
                                                    aria-selected="true">
                                                    <div
                                                        class="d-flex flex-row flex-lg-column flex-xl-row align-items-center justify-content-center">
                                                        <i data-feather="message-square"
                                                            class="icon-sm me-sm-2 me-lg-0 me-xl-2 mb-md-1 mb-xl-0"></i>
                                                        <p class="d-none d-sm-block">Chats</p>
                                                    </div>
                                                </a>
                                            </li>
                                            
                                            <li class="nav-item">
                                                <a class="nav-link" id="contacts-tab" data-bs-toggle="tab"
                                                    data-bs-target="#contacts" role="tab" aria-controls="contacts"
                                                    aria-selected="false">
                                                    <div
                                                        class="d-flex flex-row flex-lg-column flex-xl-row align-items-center justify-content-center">
                                                        <i data-feather="users"
                                                            class="icon-sm me-sm-2 me-lg-0 me-xl-2 mb-md-1 mb-xl-0"></i>
                                                        <p class="d-none d-sm-block">GSTR 1 Chats</p>
                                                    </div>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" id="contacts1-tab" data-bs-toggle="tab"
                                                    data-bs-target="#contacts1" role="tab" aria-controls="contacts1"
                                                    aria-selected="false">
                                                    <div
                                                        class="d-flex flex-row flex-lg-column flex-xl-row align-items-center justify-content-center">
                                                        <i data-feather="users"
                                                            class="icon-sm me-sm-2 me-lg-0 me-xl-2 mb-md-1 mb-xl-0"></i>
                                                        <p class="d-none d-sm-block">GSTR 3B Chats</p>
                                                    </div>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" id="contacts-tab" data-bs-toggle="tab"
                                                    data-bs-target="#contacts" role="tab" aria-controls="contacts"
                                                    aria-selected="false">
                                                    <div
                                                        class="d-flex flex-row flex-lg-column flex-xl-row align-items-center justify-content-center">
                                                        <i data-feather="users"
                                                            class="icon-sm me-sm-2 me-lg-0 me-xl-2 mb-md-1 mb-xl-0"></i>
                                                        <p class="d-none d-sm-block">Other Chats</p>
                                                    </div>
                                                </a>
                                            </li>
                                        </ul> --}}
                                        <div class="tab-content mt-3">
                                            <div class="tab-pane fade show active" id="chats" role="tabpanel"
                                                aria-labelledby="chats-tab">
                                                {{-- @livewire('chat.chat-list') --}}
                                            </div>
                                            <div class="tab-pane fade" id="calls" role="tabpanel"
                                                aria-labelledby="calls-tab">
                                                <p class="text-muted mb-1">Recent calls</p>
                                                <ul class="list-unstyled chat-list px-1">
                                                    <li class="chat-item pe-1">
                                                        <a href="javascript:;" class="d-flex align-items-center">
                                                            <figure class="mb-0 me-2">
                                                                <img src="{{ asset('1.jpg') }}"
                                                                    class="img-xs rounded-circle" alt="user">
                                                                <div class="status online"></div>
                                                            </figure>
                                                            <div
                                                                class="d-flex align-items-center justify-content-between flex-grow-1 border-bottom">
                                                                <div>
                                                                    <p class="text-body">Jensen Combs</p>
                                                                    <div class="d-flex align-items-center">
                                                                        <i data-feather="arrow-up-right"
                                                                            class="icon-sm text-success me-1"></i>
                                                                        <p class="text-muted tx-13">Today, 03:11 AM</p>
                                                                    </div>
                                                                </div>
                                                                <div class="d-flex flex-column align-items-end">
                                                                    <i data-feather="phone-call"
                                                                        class="text-primary icon-md"></i>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li class="chat-item pe-1">
                                                        <a href="javascript:;" class="d-flex align-items-center">
                                                            <figure class="mb-0 me-2">
                                                                <img src="{{ asset('1.jpg') }}"
                                                                    class="img-xs rounded-circle" alt="user">
                                                                <div class="status offline"></div>
                                                            </figure>
                                                            <div
                                                                class="d-flex align-items-center justify-content-between flex-grow-1 border-bottom">
                                                                <div>
                                                                    <p class="text-body">Leonardo Payne</p>
                                                                    <div class="d-flex align-items-center">
                                                                        <i data-feather="arrow-down-left"
                                                                            class="icon-sm text-success me-1"></i>
                                                                        <p class="text-muted tx-13">Today, 11:41 AM</p>
                                                                    </div>
                                                                </div>
                                                                <div class="d-flex flex-column align-items-end">
                                                                    <i data-feather="video"
                                                                        class="text-primary icon-md"></i>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li class="chat-item pe-1">
                                                        <a href="javascript:;" class="d-flex align-items-center">
                                                            <figure class="mb-0 me-2">
                                                                <img src="{{ asset('1.jpg') }}"
                                                                    class="img-xs rounded-circle" alt="user">
                                                                <div class="status offline"></div>
                                                            </figure>
                                                            <div
                                                                class="d-flex align-items-center justify-content-between flex-grow-1 border-bottom">
                                                                <div>
                                                                    <p class="text-body">Carl Henson</p>
                                                                    <div class="d-flex align-items-center">
                                                                        <i data-feather="arrow-down-left"
                                                                            class="icon-sm text-danger me-1"></i>
                                                                        <p class="text-muted tx-13">Today, 04:24 PM</p>
                                                                    </div>
                                                                </div>
                                                                <div class="d-flex flex-column align-items-end">
                                                                    <i data-feather="phone-call"
                                                                        class="text-primary icon-md"></i>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li class="chat-item pe-1">
                                                        <a href="javascript:;" class="d-flex align-items-center">
                                                            <figure class="mb-0 me-2">
                                                                <img src="{{ asset('1.jpg') }}"
                                                                    class="img-xs rounded-circle" alt="user">
                                                                <div class="status online"></div>
                                                            </figure>
                                                            <div
                                                                class="d-flex align-items-center justify-content-between flex-grow-1 border-bottom">
                                                                <div>
                                                                    <p class="text-body">Jensen Combs</p>
                                                                    <div class="d-flex align-items-center">
                                                                        <i data-feather="arrow-down-left"
                                                                            class="icon-sm text-danger me-1"></i>
                                                                        <p class="text-muted tx-13">Today, 12:53 AM</p>
                                                                    </div>
                                                                </div>
                                                                <div class="d-flex flex-column align-items-end">
                                                                    <i data-feather="video"
                                                                        class="text-primary icon-md"></i>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li class="chat-item pe-1">
                                                        <a href="javascript:;" class="d-flex align-items-center">
                                                            <figure class="mb-0 me-2">
                                                                <img src="{{ asset('1.jpg') }}"
                                                                    class="img-xs rounded-circle" alt="user">
                                                                <div class="status online"></div>
                                                            </figure>
                                                            <div
                                                                class="d-flex align-items-center justify-content-between flex-grow-1 border-bottom">
                                                                <div>
                                                                    <p class="text-body">John Doe</p>
                                                                    <div class="d-flex align-items-center">
                                                                        <i data-feather="arrow-down-left"
                                                                            class="icon-sm text-success me-1"></i>
                                                                        <p class="text-muted tx-13">Today, 01:42 AM</p>
                                                                    </div>
                                                                </div>
                                                                <div class="d-flex flex-column align-items-end">
                                                                    <i data-feather="video"
                                                                        class="text-primary icon-md"></i>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li class="chat-item pe-1">
                                                        <a href="javascript:;" class="d-flex align-items-center">
                                                            <figure class="mb-0 me-2">
                                                                <img src="{{ asset('1.jpg') }}"
                                                                    class="img-xs rounded-circle" alt="user">
                                                                <div class="status offline"></div>
                                                            </figure>
                                                            <div
                                                                class="d-flex align-items-center justify-content-between flex-grow-1 border-bottom">
                                                                <div>
                                                                    <p class="text-body">John Doe</p>
                                                                    <div class="d-flex align-items-center">
                                                                        <i data-feather="arrow-up-right"
                                                                            class="icon-sm text-success me-1"></i>
                                                                        <p class="text-muted tx-13">Today, 12:01 AM</p>
                                                                    </div>
                                                                </div>
                                                                <div class="d-flex flex-column align-items-end">
                                                                    <i data-feather="phone-call"
                                                                        class="text-primary icon-md"></i>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="tab-pane fade" id="contacts" role="tabpanel"
                                                aria-labelledby="contacts-tab">
                                                <p class="text-muted mb-1">GSTR 1 Chat</p>
                                                <ul class="list-unstyled chat-list px-1">
                                                    @foreach ($gstr1_chats as $gstr1_chat)
                                                        <li class="chat-item pe-1">
                                                            <a href="{{ route('admin.chat-messages-load', ['id' => $gstr1_chat->id]) }}"
                                                                class="d-flex align-items-center load-chat"
                                                                data-id="{{ $gstr1_chat->id }}">
                                                                <figure class="mb-0 me-2">
                                                                    <img src="{{ asset('1.jpg') }}"
                                                                        class="img-xs rounded-circle" alt="user">
                                                                    <div class="status offline"></div>
                                                                </figure>
                                                                <div
                                                                    class="d-flex align-items-center justify-content-between flex-grow-1 border-bottom">
                                                                    <div>

                                                                        <p class="text-body">

                                                                        <p class="text-body fw-bolder">
                                                                            {{-- {{ $firm->firms->firm_name }}  --}}
                                                                            {{ $gstr1_chat->firm_name }}
                                                                        </p>

                                                                        <p class="text-body tx-13">
                                                                            {{ $gstr1_chat->return_type_gstr1 }} -
                                                                            <b>{{ $gstr1_chat->year }}</b>
                                                                        </p>

                                                                        <p class="text-muted tx-13">
                                                                            {{ $gstr1_chat->gstr1_date }} -
                                                                            {{ $gstr1_chat->gstr1_time }}
                                                                            <br>
                                                                            {{-- @if (Auth::guard('admin')->user()->id == $gstr1_chat->picked_admin_id)
                                                                                Picked By:
                                                                                {{ Auth::guard('admin')->user()->name }} --}}
                                                                            @if ($gstr1_chat->team)
                                                                                {{ $gstr1_chat->team->first_name }}
                                                                            @elseif (Auth::guard('admin')->user()->id == $gstr1_chat->picked_admin_id)
                                                                                {{ Auth::guard('admin')->user()->name }}
                                                                            @endif

                                                                        </p>


                                                                        </p>
                                                                        <div class="d-flex align-items-center">
                                                                            <p class="text-muted tx-13">
                                                                                {{-- {{ $firm->firm_name }} --}}
                                                                            </p>
                                                                        </div>

                                                                    </div>
                                                                    {{-- <div class="d-flex align-items-end text-body">
                                                                    <i data-feather="message-square"
                                                                        class="icon-md text-primary me-2"></i>
                                                                    <i data-feather="phone-call"
                                                                        class="icon-md text-primary me-2"></i>
                                                                    <i data-feather="video"
                                                                        class="icon-md text-primary"></i>
                                                                </div> --}}
                                                                </div>
                                                            </a>
                                                        </li>
                                                    @endforeach


                                                </ul>
                                            </div>

                                            <div class="tab-pane fade" id="contacts1" role="tabpanel"
                                                aria-labelledby="contacts1-tab">
                                                <p class="text-muted mb-1">GSTR 3B Chat</p>
                                                <ul class="list-unstyled chat-list px-1">
                                                    @foreach ($gstr3b_chats as $gstr3b_chat)
                                                        <li class="chat-item pe-1">
                                                            <a href="{{ route('admin.chat-messages-gstr3b', ['id' => $gstr3b_chat->user->id]) }}"
                                                                class="d-flex align-items-center load-chat"
                                                                data-id="{{ $gstr1_chat->id }}">
                                                                <figure class="mb-0 me-2">
                                                                    <img src="{{ asset('1.jpg') }}"
                                                                        class="img-xs rounded-circle" alt="user">
                                                                    <div class="status offline"></div>
                                                                </figure>
                                                                <div
                                                                    class="d-flex align-items-center justify-content-between flex-grow-1 border-bottom">
                                                                    <div>

                                                                        <p class="text-body">

                                                                        <p class="text-body fw-bolder">
                                                                            {{ $gstr1_chat->firm_name }}
                                                                        </p>

                                                                        <p class="text-muted tx-13">
                                                                            {{ $gstr3b_chat->return_type_gstr1 }}
                                                                        </p>


                                                                        </p>
                                                                        <div class="d-flex align-items-center">
                                                                            <p class="text-muted tx-13">
                                                                                {{-- {{ $firm->firm_name }} --}}
                                                                            </p>
                                                                        </div>

                                                                    </div>
                                                                    {{-- <div class="d-flex align-items-end text-body">
                                                                    <i data-feather="message-square"
                                                                        class="icon-md text-primary me-2"></i>
                                                                    <i data-feather="phone-call"
                                                                        class="icon-md text-primary me-2"></i>
                                                                    <i data-feather="video"
                                                                        class="icon-md text-primary"></i>
                                                                </div> --}}
                                                                </div>
                                                            </a>
                                                        </li>
                                                    @endforeach

                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {{-- <div id="" class="col-lg-8 chat-content">
                                <div class="chat-header border-bottom pb-2">
                                    <div class="d-flex justify-content-between">
                                        <div class="d-flex align-items-center">
                                            <i data-feather="corner-up-left" id="backToChatList"
                                                class="icon-lg me-2 ms-n2 text-muted d-lg-none"></i>
                                            <figure class="mb-0 me-2">
                                                <img src="{{ url('https://via.placeholder.com/43x43') }}"
                                                    class="img-sm rounded-circle" alt="image">
                                                <div class="status online"></div>
                                                <div class="status online"></div>
                                            </figure>
                                            <div>
                                                <p>Mariana Zenha</p>
                                                <p class="text-muted tx-13">Front-end Developer</p>
                                            </div>
                                        </div>
                                        
                                    </div>
                                </div>
                                <div class="chat-body">
                                    <ul class="messages">
                                        <li class="message-item friend">
                                            <img src="{{ asset('1.jpg') }}"
                                                class="img-xs rounded-circle" alt="avatar">
                                            <div class="content">
                                                <div class="message">
                                                    <div class="bubble">
                                                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting
                                                            industry.</p>
                                                    </div>
                                                    <span>8:12 PM</span>
                                                </div>
                                            </div>
                                        </li>
                                        
                                       
                                    </ul>
                                </div>
                                <div class="chat-footer d-flex">
                                    
                                    <div class="d-none d-md-block">
                                        <button type="button" class="btn border btn-icon rounded-circle me-2"
                                            data-bs-toggle="tooltip" data-bs-title="Attatch files">
                                            <i data-feather="paperclip" class="text-muted"></i>
                                        </button>
                                    </div>
                                    <div class="d-none d-md-block">
                                        
                                    </div>
                                    <form class="search-form flex-grow-1 me-2">
                                        <div class="input-group">
                                            <input type="text" class="form-control rounded-pill" id="chatForm"
                                                placeholder="Type a message">
                                        </div>
                                    </form>
                                    <div>
                                        <button type="button" class="btn btn-primary btn-icon rounded-circle">
                                            <i data-feather="send"></i>
                                        </button>
                                    </div>
                                </div>
                            </div> --}}
                            <div id="chat-content" class="col-lg-8 chat-content">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Re Assignment -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Re Assignment</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
                </div>
                <div class="modal-body">
                    <form id="reAssignmentForm" action="{{ route('admin.user.gstr1.filing.picked.assign.process') }}"
                        method="POST">
                        @csrf
                        <input type="hidden" name="filing_id" id="filing_id">
                        <div class="mb-3">
                            <label for="name" class="form-label">Team Member</label>
                            <select name="team" class="form-control" id="team">
                                <option value="">Please Select Team Member</option>
                                @foreach ($teams as $team)
                                    <option value="{{ $team->id }}">
                                        {{ $team->first_name . ' ' . $team->last_name }}
                                    </option>
                                @endforeach
                            </select>
                            <span class="text-danger" id="teamError">{{ $errors->first('team') }}</span>
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    {{-- <button type="submit" class="btn btn-primary">Submit</button> --}}

                    <button type="button" class="btn btn-primary" id="submitFormButton">Submit</button>

                </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@push('custom-scripts')
    <script src="{{ asset('assets/js/chat.js') }}"></script>
    {{-- <script>
        document.getElementById('filterSelect').addEventListener('change', function() {
            var url = this.value;
            if (url) {
                window.location.href = url;
            }
        });
    </script> --}}

    <script>
        $(document).on('click', '.load-chat', function(event) {
            event.preventDefault(); // Prevent the default link behavior

            let chatId = $(this).data('id'); // Get the chat ID
            let url = $(this).attr('href'); // Get the URL to make the AJAX request

            $.ajax({
                url: url,
                type: 'GET',
                success: function(response) {
                    // Load the response into the chat-content div
                    $('#chat-content').html(response);
                },
                error: function(xhr) {
                    console.error('Error loading chat:', xhr);
                }
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            // When "Old" or "Current" is clicked
            $('.old-tab, .current-tab').on('click', function() {
                $('.gstr1-hover').css('background-color', 'lightgray');
            });
        });
    </script>

    <script>
        $(".chat").on("click", function() {
            var dataId = $(this).attr("data-id");
            $(".gstr1_comment").val(dataId);
            // alert("The data-id of clicked item is: " + dataId);
        });
    </script>

    {{-- <script>
    document.getElementById('name').addEventListener('mousedown', function(event) {
        // Prevent the default action of placing the cursor where the mouse is clicked
        event.preventDefault();
        // Set the cursor position to the start (position 0)
        this.setSelectionRange(0, 0);
        // Focus the textarea
        this.focus();
    });
</script> --}}

    <script>
        // document.getElementById('filing_status_').addEventListener('change', function() {
        //     var commentBox = document.getElementById('commentBox');
        //     if (this.value === 'Error') {
        //         commentBox.style.display = 'block';
        //     } else {
        //         commentBox.style.display = 'none';
        //     }
        // });

        // document.getElementById('filing_status_').dispatchEvent(new Event('change'));
        // document.getElementById('filterSelect').addEventListener('change', function() {
        //     var url = this.value;
        //     if (url) {
        //         window.location.href = url;
        //     }
        // });

        $(document).on("click", ".modal2", function(e) {
            // console.log(e);
            var id = $(this).data("id");
            console.log(id);
            $("#filing_id").val(id);
            // alert(id)
        });

        // $(".filing_status").on("change", function(e) {
        //     var id = $(this).data("filingid");
        //     console.log(id);
        //     var status = $("#filing_status_" + id).val();
        //     var confirmed = confirm("Are you sure you want to update this record?");

        //     // alert(status)
        //     console.log(status);

        //     // $.ajaxSetup({
        //     //     headers: {
        //     //         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        //     //     }
        //     // });
        //     var url = `{{ route('admin.user.filing.status') }}`;
        //     if (confirmed) {

        //     $.ajax({

        //         // Our sample url to make request 
        //         url: url,

        //         // Type of Request
        //         type: "GET",
        //         dataType: "json",
        //         data: {
        //             id: id,
        //             status: status
        //         },
        //         // Function to call when to
        //         // request is ok 
        //         success: function(data) {
        //             let x = JSON.stringify(data);
        //             console.log(x);
        //             // alert('Status Successfully')
        //             alert('Status updated successfully.');



        //             //location.reload();
        //             // Reload the page only if the status is not 'Error'

        //         },

        //         // Error handling 
        //         error: function(error) {
        //             console.log(`Error ${error}`);
        //             // alert('success')
        //             location.reload()


        //         }
        //     });
        // }

        // });
        // $(document).on("change", ".filing_status", function(e) {
        //     console.log("working..");
        //     var id = $(this).data("filingid");
        //     var originalStatus = $(this).data("original-status");
        //     var status = $("#filing_status_" + id).val();

        //     // SweetAlert confirmation box
        //     Swal.fire({
        //         title: 'Are you sure?',
        //         text: "Do you want to update this record?",
        //         icon: 'warning',
        //         showCancelButton: true,
        //         confirmButtonColor: '#3085d6',
        //         cancelButtonColor: '#d33',
        //         confirmButtonText: 'Yes, update it!'
        //     }).then((result) => {
        //         if (result.isConfirmed) {
        //             var url = `{{ route('admin.user.filing.status') }}`;

        //             $.ajax({
        //                 url: url,
        //                 type: "GET",
        //                 dataType: "json",
        //                 data: {
        //                     id: id,
        //                     status: status
        //                 },
        //                 success: function(data) {
        //                     if (data.status === "error") {
        //                         // Show the comment box in case of error
        //                         $("#commentBox").show();
        //                         Swal.fire('Error', 'An error occurred while updating the status.', 'error');
        //                         // Revert to the original value
        //                         $("#filing_status_" + id).val(originalStatus);
        //                     } else {
        //                         // Hide the comment box if status is successfully updated
        //                         $("#commentBox").hide();
        //                         // Update the original-status attribute with the new value
        //                         $("#filing_status_" + id).data("original-status", status);
        //                         Swal.fire('Updated!', 'The status has been updated.', 'success');
        //                         $('ul.messages').append(`<li class="message-item me">
    //                             <img src="http://127.0.0.1:8000/assets/images/logo.jpeg" class="img-xs rounded-circle" alt="avatar">
    //                             <div class="content">
    //                                 <div class="message">
    //                                     <div class="bubble">
    //                                         <p>
    //                                         ${data.fileData.status}
    //                                         </p>
    //                                     </div>
    //                                     <span>${data.fileData.currentt_date} |
    //                                     ${data.fileData.currentt_time}</span>
    //                                 </div>
    //                             </div>
    //                         </li>`);
        //                     }
        //                 },
        //                 error: function(error) {
        //                     console.log(`Error ${error}`);
        //                     // Show the comment box and alert for general error
        //                     $("#commentBox").show();
        //                     Swal.fire('Error', 'A general error occurred. Please try again.', 'error');
        //                     // Revert to the original value
        //                     $("#filing_status_" + id).val(originalStatus);
        //                 }
        //             });
        //         } else {
        //             // Hide the comment box and revert to the original value if the user cancels
        //             $("#commentBox").hide();
        //             $("#filing_status_" + id).val(originalStatus);
        //         }
        //     });
        // });

        $(document).on("change", ".filing_status", function(e) {
            console.log("working..");
            var id = $(this).data("filingid");
            var originalStatus = $(this).data("original-status");
            var status = $("#filing_status_" + id).val();



            // SweetAlert confirmation box
            Swal.fire({
                title: 'Are you sure?',
                text: "Do you want to update this record?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, update it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    var url = `{{ route('admin.user.filing.status') }}`;

                    $.ajax({
                        url: url,
                        type: "GET",
                        dataType: "json",
                        data: {
                            id: id,
                            status: status
                        },
                        success: function(data) {
                            console.log(data)
                            if (data.data.gstr1_file_status == "Error") {
                                // Show the comment box in case of error
                                $("#commentBox").show();
                                // Swal.fire('Error', 'An error occurred while updating the status.', 'error');

                                // Revert to the original value
                                $("#filing_status_" + id).val(data.data.gstr1_file_status);

                                // Append the comment form if status is 'Error'
                                $('div.chat-footer d-flex').append(`<form action="{{ route('admin.store.chat') }}" method="POST" class="search-form flex-grow-1 me-2"
                id="commentBox">
                @csrf
                <input type="hidden" name="return_filing_id" value="{{ $gstr1_chat->id }}">
                <div class="input-group">
                    <input type="text" class="form-control rounded-pill" id="chatForm"
                        placeholder="Type a message" name="gstr1_comment" required>

                    <div>
                        <button type="submit" class="btn btn-primary btn-icon rounded-circle">
                            <i data-feather="send"></i>
                        </button>
                    </div>
                </div>

            </form>`);


                            } else {
                                // Hide the comment box if status is successfully updated
                                $("#commentBox").hide();

                                // Update the original-status attribute with the new value
                                $("#filing_status_" + id).data("original-status", status);
                                Swal.fire('Updated!', 'The status has been updated.',
                                    'success');

                                // Append message with updated status and timestamp
                                $('ul.messages').append(`<li class="message-item me">
                            <img src="http://127.0.0.1:8000/assets/images/logo.jpeg" class="img-xs rounded-circle" alt="avatar">
                            <div class="content">
                                <div class="message">
                                    <div class="bubble">
                                        <i>${data.fileData.status}</i>
                                    </div>
                                    <i>${data.fileData.currentt_date} | ${data.fileData.currentt_time}</i>
                                </div>
                            </div>
                        </li>`);
                            }
                        },
                        error: function(error) {
                            console.log(`Error ${error}`);

                            // Show the comment box and alert for general error
                            $("#commentBox").show();
                            Swal.fire('Error', 'A general error occurred. Please try again.',
                                'error');

                            // Revert to the original value
                            $("#filing_status_" + id).val(originalStatus);
                        }
                    });
                } else {
                    // Hide the comment box and revert to the original value if the user cancels
                    $("#commentBox").hide();
                    $("#filing_status_" + id).val(originalStatus);
                }
            });
        });

        // $(document).ready(function() {
        $(document).on('submit', "#commentBox", function(e) {
            e.preventDefault(); // Prevent form submission

            let formData = $(this).serialize(); // Serialize form data
            var url = `{{ route('admin.store.chat') }}`;


            $.ajax({
                url: url,
                // _token: '{{ csrf_token() }}',
                type: 'POST',
                data: formData,
                success: function(response) {
                    // Append the new comment
                    if (response.comment) {

                        $('ul.messages').append(`<li class="message-item me">
                            <img src="http://127.0.0.1:8000/assets/images/logo.jpeg" class="img-xs rounded-circle" alt="avatar">
                            <div class="content">
                                <div class="message">
                                    <div class="bubble">
                                        <i>${response.comment}</i>
                                    </div>
                                    <i>${response.date} | ${response.time}</i>
                                </div>
                            </div>
                        </li>`);

                        // Clear the input field
                        $('#chatForm').val('');

                        // Ensure scrolling happens after DOM update
                        setTimeout(function() {
                            var messageList = $('ul.messages');
                            messageList.animate({
                                scrollTop: messageList.prop("scrollHeight")
                            }, 500); // Smooth scroll
                        }, 100);

                        // Show success SweetAlert notification
                        Swal.fire({
                            icon: 'success',
                            title: 'Message sent!',
                            text: 'Your comment has been added successfully.',
                            timer: 2000,
                            showConfirmButton: false
                        });
                    } else {
                        console.log('No comment found in the response');
                    }
                },
                error: function(xhr) {
                    console.log(xhr.responseText); // Log the error if any
                }
            });
        });
        // });



        $(document).on("click", ".pick-link", function(e) {
            e.preventDefault(); // Prevent default link behavior

            let chatId = $(this).data('id'); // Get the chat ID from the clicked element

            // Show SweetAlert2 confirmation
            Swal.fire({
                title: "Are you sure?",
                text: "Once picked, you cannot undo this action!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Yes, pick it!"
            }).then((result) => {
                if (result.isConfirmed) {
                    // Make the AJAX request if user confirms
                    $.ajax({
                        url: '{{ route('admin.user.filing.picked', ':id') }}'.replace(':id',
                            chatId), // Replace ':id' with chatId
                        type: 'GET',
                        data: {
                            _token: '{{ csrf_token() }}',
                            chatId: chatId // CSRF token for security
                        },
                        success: function(response) {
                            if (response.status) {
                                // Show success alert
                                Swal.fire("Success!", "Admin has been picked!", "success");

                                // Append the admin name inside the <p class="pick"> element
                                $('p.pick').append(`<a>admin</a> <a href="#" data-bs-toggle="modal" class="modal2" data-id="{{ $gstr1_chat->id }}"
                                data-bs-target="#exampleModal">
                                Re-Assignment
                            </a>`);

                                // Update the UI - Change the content of the picked chat item
                                $(`#gstr1-chat-${chatId}`).html('You have picked this filing.');

                                // Optionally append a new record below the current one
                                let newRecord = `<div class="picked-record">
                                             <p>Filing ID ${chatId} has been picked by you.</p>
                                         </div>`;
                                $(`#gstr1-chat-${chatId}`).after(newRecord);
                            } else {
                                // Handle any error messages returned in the response
                                Swal.fire("Error!", response.message, "error");
                            }
                        },
                        error: function(xhr) {
                            // Handle different error scenarios
                            if (xhr.status === 404) {
                                Swal.fire("Error!", 'Record not found.', "error");
                            } else if (xhr.status === 500) {
                                Swal.fire("Error!",
                                    'Internal server error. Please try again later.',
                                    "error");
                            } else {
                                Swal.fire("Error!",
                                    'An unexpected error occurred. Please try again.',
                                    "error");
                            }
                        }
                    });
                } else {
                    // Show cancelled alert if the user cancels the action
                    Swal.fire("Cancelled", "Your action has been cancelled.", "info");
                }
            });
        });



        // $.ajaxSetup({
        //     headers: {
        //         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        //     }
        // });


        $(document).on('click', '#submitFormButton', function() {
            $('#reAssignmentForm').submit(); // Trigger the form submission
        });

        $(document).on('submit', '#reAssignmentForm', function(e) {
            e.preventDefault(); // Prevent default form submission

            var formData = $(this).serialize(); // Serialize the form data
            var url = $(this).attr('action'); // Get the form action URL

            $.ajax({

                url: url,
                type: "POST",
                _token: '{{ csrf_token() }}',
                data: formData,
                success: function(response) {
                    // Handle success
                    if (response.status) {
                        // Hide the modal
                        // $('#exampleModal').modal('hide');
                        // Optionally, show a success message
                        Swal.fire('Success', 'The reassignment was successful!', 'success');
                    } else {
                        // Display validation error if exists
                        $('#teamError').text(response.errors.team);
                    }
                },
                error: function(xhr) {
                    // Handle error
                    Swal.fire('Error', 'An error occurred. Please try again.', 'error');
                }
            });
        });
    </script>
    {{-- <script>
    Echo.channel('filing-status-channel')
        .listen('.filing-status-updated', (e) => {
            const filingStatus = e.filingStatus;
            let newFiling = `
                <li class="message-item me">
                    <img src="{{ asset('/assets/images/logo.jpeg') }}" class="img-xs rounded-circle" alt="avatar">
                    <div class="content">
                        <div class="message">
                            <div class="bubble">
                                <p>${filingStatus.status}</p>
                            </div>
                            <span>${filingStatus.currentt_date} | ${filingStatus.currentt_time}</span>
                        </div>
                    </div>
                </li>
            `;
            $('#filings-container').prepend(newFiling); // Add the new status to the top of the list
        });
</script> --}}


    <script>
        function updateTotals() {
            // Define arrays for each type of tax
            const cgstIds = ['gstr1_comment_2', 'gstr1_comment_6', 'gstr1_comment_10', 'gstr1_comment_14'];
            const sgstIds = ['gstr1_comment_3', 'gstr1_comment_7', 'gstr1_comment_11', 'gstr1_comment_15'];
            const igstIds = ['gstr1_comment_4', 'gstr1_comment_8', 'gstr1_comment_12', 'gstr1_comment_16'];

            // Calculate totals for CGST, SGST, and IGST
            const totalCGST = cgstIds.reduce((sum, id) => sum + (parseFloat(document.getElementById(id).value) || 0), 0);
            const totalSGST = sgstIds.reduce((sum, id) => sum + (parseFloat(document.getElementById(id).value) || 0), 0);
            const totalIGST = igstIds.reduce((sum, id) => sum + (parseFloat(document.getElementById(id).value) || 0), 0);

            // Calculate Sub Total
            const subTotal = totalCGST + totalSGST + totalIGST;

            // Update fields
            document.getElementById('gstr1_comment_17').value = subTotal.toFixed(2);
            document.getElementById('total_cgst').value = totalCGST.toFixed(2);
            document.getElementById('total_sgst').value = totalSGST.toFixed(2);
            document.getElementById('total_igst').value = totalIGST.toFixed(2);
        }
    </script>
@endpush