<?= $this->extend('frontend/layout/main'); ?>

<?= $this->section('css'); ?>
<link href="<?= base_url() ?>assets/common/pad/css/pad_styles.css" rel="stylesheet">
<?= $this->endSection(); ?>

<?= $this->section('styles') ?>


<?= $this->endSection(); ?>

<?= $this->section('title') ?>Sign In<?= $this->endSection(); ?>

<?= $this->section('content') ?>

<!-- Page Title -->
<div class="page-title light-background" data-aos="fade">
    <div class="heading">
        <div class="container">
            <div class="row d-flex justify-content-center text-center">
                <div class="col-lg-8">
                    <h1>Welcome to BetPawa</h1>
                    <p class="mb-0">Don't forget to sign out before you exit the premises.</p>
                </div>
            </div>
        </div>
    </div>
    <nav class="breadcrumbs">
        <div class="container">
            <ol>
                <li><a href="<?= url_to('home') ?>">Home</a></li>
                <li class="current">Sign In</li>
            </ol>
        </div>
    </nav>
</div><!-- End Page Title -->

<!-- Contact Section -->
<section id="contact" class="contact section">

    <div class="container" data-aos="fade-up" data-aos-delay="100">
        <?php $validation = service('validation'); ?>
        <?= form_open_multipart(route_to('signin'), [
            'class' => 'custom-form',
            'data-aos' => 'fade-up',
            'data-aos-delay' => 300,
            'autocomplete' => 'off',
            'csrf_id' => 'csrf_id',
            'id' => 'sign_in_form',
            'novalidate' => '',
        ]) ?>


        <div class="row gy-4">

            <div class="col-md-4">
                <div class="form-group">
                    <?= form_label('First Name <span class="text-danger">*</span>', 'first_name') ?>
                    <?= form_input([
                        'name' => 'first_name',
                        'id' => 'first_name',
                        'class' => 'form-control',
                        'placeholder' => 'Enter your first name',
                        'required' => true,
                    ], set_value('first_name', '')) ?>
                    <?= view_cell('ErrorCell', ['message' => $validation->getError('first_name')]) ?>
                    <?= view_cell('ErrorCell::validationErrorMessage', ['message' => 'Please enter first name.']); ?>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <?= form_label('Last Name <span class="text-danger">*</span>', 'last_name') ?>
                    <?= form_input([
                        'name' => 'last_name',
                        'id' => 'last_name',
                        'class' => 'form-control',
                        'placeholder' => 'Enter your last name',
                        'required' => true,
                    ], set_value('last_name', '')) ?>
                    <?= view_cell('ErrorCell', ['message' => $validation->getError('last_name')]) ?>
                    <?= view_cell('ErrorCell::validationErrorMessage', ['message' => 'Please enter last name.']); ?>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <?= form_label('Gender <span class="text-danger">*</span>', 'gender') ?>
                    <?= form_dropdown([
                        'id' => 'gender',
                        'name' => 'gender',
                        'class' => 'form-control',
                        'required' => true,
                    ], [
                        '' => '-- Select Gender --',
                        'Male' => 'Male',
                        'Female' => 'Female',
                    ], set_value('gender', ''), ['style' => 'width: 100%;']) ?>
                    <?= view_cell('ErrorCell', ['message' => $validation->getError('gender')]) ?>
                    <?= view_cell('ErrorCell::validationErrorMessage', ['message' => 'Please select gender.']); ?>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <?= form_label('Phone Number <span class="text-danger">*</span>', 'phone') ?>
                    <?= form_input([
                        'name' => 'phone',
                        'id' => 'phone',
                        'class' => 'form-control',
                        'maxlength' => 10,
                        'minlength' => 10,
                        'pattern' => '^0[6-7][1-9]\d{7}$',
                        'placeholder' => 'Phone number e.g. 0762******',
                        'required' => true,
                    ], set_value('phone', '')) ?>
                    <?= view_cell('ErrorCell', ['message' => $validation->getError('phone')]) ?>
                    <?= view_cell('ErrorCell::validationErrorMessage', ['message' => 'Please enter phone number.']); ?>
                </div>
            </div>

            <div class="col-md-8">
                <div class="form-group">
                    <?= form_label('From <span class="text-danger">*</span>', 'coming_from') ?>
                    <?= form_input([
                        'name' => 'coming_from',
                        'id' => 'coming_from',
                        'class' => 'form-control',
                        'placeholder' => 'Where are you coming from?',
                        'required' => true,
                    ], set_value('coming_from', '')) ?>
                    <?= view_cell('ErrorCell', ['message' => $validation->getError('coming_from')]) ?>
                    <?= view_cell('ErrorCell::validationErrorMessage', ['message' => 'Please enter where you are coming from.']); ?>
                </div>
            </div>

            <div class="col-md-6">
                <div class="form-group">
                    <?= form_label('Purpose of Visit <span class="text-danger">*</span>', 'purpose') ?>
                    <?= form_dropdown([
                        'id' => 'purpose',
                        'name' => 'purpose',
                        'class' => 'form-control',
                        'required' => true,
                    ], $purposes, set_value('purpose', ''), ['style' => 'width: 100%;']) ?>
                    <?= view_cell('ErrorCell', ['message' => $validation->getError('purpose')]) ?>
                    <?= view_cell('ErrorCell::validationErrorMessage', ['message' => 'Please select purpose of your visitation.']); ?>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <?= form_label('Meeting With <span class="text-danger">*</span>', 'going_to') ?>
                    <?= form_input([
                        'name' => 'going_to',
                        'id' => 'going_to',
                        'class' => 'form-control',
                        'placeholder' => 'Enter name of employee',
                        'required' => true,
                    ], set_value('going_to', '')) ?>
                    <?= view_cell('ErrorCell', ['message' => $validation->getError('going_to')]) ?>
                    <?= view_cell('ErrorCell::validationErrorMessage', ['message' => 'Please enter who are you meeting with.']); ?>
                </div>
            </div>
            <div class="col-md-12">
                <div class="form-group">
                    <?= form_label('Please Sign Here <span class="text-danger">*</span>', 'signature') ?>
                    <div class="signature-wrapper">
                        <canvas id="signature-pad" class="signature-pad form-control" width=400 height=200></canvas>
                    </div>
                    <?= form_textarea([
                        'name' => 'signature',
                        'id' => 'signature',
                        'class' => 'form-control',
                        'required' => true,
                    ], set_value('signature', ''), ['style' => 'display:none;']) ?>
                    <?= view_cell('ErrorCell', ['message' => $validation->getError('signature')]) ?>
                    <?= view_cell('ErrorCell::validationErrorMessage', ['message' => 'Please sign.']); ?>
                </div>
            </div>
            <div>
                <button type="button" class="btn btn-outline-warning" id="clear">Clear Signature</button>
            </div>

            <div class="col-md-12 text-center">

                <?= form_button([
                    'type' => 'submit',
                    'class' => 'btn btn-primary',
                    'id' => 'submit'
                ], 'Submit') ?>
            </div>


        </div>
        <?= form_close(); ?>

    </div>

</section><!-- /Contact Section -->
<?= $this->endSection(); ?>

<?= $this->section('js') ?>
<script src="assets/common/js/jquery.validate.min.js"></script>
<script src="assets/common/pad/js/signature_pad.umd.min.js"></script>
<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
    $("#sign_in_form").submit(function(event) {
        var vForm = $(this);
        if (vForm[0].checkValidity() === false) {
            event.preventDefault()
            event.stopPropagation()
        }
        vForm.addClass('was-validated');
    });

    //signature pad
    var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
        backgroundColor: 'rgba(255, 255, 255, 0)',
        penColor: 'rgb(0, 0, 0)'
    });

    signaturePad.addEventListener("endStroke", () => {
        if (!signaturePad.isEmpty()) {
            $('#signature').val(signaturePad.toDataURL('image/png'));
        }
    }, {
        // once: true
    });

    $('#clear').click(function(e) {
        e.preventDefault();
        signaturePad.clear();
        $('#signature').val('');
    });
</script>
<?= $this->endSection() ?>