@extends('admin.layouts.app')

@section('panel')
@php
    $pageTitle = 'Vendor Email Settings';

    $vendorVerified = !empty($setting->admin_vendor_email_verified_at);
    $orderVerified = !empty($setting->admin_order_email_verified_at);
@endphp

@push('breadcrumb-plugins')
    <a href="{{ route('admin.vendors.index') }}" class="btn btn-outline--primary btn-sm">
        <i class="las la-arrow-left"></i> Back
    </a>
@endpush

<div class="pe-page">

    <div class="pe-hero">
        <div>
            <div class="pe-kicker">PRO EARN EMAIL SYSTEM</div>
            <h3>Vendor & Order Email Settings</h3>
            <p>Admin notification email add/edit করুন, OTP দিয়ে verify করুন। Verified হলে email locked হিসেবে কাজ করবে।</p>
        </div>
        <div class="pe-hero-icon">
            <i class="las la-envelope-open-text"></i>
        </div>
    </div>

    @if($errors->any())
        <div class="alert alert--danger">
            @foreach($errors->all() as $error)
                <div>{{ $error }}</div>
            @endforeach
        </div>
    @endif

    @if(session('success'))
        <div class="alert alert--success">{{ session('success') }}</div>
    @endif

    @if(session('error'))
        <div class="alert alert--danger">{{ session('error') }}</div>
    @endif

    <div class="card pe-card">
        <div class="card-body">
            <h5 class="pe-card-title">
                <i class="las la-edit"></i> Email Address Setup
            </h5>

            <form method="POST" action="{{ route('admin.vendors.email-settings.update') }}">
                @csrf

                <div class="row gy-3">
                    <div class="col-md-6">
                        <label class="fw-bold">Vendor Notification Email</label>
                        <input type="email" name="admin_vendor_email" value="{{ old('admin_vendor_email', $setting->admin_vendor_email ?? '') }}" class="form-control" placeholder="admin-vendor@gmail.com">

                        <div class="pe-status mt-2 {{ $vendorVerified ? 'verified' : 'unverified' }}">
                            @if($vendorVerified)
                                <i class="las la-check-circle"></i> Verified & Locked
                            @else
                                <i class="las la-exclamation-circle"></i> Not Verified
                            @endif
                        </div>

                        <small class="text-muted d-block mt-1">
                            Vendor apply, vendor confirmed notification এই email এ যাবে।
                        </small>
                    </div>

                    <div class="col-md-6">
                        <label class="fw-bold">Admin Order Notification Email</label>
                        <input type="email" name="admin_order_email" value="{{ old('admin_order_email', $setting->admin_order_email ?? '') }}" class="form-control" placeholder="admin-order@gmail.com">

                        <div class="pe-status mt-2 {{ $orderVerified ? 'verified' : 'unverified' }}">
                            @if($orderVerified)
                                <i class="las la-check-circle"></i> Verified & Locked
                            @else
                                <i class="las la-exclamation-circle"></i> Not Verified
                            @endif
                        </div>

                        <small class="text-muted d-block mt-1">
                            Admin product order notification এই email এ যাবে।
                        </small>
                    </div>
                </div>

                <button class="btn btn--primary w-100 h-45 mt-3">
                    Save Email Settings
                </button>
            </form>
        </div>
    </div>

    <div class="row gy-3 mt-1">
        <div class="col-lg-6">
            <div class="card pe-card h-100">
                <div class="card-body">
                    <h5 class="pe-card-title">
                        <i class="las la-store"></i> Verify Vendor Notification Email
                    </h5>

                    <div class="pe-email-box">
                        {{ $setting->admin_vendor_email ?? 'No vendor email added' }}
                    </div>

                    <form method="POST" action="{{ route('admin.vendors.email-settings.send-otp') }}" class="mt-3">
                        @csrf
                        <input type="hidden" name="type" value="vendor">
                        <button class="btn btn--primary w-100 h-45" {{ empty($setting->admin_vendor_email) ? 'disabled' : '' }}>
                            Send OTP
                        </button>
                    </form>

                    <form method="POST" action="{{ route('admin.vendors.email-settings.verify-otp') }}" class="mt-3">
                        @csrf
                        <input type="hidden" name="type" value="vendor">

                        <label class="fw-bold">Enter OTP</label>
                        <input type="text" name="otp" class="form-control" placeholder="6 digit OTP" required>

                        <button class="btn btn--success w-100 h-45 mt-2">
                            Verify Vendor Email
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card pe-card h-100">
                <div class="card-body">
                    <h5 class="pe-card-title">
                        <i class="las la-shopping-bag"></i> Verify Admin Order Email
                    </h5>

                    <div class="pe-email-box">
                        {{ $setting->admin_order_email ?? 'No order email added' }}
                    </div>

                    <form method="POST" action="{{ route('admin.vendors.email-settings.send-otp') }}" class="mt-3">
                        @csrf
                        <input type="hidden" name="type" value="order">
                        <button class="btn btn--primary w-100 h-45" {{ empty($setting->admin_order_email) ? 'disabled' : '' }}>
                            Send OTP
                        </button>
                    </form>

                    <form method="POST" action="{{ route('admin.vendors.email-settings.verify-otp') }}" class="mt-3">
                        @csrf
                        <input type="hidden" name="type" value="order">

                        <label class="fw-bold">Enter OTP</label>
                        <input type="text" name="otp" class="form-control" placeholder="6 digit OTP" required>

                        <button class="btn btn--success w-100 h-45 mt-2">
                            Verify Order Email
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection

@push('style')
<style>
.pe-page{--blue:#0878f7;--navy:#06194a;--sky:#eaf5ff;--border:#dbeafe}
.pe-hero{background:linear-gradient(135deg,#fff,#eaf5ff 55%,#0878f7);border:1px solid var(--border);border-radius:18px;padding:22px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 10px 30px rgba(8,120,247,.10)}
.pe-kicker{font-size:12px;font-weight:900;color:var(--blue);letter-spacing:.8px}
.pe-hero h3{font-weight:900;color:var(--navy);margin:4px 0}
.pe-hero p{font-weight:700;color:#64748b;margin:0}
.pe-hero-icon{width:70px;height:70px;border-radius:22px;background:#fff;color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:42px;box-shadow:0 8px 25px rgba(8,120,247,.18)}
.pe-card{border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(15,23,42,.05)}
.pe-card-title{font-weight:900;color:var(--navy);display:flex;align-items:center;gap:8px}
.pe-card-title i{color:var(--blue);font-size:22px}
.pe-status{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:6px 10px;font-weight:900;font-size:12px}
.pe-status.verified{background:#ecfdf5;color:#16a34a;border:1px solid #bbf7d0}
.pe-status.unverified{background:#fff7ed;color:#ea580c;border:1px solid #fed7aa}
.pe-email-box{background:#eaf5ff;border:1px solid #bfdbfe;color:#0757b8;border-radius:14px;padding:12px;font-weight:900;word-break:break-all}
</style>
@endpush