@extends('layouts.app')
@section('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/datatables.net-bs4@1.13.11/css/dataTables.bootstrap4.min.css">
    <style>
        .kutipan-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 600;
            color: #fff;
            background: linear-gradient(135deg, #635cf0, #8a84f5);
            margin-right: 12px;
            flex-shrink: 0;
            text-transform: uppercase;
        }
        #kutipan-table tbody tr:hover {
            background-color: #f8f9fb;
        }
        #kutipan-table_wrapper .dataTables_filter input {
            border-radius: 6px;
            border: 1px solid #e3e6ef;
            padding: 6px 14px;
            margin-left: 8px;
            outline: none;
        }
        #kutipan-table_wrapper .dataTables_filter input:focus {
            border-color: #635cf0;
            box-shadow: 0 0 0 0.15rem rgba(99, 92, 240, 0.15);
        }
        #kutipan-table_wrapper .dataTables_length select {
            border-radius: 6px;
            border: 1px solid #e3e6ef;
            padding: 4px 10px;
            outline: none;
        }
        #kutipan-table_wrapper .dataTables_info {
            color: #8a8fa3;
            font-size: 13px;
            padding-top: 12px;
        }
        #kutipan-table_wrapper .dataTables_paginate .page-link {
            border-radius: 6px !important;
            margin: 0 2px;
            border: 1px solid #e3e6ef;
            color: #5a5f7d;
        }
        #kutipan-table_wrapper .dataTables_paginate .page-item.active .page-link {
            background-color: #635cf0;
            border-color: #635cf0;
            color: #fff;
        }
        #kutipan-table_wrapper .dataTables_paginate .page-item.disabled .page-link {
            color: #c0c4d4;
        }
        .btn-send-whatsapp {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            border-radius: 20px;
            background-color: rgba(37, 211, 102, 0.12);
            color: #1da851;
            font-size: 13px;
            font-weight: 500;
            white-space: nowrap;
            line-height: 1;
            border: 0;
            cursor: pointer;
            transition: background-color .15s ease, color .15s ease, transform .15s ease;
        }
        .btn-send-whatsapp:hover,
        .btn-send-whatsapp:focus {
            background-color: #25d366;
            color: #fff;
            text-decoration: none;
            transform: translateY(-1px);
        }
        .btn-send-whatsapp svg {
            width: 14px;
            height: 14px;
        }
    </style>
@endsection
@section('content')
    <div class="contents">
        <div class="container-fluid">
            <div class="social-dash-wrap">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="breadcrumb-main">
                            <h4 class="text-capitalize breadcrumb-title">{{ $pageTitle }}</h4>
                        </div>
                    </div>
                </div>
                @foreach (['success' => ['alert-success', 'Success'], 'error' => ['alert-danger', 'Error']] as $key => [$alertClass, $heading])
                    @if (session($key))
                        <div class="row">
                            <div class="col-md-12">
                                <div class="alert-big alert {{ $alertClass }} alert-dismissible fade show mb-25" role="alert">
                                    <div class="alert-content">
                                        <h6 class="alert-heading">{{ $heading }}</h6>
                                        <p>{{ session($key) }}</p>
                                        <button type="button" class="close text-capitalize" data-dismiss="alert" aria-label="Close">
                                            <span data-feather="x" aria-hidden="true"></span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                @endforeach
                <div class="row">
                    <div class="col-md-12">
                        <div class="card mb-30">
                            <div class="card-header color-dark fw-500 d-flex align-items-center justify-content-between">
                                <span>Kutipan List</span>
                                <span class="bg-opacity-primary color-primary rounded-pill fs-13 fw-500 px-3 py-1 d-inline-block">{{ count($kutipan) }} Total</span>
                            </div>
                            <div class="card-body">
                                <div class="userDatatable projectDatatable bg-white w-100 border-0">
                                    <div class="table-responsive">
                                        <table id="kutipan-table" class="table mb-0">
                                            <thead>
                                                <tr class="userDatatable-header">
                                                    <th><span class="userDatatable-title">No</span></th>
                                                    <th><span class="userDatatable-title">Nama</span></th>
                                                    <th><span class="userDatatable-title">No Mobile</span></th>
                                                    <th><span class="userDatatable-title">Status</span></th>
                                                    <th><span class="userDatatable-title">Created At</span></th>
                                                    <th class="text-right"><span class="userDatatable-title">Action</span></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($kutipan as $index => $item)
                                                    @php
                                                        $status = strtolower(trim((string) $item->waba_status));
                                                        $statusMap = [
                                                            'sent' => ['label' => 'Sent', 'class' => 'bg-opacity-primary color-primary'],
                                                            'delivered' => ['label' => 'Delivered', 'class' => 'bg-opacity-success color-success'],
                                                            'read' => ['label' => 'Read', 'class' => 'bg-opacity-success color-success'],
                                                            'pending' => ['label' => 'Pending', 'class' => 'bg-opacity-warning color-warning'],
                                                            'queued' => ['label' => 'Queued', 'class' => 'bg-opacity-warning color-warning'],
                                                            'failed' => ['label' => 'Failed', 'class' => 'bg-opacity-danger color-danger'],
                                                        ];
                                                        $statusInfo = $statusMap[$status] ?? ['label' => $item->waba_status ?: 'N/A', 'class' => 'bg-opacity-secondary color-dark'];
                                                    @endphp
                                                    <tr>
                                                        <td>
                                                            <div class="userDatatable-content">{{ $index + 1 }}</div>
                                                        </td>
                                                        <td>
                                                            <div class="d-flex align-items-center">
                                                                <div class="userDatatable-inline-title">
                                                                    <span class="text-dark fw-500">{{ $item->donator_name }}</span>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td>
                                                            <div class="userDatatable-content">{{ $item->mobile_no }}</div>
                                                        </td>
                                                        <td>
                                                            <span class="userDatatable-content-status rounded-pill d-inline-block {{ $statusInfo['class'] }}">{{ $statusInfo['label'] }}</span>
                                                        </td>
                                                        <td>
                                                            <div class="userDatatable-content">{{ optional($item->created_at)->format('d M Y, h:i A') }}</div>
                                                        </td>
                                                        <td class="text-right">
                                                            <form action="{{ route('kutipan.sendWhatsapp') }}" method="POST" class="d-inline">
                                                                @csrf
                                                                <input type="hidden" name="id" value="{{ $item->id }}">
                                                                <button type="submit" class="btn-send-whatsapp" title="Send Message">
                                                                    <span data-feather="message-square"></span>
                                                                    <span>Send Message</span>
                                                                </button>
                                                            </form>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/datatables.net@1.13.11/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/datatables.net-bs4@1.13.11/js/dataTables.bootstrap4.min.js"></script>
    <script>
        $(function () {
            $('#kutipan-table').DataTable({
                order: [],
                columnDefs: [
                    { orderable: false, targets: [0, -1] }
                ]
            });
        });
    </script>
@endsection