{% extends "agenttemplates/agents_header.html" %}
{% block content %}

<div class="container">


    <div class="row margintop">
        <div class="col-md-1"></div>
        <div class="col-md-10">

            <div class="card">
                <div class="card-body">

                    <H2 class="text-center">Seller Registration</H2>
                    <hr style="background: #999"/>


                    <form method="post">
                        <div id="accordion">
                            <div class="card" style="border: 1px dotted #999">
                                <div class="card-header" id="headingOne">
                                    <h5 class="mb-0">
                                        <a class="btn btn-link" data-toggle="collapse" data-target="#collapseOne"
                                                aria-expanded="true" aria-controls="collapseOne">
                                            Account Information
                                        </a>
                                    </h5>
                                </div>

                                <div id="collapseOne"
                                     class="collapse show"
                                     aria-labelledby="headingOne"
                                     data-parent="#accordion">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label>Owner full name <small style="color: red">*</small> </label>
                                                    <input class="form-control"/>
                                                </div>

                                                <div class="form-group">
                                                    <br/>
                                                    <label>Email <small style="color: red">*</small> </label>
                                                    <input class="form-control"/>
                                                </div>

                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label>Mobile <small style="color: red">*</small> </label>
                                                    <input class="form-control"/>
                                                    <small><i>Only english character is allowed.</i></small>
                                                </div>

                                                <div class="form-group">
                                                    <div class="form-group">
                                                        <label>Select Country</label>
                                                        <select class="form-control">
                                                            <option>BD</option>
                                                            <option>CD</option>
                                                            <option>Nepal</option>
                                                            <option>Bhutan</option>
                                                            <option>India</option>
                                                        </select>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <div class="card">
                                <div class="card-header" id="headingTwo">
                                    <h5 class="mb-0">
                                        <a class="btn btn-link" data-toggle="collapse" data-target="#collapseTwo"
                                                aria-expanded="true" aria-controls="headingTwo">
                                            Business Information
                                        </a>
                                    </h5>
                                </div>

                                <div id="collapseTwo"
                                     class="collapse show"
                                     aria-labelledby="headingTwo"
                                     data-parent="#accordion">
                                    <div class="card-body">

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label>Name of your business </label>
                                                    <input class="form-control"/>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <label>Add a contact
                                                    <button class="btn btn-sm btn-default">+</button>
                                                </label>
                                                <div class="form-group">
                                                    <label>Name of your contact </label>
                                                    <input class="form-control"/>
                                                </div>
                                                <div class="form-group">
                                                    <label>Contact Phone </label>
                                                    <input class="form-control"/>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">

                                                <div class="form-group">
                                                    <label>Address
                                                        <button class="btn btn-default btn-sm">+</button>
                                                    </label>
                                                    <textarea class="form-control"></textarea>
                                                </div>

                                            </div>
                                        </div>

                                    </div>
                                </div>

                            </div>

                            <div class="card">
                                <div class="card-header" id="headingThree">
                                    <h5 class="mb-0">
                                        <a class="btn btn-link" data-toggle="collapse"
                                                data-target="#collapseThree" aria-expanded="true"
                                                aria-controls="collapseThree">
                                            Payment Information
                                        </a>
                                    </h5>
                                </div>
                                <div id="collapseThree" class="collapse show" aria-labelledby="headingThree"
                                     data-parent="#accordion">
                                    <div class="card-body">

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <input type="checkbox"> Bank
                                                </div>

                                                <div class="form-group">
                                                    <label>Bank Name</label>
                                                    <select class="form-control">
                                                        <option>DBBL</option>
                                                        <option>Brac</option>
                                                    </select>
                                                </div>

                                                <div class="form-group">
                                                    <label>Branch Name</label>
                                                    <input class="form-control">
                                                </div>

                                                <div class="form-group">
                                                    <label>Account Name</label>
                                                    <input class="form-control">
                                                </div>


                                                <div class="form-group">
                                                    <label>Account Number</label>
                                                    <input class="form-control">
                                                </div>


                                                <div class="form-group">
                                                    <label>Account Type</label>
                                                    <select class="form-control">
                                                        <option>Current</option>
                                                        <option>Savings</option>
                                                    </select>
                                                </div>

                                                <div class="form-group">
                                                    <label>Routing Number</label>
                                                    <input class="form-control">
                                                </div>

                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <div class="form-group">
                                                        <input type="checkbox"> MFS
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Wallet Provider</label>
                                                        <select class="form-control">
                                                            <option>Bkash</option>
                                                            <option>Nagad</option>
                                                        </select>
                                                    </div>
                                                    <div class="form-group">
                                                        <label>Wallet Account Number</label>
                                                        <input class="form-control">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>

                            <div class="card">
                                <div class="card-header" id="headingFour">
                                    <h5 class="mb-0">
                                        <a class="btn btn-link show" data-toggle="collapse"
                                                data-target="#collapseFour" aria-expanded="true"
                                                aria-controls="collapseFour">
                                            Verification Info
                                        </a>
                                    </h5>
                                </div>
                                <div id="collapseFour" class="collapse show" aria-labelledby="headingFour"
                                     data-parent="#accordion">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <label>ID Type</label>
                                                <br/>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" name="idtype" type="radio">
                                                    <label class="form-check-label"
                                                           style="margin-right: 10px;">NID</label>

                                                    <input class="form-check-input" name="idtype" type="radio">
                                                    <label class="form-check-label"
                                                           style="margin-right: 10px;">Passport</label>

                                                    <input class="form-check-input" name="idtype" type="radio">
                                                    <label class="form-check-label" style="margin-right: 10px;">Driving
                                                        License</label>

                                                    <input class="form-check-input" name="idtype" type="radio">
                                                    <label class="form-check-label" style="margin-right: 10px;">Birth
                                                        Certificate</label>

                                                </div>

                                                <div class="row margintop">
                                                    <div class="col-md-6">
                                                        <div class="form-group">
                                                            <label>ID Number</label>
                                                            <input class="form-control">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label>Choose Photo</label>
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text"
                                                                      id="inputGroupFileAddon01">Upload</span>
                                                            </div>
                                                            <div class="custom-file">
                                                                <input type="file" class="form-control"
                                                                       id="inputGroupFile01"
                                                                       aria-describedby="inputGroupFileAddon01">
                                                                <label class="custom-file-label" for="inputGroupFile01">Choose
                                                                    Photo</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>

                        </div>

                        <button class="btn btn-primary">Register</button>
                        <button class="btn btn-danger">Cancel</button>

                    </form>


                </div>
            </div>

        </div>
        <div class="col-md-1"></div>

    </div>


</div>


{% endblock %}