@include('business.layouts.head')
@include('business.layouts.header')

<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css" rel="stylesheet">
<style>
  /* start css for chat  */
.chat-body {
    max-height: 300px; /* Set the maximum height of the div */
    overflow-y: scroll; /* Enable vertical scrolling */
    padding: 10px; /* Add some padding (optional) */
    /* border: 1px solid #ccc; Add a border (optional)
     */
     margin:10px;
}

/* Hide the scrollbar for webkit browsers (Chrome, Safari) */
.chat-body::-webkit-scrollbar {
    width: 0px; /* Remove scrollbar space */
    background: transparent; /* Optional: just to avoid flickering */
}

/* Hide scrollbar for IE, Edge, and Firefox */
.chat-body {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
</style>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <style>
    #chat1 .form-outline .form-control~.form-notch div {
    pointer-events: none;
    border: 1px solid;
    border-color: #eee;
    box-sizing: border-box;
    background: transparent;
    }

    #chat1 .form-outline .form-control~.form-notch .form-notch-leading {
    left: 0;
    top: 0;
    height: 100%;
    border-right: none;
    border-radius: .65rem 0 0 .65rem;
    }

    #chat1 .form-outline .form-control~.form-notch .form-notch-middle {
    flex: 0 0 auto;
    max-width: calc(100% - 1rem);
    height: 100%;
    border-right: none;
    border-left: none;
    }

    #chat1 .form-outline .form-control~.form-notch .form-notch-trailing {
    flex-grow: 1;
    height: 100%;
    border-left: none;
    border-radius: 0 .65rem .65rem 0;
    }

    #chat1 .form-outline .form-control:focus~.form-notch .form-notch-leading {
    border-top: 0.125rem solid #39c0ed;
    border-bottom: 0.125rem solid #39c0ed;
    border-left: 0.125rem solid #39c0ed;
    }

    #chat1 .form-outline .form-control:focus~.form-notch .form-notch-leading,
    #chat1 .form-outline .form-control.active~.form-notch .form-notch-leading {
    border-right: none;
    transition: all 0.2s linear;
    }

    #chat1 .form-outline .form-control:focus~.form-notch .form-notch-middle {
    border-bottom: 0.125rem solid;
    border-color: #39c0ed;
    }

    #chat1 .form-outline .form-control:focus~.form-notch .form-notch-middle,
    #chat1 .form-outline .form-control.active~.form-notch .form-notch-middle {
    border-top: none;
    border-right: none;
    border-left: none;
    transition: all 0.2s linear;
    }

    #chat1 .form-outline .form-control:focus~.form-notch .form-notch-trailing {
    border-top: 0.125rem solid #39c0ed;
    border-bottom: 0.125rem solid #39c0ed;
    border-right: 0.125rem solid #39c0ed;
    }

    #chat1 .form-outline .form-control:focus~.form-notch .form-notch-trailing,
    #chat1 .form-outline .form-control.active~.form-notch .form-notch-trailing {
    border-left: none;
    transition: all 0.2s linear;
    }

    #chat1 .form-outline .form-control:focus~.form-label {
    color: #39c0ed;
    }

    #chat1 .form-outline .form-control~.form-label {
    color: #bfbfbf;
    }
  /* end css for chat  */

    .modal-body {
        max-height: 400px;
        overflow-y: auto;
    }
    .modal-body::-webkit-scrollbar {
        width: 8px;
    }
    .modal-body::-webkit-scrollbar-thumb {
        background-color: #888;
        border-radius: 10px;
    }
    .modal-body::-webkit-scrollbar-thumb:hover {
        background-color: #555;
    }
    .modal-body::-webkit-scrollbar-track {
        background-color: #f1f1f1;
    }

    .loading-circle {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 999; /* Sit on top */
    left: 50%;
    top: 50%;
    width: 40px;
    height: 40px;
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #3498db; /* Blue */
    border-radius: 50%;
    animation: spin 2s linear infinite; /* Spin animation */
}

