@extends('layouts.user_type.auth')

@section('marketingLabs')
    <div>
        <div class="row">
            <div class="col-12">
                @include('components.alert')

                <div class="card mb-4 mx-4">
                    <div class="card-header pb-0">
                        <div class="d-flex flex-row justify-content-between">
                            <h5 class="mb-0">Marketing Labs</h5>
                            <div>
                                <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="d-flex align-items-center gap-1 mb-3">
                                    <div class="dropdown">
                                        <a href="javascript:;" class="btn bg-gradient-secondary"
                                            data-bs-toggle="dropdown"aria-expanded="false">
                                            <i class="fas fa-ellipsis-v fa-lg"></i>
                                        </a>
                                        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink2">
                                            <li>
                                                <a href="#" class="dropdown-item"
                                                    onclick="document.getElementById('fileInput').click();">
                                                    <i class="fa fa-file-excel"></i> Import
                                                </a>
                                            </li>
                                            <li>
                                                <a href="{{ route('marketingLabs.exportExcel') }}" class="dropdown-item"
                                                    id="export-btn">
                                                    <i class="fa fa-file-excel"></i> Export
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <a href="#" class="btn btn-primary"
                                        data-bs-toggle="modal"data-bs-target="#marketingLabModal" id="createButton">+ New
                                        Marketing</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Marketing Lab Table -->
                    <div class="card-body px-0 pt-0 pb-2">
                        <div class="table-responsive p-0">
                            <table class="table align-items-center mb-0">
                                <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">ID
                                        </th>
                                        <th
                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Laboratory Name</th>
                                        <th
                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Lab Type</th>
                                        <th
                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Contact Email</th>
                                        <th
                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            City</th>
                                        <th
                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Status</th>
                                        <th
                                            class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                            Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($marketingLabs as $index => $marketingLab)
                                        <tr>
                                            <td class="ps-4">
                                                <p class="text-xs font-weight-bold mb-0">
                                                    {{ $marketingLabs->firstItem() + $index }}</p>
                                            </td>
                                            <td class="text-center">
                                                <p class="text-xs font-weight-bold mb-0">
                                                    {{ $marketingLab->laboratory_name }}</p>
                                            </td>
                                            <td class="text-center">
                                                <p class="text-xs font-weight-bold mb-0">{{ $marketingLab->lab_type }}</p>
                                            </td>
                                            <td class="text-center">
                                                <p class="text-xs font-weight-bold mb-0">{{ $marketingLab->contact_email }}
                                                </p>
                                            </td>
                                            <td class="text-center">
                                                <p class="text-xs font-weight-bold mb-0">{{ $marketingLab->city }}
                                                </p>
                                            </td>
                                            <td class="text-center">
                                                <p
                                                    class="font-weight-bold mb-0 
                                            @if ($marketingLab->status == 'new') badge badge-sm bg-gradient-info
                                            @elseif($marketingLab->status == 'contacted')
                                                badge badge-sm bg-gradient-warning
                                            @elseif($marketingLab->status == 'interested')
                                                badge badge-sm bg-gradient-success
                                            @elseif($marketingLab->status == 'customer')
                                                badge badge-sm bg-gradient-secondary
                                            @elseif($marketingLab->status == 'not_interested')
                                                badge badge-sm bg-gradient-danger @endif">
                                                    {{ ucfirst($marketingLab->status) }}
                                                </p>
                                            </td>
                                            <td class="text-center">
                                                @if ($marketingLab->is_deleted === 'active')
                                                    <a href="#" class="mx-3" data-bs-toggle="modal"
                                                        data-bs-target="#marketingLabModal" title="Edit"
                                                        onclick="openEditModal({{ $marketingLab }})">
                                                        <i class="fas fa-edit text-secondary"></i>
                                                    </a>
                                                    <span>
                                                        <form method="POST"
                                                            action="{{ route('marketingLabs.delete', $marketingLab->id) }}"
                                                            style="display:inline;">
                                                            @csrf
                                                            <button type="submit" title="Delete Marketing Lab"
                                                                style="background: none; border: none; padding: 0; cursor: pointer;"
                                                                onclick="return confirm('Are you sure you want to delete this Marketing Lab?');">
                                                                <i class="fas fa-trash text-secondary"
                                                                    data-bs-toggle="tooltip"></i>
                                                            </button>
                                                        </form>
                                                    </span>
                                                @else
                                                    <span>
                                                        <form
                                                            action="{{ route('marketingLabs.restore', $marketingLab->id) }}"
                                                            method="POST" style="display:inline;">
                                                            @csrf
                                                            <button type="submit"
                                                                style="background: none; border: none; padding: 0; cursor: pointer;"
                                                                data-bs-toggle="tooltip" title="Restore">
                                                                <i class="fas fa-rotate-left text-secondary"></i>
                                                            </button>
                                                        </form>
                                                    </span>
                                                @endif
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="7" class="text-center py-5">
                                                <img src="{{ asset('assets/img/no_data_found.png') }}" alt="No Data Found"
                                                    style="width: 200px; opacity: 0.6;">
                                                <p class="mt-2 text-muted">No data Found</p>
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                            @include('components.pagination', ['paginator' => $marketingLabs])
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Create/Edit Marketing Labs -->
    <div class="modal fade" id="marketingLabModal" tabindex="-1"
        aria-labelledby="marketingLabModalLabel"aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="marketingLabModalLabel">Create New Marketing Lab</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="POST" action="{{ route('marketingLabs.storeOrUpdate') }}" id="marketingLabModalForm">
                    @csrf
                    <div class="modal-body">
                        <div class="container">
                            <div class="row">

                                <!-- ID Field (Hidden for Update) -->
                                <input type="hidden" name="id" id="id">

                                <!-- Laboratory Name -->
                                <div class="col-md-6 mb-3">
                                    <label for="laboratory_name" class="form-label">Laboratory Name<span
                                            class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="laboratory_name"
                                        name="laboratory_name" placeholder="Enter Laboratory Name" required>
                                </div>
                                <!-- Lab Type -->
                                <div class="col-md-6 mb-3">
                                    <label for="lab_type" class="form-label">Lab Type<span
                                            class="text-danger">*</span></label>
                                    <select class="form-select" id="lab_type" name="lab_type" required>
                                        <option value="" selected disabled>Select Lab Type</option>
                                        <option value="Calibration">Calibration</option>
                                        <option value="Testing">Testing</option>
                                        <option value="Calibration_and_testing">Calibration & Testing</option>
                                    </select>
                                </div>
                            </div>

                            <div class="row">
                                <!-- Contact Person -->
                                <div class="col-md-6 mb-3">
                                    <label for="contact_person" class="form-label">Contact Person<span
                                            class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="contact_person" name="contact_person"
                                        placeholder="Enter Contact Person" required>
                                </div>
                                <!-- Contact Email -->
                                <div class="col-md-6 mb-3">
                                    <label for="contact_email" class="form-label">Contact Email<span
                                            class="text-danger">*</span></label>
                                    <input type="email" class="form-control" id="contact_email" name="contact_email"
                                        placeholder="Enter Contact Email" required>
                                </div>
                            </div>

                            <div class="row">
                                <!-- Contact Mobile -->
                                <div class="col-md-6 mb-3">
                                    <label for="contact_mobile" class="form-label">Contact Mobile<span
                                            class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="contact_mobile" name="contact_mobile"
                                        placeholder="Enter Contact Mobile" required>
                                </div>
                                <!-- City -->
                                <div class="col-md-6 mb-3">
                                    <label for="city" class="form-label">City<span
                                            class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="city" name="city"
                                        placeholder="Enter City" required>
                                </div>
                            </div>

                            <div class="row">
                                <!-- Status -->
                                <div class="col-md-6 mb-3">
                                    <label for="status" class="form-label">Status<span
                                            class="text-danger">*</span></label>
                                    <select class="form-select" id="status" name="status" required>

                                    </select>
                                </div>
                                <!-- Flag For Email -->
                                <div class="col-md-6 mb-3">
                                    <label for="flag_for_email" 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>

                            <div class="row">
                                <!-- Address -->
                                <div class="col-md-6 mb-3">
                                    <label for="address" class="form-label">Address<span
                                            class="text-danger">*</span></label>
                                    <textarea class="form-control" id="address" name="address" placeholder="Enter Address" rows="3" required></textarea>
                                </div>
                                <!-- Notes -->
                                <div class="col-md-6 mb-3">
                                    <label for="notes" class="form-label">Notes</label>
                                    <textarea class="form-control" id="notes" name="notes" placeholder="Enter Notes" rows="3"></textarea>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" id="submitButton" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <script>
        function openEditModal(marketingLab) {
            document.getElementById('marketingLabModalLabel').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('flag_for_email').value = marketingLab.flag_for_email;
            document.getElementById('notes').value = marketingLab.notes;

            const statusSelect = document.getElementById('status');
            statusSelect.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>
        `;
            statusSelect.value = marketingLab.status;

        }

        document.addEventListener("DOMContentLoaded", function() {

            document.getElementById('createButton').addEventListener('click', function() {

                document.getElementById('marketingLabModalLabel').innerText = 'Create Marketing Lab';
                document.getElementById('submitButton').innerText = 'Create';

                document.getElementById('id').value = '';
                document.getElementById('marketingLabModalForm').reset();

                const statusSelect = document.getElementById('status');
                statusSelect.innerHTML = `
                <option value="new" selected>New</option>
            `;
            });

        });

        document.getElementById('export-btn').addEventListener('click', function() {
            const button = this;
            button.disabled = true;
            button.innerText = "Exporting...";

            fetch("{{ route('marketingLabs.exportExcel') }}")
                .then(response => {
                    if (!response.ok || !response.headers.get('Content-Disposition')) {
                        throw new Error("Invalid response or file not found.");
                    }

                    return response.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(error => {
                    window.location.href = "{{ route('marketingLabs.show') }}";
                });
        });
    </script>
@endsection