@extends('layouts.app')

@section('head')
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<meta name="csrf-token" content="{{ csrf_token() }}">
<script type="text/javascript" src="https://static.bombbomb.com/js/BBCore.min.js"></script>
<style>
    body {
        font-family: 'Poppins', sans-serif;
        background-color: #f4f5f7;
        color: #343a40;
    }

    .btn {
        border-radius: 8px;
        font-size: 0.875rem;
        padding: 0.5rem 1.25rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: all 0.2s ease-in-out;
    }

    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .card {
        background-color: #fff;
        border: none;
        border-radius: 16px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .modal-content {
        border-radius: 16px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    #bombBombRecorderContainer {
        width: 100%;
        height: 500px;
        background: #f0f0f0;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
@endsection

@section('content')
<div class="container-fluid py-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="fw-bold text-primary">{{ $contact->first_name }} {{ $contact->last_name }}</h2>
        <div class="d-flex gap-3">
            <button class="btn btn-outline-secondary">Marketing Off</button>
            <button class="btn btn-outline-primary">Sold</button>
        </div>
    </div>

    <div class="row">
        <!-- Left Column -->
        <div class="col-lg-4">
            <div class="card mb-4">
                <div class="card-body">
                    <h6>Contact Details</h6>
                    <p><strong>Email:</strong> <span>{{ $contact->email1 ?? 'N/A' }}</span></p>
                    <p><strong>Phone:</strong> <span>{{ $contact->phone1 ?? 'N/A' }}</span></p>
                    <p><strong>Address:</strong>
                        <span>
                            {{ $contact->street_address ?? 'N/A' }},
                            {{ $contact->city ?? '' }},
                            {{ $contact->state ?? '' }}
                            {{ $contact->zip_code ?? '' }}
                        </span>
                    </p>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-body">
                    <h6>Linked Properties</h6>
                    @if ($contact->properties && $contact->properties->isNotEmpty())
                        <ul class="list-group">
                            @foreach ($contact->properties as $property)
                                <li class="list-group-item">
                                    <strong>{{ $property->address }}</strong><br>
                                    <small class="text-muted">{{ $property->city }}, {{ $property->state }} {{ $property->zip_code }}</small>
                                </li>
                            @endforeach
                        </ul>
                    @else
                        <p class="text-muted">No linked properties</p>
                    @endif
                </div>
            </div>
        </div>

        <!-- Right Column -->
        <div class="col-lg-8">
            <div class="d-flex gap-2 mb-4">
                <button class="btn btn-light" data-bs-toggle="modal" data-bs-target="#addNoteModal">
                    <i class="bi bi-file-earmark-text text-primary"></i> Note
                </button>
                <button class="btn btn-light" data-bs-toggle="modal" data-bs-target="#emailModal">
                    <i class="bi bi-envelope text-primary"></i> Email
                </button>
                <button class="btn btn-light" data-bs-toggle="modal" data-bs-target="#directMailModal">
                    <i class="bi bi-send text-primary"></i> Direct Mail
                </button>
                <button class="btn btn-light" data-bs-toggle="modal" data-bs-target="#bombBombModal">
                    <i class="bi bi-camera-video text-primary"></i> BombBomb Video
                </button>
            </div>

            <div class="card">
                <div class="card-body">
                    <ul class="nav nav-tabs mb-3">
                        <li class="nav-item">
                            <button class="nav-link active" id="activity-tab" data-bs-toggle="tab" data-bs-target="#activity" role="tab">Activity</button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link" id="notes-tab" data-bs-toggle="tab" data-bs-target="#notes" role="tab">Notes</button>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="activity">
                            @if($contact->activities->isNotEmpty())
                                @foreach($contact->activities as $activity)
                                    <div class="border p-3 rounded shadow-sm mb-3">
                                        <h6 class="fw-bold text-secondary">
                                            @switch($activity->type)
                                                @case('email')
                                                    <i class="bi bi-envelope me-2"></i>Email Activity
                                                    @break
                                                @case('direct_mail')
                                                    <i class="bi bi-send me-2"></i>Direct Mail
                                                    @break
                                                @case('note')
                                                    <i class="bi bi-file-text me-2"></i>Note Added
                                                    @break
                                                @default
                                                    <i class="bi bi-clock-history me-2"></i>{{ ucfirst($activity->type) }}
                                            @endswitch
                                        </h6>
                                        <p class="text-muted mb-2">
                                            {{ $activity->created_at->diffForHumans() }}
                                        </p>
                                        <p class="mb-0">{!! nl2br(e($activity->details)) !!}</p>
                                    </div>
                                @endforeach
                            @else
                                <div class="text-center text-muted py-4">
                                    <i class="bi bi-clock-history d-block mb-3" style="font-size: 2rem;"></i>
                                    <p>No activity recorded yet.</p>
                                </div>
                            @endif
                        </div>

                        <div class="tab-pane fade" id="notes">
                            <ul class="list-group">
                                @if(is_object($contact->notes) && method_exists($contact->notes, 'isNotEmpty') && $contact->notes->isNotEmpty())
                                    @foreach($contact->notes as $note)
                                        <li class="list-group-item">
                                            <strong>{{ $note->content }}</strong><br>
                                            <small class="text-muted">Published on: {{ $note->created_at->format('M d, Y H:i:s') }}</small>
                                        </li>
                                    @endforeach
                                @else
                                    <li class="list-group-item text-muted">No notes available.</li>
                                @endif
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Note Modal -->
<div class="modal fade" id="addNoteModal" tabindex="-1" aria-labelledby="addNoteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form method="POST" action="#">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Note</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <textarea class="form-control" id="noteContent" rows="4" placeholder="Write your note here..."></textarea>
                    <button type="button" class="btn btn-primary mt-3" id="saveNoteButton">Save Note</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Email Modal -->
<div class="modal fade" id="emailModal" tabindex="-1" aria-labelledby="emailModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Send Email</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label for="emailSubject" class="form-label">Subject</label>
                        <input type="text" id="emailSubject" class="form-control" placeholder="Enter subject">
                    </div>
                    <div class="mb-3">
                        <label for="emailBody" class="form-label">Message</label>
                        <textarea id="emailBody" class="form-control" rows="4" placeholder="Write your message here..."></textarea>
                    </div>
                    <button type="button" class="btn btn-primary">Send Email</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Direct Mail Modal -->
<div class="modal fade" id="directMailModal" tabindex="-1" aria-labelledby="directMailModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Direct Mail</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <i class="bi bi-geo-alt text-primary"></i>
                    <span>{{ $contact->address ?? 'No Address Available' }}</span>
                </div>
                <textarea id="directMailContent" class="form-control mb-3" rows="4" placeholder="Write your message here..."></textarea>
                <div class="d-flex justify-content-end">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" id="sendDirectMailButton" class="btn btn-primary">Send</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- BombBomb Modal -->
<div class="modal fade" id="bombBombModal" tabindex="-1" aria-labelledby="bombBombModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Record BombBomb Video</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="bombBombRecorderContainer"></div>
                <div class="mt-4">
                    <form id="sendBombBombForm">
                        <div class="mb-3">
                            <label for="bombBombEmail" class="form-label">Recipient Email</label>
                            <input type="email" id="bombBombEmail" class="form-control" placeholder="Enter recipient's email">
                        </div>
                        <div class="mb-3">
                            <label for="bombBombMessage" class="form-label">Message</label>
                            <textarea id="bombBombMessage" class="form-control" rows="3" placeholder="Write your message here..."></textarea>
                        </div>
                        <button type="button" id="sendBombBombVideoButton" class="btn btn-primary" disabled>Send Video</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        let bb;
        const bombBombModal = document.getElementById('bombBombModal');
        const recorderContainer = document.getElementById('bombBombRecorderContainer');
        const sendButton = document.getElementById('sendBombBombVideoButton');
        const emailInput = document.getElementById('bombBombEmail');
        const messageInput = document.getElementById('bombBombMessage');
        let storedVideoUrl = ''; // Add this variable to store the URL

        // Initialize BombBomb recorder when modal opens
        bombBombModal.addEventListener('shown.bs.modal', function () {
            bb = new BBCore({ accessToken: '{{ config('services.bombbomb.api_key') }}' });
            bb.startVideoRecorder({
                target: '#bombBombRecorderContainer',
                width: 800,
                height: 450,
            },
            // Callback when recording is stopped
            function (videoInfo) {
                console.log(videoInfo.filename.url);
                sendButton.disabled = false;

                // Store video information immediately when received
                storedVideoUrl = videoInfo.filename.url; // Store the URL

                // Add a click event listener to the "Send Video" button
                sendButton.addEventListener(
                    "click",
                    () => {
                        const email = document.getElementById('bombBombEmail').value.trim();
                        const message = messageInput.value.trim();
                        const videoId = videoInfo.videoId;

                        if (!email) {
                            alert('Please enter a valid email.');
                            return;
                        }
                        if (!videoId) {
                            alert('Please record a video first.');
                            return;
                        }

                        if (!message) {
                            alert('Please enter a message.');
                            return;
                        }
                        // Disable button and show loading state
                        sendButton.disabled = true;
                        sendButton.innerHTML = '<i class="bi bi-arrow-repeat spin"></i> Sending...';

                        // Save the video
                        bb.saveRecordedVideo(
                            "Contact Video Message",
                            videoInfo.videoId,
                            videoInfo.filename,
                            (data) => {
                                console.log('Video saved:', data.info.video_urls);
                                // Get the video URL from the H264Main property
                                const videoUrl = data.info.video_urls.H264Main;
                                console.log('Video URL:', videoUrl);

                                const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
                                fetch("{{ route('contacts.bombbomb', $contact->id) }}", {
                                    method: "POST",
                                    headers: {
                                        "Content-Type": "application/json",
                                        "X-CSRF-TOKEN": csrfToken
                                    },
                                    body: JSON.stringify({
                                        videoUrl: videoUrl,
                                        message: message
                                    })
                                })
                                .then(response => {
                                    if (!response.ok) {
                                        throw new Error('Network response was not ok');
                                    }
                                    return response.json();
                                })
                                .then(data => {
                                    if (data.success) {
                                        // Show success message
                                        alert('Video message sent successfully!');

                                        // Optionally refresh the page to update activity list
                                        location.reload();
                                    } else {
                                        throw new Error(data.message || 'Failed to send video message');
                                    }
                                })
                                .catch(error => {
                                    console.error("Error:", error);
                                    alert(error.message || "An error occurred while sending the video message.");
                                })
                                .finally(() => {
                                    // Reset button state
                                    sendButton.disabled = false;
                                    sendButton.innerHTML = 'Send Video';
                                });
                            }
                        );

                        // bb.videoQuickSend({
                        //     subject: 'Video Message',
                        //     video_id: videoInfo.videoId,
                        //     email_address: email,
                        //     email_addresses: email,
                        //     mobile_message: message,
                        // },
                        // function () {
                        //     alert('Video sent successfully!');
                        // },
                        // function (error) {
                        //     console.error('Error sending video:', error);
                        //     alert('Failed to send video. Please try again.');
                        // });
                    },
                    { once: true }
                );
            });
        });

        // Clean up recorder when modal closes
        bombBombModal.addEventListener('hidden.bs.modal', function () {
            recorderContainer.innerHTML = '';
            messageInput.value = '';
            sendButton.disabled = true;
            sendButton.innerHTML = 'Send Video';
            delete sendButton.dataset.videoId;
            delete sendButton.dataset.videoUrl;

            if (bb) {
                bb.destroyVideoRecorder();
            }
        });

        // Save Note functionality
        document.getElementById("saveNoteButton").addEventListener("click", function () {
            const button = this;
            const noteContent = document.getElementById("noteContent").value.trim();
            const modal = document.getElementById('addNoteModal');

            if (!noteContent) {
                alert("Please write a note before saving.");
                return;
            }

            // Disable button while processing
            button.disabled = true;
            button.innerHTML = 'Saving...';

            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            fetch("{{ route('notes.store', $contact->id) }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": csrfToken,
                },
                body: JSON.stringify({ content: noteContent }),
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert("Note saved successfully!");
                    location.reload();
                } else {
                    alert("Failed to save note. Please try again.");
                }
            })
            .catch(error => {
                console.error("Error saving note:", error);
                alert("An error occurred. Please try again.");
            })
            .finally(() => {
                button.disabled = false;
                button.innerHTML = 'Save Note';
            });
        });

        // Email Modal Handler
        const emailModal = document.getElementById('emailModal');
        emailModal.querySelector('.btn-primary').addEventListener('click', function() {
            const button = this;
            const subject = document.getElementById('emailSubject').value.trim();
            const body = document.getElementById('emailBody').value.trim();

            if (!subject || !body) {
                alert("Please fill in both subject and message.");
                return;
            }

            button.disabled = true;
            button.innerHTML = 'Sending...';

            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            fetch("{{ route('contacts.email', $contact->id) }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": csrfToken
                },
                body: JSON.stringify({ subject, body })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('Email sent successfully!');
                } else {
                    throw new Error(data.message || 'Failed to send email');
                }
            })
            .catch(error => {
                console.error("Error:", error);
                alert(error.message || "An error occurred. Please try again.");
            })
            .finally(() => {
                button.disabled = false;
                button.innerHTML = 'Send Email';
            });
        });

        // Direct Mail Modal Handler
        document.getElementById('sendDirectMailButton').addEventListener('click', function() {
            const button = this;
            const content = document.getElementById('directMailContent').value.trim();
            const modal = document.getElementById('directMailModal');

            if (!content) {
                alert("Please write your message before sending.");
                return;
            }

            button.disabled = true;
            button.innerHTML = 'Sending...';

            fetch("{{ route('contacts.direct-mail', $contact->id) }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({ message: content })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('Direct mail added to outbox successfully!');
                } else {
                    throw new Error(data.message || 'Failed to create direct mail');
                }
            })
            .catch(error => {
                console.error("Error:", error);
                alert(error.message || "An error occurred. Please try again.");
            })
            .finally(() => {
                button.disabled = false;
                button.innerHTML = 'Send';
            });
        });

        // Reset forms when modals are closed
        ['addNoteModal', 'emailModal', 'directMailModal'].forEach(modalId => {
            const modal = document.getElementById(modalId);
            modal.addEventListener('hidden.bs.modal', function() {
                const form = modal.querySelector('form');
                if (form) form.reset();
                const textarea = modal.querySelector('textarea');
                if (textarea) textarea.value = '';
            });
        });
    });
</script>
@endpush