@extends('layouts.master')

@section('title')
Become An Agent
@endsection

@section('content')

<div class="container-fluid">


<div class="row">
    <div class="col-12">

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

                <h4 class="card-title mb-4">Introduction Company Information</h4>

                <ul class="nav nav-pills nav-justified mb-4" id="agentTab" role="tablist">

                    <li class="nav-item">
                        <button class="nav-link active" data-bs-toggle="tab"
                            data-bs-target="#howto" type="button">
                            1. How To Be Agent
                        </button>
                    </li>

                    <li class="nav-item">
                        <button class="nav-link" data-bs-toggle="tab"
                            data-bs-target="#founder" type="button">
                            2. Intro From Founder
                        </button>
                    </li>

                    <li class="nav-item">
                        <button class="nav-link" data-bs-toggle="tab"
                            data-bs-target="#company" type="button">
                            3. Company Profile
                        </button>
                    </li>

                    <li class="nav-item">
                        <button class="nav-link" data-bs-toggle="tab"
                            data-bs-target="#advantage" type="button">
                            4. Advantages
                        </button>
                    </li>

                    <li class="nav-item">
                        <button class="nav-link" data-bs-toggle="tab"
                            data-bs-target="#payment" type="button">
                            5. Make Payment
                        </button>
                    </li>

                </ul>

                <div class="tab-content">

                    <!-- HOW TO BE AGENT -->
                    <div class="tab-pane fade show active" id="howto">

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

                                <img src="../content/becomeagent.jpeg" 
                                     allowfullscreen>

                            </div>
                        </div>

                    </div>

                    <!-- FOUNDER -->
                    <div class="tab-pane fade" id="founder">

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

                                <h4>Message From Founder</h4>

                                <div class="row">


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

                                        <iframe width="100%" height="400" src="https://www.youtube.com/embed/azBMqhaFkMQ?si=Sbt2OTZIBQFsj6Ie" 
                                            title="YouTube video player" frameborder="0" 
                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                                            referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

                                    </div>

                                </div>

                            </div>
                        </div>

                    </div>

                    <!-- COMPANY PROFILE -->
                    <div class="tab-pane fade" id="company">

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

                                <h4>Company Profile</h4>

                                
                                <iframe width="100%" height="400" src="../content/companyprofile.pdf" 
                                     allowfullscreen></iframe>

                            </div>
                        </div>

                    </div>

                    <!-- ADVANTAGE -->
                    <div class="tab-pane fade" id="advantage">

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

                                <h4>Advantages of Joining Us</h4>

                                <div class="row">

                                    <div class="col-md-6">
                                        <ul>
                                            <li>Attractive commission.</li>
                                            <li>Unlimited earning potential.</li>
                                            <li>Professional training.</li>
                                            <li>Marketing support.</li>
                                        </ul>
                                    </div>

                                    <div class="col-md-6">
                                        <ul>
                                            <li>Dedicated support team.</li>
                                            <li>Online booking system.</li>
                                            <li>Fast payout process.</li>
                                            <li>Business growth opportunity.</li>
                                        </ul>
                                    </div>

                                </div>

                            </div>
                        </div>

                    </div>

                    <!-- PAYMENT -->
                    <div class="tab-pane fade" id="payment">

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

                                <h4>Agent Registration Payment</h4>

                                <div class="alert alert-info">
                                    Registration Fee: <strong>RM25.00</strong>
                                </div>

                                <table class="table table-bordered">

                                    <tr>
                                        <th width="250">Bank Name</th>
                                        <td>Maybank</td>
                                    </tr>

                                    <tr>
                                        <th>Account Name</th>
                                        <td>SYUHAIDA SUKOR RESOURCES</td>
                                    </tr>

                                    <tr>
                                        <th>Account Number</th>
                                        <td>564052533602</td>
                                    </tr>

                                </table>

                                <form action="{{ url('submit-agent-payment') }}"
                                    method="POST"
                                    enctype="multipart/form-data">

                                    @csrf

                                    <div class="mb-3">
                                        <label>Upload Payment Receipt</label>
                                        <input type="file"
                                            name="receipt"
                                            class="form-control">
                                    </div>

                                    <button class="btn btn-success">
                                        Submit Payment
                                    </button>

                                </form>

                            </div>
                        </div>

                    </div>

                </div>

            </div>
        </div>

    </div>
</div>


</div>

@endsection