@extends('layouts.app')

@section('title', 'Transfer a Domain - SecureSoftPay')

@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
    .page-wrapper { display: flex; max-width: 1400px; margin: 120px auto 50px; gap: 40px; padding: 0 20px; }
    .page-sidebar { width: 280px; flex-shrink: 0; }
    
    /* --- Sidebar Styles --- */
    .desktop-sidebar .sidebar-block { margin-bottom: 30px; }
    .desktop-sidebar .sidebar-block h3 { font-size: 14px; font-weight: 600; margin-bottom: 15px; color: #555; text-transform: uppercase; letter-spacing: 0.5px; }
    .desktop-sidebar .sidebar-menu { list-style: none; padding-left: 0; }
    .desktop-sidebar .sidebar-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 15px; text-decoration: none; color: #0052cc; font-weight: 500; border-radius: 6px; margin-bottom: 5px; background-color: transparent; transition: background-color 0.2s; }
    .desktop-sidebar .sidebar-menu a:hover { background-color: #f0f5ff; }
    .desktop-sidebar .sidebar-menu a.active { background-color: #eef5ff; color: #0052cc; font-weight: 600; }
    .desktop-sidebar .sidebar-menu a i { font-size: 14px; width: 20px; text-align: center; }

    .mobile-sidebar { display: none; }
    .sidebar-card { background-color: #f8f9fa; border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 25px; overflow: hidden; }
    .sidebar-card-header { padding: 15px 20px; border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; gap: 10px; }
    .sidebar-card-header i { font-size: 16px; color: #555; }
    .sidebar-card-header h3 { font-size: 16px; font-weight: 600; color: #333; margin: 0; }
    .sidebar-card-body { padding: 20px; }
    .sidebar-dropdown { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; background-color: #fff; font-size: 14px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px; }

    /* --- Main Content --- */
    .page-main-content { flex-grow: 1; min-width: 0; }
    .page-main-content h1 { font-size: 28px; font-weight: 600; margin-bottom: 10px; }
    .page-main-content .subtitle { color: #555; margin-bottom: 30px; }

    /* --- Transfer Form Styles --- */
    .transfer-form-container {
        max-width: 600px;
        margin: 40px auto;
        background-color: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 40px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    }
    .transfer-form-container h2 {
        text-align: center;
        font-size: 24px;
        margin-bottom: 25px;
        color: #333;
    }
    .form-group {
        margin-bottom: 20px;
    }
    .form-group label {
        display: block;
        font-weight: 500;
        margin-bottom: 8px;
        color: #444;
    }
    .form-group .form-control {
        width: 100%;
        padding: 12px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 16px;
        outline: none;
    }
    .form-group .form-control:focus {
        border-color: #0052cc;
    }
    .input-group {
        display: flex;
        align-items: center;
    }
    .input-group-text {
        padding: 12px;
        background-color: #e9ecef;
        border: 1px solid #ddd;
        border-right: none;
        border-radius: 6px 0 0 6px;
        color: #555;
    }
    .input-group .form-control {
        border-radius: 0 6px 6px 0;
    }
    .btn-primary {
        width: 100%;
        padding: 14px;
        background-color: #0052cc;
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        margin-top: 10px;
        transition: background-color 0.2s;
    }
    .btn-primary:hover {
        background-color: #0041a3;
    }
    .btn-primary:disabled {
        background-color: #7fa9e6;
        cursor: not-allowed;
    }
    #transfer-result {
        margin-top: 20px;
        padding: 15px;
        border-radius: 6px;
        display: none;
        text-align: center;
        font-weight: 500;
    }
    #transfer-result.error {
        background-color: #fff5f5;
        color: #c53030;
        border: 1px solid #feb2b2;
    }
    #transfer-result.success {
        background-color: #f0fff4;
        color: #2f855a;
        border: 1px solid #c3e6cb;
    }

    @media (max-width: 992px) { 
        .page-wrapper { flex-direction: column; padding: 0 15px; margin-top: 100px; } 
        .page-sidebar.desktop-sidebar { display: none; } 
        .mobile-sidebar { display: block; width: 100%; margin-bottom: 30px; }
        .transfer-form-container { padding: 25px; }
    }
</style>
@endpush

@section('content')
<div class="page-wrapper">
    <aside class="page-sidebar desktop-sidebar">
        <div class="sidebar-block">
            <h3>Categories</h3>
            <ul class="sidebar-menu">
                @foreach($category_groups as $group)
                <li><a href="{{ route('pricing') }}"><i class="fas fa-server"></i> {{ htmlspecialchars(ucwords($group->name)) }}</a></li>
                @endforeach
            </ul>
        </div>
        <div class="sidebar-block">
            <h3>Actions</h3>
            <ul class="sidebar-menu">
                <li><a href="{{ route('domain-search') }}"><i class="fas fa-search"></i> Register a New Domain</a></li>
                <li><a href="{{ route('transfer-domain') }}" class="active"><i class="fas fa-exchange-alt"></i> Transfer in a Domain</a></li>
                <li><a href="{{ route('checkout.show') }}"><i class="fas fa-shopping-cart"></i> View Cart</a></li>
            </ul>
        </div>
    </aside>

    <main class="page-main-content">
        <h1>Transfer Your Domain</h1>
        
        <aside class="mobile-sidebar">
            <div class="sidebar-card">
                <div class="sidebar-card-header"><i class="fas fa-shopping-cart"></i><h3>Categories</h3></div>
                <div class="sidebar-card-body">
                    <select class="sidebar-dropdown" onchange="if (this.value) window.location.href=this.value;">
                        <option value="">- Choose Another Category -</option>
                        @foreach($category_groups as $group)
                            <option value="{{ route('pricing') }}">{{ htmlspecialchars(ucwords($group->name)) }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="sidebar-card">
                 <div class="sidebar-card-header"><i class="fas fa-plus"></i><h3>Actions</h3></div>
                <div class="sidebar-card-body">
                     <select class="sidebar-dropdown" onchange="if (this.value) window.location.href=this.value;">
                        <option value="{{ route('domain-search') }}">Register a New Domain</option>
                        <option value="{{ route('transfer-domain') }}" selected>Transfer in a Domain</option>
                        <option value="{{ route('checkout.show') }}">View Cart</option>
                    </select>
                </div>
            </div>
        </aside>

        <p class="subtitle">Transfer your existing domain to us and manage all your services in one place.</p>

        <div class="transfer-form-container">
            <h2>Start Your Domain Transfer</h2>
            <form id="transfer-form">
                @csrf
                <div class="form-group">
                    <label for="domain_name">Domain Name</label>
                    <div class="input-group">
                        <span class="input-group-text">www.</span>
                        <input type="text" id="domain_name" name="domain_name" class="form-control" placeholder="example.com" required autocomplete="off">
                    </div>
                </div>
                <div class="form-group">
                    <label for="auth_code">Authorization (EPP) Code</label>
                    <input type="text" id="auth_code" name="auth_code" class="form-control" placeholder="Enter your EPP code" required autocomplete="off">
                </div>
                <button type="submit" id="check-transfer-btn" class="btn-primary">Add to Cart</button>
            </form>
            <div id="transfer-result"></div>
        </div>

    </main>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const transferForm = document.getElementById('transfer-form');
    const resultDiv = document.getElementById('transfer-result');
    const checkBtn = document.getElementById('check-transfer-btn');

    transferForm.addEventListener('submit', function(e) {
        e.preventDefault();
        const domain = document.getElementById('domain_name').value.trim();
        const authCode = document.getElementById('auth_code').value.trim();
        const csrfToken = document.querySelector('input[name="_token"]').value;

        if (!domain || !authCode) {
            alert("Please enter both domain name and auth code.");
            return;
        }

        // UI আপডেট: লোডিং দেখাচ্ছে
        checkBtn.disabled = true;
        checkBtn.textContent = "Checking...";
        resultDiv.style.display = 'none';
        resultDiv.className = '';

        // AJAX রিকোয়েস্ট পাঠানো
        fetch('{{ route("ajax.check.transfer") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            },
            body: JSON.stringify({
                domain: domain,
                auth_code: authCode
            })
        })
        .then(response => response.json())
        .then(data => {
            checkBtn.disabled = false;
            checkBtn.textContent = "Add to Cart";

            if (data.success) {
                // ডোমেইন ট্রান্সফার যোগ্য হলে চেকআউট পেজে পাঠানো
                window.location.href = `{{ route('checkout.domain.transfer') }}?domain=${encodeURIComponent(domain)}&auth_code=${encodeURIComponent(authCode)}`;
            } else {
                // এরর মেসেজ দেখানো
                resultDiv.style.display = 'block';
                resultDiv.className = 'error';
                resultDiv.textContent = data.message;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            checkBtn.disabled = false;
            checkBtn.textContent = "Add to Cart";
            resultDiv.style.display = 'block';
            resultDiv.className = 'error';
            resultDiv.textContent = "An error occurred while checking domain status. Please try again.";
        });
    });
});
</script>
@endpush