@extends('layouts.user_type.auth')
@section('marketingLabs')
<div class="container-fluid py-4 px-4">
    @include('components.alert')
    <style>
        /* Sticky Header for better scrolling UX */
        .sticky-thead th {
            position: sticky !important;
            top: 0 !important;
            z-index: 10 !important;
            background: var(--smoke) !important;
            box-shadow: inset 0 -1px 0 var(--border-m);
        }
        /* Custom scrollbar for this table to prevent content overlap */
        .table-scroll-wrap::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
    </style>

    <div id="tableView" class="card">
        <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
            <div>
                <h5 class="mb-0" style="font-weight:700;">Marketing Labs</h5>
                <p class="mb-0" style="font-size:0.75rem;color:var(--grey);margin-top:2px;">Manage laboratory prospects and outreach contacts.</p>
            </div>
            <div class="d-flex align-items-center gap-2">
                <form id="importForm" action="{{ route('marketingLabs.importExcel') }}" method="POST" enctype="multipart/form-data" style="display:none;">
                    @csrf
                    <input type="file" id="fileInput" name="file" accept=".xlsx,.xls,.csv" required onchange="if(this.files.length>0) document.getElementById('importForm').submit();">
                </form>
                <div class="dropdown">
                    <button class="btn btn-light btn-sm mb-0" data-bs-toggle="dropdown">
                        <i class="fas fa-ellipsis-h" style="font-size:0.72rem;"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><a href="#" class="dropdown-item" onclick="document.getElementById('fileInput').click();"><i class="fas fa-file-excel me-2" style="font-size:0.75rem;"></i>Import Excel</a></li>
                        <li><a href="{{ route('marketingLabs.exportExcel') }}" class="dropdown-item" id="export-btn"><i class="fas fa-download me-2" style="font-size:0.75rem;"></i>Export Excel</a></li>
                    </ul>
                </div>
                <button class="qc-btn-confirm btn btn-sm mb-0" style="background:var(--g4);border:1px solid var(--qc-line-strong);color:var(--grey-dark);font-size:0.8rem;font-weight:600;" data-bs-toggle="modal" data-bs-target="#sendMailModal">
                    <i class="fas fa-envelope me-1" style="font-size:0.72rem;"></i> Send Mail
                </button>
                <button class="qc-btn-create btn bg-gradient-primary btn-sm mb-0" id="addButton">
                    <i class="fas fa-plus me-1" style="font-size:0.72rem;"></i> New Lab
                </button>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive table-scroll-wrap" style="border:none; max-height:calc(100vh - 320px); overflow: auto;">
                <table class="table mb-0">
                    <thead class="sticky-thead">
                        <tr>
                            <th style="padding-left:1.25rem; width:4%;">#</th>
                            <th>Laboratory Name</th>
                            <th class="text-center">Lab Type</th>
                            <th class="text-center">Contact Email</th>
                            <th class="text-center">City</th>
                            <th class="text-center">Status</th>
                            <th class="text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($marketingLabs as $index => $marketingLab)
                            <tr>
                                <td style="padding-left:1.25rem;"><span class="mono" style="font-size:0.72rem;color:var(--grey);">{{ str_pad($marketingLabs->firstItem()+$index,2,'0',STR_PAD_LEFT) }}</span></td>
                                <td><span style="font-weight:600;color:var(--heading);">{{ $marketingLab->laboratory_name }}</span></td>
                                <td class="text-center"><span class="badge bg-gradient-light" style="font-size:0.65rem;">{{ $marketingLab->lab_type }}</span></td>
                                <td class="text-center" style="color:var(--indigo);font-size:0.8rem;">{{ $marketingLab->contact_email }}</td>
                                <td class="text-center" style="color:var(--grey-mid);">{{ $marketingLab->city }}</td>
                                <td class="text-center">
                                    <span class="badge
                                        @if($marketingLab->status=='new') bg-gradient-info
                                        @elseif($marketingLab->status=='contacted') bg-gradient-warning
                                        @elseif($marketingLab->status=='interested') bg-gradient-success
                                        @elseif($marketingLab->status=='customer') bg-gradient-secondary
                                        @elseif($marketingLab->status=='not_interested') bg-gradient-danger
                                        @else bg-gradient-light @endif">
                                        {{ ucfirst(str_replace('_',' ',$marketingLab->status)) }}
                                    </span>
                                </td>
                                <td class="text-center">
                                    @if ($marketingLab->is_deleted === 'active')
                                        <div class="d-flex justify-content-center gap-2">
                                            <a href="#" class="ia-edit" onclick="openEditForm({{ $marketingLab }})" title="Edit"><i class="fas fa-pencil-alt" style="font-size:0.72rem;"></i></a>
                                            <form method="POST" action="{{ route('marketingLabs.delete', $marketingLab->id) }}" style="display:inline;">
                                                @csrf
                                                <button type="submit" class="ia-delete" onclick="return confirm('Delete this lab?');" style="border:none;font-family:inherit;"><i class="fas fa-trash-alt" style="font-size:0.72rem;"></i></button>
                                            </form>
                                        </div>
                                    @else
                                        <form action="{{ route('marketingLabs.restore', $marketingLab->id) }}" method="POST" style="display:inline;">
                                            @csrf
                                            <button type="submit" class="ia-view" style="border:none;font-family:inherit;" title="Restore"><i class="fas fa-rotate-left" style="font-size:0.72rem;"></i></button>
                                        </form>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="7"><div class="empty-state"><i class="fas fa-flask"></i><p>No marketing labs found</p></div></td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="px-4 py-3" style="border-top:1px solid var(--border);">
                @include('components.pagination', ['paginator' => $marketingLabs])
            </div>
        </div>
    </div>

    <div id="formView" class="card" style="display:none;">
        <div class="card-header d-flex align-items-center justify-content-between">
            <h6 id="formTitle" class="mb-0" style="font-weight:700;">Create New Marketing Lab</h6>
            <button onclick="toggleView('table')" style="width:32px;height:32px;border-radius:50%;background:var(--faint);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;"><i class="fas fa-times" style="font-size:0.82rem;color:var(--grey-mid);"></i></button>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('marketingLabs.storeOrUpdate') }}" id="marketingLabModalForm" class="row g-3">
                @csrf
                <input type="hidden" name="id" id="id">
                <div class="col-md-6"><label class="form-label">Laboratory Name <span class="text-danger">*</span></label><input type="text" class="form-control" id="laboratory_name" name="laboratory_name" required></div>
                <div class="col-md-6"><label class="form-label">Lab Type <span class="text-danger">*</span></label><select class="form-select" id="lab_type" name="lab_type" required><option value="" disabled selected>Select Type</option><option value="Calibration">Calibration</option><option value="Testing">Testing</option><option value="Calibration_and_testing">Calibration & Testing</option></select></div>
                <div class="col-md-6"><label class="form-label">Contact Person <span class="text-danger">*</span></label><input type="text" class="form-control" id="contact_person" name="contact_person" required></div>
                <div class="col-md-6"><label class="form-label">Contact Email <span class="text-danger">*</span></label><input type="email" class="form-control" id="contact_email" name="contact_email" required></div>
                <div class="col-md-6"><label class="form-label">Contact Mobile <span class="text-danger">*</span></label><input type="text" class="form-control" id="contact_mobile" name="contact_mobile" required></div>
                <div class="col-md-6"><label class="form-label">City <span class="text-danger">*</span></label><input type="text" class="form-control" id="city" name="city" required></div>
                <div class="col-md-6"><label class="form-label">Status <span class="text-danger">*</span></label><select class="form-select" id="status" name="status" required></select></div>
                <div class="col-md-6"><label class="form-label">Flag for Email <span class="text-danger">*</span></label><select class="form-select" id="flag_for_email" name="flag_for_email" required><option value="yes">Yes</option><option value="no">No</option></select></div>
                <div class="col-md-6"><label class="form-label">Address <span class="text-danger">*</span></label><textarea class="form-control" id="address" name="address" rows="2" required></textarea></div>
                <div class="col-md-6"><label class="form-label">State <span class="text-danger">*</span></label><input type="text" class="form-control" id="state" name="state" required></div>
                <div class="col-12"><label class="form-label">Notes</label><textarea class="form-control" id="notes" name="notes" rows="2"></textarea></div>
                <div class="col-12 d-flex justify-content-end gap-2 pt-3" style="border-top:1px solid var(--border);">
                    <button type="button" onclick="toggleView('table')" class="qc-btn-dismiss btn btn-light mb-0">Cancel</button>
                    <button type="submit" id="submitButton" class="qc-btn-confirm btn bg-gradient-primary mb-0">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Send Mail Modal -->