/* Spin animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>
<div class="main-content">


    <section class="home">
        <div class="container">
            <div class="row">
                @if(Auth::user()->userTypeId==1)
                    @include('user-web.layouts.sidebar')
                @else
                    @include('business.layouts.sidebar')
                @endif
                <div class="col-lg-6">
                    <div class="card">
                        <div class="card-body">
                            <h3 class="card-title">Applied Jobs</h3>
                            @if(!empty($AppliedJob))
                                @foreach($AppliedJob as $index =>$job)

                                    <div class="card-body job_details">
                                        <h3 class="card-title mb-2">{{$job['jobTitle']}} ({{$job['companyName']}})</h3>
                                        <h3 class="title mb-2">{{ucfirst($job['workplaceType'])}}-{{ucfirst($job['jobType'])}}</h3>
                                        <p class="card-text">{{$job['jobLocation']}}</p>
                                        <p class="card-text"> {{$job['jobDescription']}}</p><br>
                                        <div class="verified active text-left">
                                            <span class="ms-2">
                                                <a data-toggle="modal" style="cursor:pointer" data-target="#edit-profile_{{$index}}" title="show users">
                                                    <i class="fa fa-users"></i> {{ucfirst($job['first_user_name'])}}
                                                    @php
                                                        if($job['user_count'] >= 1) {
                                                            echo "and " . $job['user_count'] . " Others";
                                                        }
                                                    @endphp
                                                </a>
                                            </span>
                                        </div>
                                    <div class="modal fade" id="edit-profile_{{$index}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title" id="exampleModalLabel">Users</h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">&times;</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    @foreach($job['users'] as $in=>$value)
                                                        <div class="card-body">
                                                                @if(\Illuminate\Support\Facades\File::exists(public_path($value['profileImageUrl'])))
                                                                    <img class="mb-4"src="{{ env('APPLICATION_URL') . $value['profileImageUrl'] }}"  width="100px" height="100px">
                                                                @else
                                                                    <img  class="mb-4" src="https://hapiverse.com/ci_api/public/{{ $value['profileImageUrl'] }}"  width="50px" height="50">
                                                                @endif
                                                                <p class="card-text">{{$value['userName']}}</p>
                                                                <a  id="seeviewProfile" data-userid ="{{$value['id']}}" data-jobId="{{$job['id']}}"  href="#" data-toggle="modal" style="cursor:pointer" data-target="#view_profile_{{$index}}" title="show users" class="view_profile viw_p{{$index}}{{$in}}">View Profile </a>

                                                                <span class="pl-2">
                                                                    <i class="far fa-comment-alt chat_room_cls" data-chat_body_id="{{$in}}" data-jobId="{{$job['id']}}"  data-receiver_id="{{$value['id']}}" data-toggle="collapse" href="#chat_btn_action_{{$index}}{{$in}}" role="button" aria-expanded="false" aria-controls="chat_btn_action"></i>
                                                                </span>
                                                                <!-- chat html -->
                                                                <div class="row">
                                                                    <div class="col">
                                                                        <div class="collapse multi-collapse" id="chat_btn_action_{{$index}}{{$in}}">
                                                                            <div class="card" id="chat1" style="border-radius: 15px;">
                                                                                <div class="card-body chat_outer_body">

                                                                                    <div  class="chat-body chat-body-{{$job['id']}}"></div>
                                                                                    <input type="hidden" name="receiver_id" class="receiver_id" id="receiver_id" value="{{$value['id']}}">
                                                                                    <input type="hidden" name="sender">
                                                                                    <div data-mdb-input-init class="form-outline">
                                                                                        <meta name="csrf-token" content="{{ csrf_token() }}">
                                                                                        <textarea class="form-control bg-body-tertiary message new_message_{{$job['id']}}"   data-message_new_id="{{$job['id']}}"  placeholder="Type your message" rows="4" name="message"></textarea>
                                                                                        <div style="text-align: right" class="mt-2" >

                                                                                            <button class="btn btn-primary btn-sm sendBtn" >Send</button>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            <!--end chat html -->
                                                                <div class="modal fade" id="view_profile_{{$index}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                                    <div class="modal-dialog modal-dialog-centered">
                                                                        <div class="modal-content">
                                                                            <div class="modal-header">
                                                                                <h5 class="modal-title" id="exampleModalLabel_dd">Users Details</h5>
                                                                                <button type="button" class="close profile_modal" data-dismiss="modal" aria-label="Close">
                                                                                    <span aria-hidden="true">&times;</span>
                                                                                </button>
                                                                            </div>
                                                                            <div class="modal-body">
                                                                            @if(\Illuminate\Support\Facades\File::exists(public_path($value['profileImageUrl'])))
                                                                                <img class="mb-4"src="{{ env('APPLICATION_URL') . $value['profileImageUrl'] }}"  width="100px" height="100px">
                                                                            @else
                                                                                <img  class="mb-4" src="https://hapiverse.com/ci_api/public/{{ $value['profileImageUrl'] }}"  width="50px" height="50">
                                                                            @endif
                                                                            <p class="card-text">Name  : {{$value['userName']}}</p>
                                                                            <p class="card-text">Email  : {{$value['email']}}</p>
                                                                            <p class="card-text">Phone No.  : {{$value['phoneNo']}}</p>
                                                                            <p class="card-text">DOB  : {{$value['DOB']}}</p>
                                                                            <p class="card-text">Bio  : {{$value['bio']}}</p>
                                                                            <p class="card-text">Address  : {{$value['address']}}</p>
                                                                            <p class="card-text">Religion  : {{$value['religion']}}</p>
                                                                            <p class="card-text">Martial Status  : {{$value['martialStatus']}}</p>

                                                                            <select style="width:160px"  data-user_id ="{{$value['id']}}"  data-job_id ="{{$job['id']}}" class="form-select job_status" aria-label="Status">
                                                                                <meta name="csrf-token" content="{{ csrf_token() }}">
                                                                                <option value="">Candidate Status</option>
                                                                                @if($status_job)
                                                                                    @foreach($status_job as $val_o)


                                                                                        <option value="{{ $val_o->id }}"  {{ intval($value['status']) == intval($val_o->id) ? 'selected' : '' }}>
                                                                                        {{ ucfirst($val_o->status_type) }}
                                                                                    </option>
                                                                                    @endforeach
                                                                                @endif
                                                                            </select>
                                                                            <div class="loading-circle"></div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            @else
                                <p>No jobs have been applied</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

@include('business.layouts.footer')
@vite('resources/js/app.js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script>
    @if (Session::has('notification'))
        var notification = @json(Session::get('notification'));
        var type = notification['alert-type'];
        var message = notification['message'];
        var audio = new Audio('audio.mp3');

        toastr.options.timeOut = 2000;

        switch (type) {
            case 'info':
                toastr.info(message);
                break;
            case 'success':
                toastr.success(message);
                break;
            case 'warning':
                toastr.warning(message);
                break;
            case 'error':
                toastr.error(message);
                break;
        }

        audio.play();
    @endif
</script>

<script type="module">

    Echo.channel('chat-room')
        .listen('MessageSent', (e) => {
            var userId = "{{ Auth::user()->getBusinessDetail->businessId }}";

            if (e.message) {
                console.log('Single message:', e.chat_id);
                if (e.message.sender_id == userId) {

                    $('.chat-body-'+ e.chat_id).append(`
                       <div class="d-flex flex-row justify-content-end mb-4">
                            <div class="p-3 me-3 border bg-body-tertiary" style="border-radius: 15px;">
                                <p class="small mb-0">${e.message.message}</p>
                            </div>
                            <img src="https://cdn-icons-png.flaticon.com/512/149/149071.png"
                                alt="avatar 1" style="width: 45px; height: 100%;">
                        </div>
                    `);
                } else  {
                    $('.chat-body-'+ e.chat_id).append(`
                        <div class="d-flex flex-row justify-content-start mb-4">
                            <img src="https://cdn-icons-png.flaticon.com/512/149/149071.png"
                                alt="avatar 1" style="width: 45px; height: 100%;">
                                <div class="p-3 ms-3" style="border-radius: 15px; background-color: rgba(57, 192, 237,.2);">
                                    <p class="small mb-0">${e.message.message}</p>
                                </div>
                        </div>

                    `);
                }
            }
        });


    // for chat application

    $('.chat_room_cls').click(function(){

        var csrfToken = $('meta[name="csrf-token"]').attr('content');
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': csrfToken
            }
        });
        var receiver_id =  $(this).data('receiver_id');
        var jobId = $(this).attr('data-jobid');
        var userId = "{{ Auth::user()->getBusinessDetail->businessId }}";
            $.ajax({
                url: "{{ route('chatroom') }}",
                method: 'POST',
                data: { receiver_id, receiver_id,
                    jobId,jobId,
                    userId,userId,
                },
                success: function(response) {
                         var userId = "{{ Auth::user()->getBusinessDetail->businessId }}";
                         console.log('respos',response);
                        if (response.data && response.data.length > 0) {
                            var chat_body_id = response.chat_body_id;
                            $('.chat-body-' + chat_body_id).html('');
                            response.data.forEach((value) => {
                                                    // https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp  boy photo
                                            if (value.sender_id != userId) {
                                                $('.chat-body-'+ chat_body_id).append(`
                                                    <div class="d-flex flex-row justify-content-start mb-4">
                                                        <img src="https://cdn-icons-png.flaticon.com/512/149/149071.png"
                                                            alt="avatar 1" style="width: 45px; height: 100%;">
                                                        <div class="p-3 ms-3" style="border-radius: 15px; background-color: rgba(57, 192, 237,.2);">
                                                            <p class="small mb-0">${value.message}</p>
                                                        </div>
                                                    </div>
                                                `);
                                            } else {
                                                $('.chat-body-'+ chat_body_id).append(`
                                                        <div class="d-flex flex-row justify-content-end mb-4">
                                                            <div class="p-3 me-3 border bg-body-tertiary" style="border-radius: 15px;">
                                                                <p class="small mb-0">${value.message}</p>
                                                            </div>
                                                            <img src="https://cdn-icons-png.flaticon.com/512/149/149071.png"
                                                                alt="avatar 1" style="width: 45px; height: 100%;">
                                                        </div>
                                                    `);
                                                }
                            });
                        }
                        },
                    });
    });
        $('.sendBtn').click(function(){
            console.log('clikecdd send');
            var csrfToken = $('meta[name="csrf-token"]').attr('content');
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                }
            });
            var message_new_id = $(this).closest('.chat_outer_body').find('.message').attr('data-message_new_id');
            let message = $(this).closest('.chat_outer_body').find('.message').val();
            let receiver_id = $(this).closest('.chat_outer_body').find('.receiver_id').val();
            var userId = "{{ Auth::user()->getBusinessDetail->businessId }}";
            $.ajax({
                url: "{{ route('send-message') }}",
                method: 'POST',
                data: { message, receiver_id,message_new_id,userId},
                success: function(response){
                    $(`.new_message_${response.chat_id}`).val('');
                },
                error: function(error){
                }
            });
        });

// end code
$('.profile_modal').click(function(){
    $('.modal').modal('hide');
})
</script>