@extends('layouts.app')
@section('title','Issue Shares')
@section('page-title','Share Registry')

@section('content')
<div class="d-flex align-items-center gap-3 mb-4">
    <a href="{{ route('admin.shares.index') }}" class="btn btn-outline-navy" style="padding:7px 14px;">
        <i class="fa-solid fa-arrow-left me-1"></i> Back
    </a>
    <div>
        <div class="section-title">Issue Shares to Member</div>
        <div class="section-sub">Upfront payment or monthly salary deduction plan</div>
    </div>
</div>

<div class="row g-3">
    <div class="col-lg-7">
        <form method="POST" action="{{ route('admin.shares.store') }}">
            @csrf
            <div class="card">
                <div class="card-header">
                    <div class="card-header-title"><i class="fa-solid fa-chart-pie me-2" style="color:#c9a84c;"></i>Share Details</div>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label">Member <span class="text-danger">*</span></label>
                            <select name="member_id" class="form-select @error('member_id') is-invalid @enderror" required id="memberSelect">
                                <option value="">-- Select member --</option>
                                @foreach($members as $m)
                                    <option value="{{ $m->id }}" data-shares="{{ $m->total_shares ?? 0 }}"
                                        {{ old('member_id') == $m->id ? 'selected' : '' }}>
                                        {{ $m->name }} ({{ $m->member_id }}) — {{ $m->total_shares ?? 0 }} shares held
                                    </option>
                                @endforeach
                            </select>
                            @error('member_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Number of Shares <span class="text-danger">*</span></label>
                            <input type="number" name="num_shares" class="form-control @error('num_shares') is-invalid @enderror"
                                value="{{ old('num_shares') }}" min="1" placeholder="e.g. 10" required id="numShares">
                            @error('num_shares')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Currency</label>
                            <select name="currency" class="form-select">
                                <option value="USD" {{ old('currency','USD')==='USD'?'selected':'' }}>USD — US Dollar</option>
                                <option value="LRD" {{ old('currency')==='LRD'?'selected':'' }}>LRD — Liberian Dollar</option>
                            </select>
                        </div>

                        {{-- Payment Method --}}
                        <div class="col-12">
                            <label class="form-label">Payment Method <span class="text-danger">*</span></label>
                            <div class="row g-2">
                                @foreach([
                                    'upfront'          => ['fa-bolt',       '#2e7d52', 'Upfront Payment',   'Member pays full amount immediately'],
                                    'salary_deduction' => ['fa-calendar-days','#1565c0','Salary Deduction','Spread across monthly payroll deductions'],
                                ] as $val => [$icon,$color,$label,$desc])
                                <div class="col-md-6">
                                    <label style="cursor:pointer;display:block;">
                                        <input type="radio" name="payment_method" value="{{ $val }}"
                                            {{ old('payment_method','upfront')===$val?'checked':'' }}
                                            style="display:none;" class="method-radio">
                                        <div class="method-card" data-color="{{ $color }}"
                                            style="border:2px solid {{ old('payment_method','upfront')===$val?$color:'var(--border)' }};border-radius:12px;padding:16px;transition:all .2s;">
                                            <div class="d-flex align-items-center gap-3">
                                                <div style="width:40px;height:40px;background:{{ $color }}1a;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                                                    <i class="fa-solid {{ $icon }}" style="color:{{ $color }};font-size:1rem;"></i>
                                                </div>
                                                <div>
                                                    <div style="font-weight:600;font-size:.9rem;color:{{ $color }};">{{ $label }}</div>
                                                    <div style="font-size:.76rem;color:#6b7a8d;">{{ $desc }}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </label>
                                </div>
                                @endforeach
                            </div>
                        </div>

                        <div id="instalmentsRow" class="col-md-6" style="display:none;">
                            <label class="form-label">Number of Monthly Instalments</label>
                            <input type="number" name="instalments" class="form-control" value="{{ old('instalments',12) }}"
                                min="1" max="60" id="instalments">
                            <div style="font-size:.72rem;color:#6b7a8d;margin-top:3px;">Max 60 months</div>
                        </div>

                        <div class="col-12">
                            <label class="form-label">Notes</label>
                            <textarea name="notes" class="form-control" rows="2" placeholder="Optional notes...">{{ old('notes') }}</textarea>
                        </div>
                    </div>
                </div>
                <div class="card-body" style="border-top:1px solid var(--border);">
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-gold px-5">
                            <i class="fa-solid fa-chart-pie me-1"></i> Issue Shares
                        </button>
                        <a href="{{ route('admin.shares.index') }}" class="btn btn-outline-navy">Cancel</a>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="col-lg-5">
        <div class="card mb-3">
            <div class="card-header"><div class="card-header-title">Cost Estimate</div></div>
            <div class="card-body">
                <div style="background:rgba(201,168,76,.08);border-radius:10px;padding:16px;">
                    <div class="d-flex justify-content-between mb-2">
                        <span style="font-size:.82rem;">Price per share</span>
                        <span class="amount">${{ number_format(\App\Services\ShareService::pricePerShareUsd(),2) }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span style="font-size:.82rem;">Price per share (LRD)</span>
                        <span class="amount" style="color:#1565c0;">L${{ number_format(\App\Services\ShareService::pricePerShareLrd(),2) }}</span>
                    </div>
                    <hr style="border-color:rgba(201,168,76,.2);margin:10px 0;">
                    <div class="d-flex justify-content-between mb-2">
                        <span style="font-size:.82rem;font-weight:600;">Total (USD)</span>
                        <span class="amount" style="font-weight:700;font-size:1rem;" id="totalUsd">—</span>
                    </div>
                    <div class="d-flex justify-content-between mb-2">
                        <span style="font-size:.82rem;font-weight:600;">Total (LRD)</span>
                        <span class="amount" style="font-weight:700;font-size:1rem;color:#1565c0;" id="totalLrd">—</span>
                    </div>
                    <div class="d-flex justify-content-between" id="monthlyRow" style="display:none !important;">
                        <span style="font-size:.82rem;color:#1565c0;">Monthly deduction</span>
                        <span class="amount" style="color:#1565c0;" id="monthlyAmt">—</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header"><div class="card-header-title">Share Settings</div></div>
            <div class="card-body">
                <div class="d-flex justify-content-between py-2" style="border-bottom:1px solid var(--border);font-size:.85rem;">
                    <span style="color:#6b7a8d;">Price per Share</span>
                    <strong>${{ number_format(\App\Services\ShareService::pricePerShareUsd(),2) }} USD</strong>
                </div>
                <div class="d-flex justify-content-between py-2" style="border-bottom:1px solid var(--border);font-size:.85rem;">
                    <span style="color:#6b7a8d;">Max Shares per Member</span>
                    <strong>{{ number_format(\App\Services\ShareService::maxSharesPerMember()) }}</strong>
                </div>
                <div class="d-flex justify-content-between py-2" style="font-size:.85rem;">
                    <span style="color:#6b7a8d;">Exchange Rate</span>
                    <strong>L${{ number_format($rate,2) }}=US$1</strong>
                </div>
                <a href="{{ route('admin.settings') }}" class="btn btn-outline-navy w-100 mt-3" style="font-size:.82rem;">
                    <i class="fa-solid fa-sliders me-1"></i> Adjust in Settings
                </a>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
const priceUsd = {{ \App\Services\ShareService::pricePerShareUsd() }};
const xRate    = {{ $rate }};

function fmt(n) { return n.toLocaleString('en',{minimumFractionDigits:2,maximumFractionDigits:2}); }

function calc() {
    const n    = parseInt(document.getElementById('numShares').value) || 0;
    const inst = parseInt(document.getElementById('instalments')?.value) || 1;
    const tot  = n * priceUsd;
    document.getElementById('totalUsd').textContent = n ? '$'+fmt(tot) : '—';
    document.getElementById('totalLrd').textContent = n ? 'L$'+fmt(tot*xRate) : '—';
    const mr = document.getElementById('monthlyRow');
    const ma = document.getElementById('monthlyAmt');
    if (document.querySelector('.method-radio:checked')?.value === 'salary_deduction' && n) {
        mr.style.display = 'flex';
        ma.textContent = 'L$'+fmt((tot*xRate)/inst)+' / mo';
    } else {
        mr.style.display = 'none';
    }
}

document.getElementById('numShares').addEventListener('input', calc);
document.getElementById('instalments')?.addEventListener('input', calc);

document.querySelectorAll('.method-radio').forEach(r => {
    r.addEventListener('change', function () {
        document.querySelectorAll('.method-card').forEach(c => c.style.borderColor='var(--border)');
        this.nextElementSibling.style.borderColor = this.nextElementSibling.dataset.color;
        const row = document.getElementById('instalmentsRow');
        row.style.display = this.value === 'salary_deduction' ? 'block' : 'none';
        calc();
    });
});
</script>
@endpush
@endsection