@extends('auth.signup-layout')

@section('title', 'Signup')

@section('header', 'Contact Details')

@section('content')
<ol class="steps mt-5 pt-2">
    <li class="step is-complete" data-step="1">Personal Info</li>
    <li class="step is-complete" data-step="2">Organization Info</li>
    <li class="step is-active" data-step="3">Contact Details</li>
</ol>

<form class="px-3 mt-5 needs-validation" action="{{ route('save_contact') }}" method="post" id="contactForm" novalidate>
    @csrf
    <div class="custom-control custom-checkbox">
        <input type="checkbox" role="button" class="specifyColor form-check-input custom-control-input"
            id="sameAsPersonalDetails">
        <label class="custom-control-label" for="sameAsPersonalDetails">Same as personal details</label>
    </div>
    <div class="form-group">
        <label for="firstname" style="font-size:12px; font-weight:bold">First Name</label>
        <input type="text" class="form-control py-3" id="contact_first_name" required name="contact_first_name"
            placeholder="@lang('auth.first_name')">
        <span class="invalid-feedback">
            @if ($errors->has('contact_first_name'))
                <strong>{{ $errors->first('contact_first_name') }}</strong>
            @else
                <strong>Please provide a valid first name.</strong>
            @endif
        </span>
    </div>
    <div class="form-group">
        <label for="lastname" style="font-size:12px; font-weight:bold">Last Name</label>
        <input type="text" class="form-control py-3" id="contact_last_name" required name="contact_last_name"
            placeholder="@lang('auth.last_name')">
        <span class="invalid-feedback">
            @if ($errors->has('contact_last_name'))
                <strong>{{ $errors->first('contact_last_name') }}</strong>
            @else
                <strong>Please provide a valid last name.</strong>
            @endif
        </span>
    </div>
    <div class="form-group">
        <label for="phonenumber" style="font-size:12px; font-weight:bold">Phone Number</label>
        <input type="text" class="form-control py-3" id="contact_phone_no" required name="contact_phone_no"
            placeholder="@lang('models/users.fields.phone_no')">
        <span class="invalid-feedback">
            @if ($errors->has('contact_phone_no'))
                <strong>{{ $errors->first('contact_phone_no') }}</strong>
            @else
                <strong>Please provide a valid phone number.</strong>
            @endif
        </span>
    </div>
    <div class="form-group">
        <label for="email" style="font-size:12px; font-weight:bold">E-mail</label>
        <input type="email" class="form-control py-3" id="email" required name="contact_email"
            placeholder="@lang('auth.email')">
        <span class="invalid-feedback">
            @if ($errors->has('contact_email'))
                <strong>{{ $errors->first('contact_email') }}</strong>
            @else
                <strong>Please provide a valid email address.</strong>
            @endif
        </span>
    </div>
    <div class="custom-control custom-checkbox mt-3">
        <input class="form-check-input specifyColor" role="button" type="checkbox" value="accepted" id="terms" required>
        <label class="custom-control-label" for="terms">
            I accept the <a href="#" data-toggle="modal" data-target="#termsModal">terms and conditions</a>
        </label>
        <span class="invalid-feedback">
            <strong>Please accept terms and conditions.</strong>
        </span>
    </div>
    <button type="submit" class="mt-3 p-2 btn col-12 text-white btn-primary btn-block font-weight-bold"
        style="font-size:15px;">SIGN UP</button>
</form>

<!-- Terms and Conditions Modal -->
<div class="modal fade" id="termsModal" tabindex="-1" role="dialog" aria-labelledby="termsModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="termsModalLabel">Terms and Conditions</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Here are some dummy terms and conditions. You can replace this text with the actual terms for your
                    application.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consequat tortor vel velit auctor, a
                    ullamcorper lectus tincidunt. Proin id diam sed enim luctus efficitur.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const contactForm = document.getElementById('contactForm');

        contactForm.addEventListener('submit', function (event) {
            if (!contactForm.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
            }

            if (!document.getElementById('terms').checked) {
                event.preventDefault();
                event.stopPropagation();
            
            }

            contactForm.classList.add('was-validated');
        });

        if ($('#sameAsPersonalDetails').prop('checked')) {
            $('#contact_first_name').val('{{ session('user_data.first_name') }}');
            $('#contact_last_name').val('{{ session('user_data.last_name') }}');
            $('#contact_phone_no').val('{{ session('user_data.phone_no') }}');
            $('#email').val('{{ session('user_data.email') }}');
        }

        $('#sameAsPersonalDetails').change(function () {
            if ($(this).prop('checked')) {
                $('#contact_first_name').val('{{ session('user_data.first_name') }}');
                $('#contact_last_name').val('{{ session('user_data.last_name') }}');
                $('#contact_phone_no').val('{{ session('user_data.phone_no') }}');
                $('#email').val('{{ session('user_data.email') }}');
            } else {
                $('#contact_first_name').val('');
                $('#contact_last_name').val('');
                $('#contact_phone_no').val('');
                $('#email').val('');
            }
        });
    });
</script>