@extends('layouts.admin_master')
@section('page-title')
    Admin | {{ $page_title }}
@endsection

@section('page-css')
@endsection

@section('page-content')
<div class="row">
    <form action="{{ url('admin/organisation/store') }}" method="POST">
        {{ csrf_field() }}
        <div class="col-md-12">
            @include('commons.notifications')
        </div>
       
        <div class="col-md-10">
            <div class="hpanel">
                <div class="panel-heading">Organisation User Account</div>
                <div class="panel-body">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Username</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="user_name" placeholder="Full Name" required>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Email</label>
                        <div class="col-sm-10">
                            <input type="email" name="user_email" class="form-control" id="userEmail" placeholder="Enter User Email" required>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Phone</label>
                        <div class="col-sm-10">
                            <input type="text" name="user_phone" class="form-control" id="userPhone" placeholder="Enter User Phone number" required>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>

                    <!-- African Countries Select Field -->
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Country</label>
                        <div class="col-sm-10">
                            <select name="country" id="countrySelect" class="form-control" required>
                                <option value="">-- Select Country --</option>
                                <option value="Algeria" data-currency="DZD">Algeria (DZD)</option>
                                <option value="Angola" data-currency="AOA">Angola (AOA)</option>
                                <option value="Benin" data-currency="XOF">Benin (XOF)</option>
                                <option value="Botswana" data-currency="BWP">Botswana (BWP)</option>
                                <option value="Burkina Faso" data-currency="XOF">Burkina Faso (XOF)</option>
                                <option value="Burundi" data-currency="BIF">Burundi (BIF)</option>
                                <option value="Cameroon" data-currency="XAF">Cameroon (XAF)</option>
                                <option value="Cape Verde" data-currency="CVE">Cape Verde (CVE)</option>
                                <option value="Central African Republic" data-currency="XAF">Central African Republic (XAF)</option>
                                <option value="Chad" data-currency="XAF">Chad (XAF)</option>
                                <option value="Comoros" data-currency="KMF">Comoros (KMF)</option>
                                <option value="Congo" data-currency="XAF">Congo (XAF)</option>
                                <option value="Djibouti" data-currency="DJF">Djibouti (DJF)</option>
                                <option value="Egypt" data-currency="EGP">Egypt (EGP)</option>
                                <option value="Equatorial Guinea" data-currency="XAF">Equatorial Guinea (XAF)</option>
                                <option value="Eritrea" data-currency="ERN">Eritrea (ERN)</option>
                                <option value="Eswatini" data-currency="SZL">Eswatini (SZL)</option>
                                <option value="Ethiopia" data-currency="ETB">Ethiopia (ETB)</option>
                                <option value="Gabon" data-currency="XAF">Gabon (XAF)</option>
                                <option value="Gambia" data-currency="GMD">Gambia (GMD)</option>
                                <option value="Ghana" data-currency="GHS">Ghana (GHS)</option>
                                <option value="Guinea" data-currency="GNF">Guinea (GNF)</option>
                                <option value="Guinea-Bissau" data-currency="XOF">Guinea-Bissau (XOF)</option>
                                <option value="Ivory Coast" data-currency="XOF">Ivory Coast (XOF)</option>
                                <option value="Kenya" data-currency="KES">Kenya (KES)</option>
                                <option value="Lesotho" data-currency="LSL">Lesotho (LSL)</option>
                                <option value="Liberia" data-currency="LRD">Liberia (LRD)</option>
                                <option value="Libya" data-currency="LYD">Libya (LYD)</option>
                                <option value="Madagascar" data-currency="MGA">Madagascar (MGA)</option>
                                <option value="Malawi" data-currency="MWK">Malawi (MWK)</option>
                                <option value="Mali" data-currency="XOF">Mali (XOF)</option>
                                <option value="Mauritania" data-currency="MRU">Mauritania (MRU)</option>
                                <option value="Mauritius" data-currency="MUR">Mauritius (MUR)</option>
                                <option value="Morocco" data-currency="MAD">Morocco (MAD)</option>
                                <option value="Mozambique" data-currency="MZN">Mozambique (MZN)</option>
                                <option value="Namibia" data-currency="NAD">Namibia (NAD)</option>
                                <option value="Niger" data-currency="XOF">Niger (XOF)</option>
                                <option value="Nigeria" data-currency="NGN">Nigeria (NGN)</option>
                                <option value="Rwanda" data-currency="RWF">Rwanda (RWF)</option>
                                <option value="Sao Tome and Principe" data-currency="STN">Sao Tome and Principe (STN)</option>
                                <option value="Senegal" data-currency="XOF">Senegal (XOF)</option>
                                <option value="Seychelles" data-currency="SCR">Seychelles (SCR)</option>
                                <option value="Sierra Leone" data-currency="SLE">Sierra Leone (SLE)</option>
                                <option value="Somalia" data-currency="SOS">Somalia (SOS)</option>
                                <option value="South Africa" data-currency="ZAR">South Africa (ZAR)</option>
                                <option value="South Sudan" data-currency="SSP">South Sudan (SSP)</option>
                                <option value="Sudan" data-currency="SDG">Sudan (SDG)</option>
                                <option value="Tanzania" data-currency="TZS">Tanzania (TZS)</option>
                                <option value="Togo" data-currency="XOF">Togo (XOF)</option>
                                <option value="Tunisia" data-currency="TND">Tunisia (TND)</option>
                                <option value="Uganda" data-currency="UGX">Uganda (UGX)</option>
                                <option value="Zambia" data-currency="ZMW">Zambia (ZMW)</option>
                                <option value="Zimbabwe" data-currency="ZWL">Zimbabwe (ZWL)</option>
                            </select>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>

                    <!-- Currency Field -->
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Currency</label>
                        <div class="col-sm-10">
                            <input type="text" name="currency" id="currencyInput" class="form-control" readonly required placeholder="Auto-populated currency">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>

                </div>
            </div>
        </div>
        
        <div class="col-md-10">
            <div class="form-group">
                <div class="col-sm-10">
                    <button class="btn btn-primary btn-block" type="submit">Submit</button>
                    <button class="btn btn-default btn-block" type="button">Cancel</button> <br>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@section('page-js')
<script>
$(document).ready(function() {
    // Function to update currency based on selected option's data attribute
    function updateCurrency() {
        var selectedOption = $('#countrySelect').find(':selected');
        var currencyCode = selectedOption.data('currency') || '';
        $('#currencyInput').val(currencyCode);
    }

    // Run on page load in case a default is pre-selected
    updateCurrency();

    // Run whenever the country dropdown changes
    $('#countrySelect').on('change', function() {
        updateCurrency();
    });
});
</script>
@endsection