@extends('admin.main')

@section('main')
    <!--begin::Products-->
    <div class="card card-flush">
        <!--begin::Card body-->
        <div class="card-body py-20">
            <!-- begin::Wrapper-->
            <div class="mw-lg-950px mx-auto w-100">
                <!-- begin::Header-->
                <div class="d-flex justify-content-between flex-column flex-sm-row mb-19">
                    <h4 class="fw-bolder text-gray-800 fs-2qx pe-5 pb-7">Warranty Request #{{ $warranty->id }}</h4>
                    <!--end::Logo-->
                    <div class="text-sm-end">
                        <!--begin::Logo-->
                        <a href="#" class="d-block mw-150px ms-sm-auto">
                            <img alt="Logo" src="{{ asset('template/images/logos/logo-permsite.png') }}" class="w-100" />
                        </a>
                        <!--end::Logo-->
                        <!--begin::Text-->
                        <div class="text-sm-end fw-semibold fs-4 text-dark mt-7">
                            <div>Store Name</div>
                            <div><b>{{ $warranty->store_name }}</b></div>
                        </div>
                        <!--end::Text-->
                    </div>
                </div>
                <!--end::Header-->
                <!--begin::Body-->
                <div class="pb-12">
                    <!--begin::Wrapper-->
                    <div class="d-flex flex-column gap-7 gap-md-10">
                        <!--begin::Message-->
                        <div class="fw-bold fs-2">{{ $warranty->first_name }} {{ $warranty->last_name }}
                            <span class="fs-6">({{ $warranty->email }})</span>,
                            <br />
                            <span class="text-muted fs-5">Here are the warranty claim details.</span>
                        </div>
                        <!--begin::Message-->
                        <!--begin::Separator-->
                        <div class="separator"></div>
                        <!--begin::Separator-->
                        <!--begin::Order details-->
                        <div class="d-flex flex-column flex-sm-row gap-7 gap-md-10 fw-bold">
                            <div class="flex-root d-flex flex-column">
                                <span class="text-muted">Request ID</span>
                                <span class="fs-5">#PSWR-{{ $warranty->id }}</span>
                            </div>
                            <div class="flex-root d-flex flex-column">
                                <span class="text-muted">Date of Purchase</span>
                                <span class="fs-5">{{ Carbon\Carbon::create($warranty->date)->diffForHumans() }}</span>
                            </div>
                            <div class="flex-root d-flex flex-column">
                                <span class="text-muted">Date Warranty Request</span>
                                <span
                                    class="fs-5">{{ Carbon\Carbon::create($warranty->created_at)->diffForHumans() }}</span>
                            </div>
                            <div class="flex-root d-flex flex-column">
                                <span class="text-muted">Invoice File</span>
                                <span class="fs-5">
                                    <a target="_blank" href="{{ asset('storage/'.$warranty->invoice_file) }}">View Invoice</a>
                                </span>
                            </div>
                        </div>
                        <!--end::Order details-->
                        <!--begin::Billing & shipping-->
                        <div class="d-flex flex-column flex-sm-row gap-7 gap-md-10 fw-bold">
                            <div class="flex-root d-flex flex-column">
                                <span class="text-muted">Address</span>
                                <span class="fs-6">{{ $warranty->address_line_1 }},
                                    <br />{{ $warranty->address_line_2 }},
                                    <br />{{ $warranty->state }},
                                    <br />{{ $warranty->zipcode }}.</span>
                            </div>
                        </div>
                        <!--end::Billing & shipping-->
                        <!--begin:Order summary-->
                        <div class="d-flex justify-content-between flex-column">
                            <!--begin::Table-->
                            <div class="table-responsive border-bottom mb-9">
                                <table class="table align-middle table-row-dashed fs-6 gy-5 mb-0">
                                    <thead>
                                        <tr class="border-bottom fs-6 fw-bold text-muted">
                                            <th class="min-w-175px pb-2">Product</th>
                                            <th class="min-w-70px text-end pb-2">Product Id</th>
                                            <th class="min-w-80px text-end pb-2">QTY</th>
                                        </tr>
                                    </thead>
                                    <tbody class="fw-semibold text-gray-600">
                                        <!--begin::Products-->

                                        @foreach ($warranty->products as $product)
                                            <tr>
                                                <!--begin::Product-->
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <!--begin::Thumbnail-->
                                                        <a href="{{ route('product.single', $product->product_slug) }}"
                                                            class="symbol symbol-50px">
                                                            @if (count($product->images) > 0)
                                                                <span class="symbol-label"
                                                                style="background-image:url({{ asset('storage/'.$product->images[0]->file) }});"></span>
                                                            @else
                                                                <span class="symbol-label"
                                                                style="background-image:url(assets/media//stock/ecommerce/1.gif);"></span>
                                                            @endif
                                                        </a>
                                                        <!--end::Thumbnail-->
                                                        <!--begin::Title-->
                                                        <div class="ms-5">
                                                            <div class="fw-bold"><a href="{{ route('product.single', $product->product_slug) }}">{{ $product->product_title }}</a></div>
                                                            <div class="fs-7 text-muted">{{ $product->category->category_title }}</div>
                                                        </div>
                                                        <!--end::Title-->
                                                    </div>
                                                </td>
                                                <!--end::Product-->
                                                <!--begin::SKU-->
                                                <td class="text-end">#{{ $product->id }}</td>
                                                <!--end::SKU-->
                                                <!--begin::Quantity-->
                                                <td class="text-end">{{ $warranty->quantity }}</td>
                                                <!--end::Quantity-->
                                            </tr>
                                        @endforeach

                                    </tbody>
                                </table>
                            </div>
                            <!--end::Table-->
                        </div>
                        <!--end:Order summary-->
                    </div>
                    <!--end::Wrapper-->
                </div>
                <!--end::Body-->
                <!-- begin::Footer-->
                <div class="d-flex flex-stack flex-wrap mt-lg-20 pt-13 justify-content-center">
                    <div class="btn-group flex-wrap gap-2" role="group" aria-label="Warranty Actions">
                        @if (App\Services\PermissionService::checkHasPermission('warranty_view'))
                            <a href="{{ route('admin.warranty.edit', $warranty->id) }}" class="btn btn-primary">
                                <i class="fa fa-edit me-1"></i> Edit
                            </a>
                        @endif
                        @if (App\Services\PermissionService::checkHasPermission('warranty_change_status'))
                            <a href="{{ route('admin.warranty.change-status', ['new_status' => 'in-proccess', 'request_id' => $warranty->id]) }}" class="btn btn-warning">
                                <i class="fa fa-hourglass-half me-1"></i> In Process
                            </a>
                            <a href="{{ route('admin.warranty.change-status', ['new_status' => 'finished', 'request_id' => $warranty->id]) }}" class="btn btn-success">
                                <i class="fa fa-check me-1"></i> Finished
                            </a>
                            <a href="{{ route('admin.warranty.change-status', ['new_status' => 'rejected', 'request_id' => $warranty->id]) }}" class="btn btn-danger">
                                <i class="fa fa-times me-1"></i> Rejected
                            </a>
                        @endif
                        @if ($warranty->status == 'finished' && App\Services\PermissionService::checkHasPermission('warranty_view_certificate'))
                            <a target="_blank" href="{{ route('admin.warranty.issue-certificate', $warranty->id) }}" class="btn btn-info">
                                <i class="fa fa-file-pdf me-1"></i> View Certificate
                            </a>
                        @endif
                        @if ($warranty->status !== 'finished' && App\Services\PermissionService::checkHasPermission('warranty_issue_certificate'))
                            <a target="_blank" href="{{ route('admin.warranty.issue-certificate', $warranty->id) }}" class="btn btn-secondary">
                                <i class="fa fa-certificate me-1"></i> Issue Certificate
                            </a>
                        @endif
                    </div>
                </div>
                <!-- end::Footer-->
            </div>
            <!-- end::Wrapper-->
        </div>
    </div>
    <!--end::Products-->

    <!--begin::Warranty Notes Sidebar-->
    <style>
        #warranty-notes-sidebar {
            position: fixed; top: 80px; right: 0; width: 370px; max-width: 100vw;
            height: calc(100vh - 100px); background: #fff; z-index: 1000;
            display: flex; flex-direction: column;
            box-shadow: -2px 0 16px rgba(0,0,0,0.12); border-radius: 12px 0 0 12px;
            transition: right 0.3s, visibility 0.3s, opacity 0.3s;
        }
        #warranty-notes-sidebar.closed {
            right: -370px; visibility: hidden; opacity: 0;
        }
        #notes-list {background: #f8f9fa; min-height: 120px;}
        .note-bubble {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.07);
            padding: 10px 16px;
            margin-bottom: 2px;
            max-width: 85%;
            word-break: break-word;
            position: relative;
        }
        .note-row {display: flex; align-items: flex-end; margin-bottom: 18px;}
        .note-avatar {
            width: 36px; height: 36px; border-radius: 50%; background: #e3e6ef; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #6c757d; margin-right: 10px;
        }
        .note-meta {font-size: 11px; color: #b0b8c9; margin-top: 2px;}
        .note-attachment {
            display: inline-flex; align-items: center; margin-top: 6px;
        }
        .note-attachment img {max-width: 80px; max-height: 60px; border-radius: 6px; margin-right: 6px;}
        .note-attachment i {font-size: 15px; margin-right: 4px;}
        #note-form textarea {resize: none; min-height: 48px;}
        #note-form .btn-primary {border-radius: 8px; font-weight: 600; padding: 7px 18px;}
        #warranty-notes-sidebar .border-bottom {border-bottom: 2px solid #e3e6ef!important;}
        #notes-fab {
            position: fixed; bottom: 24px; right: 24px; z-index: 1100;
            width: 56px; height: 56px; border-radius: 50%; background: #0d6efd; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.18); font-size: 28px; cursor: pointer; border: none;
            transition: background 0.2s;
        }
        #notes-fab:hover {background: #0b5ed7;}
        #notes-fab i {
            color: #fff !important;
        }
        @media (max-width: 500px) {
            #warranty-notes-sidebar, #warranty-notes-sidebar.closed {width: 100vw; right: -100vw;}
        }
        /* Context menu customizado para notas */
        #warranty-notes-context-menu {
            position: fixed;
            z-index: 2000;
            display: none;
            min-width: 140px;
            background: #fff;
            border: 1px solid #e3e6ef;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.12);
            padding: 6px 0;
        }
        #warranty-notes-context-menu .context-menu-item {
            padding: 8px 18px;
            cursor: pointer;
            font-size: 15px;
            color: #333;
            transition: background 0.15s;
        }
        #warranty-notes-context-menu .context-menu-item:hover {
            background: #f1f3f9;
        }
    </style>
    <button id="notes-fab" title="Show Notes" style="display:none;"><i class="fa fa-comments"></i></button>
    <div id="warranty-notes-sidebar">
        <div class="border-bottom px-4 py-3 bg-light d-flex align-items-center justify-content-between" style="border-radius:12px 0 0 0;">
            <span class="fw-bold text-primary"><i class="fa fa-comments me-2"></i>Notes</span>
            <button type="button" id="close-notes-sidebar" class="btn btn-sm btn-light ms-auto" style="border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;"><i class="fa fa-times"></i></button>
        </div>
        <div id="notes-list" class="flex-grow-1 overflow-auto px-4 py-3">
            <div class="text-center text-muted mt-5">Loading notes...</div>
        </div>
        <form id="note-form" class="border-top p-3 bg-white" enctype="multipart/form-data" autocomplete="off">
            <div class="mb-2">
                <textarea name="text" class="form-control" rows="2" placeholder="Add a note..." maxlength="1000"></textarea>
            </div>
            <div class="d-flex align-items-center gap-2">
                <input type="file" name="attachment" class="form-control form-control-sm" style="max-width:180px;" accept=".pdf,.jpg,.jpeg,.png,.gif,.doc,.docx,.xls,.xlsx">
                <button type="submit" class="btn btn-primary btn-sm ms-auto shadow">
                    <i class="fa fa-paper-plane"></i> Send
                </button>
            </div>
        </form>
    </div>
    <div id="warranty-notes-context-menu">
        <div class="context-menu-item" id="context-menu-delete">Delete note</div>
    </div>
    <!--end::Warranty Notes Sidebar-->

