@extends('layouts.master')

@section('css')
<!-- Internal Data table css -->
<link href="{{ URL::asset('assets/plugins/datatable/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />
<link href="{{ URL::asset('assets/plugins/datatable/css/responsive.bootstrap4.min.css') }}" rel="stylesheet" />
@endsection

@section('page-header')
<!-- breadcrumb -->
<div class="breadcrumb-header justify-content-between">
    <div class="my-auto">
        <div class="d-flex">
            <h4 class="content-title mb-0 my-auto">العملاء</h4>
            <span class="text-muted mt-1 tx-13 mr-2 mb-0">/ مراسلات الواتساب</span>
        </div>
    </div>
</div>
<!-- breadcrumb -->
@endsection

@section('content')

<!-- row opened -->
<div class="row row-sm">
    <div class="col-xl-12">
        <div class="card card-primary">
            <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                <h3 class="card-title mb-0">
                    <i class="mdi mdi-whatsapp text-success ml-1"></i> قائمة العملاء للتواصل عبر الواتساب
                </h3>
            </div>

            <div class="card-body">

                <!-- صندوق إعداد الرسالة الديناميكية -->
                <div class="bg-light p-3 rounded mb-4 border">
                    <label for="customMessage" class="form-label font-weight-bold text-dark">
                        <i class="far fa-edit text-primary ml-1"></i> نص الرسالة (استخدم المتغير <code class="text-danger">{name}</code> لوضع اسم العميل تلقائياً):
                    </label>
                    <textarea id="customMessage" class="form-control" rows="2" style="resize: vertical;">أهلاً بك يا {name}، نتمنى لك يوماً سعيداً!</textarea>
                </div>

                <!-- جدول العملاء -->
                <div class="table-responsive">
                    <table class="table table-hover table-striped text-md-nowrap mg-b-0 text-center border">
                        <thead class="thead-light">
                            <tr>
                                <th class="wd-5p border-bottom-0">#</th>
                                <th class="wd-35p border-bottom-0">الاسم</th>
                                <th class="wd-25p border-bottom-0">رقم الهاتف</th>
                                <th class="wd-20p border-bottom-0">إجراء (واتساب)</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($customers as $key => $customer)
                                @php
                                    // تنظيف الرقم وإضافة كود الدولة
                                    $phone = preg_replace('/^0/', '966', trim($customer->phone));
                                @endphp
                                <tr>
                                    <td>{{ $customers->firstItem() + $key }}</td>
                                    <td class="font-weight-semibold">{{ $customer->name }}</td>
                                    <td class="text-muted">{{ $customer->phone ?? 'لا يوجد' }}</td>
                                    <td>
                                        @if($customer->phone)
                                            <button type="button"
                                                    class="btn btn-success btn-sm ripple"
                                                    onclick="sendWhatsApp('{{ $phone }}', '{{ addslashes($customer->name) }}')">
                                                <i class="fab fa-whatsapp ml-1"></i> إرسال رسالة
                                            </button>
                                        @else
                                            <span class="badge badge-secondary p-2">لا يوجد رقم</span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- روابط الـ Pagination -->
                <div class="d-flex justify-content-center mt-4">
                    {{ $customers->links() }}
                </div>

            </div>
        </div>
    </div>
</div>
<!-- /row -->

@endsection

@section('js')

<script>
function sendWhatsApp(phone, name) {
    // جلب نص الرسالة الحالية من المربع لحظة الضغط على الزرار
    const rawMessage = document.getElementById('customMessage').value;

    // استبدال {name} باسم العميل
    const personalizedMsg = rawMessage.replace(/{name}/g, name);

    // تجهيز رابط الواتساب وفتحه في تبويب جديد
    const whatsappUrl = `https://wa.me/${phone}?text=${encodeURIComponent(personalizedMsg)}`;
    window.open(whatsappUrl, '_blank');
}
</script>

@endsection