@extends('layouts.master')
@section('title') @lang('translation.create-referral-code') @endsection

@section('breadcrumb')
@component('components.breadcrumb')
@slot('title')
@lang('translation.create-referral-code')
@endslot
@endcomponent
@endsection

@section('content')

<h3 class="mb-4">@lang('translation.create-referral-code')</h3>

<div class="card p-5 shadow-sm">
    <form id="referral-form" class="row g-4">
        @csrf

        <div class="col-12">
            <label for="main_channel" class="form-label fs-5">
                @lang('translation.main-channel-label') <span class="text-danger">*</span>
            </label>
            <input type="text" class="form-control form-control-lg" name="main_channel" id="main_channel" required placeholder="@lang('translation.main-channel-placeholder')">
        </div>

        <div class="col-md-6">
            <label for="expected_investment" class="form-label fs-5">
                @lang('translation.expected-investment-label') <span class="text-danger">*</span>
            </label>
            <input type="number" class="form-control form-control-lg" name="expected_investment" id="expected_investment" required placeholder="@lang('translation.expected-investment-placeholder')">
        </div>

        <div class="col-md-6">
            <label for="expected_referrals" class="form-label fs-5">
                @lang('translation.expected-referrals-label') <span class="text-danger">*</span>
            </label>
            <input type="number" class="form-control form-control-lg" name="expected_referrals" id="expected_referrals" required placeholder="@lang('translation.expected-referrals-placeholder')">
        </div>

        <div class="col-12 d-flex justify-content-between align-items-center">
            <span class="text-muted">
                @lang('translation.info-text')
            </span>
            <button type="submit" class="btn btn-success px-4">
                <i class="mdi mdi-link-variant me-1"></i> @lang('translation.create')
            </button>
        </div>
    </div>
</div> <!-- end col -->
</div><!--end row-->

<!-- Referral Success Modal -->
<div class="modal fade bs-example-modal-lg" id="referralSuccessModal" tabindex="-1" aria-labelledby="referralSuccessModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content text-center">
      <div class="modal-header justify-content-center">
        <h5 class="modal-title w-100 mt-5" id="referralSuccessModalLabel">Referral Code Generated Successfully!</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body pb-4" id="referralSuccessModalBody">
        <!-- Dynamic message goes here -->
      </div>
    </div>
  </div>
</div>

@endsection

@section('script')
<script src="{{ URL::asset('build/libs/prismjs/prism.js') }}"></script>
<script src="https://cdn.lordicon.com/libs/mssddfmo/lord-icon-2.1.0.js"></script>
<script src="{{ URL::asset('build/js/pages/modal.init.js') }}"></script>
@endsection