<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Verify Domain</title>
    <meta content="" name="description">
    <meta content="" name="keywords">

    <!-- Favicons -->
    <link href="" rel="icon">
    <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.3/dist/semantic.min.css">
    <script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.3/dist/semantic.min.js"></script>
    <!-- Bootstrap Styles -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link href="https://api.fontshare.com/v2/css?f[]=satoshi@300,301,400,401,500,501,700,701,900,901&display=swap"
        rel="stylesheet">

    <!-- font-awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
    <link rel="stylesheet" href="{{ asset('assets/auth.css') }}">
    <!-- Toastr CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
</head>

<body>
<div class="container">
    <h1>Instructions to verify domain. Read and apply carefully.</h1>
    
    <div class="domain-details">
        
        <div class="alert alert-{{$domain->getDomain()->getState() == 'active'?'success':'danger'}}">
                    <ul>
                        
                            <li>Domain is {{$domain->getDomain()->getState()}}</li>
                       
                    </ul>
        </div>
        
        <h2>Domain Information</h2>
        <p><strong>Name:</strong> {{ $domain->getDomain()->getName() }}</p>
       
        <p><strong>State:</strong> {{ $domain->getDomain()->getState() }}</p>
       
    </div>

    <div class="dns-records">
         <h2>Step 1: Add Forwarder</h2>
        
            <div class="record">
                <p>Forward your email to internal email. i.e <span class="alert-success"><b>kundesone.{{ $domain->getDomain()->getName() }}@mailgun.kundesone.no</b></span>. Make sure you forward only your company email that you added on the time of registration.</p>
                
            </div>
       
        
        
         <h2>Step 2: Add Outbound DNS Records</h2>
        @foreach($domain->getOutboundDnsRecords() as $record)
            <div class="record">
                <p><strong>Type:</strong> {{ $record->getType() }}</p>
                <p><strong>Name:</strong> {{ $record->getName() }}</p>
                <p><strong>Value:</strong> {{ $record->getValue() }}</p>
            </div>
        @endforeach
        
        
        <h2>Step 3: Add Inbound DNS Records</h2>
        @foreach($domain->getInboundDnsRecords() as $record)
            <div class="record">
                <p><strong>Type:</strong> {{ $record->getType() }}</p>
                <p><strong>Name:</strong> {{ $domain->getDomain()->getName() }}</p>
                <p><strong>Value:</strong> {{ $record->getValue() }}</p>
                <p><strong>Priority:</strong> 10</p>
            </div>
        @endforeach
        
        
        
        <h2>Note: DNS Propagation Time</h2>
        
            <div class="record">
                <p>DNS Propagation can take upto 48 hours. In this case your domain will not be active.</p>
               
            </div>
        

       
    </div>
    
     <form id="verify-form" action="{{route('verifyDomain')}}" method="post">
         
         @csrf
         
         <input type="hidden" name="domain" value="{{$domain->getDomain()->getName()}}"/>
                  
                   <button type="submit" class="btn signup">Verify Domain
                    </button>
    </form>
    
</div>

<style>
    
    #verify-form{
        display:flex;
        justify-content: flex-end;
    }
    
.btn.signup{
    background:#748c62;
    color:white;
}

.container {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

h1, h2 {
    color: #333;
}

.message {
    background-color: #f0f0f0;
    padding: 10px;
    border-left: 5px solid green;
    margin-bottom: 20px;
}

.domain-details, .dns-records {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 20px;
}

.record {
    background-color: #f9f9f9;
    border: 1px solid #eee;
    padding: 8px;
    margin-bottom: 10px;
    word-break: break-all;
}

    
    
</style>


</body>
</html>
