@extends('layouts.app')

@section('content')
<div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">{{ __('notification_logs.title') }}</h1>
        </div>
    </div>
</div>

<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-xxl">
        <div class="card">
            <!-- Filter Header -->
            <div class="card-header border-0 pt-6">
                <div class="card-title w-100">
                    <form action="{{ route('notification-logs.index') }}" method="GET" class="row g-3 w-100 align-items-center">
                        <div class="col-md-3">
                            <select name="customer_id" class="form-select form-select-solid" data-control="select2" data-placeholder="{{ __('notification_logs.all_customers') }}" data-allow-clear="true">
                                <option></option>
                                @foreach($customers as $customer)
                                    <option value="{{ $customer->id }}" {{ request('customer_id') == $customer->id ? 'selected' : '' }}>
                                        {{ $customer->first_name }} {{ $customer->last_name }} ({{ $customer->phone }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select name="channel" class="form-select form-select-solid">
                                <option value="">{{ __('notification_logs.all_channels') }}</option>
                                <option value="email" {{ request('channel') == 'email' ? 'selected' : '' }}>E-posta (Email)</option>
                                <option value="sms" {{ request('channel') == 'sms' ? 'selected' : '' }}>SMS</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select name="status" class="form-select form-select-solid">
                                <option value="">{{ __('notification_logs.all_statuses') }}</option>
                                <option value="success" {{ request('status') == 'success' ? 'selected' : '' }}>{{ __('notification_logs.success') }}</option>
                                <option value="failed" {{ request('status') == 'failed' ? 'selected' : '' }}>{{ __('notification_logs.failed') }}</option>
                            </select>
                        </div>
                        <div class="col-md-3 d-flex align-items-center gap-2">
                            <input type="date" name="date_from" value="{{ request('date_from') }}" class="form-control form-control-solid" placeholder="{{ __('notification_logs.date_from') }}" />
                            <span class="text-gray-500">-</span>
                            <input type="date" name="date_to" value="{{ request('date_to') }}" class="form-control form-control-solid" placeholder="{{ __('notification_logs.date_to') }}" />
                        </div>
                        <div class="col-md-2 d-flex gap-2">
                            <button type="submit" class="btn btn-primary w-100">{{ __('common.filter') }}</button>
                            @if(request('customer_id') || request('channel') || request('status') || request('date_from') || request('date_to') || request('q'))
                                <a href="{{ route('notification-logs.index') }}" class="btn btn-light">{{ __('common.cancel') }}</a>
                            @endif
                        </div>
                        <div class="col-12 mt-2">
                            <div class="d-flex align-items-center position-relative my-1">
                                <i class="ki-outline ki-magnifier fs-3 position-absolute ms-5"></i>
                                <input type="text" name="q" value="{{ request('q') }}" class="form-control form-control-solid w-100 ps-13" placeholder="{{ __('notification_logs.search_placeholder') }}" />
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Table Body -->
            <div class="card-body pt-0">
                <table class="table align-middle table-row-dashed fs-6 gy-5">
                    <thead>
                        <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                            <th>{{ __('common.customer') }}</th>
                            <th>{{ __('notification_logs.channel') }}</th>
                            <th>{{ __('notification_logs.recipient') }}</th>
                            <th>{{ __('notification_logs.event') }}</th>
                            <th>{{ __('notification_logs.status') }}</th>
                            <th>{{ __('common.date') }}</th>
                            <th class="text-end">{{ __('common.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="fw-semibold text-gray-600">
                        @forelse($rows as $row)
                            <tr>
                                <td>
                                    @if($row->customer)
                                        <a href="{{ route('customers.show', ['customer' => $row->customer->id]) }}" class="text-gray-800 text-hover-primary">
                                            {{ $row->customer->first_name }} {{ $row->customer->last_name }}
                                        </a>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td>
                                    @if($row->channel === 'email')
                                        <span class="badge badge-light-primary fs-7">
                                            <i class="ki-outline ki-sms text-primary fs-6 me-1"></i> E-posta
                                        </span>
                                    @else
                                        <span class="badge badge-light-success fs-7">
                                            <i class="ki-outline ki-phone text-success fs-6 me-1"></i> SMS
                                        </span>
                                    @endif
                                </td>
                                <td>{{ $row->recipient }}</td>
                                <td>
                                    <span class="text-gray-700 fs-7">{{ $row->event }}</span>
                                </td>
                                <td>
                                    @if($row->status === 'success')
                                        <span class="badge badge-light-success fs-7">{{ __('notification_logs.success') }}</span>
                                    @else
                                        <span class="badge badge-light-danger fs-7 cursor-pointer" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="top" title="{{ __('notification_logs.error_message') }}" data-bs-content="{{ $row->error_message ?: __('common.failed') }}">
                                            {{ __('notification_logs.failed') }} <i class="ki-outline ki-information-2 text-danger fs-8 ms-1"></i>
                                        </span>
                                    @endif
                                </td>
                                <td>{{ $row->created_at->format('d.m.Y H:i') }}</td>
                                <td class="text-end">
                                    <button class="btn btn-sm btn-light btn-active-light-primary" data-bs-toggle="modal" data-bs-target="#modal_content_{{ $row->id }}">
                                        {{ __('notification_logs.view_content') }}
                                    </button>

                                    <!-- Content Modal -->
                                    <div class="modal fade text-start" id="modal_content_{{ $row->id }}" tabindex="-1" aria-hidden="true">
                                        <div class="modal-dialog modal-dialog-centered modal-lg">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h3 class="modal-title">{{ __('notification_logs.view_content') }} ({{ $row->channel === 'email' ? 'E-posta' : 'SMS' }})</h3>
                                                    <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                                                        <i class="ki-outline ki-cross fs-1"></i>
                                                    </div>
                                                </div>
                                                <div class="modal-body">
                                                    @if($row->channel === 'email' && $row->subject)
                                                        <div class="mb-4">
                                                            <strong class="text-gray-800">{{ __('notification_logs.subject') }}:</strong>
                                                            <div class="bg-light p-3 rounded mt-1 border text-gray-900">{{ $row->subject }}</div>
                                                        </div>
                                                    @endif
                                                    <div>
                                                        <strong class="text-gray-800">{{ __('notification_logs.content') }}:</strong>
                                                        <div class="bg-light p-4 rounded mt-1 border text-gray-900" style="white-space: pre-wrap;">{!! e($row->content) !!}</div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('notification_logs.close') }}</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center py-10 text-muted">{{ __('notification_logs.no_logs') }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
                <div class="d-flex flex-stack flex-wrap pt-10">
                    <div class="fs-6 fw-semibold text-gray-700">
                        {{ __('common.showing_entries', ['from' => $rows->firstItem() ?? 0, 'to' => $rows->lastItem() ?? 0, 'total' => $rows->total()]) }}
                    </div>
                    <ul class="pagination mb-0">
                        {{ $rows->links('pagination::bootstrap-5') }}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection