@extends('layouts.app')
@section('content')
@include('layouts.partials.header')
@include('layouts.partials.sidebar')

<div class="page_title">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-xl-6">
                <div class="page_title-content">
                    <p class="mb-0">
                        <a href="{{route('trade-statement')}}">Dashboard </a>
                        <span>/</span>
                        <span>Add Funds</span>
                    </p>
                </div>
            </div>
            
        </div>
    </div>
</div>

<div class="content-body">
    <div class="container">
        <div class="row">
            <div class="col-xl-6">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Add Funds</h4>
                    </div>
                    <div class="card-body">
                        {{-- Step 1: The form --}}
                        <div id="add-funds-form-section">
                            <form id="add-funds-form" method="post" action="{{route('add-funds.request')}}" name="myform" class="personal_validate" novalidate="novalidate">
                                @csrf
                                <div class="form-row">
                                    <div class="form-group col-12">
                                        <label class="mr-sm-2 text-dark">Membership Type</label>
                                        <select class="form-control" required name="membership_type" id="membership_type_select">
                                            <option value="" disabled>Select Membership Type</option>
                                            @foreach ($client->membership_type as $membership)
                                                <option value="{{ $membership }}" {{ old('membership_type') == $membership || session('selected_membership_type') == $membership ? 'selected' : '' }}>{{ $membership }}</option>
                                            @endforeach
                                        </select>
                                        @error('membership_type')
                                            <label id="membership_type-error" class="error" for="membership_type">{{ $message }}</label>
                                        @enderror
                                    </div>

                                    <label>I would like to add</label>
                                    <div class="input-group mb-4">
                                        <div class="input-group-prepend">
                                            <label class="input-group-text bg-light text-dark"><b>{{Auth::user()->currency_symbol}}</b></label>
                                        </div>
                                        <input type="text" class="form-control" required placeholder="10000" value="{{old('amount')}}" name="amount" id="amount-input">
                                        @error('amount')
                                        <label id="amount-error" class="error" for="amount">{{ $message }}</label>
                                        @enderror
                                    </div>
                                    <div class="form-group text-center col-12">
                                        <button type="button" class="btn btn-primary pl-5 pr-5" id="show-bank-details-btn">Add Funds</button>
                                    </div>
                                </div>
                            </form>
                        </div>

                        {{-- Step 2: Bank details confirmation box (hidden initially) --}}
                        <div id="bank-details-section" style="display: none;">
                            <div class="alert alert-info mb-4">
                                <h5 class="mb-3"><i class="fa fa-university mr-2"></i> Bank Transfer Details</h5>
                                <p class="mb-1">Please make your payment to the following bank account:</p>
                                <hr>
                                <table class="table table-sm table-borderless mb-0">
                                    <tbody>
                                        <tr>
                                            <td class="text-dark font-weight-bold" style="width: 40%;">Account Name:</td>
                                            <td class="text-dark">Knightsbridge Code</td>
                                        </tr>
                                        <tr>
                                            <td class="text-dark font-weight-bold">Account Number:</td>
                                            <td class="text-dark">86760960</td>
                                        </tr>
                                        <tr>
                                            <td class="text-dark font-weight-bold">Sort Code:</td>
                                            <td class="text-dark">30-54-66</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <hr>
                                <p class="mb-0 small text-muted">Once your transfer is complete, click <strong>Confirm</strong> below to submit your request.</p>
                            </div>

                            <div class="text-center">
                                <button type="button" class="btn btn-secondary mr-2" id="back-btn">Back</button>
                                <button type="button" class="btn btn-success pl-5 pr-5" id="confirm-submit-btn">Confirm</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection
@section('scripts')
<script src="{{asset('vendor/validator/jquery.validate.js')}}"></script>
<script src="{{asset('vendor/validator/validator-init.js')}}"></script>
<script>
    // Restore membership type from session storage
    const selectedMembershipType = sessionStorage.getItem('selected_membership_type');
    const membershipTypeSelect = document.getElementById('membership_type_select');
    for (let option of membershipTypeSelect.options) {
        if (option.value === selectedMembershipType) {
            option.selected = true;
            break;
        }
    }

    // Show bank details when "Add Funds" is clicked (after basic validation)
    document.getElementById('show-bank-details-btn').addEventListener('click', function () {
        const membership = membershipTypeSelect.value;
        const amount = document.getElementById('amount-input').value.trim();

        if (!membership) {
            alert('Please select a membership type.');
            return;
        }
        if (!amount) {
            alert('Please enter an amount.');
            return;
        }

        document.getElementById('add-funds-form-section').style.display = 'none';
        document.getElementById('bank-details-section').style.display = 'block';
    });

    // Go back to the form
    document.getElementById('back-btn').addEventListener('click', function () {
        document.getElementById('bank-details-section').style.display = 'none';
        document.getElementById('add-funds-form-section').style.display = 'block';
    });

    // Submit the form when Confirm is clicked
    document.getElementById('confirm-submit-btn').addEventListener('click', function () {
        document.getElementById('add-funds-form').submit();
    });
</script>
@endsection