@extends('layouts.app')
@section('title', 'SMS Log')

@section('content')
<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">SMS Log</h1>
</section>

<section class="content mt-4">
    <form method="GET" class="tw-mb-6 tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-4">
        <div>
            <label class="tw-font-semibold">Select Member:</label>
            <select name="member_id" class="tw-w-full tw-border tw-rounded tw-p-2">
                <option value="">-- All Members --</option>
                @foreach($members as $member)
                    <option value="{{ $member->contact_id }}" {{ request('member_id') == $member->contact_id ? 'selected' : '' }}>
                       {{ $member->contact_id }} - {{ $member->name }}
                    </option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="tw-font-semibold">From Date:</label>
            <input type="date" name="from_date" class="tw-w-full tw-border tw-rounded tw-p-2" value="{{ request('from_date') }}">
        </div>
        <div>
            <label class="tw-font-semibold">To Date:</label>
            <input type="date" name="to_date" class="tw-w-full tw-border tw-rounded tw-p-2" value="{{ request('to_date') }}">
        </div>
        <div class="tw-flex tw-items-end">
            <button type="submit" class="tw-bg-blue-600 tw-text-white tw-px-4 tw-py-2 tw-rounded hover:tw-bg-blue-700">Filter</button>
        </div>
    </form>

    <table class="table-auto tw-w-full tw-border">
        <thead>
            <tr class="tw-bg-gray-200">
                <th class="tw-px-4 tw-py-2">Date</th>
                <th class="tw-px-4 tw-py-2">Member</th>
                <th class="tw-px-4 tw-py-2">Mobile</th>
                <th class="tw-px-4 tw-py-2">Type</th>
                {{-- <th class="tw-px-4 tw-py-2">Alert Sent</th> --}}
            </tr>
        </thead>
        <tbody>
            @forelse($sms as $log)
                <tr>
                    <td class="tw-px-4 tw-py-2">{{ $log->created_at->format('Y-m-d H:i') }}</td>
                    <td class="tw-px-4 tw-py-2">{{ $log->member->name ?? 'Custom Member' }} ({{ $log->member->contact_id ?? 'Custom' }})</td>
                    <td class="tw-px-4 tw-py-2">{{ $log->mobile }}</td>
                    <td class="tw-px-4 tw-py-2">{{ ucfirst($log->type) }}</td>
                    {{-- <td class="tw-px-4 tw-py-2">{{ $log->alert_sent ? \Carbon\Carbon::parse($log->alert_sent)->format('Y-m-d H:i') : '-' }}</td> --}}
                </tr>
            @empty
                <tr>
                    <td colspan="5" class="tw-text-center tw-p-4">No SMS records found.</td>
                </tr>
            @endforelse
        </tbody>
    </table>
</section>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#member_id').select2({
                placeholder: '-- Select Member --',
                allowClear: true,
                width: '100%'
            });
        });
    </script>
@endpush