@extends('dashboard.admin.layouts.master')

@php
    $t = fn (string $key, array $replace = []) => trans('core.notification_settings.' . $key, $replace);
    $matrix = [
        ['doctor', 'database', 'doctor_in_app'],
        ['admins', 'database', 'admins_in_app'],
        ['patient', 'database', 'patient_in_app'],
        ['patient', 'push', 'patient_push'],
        ['patient', 'text', 'patient_text'],
    ];
    $checked = fn (string $event, string $audience, string $channel) => (bool) old(
        "events.$event.$audience.$channel",
        data_get($config, "events.$event.$audience.$channel", false)
    );
    $offsets = old('offsets') ?? collect($config['reminders']['offsets'])->map(fn ($minutes) => $minutes % 60 === 0
        ? ['value' => $minutes / 60, 'unit' => 'hours']
        : ['value' => $minutes, 'unit' => 'minutes'])->all();
    $placeholders = ':patient :doctor :clinic :branch :date :time :type :site';
@endphp

@section('toolbar')
    <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-dark fw-bold fs-3 flex-column justify-content-center my-0">{{ $t('title') }}</h1>
            <span class="text-muted fs-7 mt-1 mw-700px">{{ $t('intro') }}</span>
        </div>
    </div>
@endsection

@section('content')
    <div id="kt_app_content_container" class="app-container container-xxxl">
        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger"><ul class="mb-0">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>
        @endif

        {{-- Which providers are live, so the admin knows what "WhatsApp/SMS" and "push" will actually use --}}
        <div class="row g-5 mb-7">
            @foreach ($providers as $channel => $provider)
                <div class="col-md-4">
                    <div class="card card-flush h-100">
                        <div class="card-body d-flex align-items-center justify-content-between py-5">
                            <div>
                                <div class="text-muted fs-7">{{ $t('providers') }} · {{ $t('channels.' . $channel) }}</div>
                                @if ($provider)
                                    <div class="fw-bold fs-5 text-gray-900"><i class="bi bi-check-circle-fill text-success me-1"></i>{{ $provider->name }}</div>
                                @else
                                    <div class="fw-bold fs-5 text-gray-500"><i class="bi bi-dash-circle me-1"></i>{{ $t('provider_none') }}</div>
                                @endif
                            </div>
                            <a href="{{ route('admin.core.integrations.index') }}" class="btn btn-sm btn-light">{{ $t('configure') }}</a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <form method="POST" action="{{ route('admin.core.notification-settings.update') }}" id="notificationSettingsForm">
            @csrf
            @method('PUT')

            <div class="card card-flush">
                <div class="card-header card-header-stretch">
                    <ul class="nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bold" role="tablist">
                        @foreach (['events' => 'bi-bell', 'reminders' => 'bi-alarm', 'messages' => 'bi-chat-dots', 'test' => 'bi-send-check'] as $tab => $icon)
                            <li class="nav-item">
                                <a class="nav-link text-active-primary py-5 me-6 {{ $loop->first ? 'active' : '' }}" data-bs-toggle="tab" href="#ns_tab_{{ $tab }}">
                                    <i class="bi {{ $icon }} fs-4 me-2"></i>{{ $t('tab_' . $tab) }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>

                <div class="card-body">
                    <div class="tab-content">
                        {{-- Events × who × channel --}}
                        <div class="tab-pane fade show active" id="ns_tab_events" role="tabpanel">
                            <div class="table-responsive">
                                <table class="table table-row-dashed align-middle gy-4">
                                    <thead>
                                    <tr class="text-muted fw-bold fs-7 text-uppercase">
                                        <th class="min-w-175px">{{ $t('event') }}</th>
                                        @foreach ($matrix as [$audience, $channel, $label])
                                            <th class="text-center min-w-100px">{{ $t($label) }}</th>
                                        @endforeach
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach ($defaults['events'] as $event => $audiences)
                                        <tr>
                                            <td class="fw-bold text-gray-800">{{ $t('events.' . $event) }}</td>
                                            @foreach ($matrix as [$audience, $channel, $label])
                                                <td class="text-center">
                                                    @if (array_key_exists($channel, $audiences[$audience] ?? []))
                                                        <div class="form-check form-check-custom form-check-solid justify-content-center">
                                                            <input class="form-check-input" type="checkbox" value="1"
                                                                   name="events[{{ $event }}][{{ $audience }}][{{ $channel }}]"
                                                                   @checked($checked($event, $audience, $channel))>
                                                        </div>
                                                    @else
                                                        <span class="text-gray-300">—</span>
                                                    @endif
                                                </td>
                                            @endforeach
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        {{-- Reminders --}}
                        <div class="tab-pane fade" id="ns_tab_reminders" role="tabpanel">
                            <label class="form-check form-switch form-check-custom form-check-solid mb-8">
                                <input type="hidden" name="reminders_enabled" value="0">
                                <input class="form-check-input" type="checkbox" name="reminders_enabled" value="1" @checked(old('reminders_enabled', $config['reminders']['enabled']))>
                                <span class="form-check-label fw-bold fs-6">{{ $t('reminders_enabled') }}</span>
                            </label>

                            <div class="mb-8" id="offsetsRepeater">
                                <label class="form-label fw-bold">{{ $t('offsets') }}</label>
                                <div data-repeater-list="offsets">
                                    @foreach (count($offsets) ? $offsets : [['value' => 24, 'unit' => 'hours']] as $offset)
                                        <div data-repeater-item class="d-flex align-items-center gap-3 mb-3">
                                            <input type="number" min="1" name="value" value="{{ $offset['value'] }}" class="form-control w-125px">
                                            <select name="unit" class="form-select w-200px">
                                                <option value="hours" @selected($offset['unit'] === 'hours')>{{ $t('offset_hours') }}</option>
                                                <option value="minutes" @selected($offset['unit'] === 'minutes')>{{ $t('offset_minutes') }}</option>
                                            </select>
                                            <button type="button" data-repeater-delete class="btn btn-icon btn-light-danger"><i class="bi bi-trash"></i></button>
                                        </div>
                                    @endforeach
                                </div>
                                <button type="button" data-repeater-create class="btn btn-sm btn-light-primary"><i class="bi bi-plus-lg"></i>{{ $t('add_offset') }}</button>
                            </div>

                            <div class="mb-8">
                                <label class="form-label fw-bold d-block">{{ $t('reminder_types') }}</label>
                                @foreach (\App\Services\Notifications\NotificationSettings::REMINDER_TYPES as $type)
                                    <label class="form-check form-check-inline form-check-custom form-check-solid me-6">
                                        <input class="form-check-input" type="checkbox" name="reminder_types[]" value="{{ $type }}"
                                               @checked(in_array($type, old('reminder_types', $config['reminders']['types']), true))>
                                        <span class="form-check-label">{{ trans('notifications.types.' . $type) }}</span>
                                    </label>
                                @endforeach
                            </div>

                            <label class="form-check form-switch form-check-custom form-check-solid">
                                <input type="hidden" name="include_pending" value="0">
                                <input class="form-check-input" type="checkbox" name="include_pending" value="1" @checked(old('include_pending', $config['reminders']['include_pending']))>
                                <span class="form-check-label fw-semibold">{{ $t('include_pending') }}</span>
                            </label>
                            <div class="form-text ms-14">{{ $t('include_pending_hint') }}</div>
                        </div>

                        {{-- WhatsApp / SMS texts --}}
                        <div class="tab-pane fade" id="ns_tab_messages" role="tabpanel">
                            <div class="mb-8">
                                <label class="form-label fw-bold d-block">{{ $t('text_channel') }}</label>
                                @foreach (\App\Services\Notifications\NotificationSettings::TEXT_CHANNEL_OPTIONS as $option)
                                    <label class="form-check form-check-inline form-check-custom form-check-solid me-6 mb-2">
                                        <input class="form-check-input" type="radio" name="text_channel" value="{{ $option }}" @checked(old('text_channel', $config['text_channel']) === $option)>
                                        <span class="form-check-label">{{ $t('text_channel_' . $option) }}</span>
                                    </label>
                                @endforeach
                            </div>

                            <div class="notice d-flex bg-light-info rounded border-info border border-dashed p-4 mb-8">
                                <i class="bi bi-info-circle fs-3 text-info me-3"></i>
                                <div class="fs-7 text-gray-700">
                                    {!! str_replace(':placeholders', '<bdi dir="ltr"><code>' . e($placeholders) . '</code></bdi>', e($t('texts_hint', ['placeholders' => ':placeholders']))) !!}
                                    <div class="mt-2">{{ $t('template_hint') }}</div>
                                </div>
                            </div>

                            @foreach ($textKeys as $key)
                                <div class="border border-dashed rounded p-5 mb-5">
                                    <h4 class="fw-bold mb-4">{{ $t('texts.' . $key) }}</h4>
                                    <div class="row g-4">
                                        @foreach (['ar' => 'العربية', 'en' => 'English'] as $locale => $language)
                                            <div class="col-md-6" dir="{{ $locale === 'ar' ? 'rtl' : 'ltr' }}">
                                                <label class="form-label">{{ $language }}</label>
                                                <textarea name="texts[{{ $key }}][{{ $locale }}]" rows="2" class="form-control"
                                                          placeholder="{{ trans('notifications.text.' . $key, [], $locale) }}">{{ old("texts.$key.$locale", data_get($config, "texts.$key.$locale")) }}</textarea>
                                            </div>
                                        @endforeach
                                        <div class="col-md-8">
                                            <label class="form-label">{{ $t('template_name') }}</label>
                                            <input type="text" name="whatsapp_templates[{{ $key }}][name]" dir="ltr" class="form-control form-control-sm"
                                                   value="{{ old("whatsapp_templates.$key.name", data_get($config, "whatsapp_templates.$key.name")) }}" placeholder="e.g. {{ $key }}">
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label">{{ $t('template_language') }}</label>
                                            <select name="whatsapp_templates[{{ $key }}][language]" class="form-select form-select-sm">
                                                @foreach (['ar' => 'ar', 'en' => 'en', 'en_US' => 'en_US'] as $code => $label)
                                                    <option value="{{ $code }}" @selected(old("whatsapp_templates.$key.language", data_get($config, "whatsapp_templates.$key.language", 'ar')) === $code)>{{ $label }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        {{-- Test send + delivery log (not part of the saved form) --}}
                        <div class="tab-pane fade" id="ns_tab_test" role="tabpanel">
                            <div class="notice d-flex bg-light-warning rounded border-warning border border-dashed p-4 mb-8">
                                <i class="bi bi-hdd-network fs-3 text-warning me-3"></i>
                                <div class="fs-7 text-gray-700">{{ $t('server_note') }}</div>
                            </div>

                            <h3 class="fw-bold mb-5">{{ $t('test_title') }}</h3>
                            <div class="row g-4 align-items-end mb-10" id="testSendBox">
                                <div class="col-md-3">
                                    <label class="form-label">{{ $t('test_phone') }}</label>
                                    <input type="text" id="testPhone" dir="ltr" class="form-control" placeholder="01012345678">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label">{{ $t('test_channel') }}</label>
                                    <select id="testChannel" class="form-select">
                                        <option value="whatsapp">{{ $t('channels.whatsapp') }}</option>
                                        <option value="sms">{{ $t('channels.sms') }}</option>
                                    </select>
                                </div>
                                <div class="col-md-5">
                                    <label class="form-label">{{ $t('test_message') }}</label>
                                    <input type="text" id="testMessage" class="form-control" value="{{ $t('test_default_message', ['site' => \App\Http\Controllers\Admin\Core\NotificationSettingsController::siteName()]) }}">
                                </div>
                                <div class="col-md-2">
                                    <button type="button" id="testSendBtn" class="btn btn-light-primary w-100"><i class="bi bi-send"></i>{{ $t('test_send') }}</button>
                                </div>
                                <div class="col-12"><div id="testResult" class="fw-semibold"></div></div>
                            </div>

                            <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-4">
                                <h3 class="fw-bold mb-0">{{ $t('log_title') }}</h3>
                                <div class="d-flex gap-3">
                                    <select id="logChannel" class="form-select form-select-sm w-150px">
                                        <option value="">{{ $t('all_channels') }}</option>
                                        @foreach (['whatsapp', 'sms', 'push'] as $channel)
                                            <option value="{{ $channel }}">{{ $t('channels.' . $channel) }}</option>
                                        @endforeach
                                    </select>
                                    <select id="logStatus" class="form-select form-select-sm w-150px">
                                        <option value="">{{ $t('all_statuses') }}</option>
                                        @foreach (['sent', 'failed', 'skipped'] as $status)
                                            <option value="{{ $status }}">{{ $t('status_' . $status) }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <table class="table align-middle table-row-dashed fs-6 gy-3 w-100" id="deliveriesTable">
                                <thead>
                                <tr class="text-muted fw-bold fs-7 text-uppercase">
                                    <th>{{ $t('log_date') }}</th>
                                    <th>{{ $t('test_channel') }}</th>
                                    <th>{{ $t('log_to') }}</th>
                                    <th>{{ $t('log_type') }}</th>
                                    <th>{{ $t('log_status') }}</th>
                                    <th class="min-w-250px">{{ $t('log_error') }}</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="card-footer d-flex justify-content-end">
                    <button type="submit" class="btn btn-primary">{{ trans('dash_site.Save') }}</button>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('js')
    <script src="{{ asset('assets/plugins/custom/formrepeater/formrepeater.bundle.js') }}"></script>
    <script type="text/javascript" src="{{ asset('vendor/jsvalidation/js/jsvalidation.js') }}"></script>
    {!! $validator !!}
    <script>
        $(function () {
            $('#offsetsRepeater').repeater({
                initEmpty: false,
                defaultValues: {value: 2, unit: 'hours'},
                show: function () { $(this).slideDown(); },
                hide: function (deleteElement) { $(this).slideUp(deleteElement); }
            });

            $('#notificationSettingsForm').on('invalid-form.validate', function (event, validator) {
                var first = validator.errorList.length ? validator.errorList[0].element : null;
                var pane = first ? $(first).closest('.tab-pane') : $();
                if (pane.length && !pane.hasClass('active')) {
                    bootstrap.Tab.getOrCreateInstance(document.querySelector('a[href="#' + pane.attr('id') + '"]')).show();
                }
            });

            var deliveries = null;
            document.querySelector('a[href="#ns_tab_test"]').addEventListener('shown.bs.tab', function () {
                if (deliveries) {
                    deliveries.ajax.reload();
                    return;
                }
                deliveries = $('#deliveriesTable').DataTable({
                    processing: true,
                    serverSide: true,
                    searching: false,
                    dom: "<'table-responsive'tr><'row mt-4'<'col-md-5'i><'col-md-7 d-flex justify-content-end'p>>",
                    ajax: {
                        url: @json(route('admin.core.notification-settings.deliveries')),
                        data: function (d) { d.channel = $('#logChannel').val(); d.status = $('#logStatus').val(); }
                    },
                    columns: [
                        {data: 'created_at', name: 'created_at'},
                        {data: 'channel', name: 'channel', orderable: false},
                        {data: 'to', name: 'to', orderable: false},
                        {data: 'notification_type', name: 'notification_type'},
                        {data: 'status', name: 'status'},
                        {data: 'details', name: 'details', orderable: false},
                    ],
                    order: [[0, 'desc']]
                });
            });
            $('#logChannel, #logStatus').on('change', function () { deliveries && deliveries.ajax.reload(); });

            $('#testSendBtn').on('click', function () {
                var button = this;
                var result = document.getElementById('testResult');
                button.disabled = true;
                result.className = 'fw-semibold text-muted';
                result.textContent = '…';

                fetch(@json(route('admin.core.notification-settings.test')), {
                    method: 'POST',
                    headers: {'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content},
                    body: JSON.stringify({phone: $('#testPhone').val(), channel: $('#testChannel').val(), message: $('#testMessage').val()})
                }).then(function (response) {
                    return response.json().then(function (json) { return {ok: response.ok, json: json}; });
                }).then(function (res) {
                    result.className = 'fw-semibold ' + (res.ok ? 'text-success' : 'text-danger');
                    result.textContent = res.json.message || Object.values(res.json.errors || {}).flat().join(' ');
                    deliveries && deliveries.ajax.reload();
                }).finally(function () { button.disabled = false; });
            });
        });
    </script>
@endsection