@extends('admin.admin_dashboard')

@section('admin')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<div class="page-content">
    <!-- Breadcrumb -->
    <div class="page-breadcrumb d-flex align-items-center mb-4" style="background: linear-gradient(135deg, #007bff, #0056b3); padding: 15px; border-radius: 8px;">
        <div class="ps-3 d-flex align-items-center">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 p-0" style="font-size: 1.1rem; color: #fff;">
                    <li class="breadcrumb-item d-flex align-items-center">
                        <a href="{{ route('admin.dashboard') }}" class="breadcrumb-icon text-white" style="transition: transform 0.3s ease; display: flex; align-items: center;">
                            <i class="bx bx-home-alt" style="font-size: 1.5rem;"></i>
                        </a>
                    </li>
                    <li class="breadcrumb-item active text-muted" aria-current="page" style="display: flex; align-items: center;">
                        <span class="text-white">SMTP Settings</span>
                    </li>
                </ol>
            </nav>
        </div>
    </div>
    <!-- End Breadcrumb -->

    <!-- Card for SMTP Settings -->
    <div class="card glass-card border-0 shadow-lg">
        <div class="card-body p-5">
            <!-- Section Title -->
            <h3 class="fw-bold text-center text-gradient mb-4" style="font-size: 2rem; color: #007bff;">
                📧 SMTP Settings
            </h3>
            <p class="text-center text-muted mb-4">Update your SMTP configuration settings.</p>

            <!-- Form to update SMTP Settings -->
            <form id="myForm" action="{{ route('update.smtp') }}" method="post" class="row g-4" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="id" value="{{ $smtp->id }}">

                <!-- Mailer -->
                <div class="form-group col-md-6">
                    <label for="mailer" class="form-label fw-bold text-dark">
                        <i class="bx bx-mail-send"></i> Mailer
                    </label>
                    <input type="text" name="mailer" class="form-control custom-input" id="mailer" value="{{ $smtp->mailer }}">
                </div>

                <!-- Host -->
                <div class="form-group col-md-6">
                    <label for="host" class="form-label fw-bold text-dark">
                        <i class="bx bx-globe"></i> Host
                    </label>
                    <input type="text" name="host" class="form-control custom-input" id="host" value="{{ $smtp->host }}">
                </div>

                <!-- Port -->
                <div class="form-group col-md-6">
                    <label for="port" class="form-label fw-bold text-dark">
                        <i class="bx bx-cog"></i> Port
                    </label>
                    <input type="text" name="port" class="form-control custom-input" id="port" value="{{ $smtp->port }}">
                </div>

                <!-- Username -->
                <div class="form-group col-md-6">
                    <label for="username" class="form-label fw-bold text-dark">
                        <i class="bx bx-user"></i> Username
                    </label>
                    <input type="text" name="username" class="form-control custom-input" id="username" value="{{ $smtp->username }}">
                </div>

                <!-- Password -->
                <div class="form-group col-md-6">
                    <label for="password" class="form-label fw-bold text-dark">
                        <i class="bx bx-lock"></i> Password
                    </label>
                    <input type="password" name="password" class="form-control custom-input" id="password" value="{{ $smtp->password }}">
                </div>

                <!-- Encryption -->
                <div class="form-group col-md-6">
                    <label for="encryption" class="form-label fw-bold text-dark">
                        <i class="bx bx-shield"></i> Encryption
                    </label>
                    <input type="text" name="encryption" class="form-control custom-input" id="encryption" value="{{ $smtp->encryption }}">
                </div>

                <!-- From Address -->
                <div class="form-group col-md-6">
                    <label for="from_address" class="form-label fw-bold text-dark">
                        <i class="bx bx-mail-send"></i> From Address
                    </label>
                    <input type="email" name="from_address" class="form-control custom-input" id="from_address" value="{{ $smtp->from_address }}">
                </div>

                <!-- Submit Button -->
                <div class="col-md-12 text-center">
                    <button type="submit" class="btn save-btn">
                        <i class="bx bx-save" style="font-size: 1.4rem;"></i> Save Changes
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Custom Styles for Enhanced UI/UX -->
<style>
    /* Glassmorphism Effect */
    .glass-card {
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(12px);
        border-radius: 16px;
        padding: 25px;
        box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease-in-out;
    }

    .glass-card:hover {
        transform: scale(1.03);
        box-shadow: 0px 18px 36px rgba(0, 0, 0, 0.2);
    }

    /* Custom Input Styling */
    .custom-input {
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        padding: 14px;
        font-size: 1rem;
        background: rgba(255, 255, 255, 0.85);
        transition: all 0.3s ease-in-out;
        height: 50px;
    }

    .custom-input:focus {
        border-color: #007bff;
        box-shadow: 0px 0px 12px rgba(0, 123, 255, 0.5);
    }

    /* Save Button */
    .save-btn {
        background: linear-gradient(135deg, #007bff, #0056b3);
        border: none;
        border-radius: 12px;
        padding: 14px 28px;
        font-size: 1.2rem;
        font-weight: bold;
        color: white;
        text-transform: uppercase;
        transition: all 0.3s ease-in-out;
        position: relative;
        overflow: hidden;
        box-shadow: 0px 6px 16px rgba(0, 123, 255, 0.4);
    }

    .save-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0px 12px 28px rgba(0, 123, 255, 0.5);
    }

    /* Heading Styling */
    .text-gradient {
        background: linear-gradient(to left, #fca311, #6a1b9a);
        -webkit-background-clip: text;
        color: transparent;
    }
</style>

<script>
    $(document).ready(function() {
        // Optionally add some JavaScript functionality here if needed
    });
</script>

@endsection