<?php
/**
 * Created by PhpStorm.
 * User: Arslan
 * Date: 1/6/2022
 * Time: 12:36 PM
 */
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link href="main.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="main.js"></script>
</head>

<body>

    <div class="register">
        <div class="row">
            <div class="col-md-3 register-left">
                <img src="web_hi_res_512.png" alt=""/>
                <h3>عصری مباحث [𝗖𝗼𝗻𝘁𝗲𝗺𝗽𝗼𝗿𝗮𝗿𝘆 𝗗𝗲𝗯𝗮𝘁𝗲𝘀]</h3>
                <p>                    اسلامی نظریاتی کونسل اور انسٹیٹیوٹ آف پالیسی اسٹڈیز [آئ پی ایس] کے زیرِ اہتمام معروف دانشور، شاعر اور مصنّف، احمد جاوید کی گفتگو پر مبنی محاضرات کا پہلا دور
                </p>

            </div>
            <div class="col-md-9 register-right">
                <form name="regForm" id="regForm" action="thanks.php" method="post">
                <div class="stepwizard">
                    <div class="stepwizard-row setup-panel">
                        <div class="stepwizard-step col-xs-3">
                            <a href="#step-1" type="button" class="btn btn-success btn-circle">1</a>
                            <p><small>Personal Details</small></p>
                        </div>
                        <div class="stepwizard-step col-xs-3">
                            <a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a>
                            <p><small>Program Details</small></p>
                        </div>
                        <div class="stepwizard-step col-xs-3">
                            <a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a>
                            <p><small>Payment Details</small></p>
                        </div>
                    </div>
                </div>
                <div class="panel panel-primary setup-content" id="step-1">
                        <h3 class="register-heading">Personal Details</h3>
                        <div class="row register-form">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Name *" value="" name="fname" required/>
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control"  placeholder="Organization *" value="" name="organization" required/>
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control"  placeholder="Designation *" value="" name="designation" required/>
                                </div>
                                <div class="form-group">
                                    <div class="maxl">
                                        <label class="radio inline">
                                            <input type="radio" name="gender" value="male" checked>
                                            <span> Male </span>
                                        </label>
                                        <label class="radio inline">
                                            <input type="radio" name="gender" value="female">
                                            <span>Female </span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <input type="email" class="form-control" placeholder="Your Email *" value="" name="email" required/>
                                </div>
                                <div class="form-group">
                                    <input type="text" minlength="11" maxlength="11" class="form-control" placeholder="Your Phone *" value="" name="phone" required/>
                                </div>
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="City *" value="" name="city" required/>
                                </div>
                                <button id="btn1" class="btn btn-primary nextBtn pull-right" type="button">Next</button>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-primary setup-content" id="step-2">
                        <h3  class="register-heading">Program Details</h3>
                        <div class="row register-form">
                            <div class="col-md-9">
                                <div class="form-group">
                                    <div class="maxl">
                                        <h5>Participation: </h5>
                                        <label class="radio inline">
                                            <input type="radio" name="participation" value="online">
                                            <span> Online &nbsp;&nbsp;</span>
                                        </label>
                                        <label class="radio inline">
                                            <input type="radio" name="participation" value="physical">
                                            <span> Physical </span>
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="maxl">
                                        <h5>Registration for: </h5>
                                        <div class="checkbox">
                                            <label><input name="sessions[]" class="urdu" type="checkbox" value="1"> (FEB 08 - 3:30pm to 5:30pm) عالم گیریت - مقاصد اور نتائج</label>
                                        </div>
                                        <div class="checkbox">
                                            <label><input name="sessions[]" class="urdu" type="checkbox" value="2"> (FEB 09 - 3:30pm to 5:30pm) جدیدیت اور ما بعد جدیدیت - اسلامی تناظر میں</label>
                                        </div>
                                        <div class="checkbox">
                                            <label><input name="sessions[]" class="urdu" type="checkbox" value="3"> (FEB 10 - 3:30pm to 5:30pm) بدلتا پاکستانی سماج اور خاندان کا ادارہ </label>
                                        </div>
                                        <button id="btn2" class="btn btn-primary nextBtn pull-right" type="button">Next</button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <h5>Registration Fee:</h5>
                                <p>Rs.1000/- for One session</p>
                                <p>Rs.3000/- for Three session</p>
                                <p>Rs.1000/- for Online Participation</p>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-primary setup-content" id="step-3">
                        <h3  class="register-heading">Payment Details</h3>
                        <div class="row register-form">
                            <div class="col-md-12">
                                <h5 class="text-center">Total Fee: PKR <span id="charges"></span>/-</h5>
                                <input type="hidden" name="fee" value="" id="fee">
                                <div class="d-flex justify-content-center"><button type="submit" class="btn btn-primary">Register</button></div>
                            <br><p class="text-center">Bank Account Details:<br>
                                    Title: <b>Institute of Policy Studies- IPS Press</b><br>
                                    Branch code: <b>0301</b><br>
                                    Account No: <b>0103442105</b><br>
                                    IBAN: <b>PK85MEZN0003010103442105</b><br>
                            Meezan Bank Limited<br>
                            Jinnah Avenue, Blue Area, Islamabad.
                            </p>

                                <p class="text-center"><b>Note: </b>Send payment reciept on <a href="mailto:events@ips.net.pk">events@ips.net.pk</a> for confirmation.</p>
                            </div>
                        </div>
                    </div>
                </form>
                </div>
            </div>
        </div>

    </div>
</body>

<script>
    var charges = 0;
    $('input[type=radio][name=participation]').change(function() {
        if (this.value == 'online') {
            $(".urdu").prop("checked", false);
            $(".urdu").prop("disabled", true);
        }
        else if (this.value == 'physical') {
            $(".urdu").prop("disabled", false);
        }
    });
    $('#btn2').on('click', function() {
        const sessions = [];
        var participation = $("input[name='participation']:checked").val();
        $(".urdu:checked").each(function(){
            sessions.push($(this).val());
        });
        //var session = sessions.join(",");
        if(participation == "online"){
            charges = 1000;
        }else{
            charges = 1000 * sessions.length;
        }
        $('#charges').text(charges);
        $('#fee').val(charges);
    });
</script>
</html>