@push('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
const warrantyId = {{ $warranty->id }};
const notesList = document.getElementById('notes-list');
const noteForm = document.getElementById('note-form');
const notesSidebar = document.getElementById('warranty-notes-sidebar');
const notesFab = document.getElementById('notes-fab');
const closeNotesSidebar = document.getElementById('close-notes-sidebar');

function isImage(filename) {
    return (/(jpg|jpeg|png|gif)$/i).test(filename);
}

function formatUSDateTime(dateStr) {
    const d = new Date(dateStr);
    const pad = n => n.toString().padStart(2, '0');
    let hours = d.getHours();
    const minutes = pad(d.getMinutes());
    const ampm = hours >= 12 ? 'PM' : 'AM';
    hours = hours % 12;
    hours = hours ? hours : 12; // 0 => 12
    return `${d.getFullYear()}/${pad(d.getMonth()+1)}/${pad(d.getDate())} ${pad(hours)}:${minutes} ${ampm}`;
}

let contextMenuNoteId = null;

function renderNotes(notes) {
    if (!notes.length) {
        notesList.innerHTML = '<div class="text-center text-muted mt-5">No notes yet.</div>';
        return;
    }
    notesList.innerHTML = notes.map(note => {
        let attachmentHtml = '';
        if (note.attachment) {
            if (isImage(note.attachment)) {
                attachmentHtml = `<div class='note-attachment'><img src='/storage/${note.attachment}' alt='attachment' /><a href='/storage/${note.attachment}' target='_blank'><i class='fa fa-paperclip'></i>View</a></div>`;
            } else {
                attachmentHtml = `<div class='note-attachment'><i class='fa fa-paperclip'></i><a href='/storage/${note.attachment}' target='_blank'>Download</a></div>`;
            }
        }
        // Adiciona data-note-id para cada nota
        return `
        <div class="note-row" data-note-id="${note.id}">
            <div class="note-avatar"><i class="fa fa-user"></i></div>
            <div class="note-bubble">
                ${note.text ? note.text.replace(/</g, '&lt;').replace(/>/g, '&gt;') : ''}
                ${attachmentHtml ? `<div class='mt-2'>${attachmentHtml}</div>` : ''}
                <div class="note-meta">${formatUSDateTime(note.created_at)}</div>
            </div>
        </div>
        `;
    }).join('');
    notesList.scrollTop = notesList.scrollHeight;

    // Adiciona listener para context menu em cada nota
    notesList.querySelectorAll('.note-row').forEach(row => {
        row.addEventListener('contextmenu', function(e) {
            e.preventDefault();
            contextMenuNoteId = this.getAttribute('data-note-id');
            showContextMenu(e.pageX, e.pageY);
        });
    });
}

function fetchNotes() {
    fetch(`/admin/warranty/${warrantyId}/notes`)
        .then(r => r.json())
        .then(renderNotes)
        .catch(() => { notesList.innerHTML = '<div class="text-danger text-center mt-5">Failed to load notes.</div>'; });
}

noteForm.addEventListener('submit', function(e) {
    const fileInput = noteForm.querySelector('input[type=file]');
    if (fileInput && fileInput.files.length > 0) {
        const file = fileInput.files[0];
        const allowed = [
            'application/pdf',
            'image/jpeg', 'image/png', 'image/gif',
            'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
            'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        ];
        if (!allowed.includes(file.type)) {
            alert('Only PDF, JPG, PNG, GIF, Word, Excel files are allowed.');
            e.preventDefault();
            return;
        }
    }
    e.preventDefault();
    const formData = new FormData(noteForm);
    fetch(`/admin/warranty/${warrantyId}/notes`, {
        method: 'POST',
        body: formData,
        headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content }
    })
    .then(r => r.json())
    .then(note => {
        noteForm.reset();
        fetchNotes();
    });
});

function showSidebar() {
    notesSidebar.classList.remove('closed');
    notesFab.style.display = 'none';
}
function hideSidebar() {
    notesSidebar.classList.add('closed');
    notesFab.style.display = 'flex';
}

if (notesFab) {
    notesFab.addEventListener('click', showSidebar);
}
if (closeNotesSidebar) {
    closeNotesSidebar.addEventListener('click', hideSidebar);
}

// Context menu
const contextMenu = document.getElementById('warranty-notes-context-menu');
const contextMenuDelete = document.getElementById('context-menu-delete');

document.addEventListener('click', function(e) {
    if (contextMenu.style.display === 'block') {
        contextMenu.style.display = 'none';
    }
});

document.addEventListener('scroll', function() {
    if (contextMenu.style.display === 'block') {
        contextMenu.style.display = 'none';
    }
}, true);

function showContextMenu(x, y) {
    contextMenu.style.display = 'block';
    contextMenu.style.left = x + 'px';
    contextMenu.style.top = y + 'px';
}

contextMenuDelete.addEventListener('click', function() {
    if (!contextMenuNoteId) return;
    Swal.fire({
        title: 'Delete note',
        text: 'Are you sure you want to delete this note?',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Delete',
        cancelButtonText: 'Cancel',
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
    }).then((result) => {
        if (result.isConfirmed) {
            fetch(`/admin/warranty/${warrantyId}/notes/${contextMenuNoteId}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content
                }
            })
            .then(r => r.json())
            .then(resp => {
                if (resp.success) {
                    fetchNotes();
                    Swal.fire('Deleted!', 'The note has been deleted.', 'success');
                } else {
                    Swal.fire('Error', resp.error || 'Error deleting note.', 'error');
                }
            });
        }
        contextMenu.style.display = 'none';
        contextMenuNoteId = null;
    });
});

fetchNotes();
setInterval(fetchNotes, 10000); // Atualiza a cada 10s
</script>
@endpush

@push('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
        integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
@endpush