@extends('layouts.auth')
@section('title', 'Register as a School')

@section('auth-top')
<div class="auth-right-top">
    <span>Already have an account?</span>
    <a href="{{ route('login') }}" class="btn btn-accent btn-sm">Login</a>
    <a href="mailto:hello@feespay.ng" class="btn btn-ghost btn-sm">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none"
            stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <circle cx="12" cy="12" r="10"/>
            <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/>
        </svg>
        Support
    </a>
</div>
@endsection

@section('content')
<a href="{{ route('register.step2') }}" class="auth-back">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"
        stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/>
    </svg>
    Back
</a>

<h1>Register as a School</h1>
<p class="auth-sub">Please input your school details to create an account.</p>

@if($errors->any())
<div class="alert alert-error">{{ $errors->first() }}</div>
@endif

<form action="{{ route('register.step3.post') }}" method="POST" id="register_form">
    @csrf
    <input type="hidden" name="school_type" value="{{ $school_type }}">
    <input type="hidden" name="has_partner" value="{{ $has_partner }}">
    <input type="hidden" name="agreed_terms" id="agreed_terms" value="0">

    <div class="form-group">
        <input type="text" name="school_name" class="form-control @error('school_name') is-invalid @enderror"
            placeholder="School name" value="{{ old('school_name') }}" required maxlength="150">
        @error('school_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div class="form-group">
        <input type="tel" name="phone" class="form-control @error('phone') is-invalid @enderror"
            placeholder="Phone Number" value="{{ old('phone') }}" required
            pattern="^(0[7-9][0-1][0-9]{8}|[+]234[7-9][0-1][0-9]{8})$"
            title="Enter a valid Nigerian phone number">
        @error('phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div class="form-group">
        <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
            placeholder="Email address" value="{{ old('email') }}" required>
        @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div class="form-group">
        <select name="category" class="form-control @error('category') is-invalid @enderror" required>
            <option value="">-- Please select category --</option>
            <option value="nursery_primary" {{ old('category') === 'nursery_primary' ? 'selected' : '' }}>Nursery / Primary</option>
            <option value="secondary"       {{ old('category') === 'secondary'       ? 'selected' : '' }}>Secondary</option>
            <option value="tertiary"        {{ old('category') === 'tertiary'        ? 'selected' : '' }}>Tertiary</option>
        </select>
        @error('category')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    <div class="form-group">
        <input type="text" name="referral_code" class="form-control"
            placeholder="Agent referral code e.g. T6P7-WEFB-E8J7 (optional)"
            value="{{ old('referral_code') }}" maxlength="20">
    </div>

    <div class="form-check mt-16 mb-0" style="margin-bottom:24px">
        <input type="checkbox" id="terms_check" required>
        <label for="terms_check">
            I have read the
            <a href="#" data-modal="terms_modal" class="text-brand font-bold">Terms and conditions</a>
        </label>
    </div>

    <button type="submit" class="btn btn-accent btn-full"
            onclick="document.getElementById('agreed_terms').value='1'">
        Submit
    </button>
</form>
@endsection

{{-- TERMS AND CONDITIONS MODAL --}}
@push('scripts')
<div class="modal-overlay" id="terms_modal">
    <div class="modal" style="max-width:600px">
        <button class="modal-close" aria-label="Close">&times;</button>
        <h2>TERMS AND CONDITIONS</h2>

        <div id="terms_body" style="height:360px; overflow-y:auto; font-size:0.84rem;
             line-height:1.8; color:var(--text-mid); padding-right:8px;">

            <h4 style="margin-bottom:8px; color:var(--text-dark)">1. INTRODUCTION</h4>
            <p style="margin-bottom:16px">Welcome to FeespPay.ng services of Fannit Enterprise. We start
            every new subscriber relationship with a contract. The following contract spells out what you
            can expect from us, and what we expect from you. If you agree to what you read below, you
            should click "Yes" at the end of the contract to acknowledge that you have agreed. We intend
            this to be the legal equivalent of your signature on a written contract, and equally binding.
            Only by clicking "YES" will you be able to access and use the services available on this platform.</p>

            <h4 style="margin-bottom:8px; color:var(--text-dark)">2. ACCESS AND SERVICES</h4>
            <p style="margin-bottom:16px">Once subscribed, you must submit all necessary CAC and other
            documents before granting access. Full access will be granted upon payment of a one-time sign-up
            fee. You will be given one admin account with full access and can create up to 100 additional
            accounts. You may change or discontinue your account at any time. We reserve the right to modify,
            suspend or terminate access to the service at any time for any reason without notice or refund.</p>

            <h4 style="margin-bottom:8px; color:var(--text-dark)">3. FEES AND PAYMENT</h4>
            <p style="margin-bottom:16px">We will charge a one-time sign-up fee for using our system. We
            will also charge a convenience fee per transaction depending on the amount as well as CBN rules.
            Additional charges apply to customers who choose to use card options. You can cancel your account
            at any time, but you will remain liable for all charges accrued up to that time. Value of all
            fees collected is settled into the merchant designated account on T+1.</p>

            <h4 style="margin-bottom:8px; color:var(--text-dark)">4. SYSTEM RULES</h4>
            <p style="margin-bottom:16px">Do not share your password or let your account be used by
            unauthorised persons. Do not use our system to commit any crime. Do not attempt to circumvent
            security measures. Respect all users of the system. We reserve the right to terminate accounts
            found in violation of these rules without refund.</p>

            <h4 style="margin-bottom:8px; color:var(--text-dark)">5. FAILED TRANSACTIONS</h4>
            <p style="margin-bottom:16px">If any customer is debited but FeespPay.ng does not receive the
            value, the customer has the duty of complaining to their bank. A merchant should report through
            email to our support team if any collection due for settlement has not been settled after the
            agreed settlement time.</p>

            <h4 style="margin-bottom:8px; color:var(--text-dark)">6. PRIVACY</h4>
            <p style="margin-bottom:16px">Your data is handled with utmost care in line with NDPR (Nigeria
            Data Protection Regulation). We may review communications on the system from time to time to
            ensure compliance. We will not sell your data to third parties without your explicit consent.</p>

            <h4 style="margin-bottom:8px; color:var(--text-dark)">7. DISCLAIMER</h4>
            <p>FeespPay.ng is not a bank. All funds are processed through our registered payment partner
            institutions. Fannit Enterprise operates as a technology platform only.</p>
        </div>

        <div style="margin-top:20px; padding-top:16px; border-top:1px solid var(--border)">
            <p style="font-size:0.78rem; color:var(--text-light); text-align:center; margin-bottom:12px">
                Scroll to the bottom to accept
            </p>
            <button id="terms_submit" class="btn btn-accent btn-full" disabled
                    onclick="acceptTerms()">
                Yes, I Accept the Terms
            </button>
        </div>
    </div>
</div>

<script>
function acceptTerms() {
    document.getElementById('agreed_terms').value = '1';
    document.getElementById('terms_check').checked = true;
    closeModal('terms_modal');
}
</script>
@endpush