@extends('admin.layouts.main')
@section('title', 'Create Order')
@section('menu', 'Orders')

@section('content')
<form action="{{ route('admin.orders.store') }}" method="POST" id="orderForm">
    @csrf
    <fieldset class="content-group">
        <div class="row">
            <div class="col-md-8">
                <div class="panel panel-primary">
                    <div class="panel-heading font-bold">Order Details</div>
                    <div class="panel-body">
                        <div class="form-group">
                            <label class="control-label">Customer<span class="text-danger"> *</span></label>
                            <select name="user_id" class="form-control select2" required>
                                <option value="">-- Select Customer --</option>
                                @foreach($clients as $client)
                                    <option value="{{ $client->id }}" {{ old('user_id') == $client->id ? 'selected' : '' }}>{{ $client->first_name }} {{ $client->last_name }} ({{ $client->email }})</option>
                                @endforeach
                            </select>
                            @if ($errors->has('user_id'))<span class="help-block text-danger">{{ $errors->first('user_id') }}</span>@endif
                        </div>
                    </div>
                </div>

                <div class="panel panel-primary">
                    <div class="panel-heading font-bold">Order Items</div>
                    <div class="panel-body">
                        <div id="itemsContainer">
                            <div class="item-block" data-index="0" style="border:1px solid #e0e0e0; border-radius:4px; padding:12px; margin-bottom:12px; background:#fafafa;">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label>Item Type <span class="text-danger">*</span></label>
                                            <select name="items[0][item_type]" class="form-control item-type-select" onchange="toggleFields(this)">
                                                <option value="one_time">One Time Service</option>
                                                <option value="hosting">Hosting</option>
                                                <option value="domain_register">Domain Register</option>
                                                <option value="domain_transfer">Domain Transfer</option>
                                                <option value="domain_renewal">Domain Renewal</option>
                                                <option value="recurring_service">Recurring Service</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group field-product">
                                            <label>Product</label>
                                            <select name="items[0][product_id]" class="form-control product-select" onchange="fillProductInfo(this)">
                                                <option value="">-- No Product --</option>
                                                @foreach($products as $product)
                                                    <option value="{{ $product->id }}" data-name="{{ $product->name }}" data-type="{{ $product->type }}" data-price="{{ $product->pricing->first()->price ?? 0 }}" data-setup="{{ $product->pricing->first()->setup_fee ?? 0 }}">{{ $product->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group field-domain">
                                            <label>Domain Name</label>
                                            <input type="text" name="items[0][domain]" class="form-control" placeholder="e.g. example.com">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-3 field-tld" style="display:none;">
                                        <div class="form-group">
                                            <label>TLD <span class="text-danger">*</span></label>
                                            <select name="items[0][tld_extension_id]" class="form-control">
                                                <option value="">-- Select TLD --</option>
                                                @foreach($tldExtensions as $tld)
                                                    <option value="{{ $tld->id }}">{{ $tld->tld }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3 field-epp" style="display:none;">
                                        <div class="form-group">
                                            <label>EPP/Auth Code <span class="text-danger">*</span></label>
                                            <input type="text" name="items[0][epp_code]" class="form-control" placeholder="Authorization code">
                                        </div>
                                    </div>
                                    <div class="col-md-3 field-billing-cycle" style="display:none;">
                                        <div class="form-group">
                                            <label>Billing Cycle</label>
                                            <select name="items[0][billing_cycle_id]" class="form-control">
                                                <option value="">-- Select --</option>
                                                @foreach($billingCycles as $bc)
                                                    <option value="{{ $bc->id }}">{{ $bc->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label>Unit Price <span class="text-danger">*</span></label>
                                            <input type="number" step="0.01" name="items[0][unit_price]" class="form-control item-price" value="0.00" required>
                                        </div>
                                    </div>
                                    <div class="col-md-1">
                                        <div class="form-group">
                                            <label>Qty</label>
                                            <input type="number" name="items[0][quantity]" class="form-control" value="1" min="1" required>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group">
                                            <label>Setup Fee</label>
                                            <input type="number" step="0.01" name="items[0][setup_fee]" class="form-control item-setup" value="0.00">
                                        </div>
                                    </div>
                                    <div class="col-md-2 field-renewal-price" style="display:none;">
                                        <div class="form-group">
                                            <label>Renewal Price</label>
                                            <input type="number" step="0.01" name="items[0][renewal_price]" class="form-control" value="0.00">
                                        </div>
                                    </div>
                                    <div class="col-md-1" style="padding-top:25px;">
                                        <button type="button" class="btn btn-danger btn-sm remove-item"><i class="fa fa-trash"></i></button>
                                    </div>
                                </div>
                                <input type="hidden" name="items[0][description]" class="item-description" value="">
                            </div>
                        </div>
                        @if ($errors->has('items'))<span class="help-block text-danger">{{ $errors->first('items') }}</span>@endif
                        <button type="button" class="btn btn-info btn-sm" id="addItem"><i class="fa fa-plus"></i> Add Item</button>
                    </div>
                </div>

                <div class="panel panel-primary">
                    <div class="panel-heading font-bold">Notes</div>
                    <div class="panel-body">
                        <textarea name="notes" class="form-control" rows="3" placeholder="Internal notes...">{{ old('notes') }}</textarea>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="panel panel-success">
                    <div class="panel-heading font-bold">Publish</div>
                    <div class="panel-body">
                        <a type="button" class="btn btn-warning" href="{{ route('admin.orders.index') }}"><i class="fa fa-long-arrow-left"></i> Back to List</a>
                        <button type="submit" name="save" class="btn btn-success pull-right"><i class="fa fa-save"></i> Create Order</button>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
</form>
@endsection

@push('custom-stylesheets')
<link href="{{ asset('/back/assets/global/plugins/select2/select2.css') }}" rel="stylesheet">
<link href="{{ asset('/back/assets/global/plugins/select2/select2-bootstrap.css') }}" rel="stylesheet">
@endpush

@push('custom-scripts')
<script src="{{ asset('/back/assets/global/plugins/select2/select2.min.js') }}"></script>
<script>
var productsData = @json($productsJson);
var tldOptions = '@foreach($tldExtensions as $tld)<option value="{{ $tld->id }}">{{ $tld->tld }}</option>@endforeach';
var billingCycleOptions = '@foreach($billingCycles as $bc)<option value="{{ $bc->id }}">{{ $bc->name }}</option>@endforeach';
var productOptions = '{!! $products->map(fn($p) => "<option value=\"{$p->id}\" data-name=\"{$p->name}\" data-type=\"{$p->type}\" data-price=\"" . ($p->pricing->first()->price ?? 0) . "\" data-setup=\"" . ($p->pricing->first()->setup_fee ?? 0) . "\">{$p->name}</option>")->implode("") !!}';

function toggleFields(select) {
    var block = select.closest('.item-block');
    var type = select.value;
    var isDomain = ['domain_register', 'domain_transfer', 'domain_renewal'].includes(type);
    var isTransfer = type === 'domain_transfer';
    var isHosting = ['hosting', 'service', 'ssl'].includes(type);
    var needsRenewal = ['domain_register', 'domain_transfer', 'domain_renewal', 'hosting', 'service'].includes(type);

    block.querySelectorAll('.field-tld').forEach(function(el) { el.style.display = isDomain ? '' : 'none'; });
    block.querySelectorAll('.field-epp').forEach(function(el) { el.style.display = isTransfer ? '' : 'none'; });
    block.querySelectorAll('.field-billing-cycle').forEach(function(el) { el.style.display = isHosting ? '' : 'none'; });
    block.querySelectorAll('.field-renewal-price').forEach(function(el) { el.style.display = needsRenewal ? '' : 'none'; });
}

function fillProductInfo(select) {
    var block = select.closest('.item-block');
    var option = select.options[select.selectedIndex];
    if (option.value) {
        block.querySelector('.item-description').value = option.getAttribute('data-name');
        block.querySelector('.item-price').value = parseFloat(option.getAttribute('data-price')).toFixed(2);
        block.querySelector('.item-setup').value = parseFloat(option.getAttribute('data-setup')).toFixed(2);
        var typeSelect = block.querySelector('.item-type-select');
        var pType = option.getAttribute('data-type');
        if (pType && typeSelect.querySelector('option[value="' + pType + '"]')) {
            typeSelect.value = pType;
            toggleFields(typeSelect);
        }
    }
}

document.addEventListener('DOMContentLoaded', function() {
    jQuery('.select2').select2({ placeholder: '-- Select Customer --', allowClear: true });

    var rowIndex = 1;

    document.getElementById('addItem').addEventListener('click', function() {
        var container = document.getElementById('itemsContainer');
        var block = document.createElement('div');
        block.className = 'item-block';
        block.setAttribute('data-index', rowIndex);
        block.style.cssText = 'border:1px solid #e0e0e0; border-radius:4px; padding:12px; margin-bottom:12px; background:#fafafa;';
        block.innerHTML =
            '<div class="row">' +
                '<div class="col-md-4"><div class="form-group"><label>Item Type <span class="text-danger">*</span></label>' +
                    '<select name="items[' + rowIndex + '][item_type]" class="form-control item-type-select" onchange="toggleFields(this)">' +
                        '<option value="one_time">One Time Service</option><option value="hosting">Hosting</option><option value="domain_register">Domain Register</option><option value="domain_transfer">Domain Transfer</option><option value="domain_renewal">Domain Renewal</option><option value="recurring_service">Recurring Service</option>' +
                    '</select></div></div>' +
                '<div class="col-md-4"><div class="form-group field-product"><label>Product</label>' +
                    '<select name="items[' + rowIndex + '][product_id]" class="form-control product-select" onchange="fillProductInfo(this)"><option value="">-- No Product --</option>' + productOptions + '</select></div></div>' +
                '<div class="col-md-4"><div class="form-group field-domain"><label>Domain Name</label>' +
                    '<input type="text" name="items[' + rowIndex + '][domain]" class="form-control" placeholder="e.g. example.com"></div></div>' +
            '</div>' +
            '<div class="row">' +
                '<div class="col-md-3 field-tld" style="display:none;"><div class="form-group"><label>TLD <span class="text-danger">*</span></label>' +
                    '<select name="items[' + rowIndex + '][tld_extension_id]" class="form-control"><option value="">-- Select TLD --</option>' + tldOptions + '</select></div></div>' +
                '<div class="col-md-3 field-epp" style="display:none;"><div class="form-group"><label>EPP/Auth Code <span class="text-danger">*</span></label>' +
                    '<input type="text" name="items[' + rowIndex + '][epp_code]" class="form-control" placeholder="Authorization code"></div></div>' +
                '<div class="col-md-3 field-billing-cycle" style="display:none;"><div class="form-group"><label>Billing Cycle</label>' +
                    '<select name="items[' + rowIndex + '][billing_cycle_id]" class="form-control"><option value="">-- Select --</option>' + billingCycleOptions + '</select></div></div>' +
                '<div class="col-md-2"><div class="form-group"><label>Unit Price <span class="text-danger">*</span></label>' +
                    '<input type="number" step="0.01" name="items[' + rowIndex + '][unit_price]" class="form-control item-price" value="0.00" required></div></div>' +
                '<div class="col-md-1"><div class="form-group"><label>Qty</label>' +
                    '<input type="number" name="items[' + rowIndex + '][quantity]" class="form-control" value="1" min="1" required></div></div>' +
                '<div class="col-md-2"><div class="form-group"><label>Setup Fee</label>' +
                    '<input type="number" step="0.01" name="items[' + rowIndex + '][setup_fee]" class="form-control item-setup" value="0.00"></div></div>' +
                '<div class="col-md-2 field-renewal-price" style="display:none;"><div class="form-group"><label>Renewal Price</label>' +
                    '<input type="number" step="0.01" name="items[' + rowIndex + '][renewal_price]" class="form-control" value="0.00"></div></div>' +
                '<div class="col-md-1" style="padding-top:25px;"><button type="button" class="btn btn-danger btn-sm remove-item"><i class="fa fa-trash"></i></button></div>' +
            '</div>' +
            '<input type="hidden" name="items[' + rowIndex + '][description]" class="item-description" value="">';
        container.appendChild(block);
        rowIndex++;
    });

    document.getElementById('itemsContainer').addEventListener('click', function(e) {
        var btn = e.target.closest('.remove-item');
        if (btn && document.querySelectorAll('.item-block').length > 1) {
            btn.closest('.item-block').remove();
        }
    });

    document.getElementById('orderForm').addEventListener('submit', function() {
        document.querySelectorAll('.item-block').forEach(function(block) {
            var desc = block.querySelector('.item-description');
            var select = block.querySelector('.product-select');
            if (!desc.value && select && select.options[select.selectedIndex].value) {
                desc.value = select.options[select.selectedIndex].getAttribute('data-name');
            }
            var domain = block.querySelector('[name*="[domain]"]');
            if (!desc.value && domain && domain.value) {
                var typeSelect = block.querySelector('.item-type-select');
                desc.value = typeSelect.options[typeSelect.selectedIndex].text + ' - ' + domain.value;
            }
            if (!desc.value) {
                desc.value = 'Manual Item';
            }
        });
    });
});
</script>
@endpush