@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'Email Setting')

@section('content')
    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-6 gap-3">
        <h1 class="text-2xl font-bold">Email Setting</h1>
    </div>

    <div class="card">
        <form action="{{ route('admin.setting.update') }}" method="POST">
            @csrf

            <div class="grid grid-cols-1 gap-4">

                @php
                    $fields = [
                        ['name' => 'sender_name', 'type' => 'text', 'label' => 'Sender Name'],
                        ['name' => 'sender_email', 'type' => 'email', 'label' => 'Sender Email'],
                        ['name' => 'smtp_host', 'type' => 'text', 'label' => 'SMTP Host'],
                        ['name' => 'smtp_username', 'type' => 'text', 'label' => 'SMTP Username'],
                        ['name' => 'smtp_password', 'type' => 'text', 'label' => 'SMTP Password'],
                        ['name' => 'smtp_port', 'type' => 'number', 'label' => 'SMTP Port'],
                    ];
                @endphp

                @foreach ($fields as $field)
                    <div class="w-full">
                        <div class="mb-4 input-with-label">
                            <label for="{{ $field['name'] }}">{{ $field['label'] }} <span
                                    class="text-red-500">*</span></label>
                            <input type="{{ $field['type'] }}" id="{{ $field['name'] }}" name="{{ $field['name'] }}"
                                value="{{ old($field['name'], $emailSetting->{$field['name']} ?? '') }}" required>
                            @error($field['name'])
                                <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                @endforeach


                <div class="w-full">
                    <div class="mb-4 input-with-label">
                        <label for="smtp_encryption">SMTP Encryption <span class="text-red-500">*</span></label>
                        <select class="form-select" id="smtp_encryption" name="smtp_encryption" required>
                            @foreach (['tls', 'ssl'] as $option)
                                <option value="{{ $option }}"
                                    {{ old('smtp_encryption', $emailSetting->smtp_encryption ?? '') === $option ? 'selected' : '' }}>
                                    {{ strtoupper($option) }}
                                </option>
                            @endforeach
                        </select>
                        @error('smtp_encryption')
                            <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="w-full">
                    <div class="mb-4 input-with-label">
                        <label for="mail_driver">SMTP Driver <span class="text-red-500">*</span></label>
                        <select class="form-select" id="mail_driver" name="mail_driver" required>
                            @foreach (['smtp'] as $driver)
                                <option value="{{ $driver }}"
                                    {{ old('mail_driver', $emailSetting->mail_driver ?? '') === $driver ? 'selected' : '' }}>
                                    {{ ucfirst($driver) }}
                                </option>
                            @endforeach
                        </select>
                        @error('mail_driver')
                            <div class="text-red-500 text-sm mt-1">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

            </div>

            <div class="mb-4 mt-8">
                <button type="submit" class="btn btn-primary">Update
                    Setting</button>
            </div>
        </form>
    </div>

    <!-- Test Email Section -->
    <div class="card mt-6">
        <h4 class="text-lg font-semibold mb-4">Test Email Configuration</h4>
        <p class="text-gray-600 mb-4">Send a test email to verify your SMTP settings are working correctly.</p>

        <form id="test-email-form">
            @csrf
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
                <div class="lg:col-span-8">
                    <div class="mb-4 input-with-label">
                        <label for="test_email">Test Email Address</label>
                        <input type="email"
                            id="test_email" name="test_email" placeholder="Enter email address to send test email" required>
                    </div>
                </div>
                <div class="lg:col-span-4">
                    <div class="mb-4 input-with-label">
                        <button type="submit"
                            class="btn btn-primary btn-black">
                            <i class="fas fa-paper-plane me-2"></i>Send Test Email
                        </button>
                    </div>
                </div>
            </div>
        </form>

        <!-- Test Results -->
        <div id="test-results" class="mt-4 hidden">
            <div class="p-4 rounded-md border" id="test-alert">
                <span id="test-message"></span>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            $('#test-email-form').on('submit', function(e) {
                e.preventDefault();

                const form = $(this);
                const submitBtn = form.find('button[type="submit"]');
                const originalText = submitBtn.html();

                // Disable button and show loading
                submitBtn.prop('disabled', true).html(
                    '<i class="fas fa-spinner fa-spin me-2"></i>Sending...');

                $.ajax({
                    url: '{{ route('admin.setting.test-email') }}',
                    method: 'POST',
                    data: form.serialize(),
                    success: function(response) {
                        const alertClass = response.success ?
                            'bg-green-50 border-green-200 text-green-800' :
                            'bg-red-50 border-red-200 text-red-800';
                        const iconClass = response.success ? 'fas fa-check-circle' :
                            'fas fa-exclamation-triangle';

                        $('#test-alert').removeClass(
                            'bg-green-50 border-green-200 text-green-800 bg-red-50 border-red-200 text-red-800'
                        ).addClass(alertClass);
                        $('#test-message').html('<i class="' + iconClass + ' me-2"></i>' +
                            response.message);
                        $('#test-results').removeClass('hidden');

                        if (response.success) {
                            form[0].reset();
                        }
                    },
                    error: function(xhr) {
                        let message = 'An error occurred while sending test email.';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            message = xhr.responseJSON.message;
                        }

                        $('#test-alert').removeClass(
                            'bg-green-50 border-green-200 text-green-800 bg-red-50 border-red-200 text-red-800'
                        ).addClass('bg-red-50 border-red-200 text-red-800');
                        $('#test-message').html(
                            '<i class="fas fa-exclamation-triangle me-2"></i>' + message);
                        $('#test-results').removeClass('hidden');
                    },
                    complete: function() {
                        submitBtn.prop('disabled', false).html(originalText);
                    }
                });
            });
        });
    </script>
@endpush