@extends('client.layouts.main')

@section('title', 'Checkout')

@section('content')
<form action="{{ route('client.checkout.process') }}" method="POST">
    @csrf
    <div class="row">
        <div class="col-md-8">
            <!-- Account Info -->
            <div class="portlet light">
                <div class="portlet-title">
                    <div class="caption"><span class="caption-subject theme-font bold uppercase">Account Information</span></div>
                </div>
                <div class="portlet-body">
                    <div class="row">
                        <div class="col-md-6">
                            <strong>{{ auth()->user()->first_name }} {{ auth()->user()->last_name }}</strong><br>
                            {{ auth()->user()->email }}<br>
                            {{ auth()->user()->phone }}
                        </div>
                        <div class="col-md-6">
                            {{ auth()->user()->address_line_1 }}<br>
                            {{ auth()->user()->city }}, {{ auth()->user()->state }} {{ auth()->user()->postal_code }}<br>
                            {{ auth()->user()->country_code }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Domain Contact Selection -->
            @if($cart->items->where('item_type', 'domain_register')->count() > 0 || $cart->items->where('item_type', 'domain_transfer')->count() > 0)
            <div class="portlet light">
                <div class="portlet-title">
                    <div class="caption"><span class="caption-subject theme-font bold uppercase">Domain Registrant Contact</span></div>
                </div>
                <div class="portlet-body">
                    <div class="form-group">
                        <label class="control-label">Select Contact for Domain Registration</label>
                        <select name="contact_id" class="form-control">
                            <option value="">-- Use Account Info --</option>
                            @foreach($contacts as $contact)
                                <option value="{{ $contact->id }}" {{ $contact->is_default ? 'selected' : '' }}>{{ $contact->first_name }} {{ $contact->last_name }} ({{ $contact->email }}){{ $contact->is_default ? ' - Default' : '' }}</option>
                            @endforeach
                        </select>
                    </div>
                    <a href="{{ route('client.contacts.create') }}" class="btn btn-sm btn-default"><i class="fa fa-plus"></i> Add New Contact</a>
                </div>
            </div>
            @endif

            <!-- Order Summary -->
            <div class="portlet light">
                <div class="portlet-title">
                    <div class="caption"><span class="caption-subject theme-font bold uppercase">Order Review</span></div>
                </div>
                <div class="portlet-body">
                    <table class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>Description</th>
                                <th>Billing Cycle</th>
                                <th>Price</th>
                                <th>Setup Fee</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($cart->items as $item)
                            <tr>
                                <td>
                                    @if($item->domain)
                                        <strong>{{ $item->domain }}</strong>
                                        <small class="font-grey-mint">({{ ucfirst(str_replace('_', ' ', $item->item_type)) }})</small>
                                    @elseif($item->product)
                                        {{ $item->product->name }}
                                    @else
                                        {{ ucfirst(str_replace('_', ' ', $item->item_type)) }}
                                    @endif
                                </td>
                                <td>{{ $item->billingCycle->name ?? ($item->quantity > 1 ? $item->quantity . ' Years' : '1 Year') }}</td>
                                <td>{{ number_format($item->unit_price * $item->quantity, 2) }}</td>
                                <td>{{ number_format($item->setup_fee, 2) }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Payment Method -->
            <div class="portlet light">
                <div class="portlet-title">
                    <div class="caption"><span class="caption-subject theme-font bold uppercase">Payment Method</span></div>
                </div>
                <div class="portlet-body">
                    @forelse($gateways as $gateway)
                    <label class="gateway-option" style="display:block; padding:12px 15px; margin-bottom:5px; border:1px solid {{ $loop->first ? '#3598dc' : '#e0e0e0' }}; border-radius:4px; cursor:pointer; background:{{ $loop->first ? '#f5faff' : '#fff' }};">
                        <input type="radio" name="payment_gateway_id"
                               value="{{ $gateway->id }}"
                               data-instructions="{{ $gateway->instructions ? e($gateway->instructions) : '' }}"
                               {{ $loop->first ? 'checked' : '' }}
                               style="margin-right:10px; position:relative; top:1px;">
                        <strong>{{ $gateway->display_name }}</strong>
                        @if($gateway->description)
                            <span class="font-grey-mint" style="margin-left:5px;">- {{ $gateway->description }}</span>
                        @endif
                    </label>
                    @empty
                    <p class="font-grey-mint">No payment methods available. Please contact support.</p>
                    @endforelse

                    @if ($errors->has('payment_gateway_id'))
                        <span class="help-block text-danger">{{ $errors->first('payment_gateway_id') }}</span>
                    @endif

                    <!-- Instructions & Transaction Reference (shown for gateways with instructions) -->
                    <div id="gateway-instructions-panel" style="display:none; margin-top:15px;">
                        <div class="alert alert-info" style="white-space:pre-line;" id="gateway-instructions-text"></div>
                        <div class="form-group">
                            <label class="control-label">Transaction Reference <span class="text-danger">*</span></label>
                            <input type="text" name="transaction_reference" id="transaction_reference" class="form-control" placeholder="Enter your payment transaction reference / receipt number">
                            <span class="help-block font-grey-mint">Please complete the payment using the instructions above, then enter the transaction reference here.</span>
                            @if ($errors->has('transaction_reference'))
                                <span class="help-block text-danger">{{ $errors->first('transaction_reference') }}</span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Order Notes -->
            <div class="portlet light">
                <div class="portlet-title">
                    <div class="caption"><span class="caption-subject theme-font bold uppercase">Additional Notes</span></div>
                </div>
                <div class="portlet-body">
                    <textarea name="notes" class="form-control" rows="3" placeholder="Any special instructions or notes for your order..."></textarea>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="portlet light">
                <div class="portlet-title">
                    <div class="caption"><span class="caption-subject theme-font bold uppercase">Order Total</span></div>
                </div>
                <div class="portlet-body">
                    <table class="table table-bordered">
                        <tr>
                            <td>Subtotal</td>
                            <td class="text-right">{{ number_format($totals['subtotal'], 2) }}</td>
                        </tr>
                        @if($totals['setup_fees'] > 0)
                        <tr>
                            <td>Setup Fees</td>
                            <td class="text-right">{{ number_format($totals['setup_fees'], 2) }}</td>
                        </tr>
                        @endif
                        @if($totals['discount'] > 0)
                        <tr class="text-success">
                            <td>Discount</td>
                            <td class="text-right">-{{ number_format($totals['discount'], 2) }}</td>
                        </tr>
                        @endif
                        @if(($totals['tax'] ?? 0) > 0)
                        <tr>
                            <td>Tax</td>
                            <td class="text-right">{{ number_format($totals['tax'], 2) }}</td>
                        </tr>
                        @endif
                        <tr class="bold" style="font-size:16px;">
                            <td>Total Due</td>
                            <td class="text-right">{{ number_format($totals['total'], 2) }}</td>
                        </tr>
                    </table>
                </div>
                <div class="portlet-body" style="padding-top:0;">
                    <button type="submit" class="btn btn-success btn-block btn-lg">
                        <i class="fa fa-check"></i> Place Order
                    </button>
                    <a href="{{ route('client.cart.index') }}" class="btn btn-default btn-block" style="margin-top:10px;">
                        <i class="fa fa-arrow-left"></i> Back to Cart
                    </a>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    var radios = document.querySelectorAll('input[name="payment_gateway_id"]');
    var panel = document.getElementById('gateway-instructions-panel');
    var instructionsText = document.getElementById('gateway-instructions-text');
    var txnInput = document.getElementById('transaction_reference');

    function updateGatewayUI() {
        var selected = document.querySelector('input[name="payment_gateway_id"]:checked');
        var instructions = selected ? selected.getAttribute('data-instructions') : '';

        // Style selected label
        document.querySelectorAll('.gateway-option').forEach(function(l) {
            l.style.border = '1px solid #e0e0e0';
            l.style.background = '#fff';
        });
        if (selected) {
            selected.closest('.gateway-option').style.border = '1px solid #3598dc';
            selected.closest('.gateway-option').style.background = '#f5faff';
        }

        if (instructions) {
            instructionsText.textContent = instructions;
            panel.style.display = 'block';
            txnInput.required = true;
        } else {
            panel.style.display = 'none';
            txnInput.required = false;
            txnInput.value = '';
        }
    }

    radios.forEach(function(radio) {
        radio.addEventListener('change', updateGatewayUI);
    });

    updateGatewayUI();
});
</script>
@endpush