@extends('layout')
@section('content')
<style>
    /* Updated CSS to ensure long URLs or text wrap */
    .wrap-text {
        word-break: break-all; /* Breaks long words at any point to ensure wrapping */
        overflow-wrap: break-word; /* Allows breaking at appropriate points */
        white-space: normal; /* Ensures that text wraps */
        max-width: 200px; /* Set a maximum width for the column */
    }
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
<main class="logins-form">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">{{ __('WhatsApp Message List') }}</div>
                    <div class="card-body">
                        <div class="p-3 mb-3 bg-light border rounded">
                            <div class="d-flex justify-content-between align-items-start flex-wrap">
                                <!-- First Column: Form (Left-Aligned) -->
                                <div class="d-flex align-items-center" style="width: 50%; min-width: 300px; text-align: left;">
                                    <form action="{{ route('set.filterDate') }}" method="POST" class="d-flex align-items-center mb-3">
                                        @csrf
                                        <label for="filterDate" class="mb-0 mr-2" text-align: right;">Set Date:</label>
                                        <input type="date" id="filterDate" name="filterDate" class="form-control mr-2" style="flex: 2;" required>
                                        <button type="submit" class="btn btn-secondary" style="flex: 1;">Set Date</button>
                                    </form>
                                </div>
                                <!-- Second Column: Count (Right-Aligned) -->
                                <div style="width: 50%; min-width: 300px; text-align: right;">
                                    <p class="mb-0">
                                        Total Pending Messages created after
                                        <span style="font-weight: bold; color: #007bff;">{{ $filterDate }}</span>:
                                        <span style="font-weight: bold; color: #dc3545;">{{ $pendingCount }}</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <form action="{{ route('send.bulkMessage') }}" method="POST">
                            @csrf
                            <button type="submit" class="btn btn-primary">Send Bulk Message</button>
                        </form>
                        <!-- <a href="{{ route('export.messages') }}" class="btn btn-success mb-3">Export to Excel</a> -->
                        <!-- Success and Error Alerts -->
                        @if (session('success'))
                        <div class="alert alert-success" role="alert">
                            {{ session('success') }}
                        </div>
                        @endif
                        @if (session('error'))
                        <div class="alert alert-danger" role="alert">
                            {{ session('error') }}
                        </div>
                        @endif
                        <!-- Table for displaying messages -->
                        <table class="table table-bordered table-responsive-lg">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Customer Name</th>
                                    <th>Mobile Number</th>
                                    <th>Amount</th>
                                    <th style="width: 120px">Payment Link</th>
                                    <th>Link Status</th>
                                    <th>Search Date</th>
                                    <th>Whatsapp Message Status</th>
                                    <th>Sent At</th>
                                    <th>Error Message</th>
                                    <th>Created At</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($messages as $message)
                                <tr style="background-color: {{ in_array($message->status, ['pending', 'failed']) ? '#dbf1db' : 'transparent' }};">
                                    <td>{{ $message->id }}</td>
                                    <td>{{ $message->customer->customer_name ?? 'N/A' }}</td>
                                    <td>{{ $message->customer->phone_number ?? 'N/A' }}</td>
                                    <td>{{ $message->amount }}</td>
                                    <td class="wrap-text">
                                        {{ $message->payment_link }}
                                        @if(!is_null($message->payment_link))
                                        <i class="fas fa-copy" style="cursor: pointer; margin-left: 5px;" onclick="copyToClipboard('{{ $message->payment_link }}')"></i>
                                        @endif
                                    </td>
                                    <td>{{ $message->link_generate_status ?? '' }}</td>
                                    <td>{{ $message->search_date }}</td>
                                    <td>{{ $message->status }}</td>
                                    <td>{{ $message->sent_at }}</td>
                                    <td>{{ $message->error_message }}</td>
                                    <td>{{ $message->created_at }}</td>
                                    <td>
                                        @if($message->status !== 'sent')
                                        <!-- Form to send message -->
                                        <form action="{{ route('send.message', $message->id) }}" method="POST">
                                            @csrf
                                            <button type="submit" class="btn btn-primary">Send Message</button>
                                        </form>
                                        @if(is_null($message->payment_link))
                                        <form action="{{ route('generate.payment.link', $message->id) }}" method="POST" style="display: inline;">
                                            @csrf
                                            <button type="submit" class="btn btn-warning">Generate Payment Link</button>
                                        </form>
                                        @endif
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        <!-- Pagination Links -->
                        <div>
                            {{ $messages->links() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection
@section('script')
@endsection
<script>
function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(function() {
        alert("Payment link copied to clipboard!");
    }).catch(function(err) {
        console.error("Failed to copy text: ", err);
    });
}
</script>