<div class="modal fade" id="sendMailModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" style="font-weight:700;">Send Marketing Email</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4">
                <form id="sendMailForm" class="row g-3">
                    @csrf
                    <div class="col-12">
                        <label for="lab_id" class="form-label">Enter City</label>
                        <input type="text" id="lab_id" name="lab_id" class="form-control" placeholder="e.g., Rajkot" required>
                    </div>
                    <div class="col-12">
                        <label for="template" class="form-label">Email Template</label>
                        <select name="template" id="template" class="form-select" required>
                            <option value="marketingLabs">Quantumcals Invitation</option>
                            <option value="trial_offer">3-Month Free Trial Offer</option>
                            <option value="customer-portal_mail">Customer Portal Features</option>
                        </select>
                    </div>
                    <div class="col-12">
                        <button type="submit" class="qc-btn-confirm btn bg-gradient-primary w-100 mb-0">Send Email</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    function toggleView(view) {
        document.getElementById('tableView').style.display = view==='form' ? 'none' : 'block';
        document.getElementById('formView').style.display  = view==='form' ? 'block' : 'none';
    }
    function openEditForm(marketingLab) {
        document.getElementById('formTitle').innerText = 'Update Marketing Lab';
        document.getElementById('submitButton').innerText = 'Update';
        document.getElementById('id').value = marketingLab.id;
        document.getElementById('laboratory_name').value = marketingLab.laboratory_name;
        document.getElementById('lab_type').value = marketingLab.lab_type;
        document.getElementById('contact_person').value = marketingLab.contact_person;
        document.getElementById('contact_email').value = marketingLab.contact_email;
        document.getElementById('contact_mobile').value = marketingLab.contact_mobile;
        document.getElementById('address').value = marketingLab.address;
        document.getElementById('city').value = marketingLab.city;
        document.getElementById('state').value = marketingLab.state;
        document.getElementById('flag_for_email').value = marketingLab.flag_for_email;
        document.getElementById('notes').value = marketingLab.notes;
        document.getElementById('status').innerHTML = `<option value="new">New</option><option value="contacted">Contacted</option><option value="interested">Interested</option><option value="demo_done">Demo Done</option><option value="not_interested">Not Interested</option><option value="customer">Customer</option><option value="invalid">Invalid</option>`;
        document.getElementById('status').value = marketingLab.status;
        toggleView('form');
    }
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('addButton').addEventListener('click', function() {
            document.getElementById('formTitle').innerText = 'Create New Marketing Lab';
            document.getElementById('submitButton').innerText = 'Save';
            document.getElementById('id').value = '';
            document.getElementById('marketingLabModalForm').reset();
            document.getElementById('status').innerHTML = `<option value="new" selected>New</option>`;
            toggleView('form');
        });
        document.getElementById('sendMailForm').addEventListener('submit', function(e) {
            e.preventDefault();
            fetch("{{ route('marketing.sendMail') }}", {
                method: "POST",
                headers: {"X-CSRF-TOKEN": document.querySelector('input[name="_token"]').value},
                body: new FormData(this)
            }).then(r=>r.json()).then(data => {
                alert(data.message);
                bootstrap.Modal.getInstance(document.getElementById('sendMailModal'))?.hide();
                this.reset();
            }).catch(() => alert("Error sending email."));
        });
        document.getElementById('export-btn').addEventListener('click', function() {
            this.disabled = true; this.innerText = "Exporting…";
            fetch("{{ route('marketingLabs.exportExcel') }}").then(r => r.blob()).then(blob => {
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement("a"); a.href=url; a.download="marketing_labs.xlsx";
                document.body.appendChild(a); a.click(); a.remove();
                window.location.href = "{{ route('marketingLabs.show') }}";
            }).catch(() => { window.location.href = "{{ route('marketingLabs.show') }}"; });
        });
    });
</script>
@endsection