@extends('layouts.app')

@section('title', 'Link Sale to Media Agent')

@section('content')
<div class="d-flex align-items-center mb-4">
    <a href="{{ route('media.deal-links.index') }}" class="btn btn-outline-secondary me-3"><i class="bi bi-arrow-left"></i></a>
    <h1 class="h3 mb-0"><i class="bi bi-link-45deg me-2"></i>Link Sale to Media Agent</h1>
</div>

<div class="card">
    <div class="card-body">
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form method="POST" action="{{ route('media.deal-links.store') }}" id="dealLinkForm">
            @csrf

            <div class="row g-3">
                {{-- Sale Selection --}}
                <div class="col-md-6">
                    <label for="sale_id" class="form-label fw-semibold">Sale <span class="text-danger">*</span></label>
                    <select name="sale_id" id="sale_id"
                        class="form-select @error('sale_id') is-invalid @enderror" required>
                        <option value="">Select Sale</option>
                        @foreach ($sales as $sale)
                            <option value="{{ $sale->id }}"
                                data-net="{{ $sale->net_payable }}"
                                {{ old('sale_id') == $sale->id ? 'selected' : '' }}>
                                {{ $sale->agreement_number }} — {{ $sale->customer?->name }} — Flat {{ $sale->flat?->flat_number }}
                                (Net: {{ number_format($sale->net_payable, 2) }})
                            </option>
                        @endforeach
                    </select>
                    @error('sale_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    @if ($sales->isEmpty())
                        <div class="form-text text-warning">No unlinked sales available.</div>
                    @endif
                </div>

                {{-- Media Agent Selection --}}
                <div class="col-md-6">
                    <label for="media_agent_id" class="form-label fw-semibold">Media Agent <span class="text-danger">*</span></label>
                    <select name="media_agent_id" id="media_agent_id"
                        class="form-select @error('media_agent_id') is-invalid @enderror" required>
                        <option value="">Select Agent</option>
                        @foreach ($agents as $agent)
                            <option value="{{ $agent->id }}"
                                data-rate="{{ $agent->commission_rate }}"
                                {{ old('media_agent_id') == $agent->id ? 'selected' : '' }}>
                                {{ $agent->name }} {{ $agent->company_name ? "({$agent->company_name})" : '' }}
                                — Default: {{ number_format($agent->commission_rate, 2) }}%
                            </option>
                        @endforeach
                    </select>
                    @error('media_agent_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>

                <hr>
                <h6 class="text-muted">Commission Settings</h6>

                {{-- Commission Type --}}
                <div class="col-md-4">
                    <label for="commission_type" class="form-label fw-semibold">Commission Type <span class="text-danger">*</span></label>
                    <select name="commission_type" id="commission_type"
                        class="form-select @error('commission_type') is-invalid @enderror" required>
                        <option value="fixed" {{ old('commission_type', 'fixed') === 'fixed' ? 'selected' : '' }}>Fixed Amount</option>
                        <option value="percentage" {{ old('commission_type') === 'percentage' ? 'selected' : '' }}>Percentage of Sale</option>
                        <option value="per_flat" {{ old('commission_type') === 'per_flat' ? 'selected' : '' }}>Per Flat</option>
                    </select>
                    @error('commission_type') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>

                {{-- Commission Rate --}}
                <div class="col-md-4">
                    <label for="commission_rate" class="form-label fw-semibold">
                        <span id="rateLabel">Rate / Amount</span> <span class="text-danger">*</span>
                    </label>
                    <div class="input-group">
                        <input type="number" name="commission_rate" id="commission_rate" step="0.01" min="0"
                            class="form-control @error('commission_rate') is-invalid @enderror"
                            value="{{ old('commission_rate', 0) }}" required>
                        <span class="input-group-text" id="rateUnit">৳</span>
                    </div>
                    @error('commission_rate') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>

                {{-- Computed Commission (preview) --}}
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Estimated Commission</label>
                    <input type="text" id="commissionPreview" class="form-control bg-light fw-bold" readonly value="৳ 0.00">
                </div>
            </div>

            <hr>
            <button type="submit" class="btn btn-primary">
                <i class="bi bi-link me-1"></i> Create Deal Link
            </button>
        </form>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const saleSelect = document.getElementById('sale_id');
    const agentSelect = document.getElementById('media_agent_id');
    const typeSelect = document.getElementById('commission_type');
    const rateInput = document.getElementById('commission_rate');
    const rateLabel = document.getElementById('rateLabel');
    const rateUnit = document.getElementById('rateUnit');
    const preview = document.getElementById('commissionPreview');

    function updateUI() {
        const type = typeSelect.value;
        switch (type) {
            case 'percentage':
                rateLabel.textContent = 'Percentage';
                rateUnit.textContent = '%';
                break;
            case 'per_flat':
                rateLabel.textContent = 'Amount Per Flat';
                rateUnit.textContent = '৳';
                break;
            default:
                rateLabel.textContent = 'Fixed Amount';
                rateUnit.textContent = '৳';
        }
        recalculate();
    }

    function recalculate() {
        const type = typeSelect.value;
        const rate = parseFloat(rateInput.value) || 0;
        const saleOption = saleSelect.options[saleSelect.selectedIndex];
        const netPayable = parseFloat(saleOption?.dataset?.net) || 0;

        let commission = 0;
        switch (type) {
            case 'percentage':
                commission = (rate / 100) * netPayable;
                break;
            case 'per_flat':
                commission = rate * 1; // 1 flat per sale
                break;
            default:
                commission = rate;
        }

        preview.value = '৳ ' + commission.toFixed(2);
    }

    // When agent changes, pre-fill rate if percentage type
    agentSelect.addEventListener('change', function() {
        const option = this.options[this.selectedIndex];
        if (typeSelect.value === 'percentage' && option?.dataset?.rate) {
            rateInput.value = option.dataset.rate;
        }
        recalculate();
    });

    typeSelect.addEventListener('change', function() {
        // Auto-switch to agent's default rate for percentage
        if (this.value === 'percentage') {
            const agentOption = agentSelect.options[agentSelect.selectedIndex];
            if (agentOption?.dataset?.rate) {
                rateInput.value = agentOption.dataset.rate;
            }
        }
        updateUI();
    });

    saleSelect.addEventListener('change', recalculate);
    rateInput.addEventListener('input', recalculate);

    updateUI();
});
</script>
@endpush
@endsection