@extends('components.dashboard.layout.layout')

@section('content')
    @include('components.alert')

    @php
        $selectedActions = is_array($leadsReminderSettings->action)
            ? $leadsReminderSettings->action
            : json_decode($leadsReminderSettings->action, true);

        $selectedActions = is_array($selectedActions) ? $selectedActions : [];
    @endphp

    <style>
        .reminder-settings-card {
            border: 1px solid #e5e7eb;
            border-radius: 20px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            overflow: hidden;
        }

        .reminder-settings-card__body {
            padding: 1.25rem;
        }

        .reminder-info-box {
            padding: 1rem;
            border-radius: 16px;
            border: 1px solid #e2e8f0;
            background: #f8fafc;
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }

        .reminder-info-box__icon {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #eef2ff;
            color: #4338ca;
            flex-shrink: 0;
            font-size: 1rem;
        }

        .reminder-info-box__title {
            margin: 0;
            font-size: 0.95rem;
            font-weight: 800;
            color: #111827;
        }

        .reminder-info-box__text {
            margin: 0.25rem 0 0;
            color: #64748b;
            font-size: 0.86rem;
            line-height: 1.55;
        }

        .reminder-required {
            color: #dc2626;
        }

        .reminder-action-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;
        }

        .reminder-action-card {
            display: block;
            cursor: pointer;
            margin: 0;
        }

        .reminder-action-card input {
            display: none;
        }

        .reminder-action-card__box {
            display: flex;
            align-items: flex-start;
            gap: 0.85rem;
            padding: 1rem;
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            background: #fff;
            transition: 0.2s ease;
            min-height: 112px;
        }

        .reminder-action-card__icon {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #f1f5f9;
            color: #334155;
            flex-shrink: 0;
            font-size: 1rem;
            transition: 0.2s ease;
        }

        .reminder-action-card__title {
            display: block;
            font-size: 0.95rem;
            font-weight: 800;
            color: #111827;
            margin-bottom: 0.25rem;
        }

        .reminder-action-card__text {
            display: block;
            color: #64748b;
            font-size: 0.84rem;
            line-height: 1.5;
        }

        .reminder-action-card input:checked + .reminder-action-card__box {
            border-color: #c7d2fe;
            background: #f8faff;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
        }

        .reminder-action-card input:checked + .reminder-action-card__box .reminder-action-card__icon {
            background: #eef2ff;
            color: #4338ca;
        }

        .reminder-actions-bar {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.75rem;
            flex-wrap: wrap;
            margin-top: 1rem;
        }

        .reminder-current-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.85rem;
            margin-bottom: 1rem;
        }

        .reminder-current-item {
            padding: 0.9rem;
            border-radius: 14px;
            border: 1px solid #e2e8f0;
            background: #fff;
            min-width: 0;
        }

        .reminder-current-item__label {
            font-size: 0.75rem;
            color: #64748b;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            margin-bottom: 0.25rem;
        }

        .reminder-current-item__value {
            font-size: 0.9rem;
            color: #111827;
            font-weight: 800;
            overflow-wrap: anywhere;
        }

        @media (max-width: 991.98px) {
            .reminder-current-grid,
            .reminder-action-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 575.98px) {
            .reminder-settings-card__body {
                padding: 1rem;
            }

            .reminder-actions-bar .asset-btn {
                width: 100%;
            }
        }
                        .form-section__title {
    margin: 0;
    font-size: 18px !important;
    font-weight: 700;
    color: #0f172a;
}
    </style>

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title
                    title="Reminder Settings"
                    description="Configure lead reminder limits, reminder intervals, and the actions triggered when reminders are processed.">
                    <a href="{{ url()->previous() }}" class="asset-btn asset-btn--secondary">
                        Back
                    </a>
                </x-page-title>

                <form method="POST" action="{{ route('leads-reminder-settings.update', [$leadsReminderSettings->id]) }}">
                    @csrf
                    @method('PUT')

                    <div class="reminder-info-box">
                        <div class="reminder-info-box__icon">
                            <i class="fas fa-bell"></i>
                        </div>

                        <div>
                            <h6 class="reminder-info-box__title">
                                Lead Reminder Automation
                            </h6>
                            <p class="reminder-info-box__text">
                                Control how many reminder attempts the system can create, how often they run, and what actions are applied to leads.
                            </p>
                        </div>
                    </div>

                    <div class="reminder-current-grid">
                        <div class="reminder-current-item">
                            <div class="reminder-current-item__label">Current Max Reminders</div>
                            <div class="reminder-current-item__value">
                                {{ $leadsReminderSettings->max_reminders ?? '—' }}
                            </div>
                        </div>

                        <div class="reminder-current-item">
                            <div class="reminder-current-item__label">Current Interval</div>
                            <div class="reminder-current-item__value">
                                {{ $leadsReminderSettings->interval_hours ?? '—' }} hours
                            </div>
                        </div>

                        <div class="reminder-current-item">
                            <div class="reminder-current-item__label">Selected Actions</div>
                            <div class="reminder-current-item__value">
                                {{ count($selectedActions) ? implode(', ', $selectedActions) : '—' }}
                            </div>
                        </div>
                    </div>

                    <div class="reminder-settings-card">
                        <div class="reminder-settings-card__body">
                            <div class="form-section">
                                <div class="form-section__head">
                                    <h5 class="form-section__title mb-1">Reminder Timing</h5>
                                    <p class="form-section__sub mb-0">
                                        Set the maximum number of reminders and the interval between each reminder attempt.
                                    </p>
                                </div>

                                <div class="asset-form-grid">
                                    <div class="asset-col-6">
                                        <label for="max_reminders" class="asset-label">
                                            Max Reminders <span class="reminder-required">*</span>
                                        </label>

                                        <input
                                            type="number"
                                            name="max_reminders"
                                            id="max_reminders"
                                            value="{{ old('max_reminders', $leadsReminderSettings->max_reminders) }}"
                                            class="asset-input @error('max_reminders') asset-invalid @enderror"
                                            min="1"
                                            required>

                                        @error('max_reminders')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="asset-col-6">
                                        <label for="interval_hours" class="asset-label">
                                            Interval Hours <span class="reminder-required">*</span>
                                        </label>

                                        <input
                                            type="number"
                                            name="interval_hours"
                                            id="interval_hours"
                                            value="{{ old('interval_hours', $leadsReminderSettings->interval_hours) }}"
                                            class="asset-input @error('interval_hours') asset-invalid @enderror"
                                            min="1"
                                            required>

                                        @error('interval_hours')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    {{-- 
                                    <div class="asset-col-6">
                                        <label for="delay_hours" class="asset-label">
                                            Delay Before First Reminder Hours
                                        </label>

                                        <input
                                            type="number"
                                            name="delay_hours"
                                            id="delay_hours"
                                            value="{{ old('delay_hours', $leadsReminderSettings->delay_hours) }}"
                                            class="asset-input @error('delay_hours') asset-invalid @enderror"
                                            min="1">

                                        @error('delay_hours')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    --}}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="reminder-settings-card mt-4">
                        <div class="reminder-settings-card__body">
                            <div class="form-section">
                                <div class="form-section__head">
                                    <h5 class="form-section__title mb-1">Reminder Actions</h5>
                                    <p class="form-section__sub mb-0">
                                        Choose what the system should do when a lead reminder is triggered.
                                    </p>
                                </div>

                                <div class="reminder-action-grid">
                                    <label class="reminder-action-card" for="send_email">
                                        <input
                                            type="checkbox"
                                            name="action[]"
                                            value="send_email"
                                            id="send_email"
                                            {{ in_array('send_email', old('action', $selectedActions)) ? 'checked' : '' }}>

                                        <span class="reminder-action-card__box">
                                            <span class="reminder-action-card__icon">
                                                <i class="fas fa-envelope"></i>
                                            </span>

                                            <span>
                                                <span class="reminder-action-card__title">
                                                    Send Email
                                                </span>
                                                <span class="reminder-action-card__text">
                                                    Send an email notification when the reminder action is processed.
                                                </span>
                                            </span>
                                        </span>
                                    </label>

                                    <label class="reminder-action-card" for="Unassign">
                                        <input
                                            type="checkbox"
                                            name="action[]"
                                            value="Unassign"
                                            id="Unassign"
                                            {{ in_array('Unassign', old('action', $selectedActions)) ? 'checked' : '' }}>

                                        <span class="reminder-action-card__box">
                                            <span class="reminder-action-card__icon">
                                                <i class="fas fa-user-minus"></i>
                                            </span>

                                            <span>
                                                <span class="reminder-action-card__title">
                                                    Unassign Lead
                                                </span>
                                                <span class="reminder-action-card__text">
                                                    Remove the current assignee from the lead when the reminder action is processed.
                                                </span>
                                            </span>
                                        </span>
                                    </label>
                                </div>

                                @error('action')
                                    <div class="invalid-feedback d-block mt-2">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="reminder-actions-bar">
                        <a href="{{ url()->previous() }}" class="asset-btn asset-btn--secondary">
                            Cancel
                        </a>

                        <button type="submit" class="asset-btn asset-btn--primary">
                            Save Settings
                        </button>
                    </div>
                </form>

            </div>
        </div>
    </div>
@endsection