@extends('adminlte::page')

@section('title', request('source') ? ucfirst(str_replace('-', ' ', request('source'))) . ' Enquiries' : 'Enquiries')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1>
            @if (request('source'))
                {{ ucfirst(str_replace('-', ' ', request('source'))) }} Enquiries
            @else
                Enquiries
            @endif
        </h1>
        <button onclick="history.back()" class="btn btn-secondary">
            Back
        </button>
    </div>
@stop

@section('content')
    <div class="card">
        <div class="card-header">
            <div class="row">
                <div class="col-md-8">
                    <form method="GET" action="{{ route('admin.enquiries.index') }}" class="form-inline" id="enquiriesFilterForm">
                        <input type="hidden" name="source" value="{{ request('source', 'home') }}">
                        <div class="form-group mr-2">
                            <input type="text" name="q" value="{{ request('q') }}" class="form-control"
                                placeholder="Search name, email, company">
                        </div>
                        <div class="form-group mr-2">
                            <input type="date" name="from_date" value="{{ request('from_date') }}" class="form-control"
                                placeholder="From Date">
                        </div>
                        <div class="form-group mr-2">
                            <input type="date" name="to_date" value="{{ request('to_date') }}" class="form-control"
                                placeholder="To Date">
                        </div>
                        <button class="btn btn-primary mr-2" type="submit">Search</button>
                        <a href="{{ route('admin.enquiries.index', ['reset' => 1]) }}" class="btn btn-default">Reset</a>
                    </form>
                </div>
                <div class="col-md-4 text-right">
                    <form method="POST" action="{{ $exportRoute }}" id="exportForm" class="d-inline-block">
                        @csrf
                        <input type="hidden" name="ids" id="exportIds">
                        <input type="hidden" name="export_type" id="exportType" value="csv">
                        <div class="btn-group">
                            <button type="submit" class="btn btn-success">Export</button>
                            <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="#" onclick="setExportType('csv')">Export as CSV</a>
                                <a class="dropdown-item" href="#" onclick="setExportType('excel')">Export as Excel</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="selectAll"></th>
                            <th>#</th>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Company</th>
                            <th>Submitted At</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($enquiries as $enquiry)
                            <tr>
                                <td><input type="checkbox" class="rowCheckbox" value="{{ $enquiry->id }}"></td>
                                <td>{{ $enquiry->id }}</td>
                                <td>{{ $enquiry->first_name }} {{ $enquiry->last_name }}</td>
                                <td>{{ $enquiry->business_email }}</td>
                                <td>{{ $enquiry->phone_number }}</td>
                                <td>{{ $enquiry->company ?? 'N/A' }}</td>
                                <td>{{ $enquiry->created_at->format('M d, Y H:i') }}</td>
                                <td>
                                     <a href="{{ route('admin.enquiries.show', $enquiry->id) }}"
                                         class="btn btn-sm btn-info">View</a>
                                    <form method="POST"
                                        action="{{ route('admin.enquiries.destroy', $enquiry->id) }}{{ request('source') ? '?source=' . request('source') : '' }}"
                                        style="display: inline-block;"
                                        onsubmit="return confirm('Are you sure you want to delete this enquiry?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="text-center">No enquiries found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{ $enquiries->links() }}
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('enquiriesFilterForm');

            if (form) {
                form.addEventListener('submit', function(e) {
                    e.preventDefault();

                    // Get form data
                    const formData = new FormData(form);
                    const params = new URLSearchParams();

                    // Only add non-empty parameters
                    for (let [key, value] of formData.entries()) {
                        if (value && value.trim() !== '') {
                            params.append(key, value);
                        }
                    }

                    // Build clean URL
                    const baseUrl = form.action;
                    const queryString = params.toString();
                    const finalUrl = queryString ? `${baseUrl}?${queryString}` : baseUrl;

                    // Navigate to clean URL
                    window.location.href = finalUrl;
                });
            }

            // Select All checkbox functionality
            document.getElementById('selectAll').addEventListener('change', function() {
                let checked = this.checked;
                document.querySelectorAll('.rowCheckbox').forEach(cb => cb.checked = checked);
            });

            // Export form functionality
            document.getElementById('exportForm').addEventListener('submit', function(e) {
                let ids = Array.from(document.querySelectorAll('.rowCheckbox:checked')).map(cb => cb.value);
                
                if(ids.length === 0) { 
                    e.preventDefault(); 
                    alert('Please select at least one enquiry to export.');
                    return false;
                }
                
                document.getElementById('exportIds').value = ids.join(',');
            });
        });

        // Export type dropdown logic
        function setExportType(type) {
            document.getElementById('exportType').value = type;
            document.getElementById('exportForm').submit();
        }
    </script>

    <style>
        .btn-group .btn, .btn-group .dropdown-toggle {
            vertical-align: middle;
        }
        .btn-group .dropdown-menu {
            min-width: 100%;
            left: 0;
            right: auto;
        }
    </style>
@stop