<?php
/**
 * @var \App\View\AppView $this
 */
use Cake\Core\Configure;

$debug = Configure::read('debug');
$this->assign('title', 'Sign Up');
?>
<style>
    main.main {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
    }
    :root {
        --primary-red: #4A90E2;
        --active-red: #d32f2f;
    }
    .container-full {
        display: flex;
        height: 100vh;
        width: 100vw;
        background-color: #fff;
    }
    .left-panel {
        flex: 0 0 50%;
        display: flex;
        flex-direction: column;
        padding: 40px 80px;
    }
    .logo {
        margin-bottom: 120px;
    }
    .logo img {
        width: 300px;
        height: auto;
    }
    .form-container {
        max-width: 400px;
        width: 100%;
        margin: 0 auto;
    }
    .form-container h1 {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 40px;
        color: #1a1a1a;
    }
    .input-group {
        width: 100%;
        margin-bottom: 24px;
        position: relative;
    }
    .input-group label {
        position: absolute;
        top: -10px;
        left: 12px;
        background: #fff;
        padding: 0 5px;
        font-size: 12px;
        color: #888;
        z-index: 1;
        transition: color 0.2s;
    }
    .input-wrapper {
        width: 100%;
        position: relative;
    }
    .input-wrapper input {
        width: 100% !important;
        box-sizing: border-box;
        display: block;
        padding: 14px 16px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        font-size: 14px;
        outline: none;
        margin: 0 !important;
        transition: border-color 0.2s;
    }
    .input-group:focus-within label {
        color: #d32f2f !important;
    }
    .input-group:focus-within input {
        border-color: #d32f2f !important;
    }
    .icon-right {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #ccc;
        font-size: 14px;
        pointer-events: none;
    }
    .submit-btn {
        width: 100% !important;
        box-sizing: border-box;
        padding: 14px;
        background-color: #d32f2f;
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        margin-top: 10px;
        display: block;
    }
    .right-panel {
        position: relative;
        flex: 0 0 50%;
        overflow: hidden;
    }
    .bg-slide {
        position: absolute;
        top:0; left:0; width:100%; height:100%;
        background-size: cover;
        background-position: center;
        opacity:0;
        transition: opacity 1s ease-in-out;
    }
    .bg-slide.active { opacity:1; }
    .footer-text { margin-top: 30px; font-size: 14px; color: #666; }
    .footer-text a { color: #d32f2f; text-decoration: none; font-weight: 600; }
    @media (max-width: 1024px) {
        .left-panel { padding: 40px; }
        .right-panel { display: none; }
        .left-panel { flex: 0 0 100%; }
    }
    .message {
        padding: 12px 16px;
        border-radius: 8px;
        margin-bottom: 24px;
        font-size: 14px;
        font-weight: 500;
        display: flex;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
    }
    .message.error {
        background-color: #fdf2f2;
        color: #d32f2f;
        border: 1px solid #f9d7d7;
    }
</style>
<div class="container-full">
    <div class="left-panel">
        <div class="logo">
            <?= $this->Html->image('footer-logo.png') ?>
        </div>
        <div class="form-container">
            <h1>Sign Up</h1>
            <?= $this->Flash->render() ?>
            <?= $this->Form->create(null) ?>
            <div class="input-group">
                <div class="input-wrapper">
                    <?= $this->Form->control('email', [
                        'label' => 'E-mail',
                        'type' => 'email',
                        'required' => true,
                        'placeholder' => 'example@example.com',
                        'value' => $debug ? "test@example.com" : "",
                        'templates' => [
                            'inputContainer' => '{{content}}<i class="far fa-envelope icon-right"></i>',
                            'label' => '<label>{{text}}</label>'
                        ]
                    ]) ?>
                </div>
            </div>
            <div class="input-group">
                <div class="input-wrapper">
                    <?= $this->Form->control('password', [
                        'label' => 'Password',
                        'type' => 'password',
                        'required' => true,
                        'placeholder' => '••••••••',
                        'value' => $debug ? '1234' : '',
                        'templates' => [
                            'inputContainer' => '{{content}}<i class="far fa-eye icon-right"></i>',
                            'label' => '<label>{{text}}</label>'
                        ]
                    ]) ?>
                </div>
            </div>
            <div class="input-group">
                <div class="input-wrapper">
                    <?= $this->Form->control('password_confirm', [
                        'label' => 'Retype Password',
                        'type' => 'password',
                        'required' => true,
                        'placeholder' => '••••••••',
                        'value' => $debug ? '1234' : '',
                        'templates' => [
                            'inputContainer' => '{{content}}<i class="far fa-eye icon-right"></i>',
                            'label' => '<label>{{text}}</label>'
                        ]
                    ]) ?>
                </div>
            </div>
            <?= $this->Form->button('Sign Up', ['class' => 'submit-btn']) ?>
            <?= $this->Form->end() ?>
            <div class="footer-text">
                <?= $this->Html->link('Back to Sign In', ['action' => 'login']) ?>
            </div>
        </div>
    </div>
    <div class="right-panel">
        <div class="bg-slide" style="background-image:url('<?= $this->Url->image('hero-truck.png') ?>')"></div>
        <div class="bg-slide" style="background-image:url('<?= $this->Url->image('why.png') ?>')"></div>
        <div class="bg-slide" style="background-image:url('<?= $this->Url->image('plane.png') ?>')"></div>
    </div>
</div>
<script>
    const slides = document.querySelectorAll('.bg-slide');
    let index = 0;
    function showSlide(i){
        slides.forEach(s => s.classList.remove('active'));
        if(slides[i]) slides[i].classList.add('active');
    }
    showSlide(index);
    setInterval(() => {
        index = (index + 1) % slides.length;
        showSlide(index);
    }, 4000);
</script>
