@if(Auth::user()->userTypeId==1)
    @include('user-web.layouts.head')
    @include('user-web.layouts.header')
@else
    @include('business.layouts.head')
    @include('business.layouts.header')
@endif


<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;
    }
        .job_buttons {
            background-color: transparent;
            border: none;
            color: #25396f;
            border-radius: 10px;
            padding: 12px 18px;
            font-size: 14px;
            line-height: 16px;
            font-weight: 600;
        }

        .tab {
            display: none;
        }
        .tab.active {
            display: block;
        }
        .job_section {
            display: flex;
            cursor: pointer;
            justify-content: space-between;
        }
        .job_buttons {
            border: 1px solid #ccc;
            padding: 8px 10px;
            border-radius: 8px;
        }
        .job_buttons.active {
            background-color: #e6e8ef;
            color: #25396f;
        }
    </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">
                            @if(session('message'))
                                <div class="alert alert-success">
                                    {{ session('message') }}
                                </div>
                            @endif
                            @if(session('error'))
                                <div class="alert alert-danger">
                                    {{ session('error') }}
                                </div>
                            @endif
                            <div class="head_title">
                                <div class="job_section mb-4">
                                        <div class="job_buttons active" data-tab="job_tab">Jobs</div>
                                        <div class="job_buttons" data-tab="app_job_tab">Applied Jobs</div>
                                </div>
                                <div class="filter_option">
                                    <h3>Job Filter</h3>
                                    <label for="job_title">Job Title</label>
                                    <input type="text" class="job_title form-control"  name="job_title">
                                    <label for="work_place_type">Work Place Type</label>
                                    <select name="work_place_type" class="form-control work_place_type" required="">
                                        <option value="">None</option>
                                        <option value="remote">Remote</option>
                                        <option value="onsite">On Site</option>
                                        <option value="inhouse">In House</option>
                                    </select>
                                    <label for="job_type">Job Type</label>
                                    <select name="job_type" class="form-control job_type" required="">
                                        <option value="">None</option>
                                        <option value="fulltime">Full Time</option>
                                        <option value="parttime">Part Time</option>
                                        <option value="hybrid">Hybrid</option>
                                    </select>

                                    <!-- <input type="text" class="job_type" name="job_type"> -->
                                </div>
                            </div>
                            <div class="tab-content">
                                <div id="job_tab" class="tab active">
                                    @if(!empty($jobs))
                                        @foreach($jobs as $job)
                                            <a href="{{url('jobDisplay/'.$job->jobId)}}">
                                                <div class="card">
                                                    <div class="card-body">
                                                        <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>
                                                    </div>
                                                </div>
                                            </a>
                                        @endforeach
                                    @else
                                        <div style="margin-top:30px">
                                            <p>No jobs found</p>
                                        </div>
                                    @endif
                                </div>
                                <div id="app_job_tab" class="tab">
                                @if(isset($applied_job))
                                    @foreach($applied_job as $j=>$job)
                                    <div class="card">
                                            <div class="card-body">
                                                <div class="card_head">
                                                    <h3 class="card-title mb-2">{{$job->jobTitle}} ({{$job->companyName}})</h3>
                                                    <p class="card-text">
                                                        @if($job->viewed_status == 1)
                                                            <span class="text-success">Viewed</span>
                                                        @else
                                                            <span class="text-primary">View Pending</span>
                                                        @endif
                                                    </p>
                                                </div>
                                                <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>
                                                <p class="card-text">Applied Job Status:

                                                @if(empty($job->job_status))
                                                        Pending
                                                    @else
                                                        {{ ucfirst($job->job_status) }}
                                                    @endif
                                                </p>
                                                <p>
                                                <i class="far fa-comment-alt chat_room_cls" data-chat_body_id="{{$j}}" data-jobId="{{$job->jobId}}"  data-receiver_id="{{$job->businessId}}" data-toggle="collapse" href="#chat_btn_action_{{$j}}" role="button" aria-expanded="false" aria-controls="chat_btn_action"></i>
                                                    <!-- <a class="btn-primary"  id="chat_room_cls_{{$auth_user}}" data-receiver_id="{{$job->businessId}}" data-toggle="collapse" href="#chat_btn_action" role="button" aria-expanded="false" aria-controls="chat_btn_action">Chat</a> -->
                                                </p>
                                                <!-- chat html -->
                                                    <div class="row">
                                                        <div class="col">
                                                            <div class="collapse multi-collapse" id="chat_btn_action_{{$j}}">
                                                                <div class="card" id="chat1" style="border-radius: 15px;">
                                                                    <div class="card-body chat_outer_body">

                                                                        <div  class="chat-body chat-body-{{$job->jobId}}"></div>
                                                                        <input type="hidden" name="receiver_id" class="receiver_id" id="receiver_id" value="{{$job->businessId}}">
                                                                        <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->jobId}}"   data-message_new_id="{{$job->jobId}}"  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>
                                        </div>
                                    @endforeach
                                @else
                                    <div style="margin-top:30px">
                                        <p>No jobs have been applied</p>
                                    </div>
                                @endif
                                </div>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

@include('user-web.layouts.footer')
@vite('resources/js/app.js')

<script type="module">

    Echo.channel('chat-room')
        .listen('MessageSent', (e) => {
            var userId = "{{ Auth::user()->getUserDetail->userId }}";
            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>

                    `);
                }
            }
        });
</script>


<script>
    $(document).ready(function () {
        $('.job_buttons').on('click', function () {
            var targetTab = $(this).data('tab');
            $('.job_buttons').removeClass('active');
            $('.tab').removeClass('active');
            $(this).addClass('active');
            $('#' + targetTab).addClass('active');
        });
    });

    // for chat application
    var userId = "{{ $auth_user }}";
    $('.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()->getUserDetail->userId }}";
        $.ajax({
            url: "{{ route('chatroom') }}",
            method: 'POST',
            data: { receiver_id, receiver_id,
                jobId,jobId,
                userId,userId,
            },
            success: function(response) {
                var userId = "{{ Auth::user()->getUserDetail->userId }}";
                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()->getUserDetail->userId }}";
        $.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

</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script>
        @if (Session::has('notification'))
            var type = "{{ Session::get('notification.alert-type', 'info') }}";
            var message = "{{ Session::get('notification.message') }}";
            var audio = new Audio('audio.mp3');
            switch (type) {
                case 'info':
                    toastr.options.timeOut = 1500;
                    toastr.info(message);
                    break;
                case 'success':
                    toastr.options.timeOut = 1500;
                    toastr.success(message);
                    break;
                case 'error':
                    toastr.options.timeOut = 1500;
                    toastr.error(message);
                    break;
            }
            audio.play();
        @endif
    </script>