@extends('layouts.app')
@use('Carbon\Carbon', 'Carbon')
@section('title', 'Lead View')

{{-- custom css --}}
@push('css')
<link rel="stylesheet" href="{{ asset('assets/css/custom/lead.css') }}">
<style>
    .cc_email.select2-results ul {
        display: none !important;
    }

    .cc_email {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
</style>
@endpush

{{-- page connect --}}
@section('content')
<x-content-body>

    {{-- bread crum  --}}
    <div class="row page-titles">
        <ol class="breadcrumb">
            @foreach ($breadcrumbs as $breadcrumb)
            @if ($breadcrumb['active'])
            <li class="breadcrumb-item active pt-2">{{ $breadcrumb['label'] }}</li>
            @else
            <li class="breadcrumb-item pt-2"><a href="{{ $breadcrumb['url'] }}">{{ $breadcrumb['label'] }}</a>
            </li>
            @endif
            @endforeach

            <li class="m-auto"></li>
            <li class="me-2"> <a href="{{ route('leads.edit', ['lead' => $lead['id']]) }}"
                    class="btn btn-primary btn-sm btn-rounded me-1 text-white">
                    Edit <i class="fa fa-pencil"></i>
                </a></li>
            <li>
                <x-button class="btn-danger deleteLeadBtnSingleView"
                    data-url="{{ route('leads.destroy', ['lead' => $lead['id']]) }}">Delete <i class="fa fa-trash"></i>
                </x-button>
            </li>
        </ol>
    </div>

    <div class="row">
        @include('layouts.includes.particles.lead.show.left_side_bar')


        <!-- second column for timeline and chat module  -->
        <div class="col-6">
            <div class="row">
                <div class="card">
                    <div class="card-body p-0">
                        <!-- Nav tabs -->
                        <div class="default-tab pt-3">
                            <ul class="nav nav-tabs" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link text-black active" data-bs-toggle="tab" href="#notes-section"><i
                                            class="bi bi-journal-text me-2"></i> Notes</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-black" data-bs-toggle="tab" href="#send-email-section"><i
                                            class="la la-envelope me-2"></i>
                                        Email</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-black" data-bs-toggle="tab" href="#text-section"><i
                                            class="la la-sms me-2"></i> Text</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link text-black" data-bs-toggle="tab" href="#call-log-section"><i
                                            class="la la-phone me-2"></i> Log
                                        Call</a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="notes-section" role="tabpanel">
                                    <div class="pt-2 pb-2">
                                        <form id="add-notes-form">
                                            <x-text-input type="hidden" :value="$lead['id']" name="id" />
                                            <input type="hidden" value="{{ isset($lead['id']) ? 'lead' : '' }}"
                                                name="noteable_type" />
                                            <textarea class="notes-editor" name="note" cols="30" rows="10" placeholder="Write Your Notes"></textarea>
                                            <div class="col-auto d-flex justify-content-end">
                                                <button type="submit" class="btn btn-primary btn-sm p-2">
                                                    <i class="fas fa-paper-plane"></i> Save Notes
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="send-email-section">
                                    <div class="pt-2">
                                        <form id="add-send-mail-form">
                                            <x-text-input type="hidden" :value="$lead['id']" name="id" />
                                            <input type="hidden" value="{{ isset($lead['id']) ? 'lead' : '' }}"
                                                name="contactable_type" />
                                            <div class="row mb-3 align-items-center">
                                                <label for="emailSubject"
                                                    class="col-auto col-form-label">Subject</label>
                                                <div class="col">
                                                    <x-text-input id="emailSubject" name="subject"
                                                        placeholder="Enter subject" />
                                                </div>
                                                <label for="emailTo" class="col-auto col-form-label">CC</label>
                                                <div class="col cc_email">
                                                    <select name="cc_emails[]"
                                                        class="multi-select form-control form-control-sm multiple_cc_emails"
                                                        multiple>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <textarea id="ckeditor" name="message" cols="30" placeholder="Write Your Email" rows="10"></textarea>
                                            </div>
                                            <div class="row mb-3 align-items-center">
                                                <div class="col">
                                                    <div class="input-group">
                                                        <input type="file" class="form-control form-control-sm"
                                                            id="fileAttachment">
                                                    </div>
                                                </div>
                                                <div class="col-auto">
                                                    <button type="submit" class="btn btn-primary btn-sm"><i
                                                            class="fas fa-paper-plane"></i> Send Email</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>

                                <div class="tab-pane fade" id="text-section">
                                    <div class="pt-4">
                                        <form id="add-text-send-form">
                                            <div class="mb-3">
                                                <x-text-input type="hidden" :value="$lead['id']" name="id" />
                                                <input type="hidden" value="{{ isset($lead['id']) ? 'lead' : '' }}"
                                                    name="smsable_type" />
                                                <input type="hidden"
                                                    value="{{ preg_replace('/[\s-]/', '', $lead['phone']) }}"
                                                    name="textPhone" />
                                                <textarea name="textMessage" id="text_editor" cols="10" rows="6" class="form-control form-control-sm"
                                                    placeholder="Write your text"></textarea>
                                            </div>
                                            <div class="row mb-3 align-items-center">
                                                <div class="col-5">
                                                    <div class="mb-3">
                                                        <select class="form-control form-control-sm"
                                                            name="sms_template" id="">
                                                            <option selected>Select Template</option>
                                                            <option value="template 1">Template 1</option>
                                                            <option value="template 2">Template 2</option>
                                                            <option value="template 3">Template 3</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-7 d-flex justify-content-end">
                                                    <button type="submit" class="btn btn-primary btn-sm"><i
                                                            class="fas fa-paper-plane"></i> Send Text</button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="call-log-section">
                                    <div class="pt-2">
                                        <form>
                                            <div class="mb-3">
                                                <textarea name="calling_message" id="call_editor" cols="10" rows="6"
                                                    class="form-control form-control-sm" placeholder="Write your text"></textarea>
                                            </div>
                                            <div class="row mb-3 align-items-center">
                                                <div class="col-4">
                                                    <x-text-input id="calling-lead-number" name="calling_lead_numbre"
                                                        value="{{ $lead['phone'] }}" placeholder="+92 ###-###-####"
                                                        pattern="^\+92 \d{3}-\d{3}-\d{4}$"
                                                        aria-label="phone number" />
                                                </div>
                                                <div class="col-8 d-flex justify-content-end">
                                                    <button type="button" class="btn btn-primary btn-sm me-2 "
                                                        id="make-calling-btn">
                                                        Call
                                                    </button>
                                                    <button type="button" class="btn btn-info btn-sm me-2">
                                                        Save Notes
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



            {{-- detials log section for all, email , notes , test and call logs --}}
            @include('layouts.includes.particles.lead.show.time_line')
        </div>

        <!-- third column for accordion -->
        @include('layouts.includes.particles.lead.show.right_side_accordions')

    </div>
</x-content-body>

@include('layouts.includes.modals.add_task_model')
@include('layouts.includes.modals.add_assignment_model')
@include('layouts.includes.modals.add_file_model')
@include('layouts.includes.modals.add_socialMediaProfile_model')
@include('layouts.includes.modals.calling_model')
@endsection


{{-- custom js --}}
@push('js')
<script>
    addNotesRoute = "{{ route('note.store') }}";
    addSmsRoute = "{{ route('send.sms.store') }}";
    sendEmailRoute = "{{ route('send.email.store') }}";
    addSocialProfileRoute = "{{ route('social.profile.store') }}";
    addNewTaskRoute = "{{ route('task.store') }}";
    addNewAssignmentRoute = "{{ route('assignment.store') }}";
    addNewFileRoute = "{{ route('file.store') }}";
    const leadIndexRoute = @json(route('leads.index'));
</script>

{{-- <script src="{{ asset('assets/js/custom/contact/show.js') }}"></script> --}}
{{-- <script src="https://media.twiliocdn.com/sdk/js/client/v1.10/twilio.min.js"></script> --}}
<script src="{{ asset('assets/js/custom/lead_contact_common.js') }}"></script>
<script type="text/javascript" src="https://sdk.twilio.com/js/client/v1.13/twilio.min.js"></script>
<script>
    $('.multiple_cc_emails').select2({
        tags: true,
        tokenSeparators: [',', ' '],
        placeholder: "Add CC Emails",
        allowClear: false,
        createTag: function(params) {
            var term = $.trim(params.term);
            if (!term.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
                return null;
            }

            return {
                id: term,
                text: term,
                newTag: true
            };
        }

    });
    $(document).ready(function() {
        $('.closeTag').click(function() {
            $(this).closest('.tag').remove();
        });
    });
</script>


<script>
    $(document).ready(function() {

        let activeConnection;
        let callDurationInterval;
        let callStartTime;

        if (document.getElementById("make-calling-btn")) {
            // Event listener for the calling button
            document.getElementById('make-calling-btn').addEventListener('click', async function() {
                const phoneNumberElement = document.getElementById('calling-lead-number');

                if (!phoneNumberElement) {
                    console.error('Element with ID "calling-lead-number" not found.');
                    return;
                }

                const phoneNumber = phoneNumberElement.value;

                console.log('calling button clicked');

                try {
                    const token =
                        await getTwilioServerToken(); // Retrieve Twilio token from backend

                    if (!token) {
                        console.error('No token retrieved from server');
                        return;
                    } else {
                        console.log('token retrieved:', token);
                    }

                    const device = new Twilio.Device(token, {
                        codecPreferences: ["opus", "pcmu"],
                        fakeLocalDTMF: true,
                        enableRingingState: true
                    });

                    device.on('registered', function() {
                        console.log('Twilio.Device is ready for calls');
                        $('#callingModal').modal('show');
                        document.getElementById('call-status-text').innerHTML = 'Ringing';
                    });

                    device.on('error', function(error) {
                        console.error('Twilio.Device Error:', error);
                        if (error.code === 31002) {
                            console.log('The call was declined by the recipient.');
                        } else {
                            console.log('An unexpected error occurred: ' + error.message);
                        }
                        document.getElementById('call-status-text').innerHTML = 'Error: ' +
                            error.message;
                    });

                    device.on('connect', function(conn) {
                        console.log('Successfully established call');
                        activeConnection = conn;
                        callStartTime = new Date();
                        updateCallDuration();
                        document.getElementById('call-status-text').textContent = 'In Call';
                        document.getElementById('call-status-text').classList.remove(
                            'text-success');
                        document.getElementById('call-status-text').classList.add(
                            'text-danger');
                        document.getElementById('calling-animation').style.display = 'none';
                        document.getElementById('in-call-animation').style.display =
                            'block';
                        document.getElementById('hangupBtn').classList.remove('hidden');
                        document.getElementById('call-duration').style.display =
                            'block'; // Show duration on call
                    });

                    device.on('disconnect', function(conn) {
                        console.log('Call ended');
                        activeConnection = null;
                        clearInterval(callDurationInterval);
                        document.getElementById('call-status-text').textContent = 'Ready';
                        document.getElementById('call-status-text').classList.remove(
                            'text-danger');
                        document.getElementById('call-status-text').classList.add(
                            'text-success');
                        document.getElementById('calling-animation').style.display =
                            'block';
                        document.getElementById('in-call-animation').style.display = 'none';
                        document.getElementById('hangupBtn').classList.add('hidden');
                        document.getElementById('call-duration').style.display =
                            'none'; // Hide duration on disconnect
                        $('#callingModal').modal('hide');
                    });

                    function updateCallDuration() {
                        callDurationInterval = setInterval(() => {
                            if (callStartTime) {
                                const now = new Date();
                                const duration = Math.floor((now - callStartTime) / 1000);
                                const minutes = Math.floor(duration / 60);
                                const seconds = duration % 60;
                                document.getElementById('call-duration').innerHTML =
                                    `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
                            }
                        }, 1000);
                    }


                    var audioConstraints = {
                        optional: [{
                            sourceId: 'XXX'
                        }]
                    };

                    Twilio.Device.on('incoming', function(conn) {
                        conn.accept(audioConstraints);
                    });



                    device.on('incoming', function(connection) {
                        const acceptCall = confirm("Incoming call from " + connection
                            .parameters.From + ". Accept?");
                        if (acceptCall) {
                            connection.accept();
                        } else {
                            connection.reject();
                        }
                    });

                    const response = await fetch(callingToClientRoute, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector(
                                'meta[name="csrf-token"]').getAttribute('content'),
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            to: phoneNumber
                        })
                    });

                    const data = await response.json();

                    console.log(data);

                    if (data.success === false && data.server === true) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Server Error',
                            text: data.message,
                            showConfirmButton: true,
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            }
                        });
                        $('#callingModal').modal('hide');
                        console.error('No call SID returned from server');
                        return null;
                    } else if (data.call_sid) {
                        console.log('call sid:', data.call_sid);
                        const connection = device.connect({
                            params: {
                                To: phoneNumber
                            }
                        });
                    }

                } catch (error) {
                    console.error('Error:', error);
                }
            });
        }

        document.getElementById('hangupBtn').addEventListener('click', function() {
            if (activeConnection) {
                activeConnection.disconnect();
            }
        });

        async function getTwilioServerToken() {
            try {
                const response = await fetch(getTwilioServerTokenRoute, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')
                            .getAttribute('content'),
                        'Content-Type': 'application/json'
                    }
                });

                const data = await response.json();

                if (!data.success) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Server Error',
                        text: data.message,
                        showConfirmButton: true,
                        customClass: {
                            confirmButton: 'btn btn-primary'
                        }
                    });
                    return null;
                } else if (data.success) {
                    return data.token;
                }
            } catch (error) {
                console.error('server token have error:', error);
            }
        }
    });

    // Rich Text editor
    document.querySelectorAll("#text_editor, #call_editor").forEach(function(textarea) {
        ClassicEditor
            .create(textarea, {
                toolbar: [
                    'heading', 'paragraph',
                    'bold', 'italic', 'underline', 'strike', 'code', '|',
                    'fontFamily', 'fontSize', 'fontColor', 'bgColor', '|',
                    'link', 'unlink', 'insertImage', 'insertTable', 'mediaEmbed', 'emoji',
                    'insertVideo', 'horizontalLine', '|',
                    'bulletedList', 'numberedList', 'blockQuote', '|',
                    'alignment', 'indent', 'outdent', '|',
                    'subscript', 'superscript', '|',
                    'findAndReplace', 'removeFormat', 'selectAll', 'styles', 'format', 'paragraph', '|',
                    'source', 'showBlocks', 'spellChecker', 'language', 'insertDateTime', 'specialChar',
                    '|',
                    'undo', 'redo', '|'
                ],
            })
            .then(editor => {
                window.editor = editor;
            })
            .catch(err => {
                console.error(err.stack);
            });
    });

    initializeIntlTelInput("#phone_number");
    initializeIntlTelInput("#assignment_phone_number");

</script>
@endpush