@extends('Frontend.layouts.app')

@section('styles')
    <style>
        .bottom {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 20px;
            max-width: 600px;
            margin: 0 auto;
        }

        .title {
            font-size: 24px;
            color: #333;
            margin-bottom: 10px;
        }

        .subtitle {
            font-size: 16px;
            color: #666;
            margin-bottom: 20px;
        }

        .buttons {
            display: flex;
            gap: 10px;
        }

        .link-button {
            display: inline-block;
            text-decoration: none;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            text-align: center;
        }

        #unsubscribe {
            background-color: #ff4d4d;
            color: white;
        }

        #unsubscribe:hover {
            background-color: #cc0000;
        }

        #cancel, #go-back {
            background-color: #ddd;
            color: #333;
        }

        #cancel:hover, #go-back:hover {
            background-color: #bbb;
        }

    </style>
@endsection

@section('content')
    <div class="bottom">
        @if($url && !$action)
        <h2 class="title">{{__('Do you want to unsubscribe?')}}</h2>
        <p class="subtitle">{{__('If you unsubscribe, you will stop receiving periodical mail updates.')}}</p>
        @endif
        @if($url)
        <div class="buttons">
            <a href="" class="link-button" id="unsubscribe">{{__('Unsubscribe')}}</a>
            <a href="/" class="link-button" id="cancel">{{__('Cancel')}}</a>
        </div>
        @elseif($action)
        <h3>{{__('You have succesfully unsubscribed')}}</h3>
        <a href="/" class="link-button" id="go-back">{{__('Go back')}}</a>
            @else
        <h3>{{__('Unsubscribe failed, please try with a valid link.')}}</h3>
        @endif
    </div>
    </div>
@endsection