@extends('admin.layouts.master-soyuz')
@section('title', __('Invoice Design | '))
@section('body')

@component('admin.component.breadcumb', ['secondaryactive' => 'active'])
    @slot('heading'){{ __('Invoice Design') }}@endslot
    @slot('menu1'){{ __('Invoice Design') }}@endslot
@endcomponent

<div class="contentbar">
    @if ($errors->any())
        <div class="alert alert-danger" role="alert">
            @foreach($errors->all() as $error)<p class="mb-0">{{ $error }}</p>@endforeach
        </div>
    @endif

    @if(session('success'))
        <div class="alert alert-success" role="alert">{{ session('success') }}</div>
    @endif

    <form action="{{ route('update.invoice.design') }}" method="POST" id="invoiceDesignForm">
        @csrf

        <div class="row">
            {{-- LEFT COLUMN: form --}}
            <div class="col-lg-8">

                {{-- Display Options --}}
                <div class="card m-b-30">
                    <div class="card-header d-flex align-items-center justify-content-between">
                        <h5 class="card-title mb-0"><i class="feather icon-eye mr-2 text-primary"></i>{{ __('Display Options') }}</h5>
                        <small class="text-muted">{{ __('Choose what to show on the invoice') }}</small>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            @foreach([
                                ['name' => 'show_logo', 'label' => __('Logo'),       'desc' => __('Display your store logo at the top'),  'icon' => 'image'],
                                ['name' => 'show_qr',   'label' => __('QR Code'),    'desc' => __('Print a scannable QR for the order'),   'icon' => 'maximize'],
                                ['name' => 'show_vat',  'label' => __('VAT Number'), 'desc' => __('Show VAT / Tax registration number'),   'icon' => 'percent'],
                            ] as $opt)
                                <div class="col-md-4 mb-3">
                                    <label for="{{ $opt['name'] }}" class="d-block w-100 mb-0" style="cursor: pointer; padding: 14px; border: 1px solid var(--adm-border); border-radius: 10px; transition: border-color 0.15s, background-color 0.15s;">
                                        <div class="d-flex align-items-center justify-content-between">
                                            <div class="d-flex align-items-center" style="gap: 10px;">
                                                <span style="width: 36px; height: 36px; border-radius: 9px; background: rgba(59,109,240,0.10); display: grid; place-items: center; color: #3b6df0;">
                                                    <i class="feather icon-{{ $opt['icon'] }}"></i>
                                                </span>
                                                <span style="font-weight: 600; color: var(--adm-text-dark);">{{ $opt['label'] }}</span>
                                            </div>
                                            <label class="switch mb-0">
                                                <input id="{{ $opt['name'] }}" type="checkbox" name="{{ $opt['name'] }}" {{ isset($design->{$opt['name']}) && $design->{$opt['name']} == 1 ? 'checked' : '' }}>
                                                <span class="knob"></span>
                                            </label>
                                        </div>
                                        <p class="text-muted small mt-2 mb-0" style="line-height: 1.4;">{{ $opt['desc'] }}</p>
                                    </label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                {{-- Layout --}}
                <div class="card m-b-30">
                    <div class="card-header">
                        <h5 class="card-title mb-0"><i class="feather icon-layout mr-2 text-primary"></i>{{ __('Layout & Style') }}</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label class="font-weight-600 mb-2">{{ __('Border Radius') }}</label>
                                <div class="input-group">
                                    <input value="{{ $design->border_radius ?? 8 }}" class="form-control" type="number" min="0" max="32" name="border_radius">
                                    <div class="input-group-append">
                                        <span class="input-group-text">{{ __('px') }}</span>
                                    </div>
                                </div>
                                <small class="text-muted">{{ __('Corner roundness for invoice card') }}</small>
                            </div>

                            <div class="col-md-4 mb-3">
                                <label class="font-weight-600 mb-2">{{ __('Border Color') }}</label>
                                <div class="d-flex align-items-center" style="gap: 10px;">
                                    <input id="border_color_picker" type="color" value="{{ $design->border_color ?? '#e2e8f0' }}" style="width: 48px; height: 40px; padding: 2px; border-radius: 8px; border: 1px solid var(--adm-border); cursor: pointer; background: transparent;">
                                    <input id="border_color_text" name="border_color" type="text" maxlength="7" value="{{ $design->border_color ?? '#e2e8f0' }}" class="form-control sh-select-bare" style="font-family: monospace; text-transform: uppercase;" placeholder="#000000">
                                </div>
                            </div>

                            <div class="col-md-4 mb-3">
                                <label class="font-weight-600 mb-2">{{ __('Border Style') }}</label>
                                <select name="border_style" class="form-control sh-select-bare">
                                    <option value="solid"  {{ ($design->border_style ?? 'solid') === 'solid'  ? 'selected' : '' }}>{{ __('Solid') }}</option>
                                    <option value="dashed" {{ ($design->border_style ?? '') === 'dashed' ? 'selected' : '' }}>{{ __('Dashed') }}</option>
                                </select>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="font-weight-600 mb-2">{{ __('Date Format') }}</label>
                                <select name="date_format" class="form-control sh-select-bare">
                                    @foreach([
                                        'd-m-Y' => '06-04-2026  (d-m-Y)',
                                        'Y-m-d' => '2026-04-06  (Y-m-d)',
                                        'd/m/Y' => '06/04/2026  (d/m/Y)',
                                        'd M, Y' => '06 Apr, 2026  (d M, Y)',
                                        'jS M Y' => '6th Apr 2026  (jS M Y)',
                                    ] as $val => $label)
                                        <option value="{{ $val }}" {{ ($design->date_format ?? 'd-m-Y') === $val ? 'selected' : '' }}>{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="font-weight-600 mb-2">{{ __('Print Orientation') }}</label>
                                <div class="d-flex" style="gap: 8px;">
                                    @foreach(['portrait' => 'icon-square', 'landscape' => 'icon-tablet'] as $mode => $icon)
                                        <label class="flex-grow-1 mb-0" style="cursor: pointer;">
                                            <input type="radio" name="print_mode" value="{{ $mode }}" class="d-none print-mode-radio" {{ ($design->print_mode ?? 'portrait') === $mode ? 'checked' : '' }}>
                                            <div class="print-mode-card text-center p-3" style="border: 2px solid var(--adm-border); border-radius: 10px; transition: border-color 0.15s, background-color 0.15s;">
                                                <i class="feather {{ $icon }}" style="font-size: 22px; color: #64748b;"></i>
                                                <div class="mt-1" style="font-size: 13px; font-weight: 600; text-transform: capitalize;">{{ __($mode) }}</div>
                                            </div>
                                        </label>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="d-flex" style="gap: 8px;">
                    <button type="submit" {{ env('DEMO_LOCK') == 0 ? '' : 'disabled' }} class="btn btn-primary-rgba">
                        <i class="feather icon-save mr-1"></i> {{ __('Save Changes') }}
                    </button>
                    <button type="reset" {{ env('DEMO_LOCK') == 0 ? '' : 'disabled' }} class="btn btn-danger-rgba">
                        <i class="feather icon-rotate-ccw mr-1"></i> {{ __('Reset') }}
                    </button>
                </div>
            </div>

            {{-- RIGHT COLUMN: live preview --}}
            <div class="col-lg-4">
                <div class="card m-b-30" style="position: sticky; top: 80px;">
                    <div class="card-header">
                        <h5 class="card-title mb-0"><i class="feather icon-eye mr-2 text-primary"></i>{{ __('Live Preview') }}</h5>
                    </div>
                    <div class="card-body">
                        <div id="invoicePreview" style="background: #f8fafc; padding: 14px; border-radius: 10px;">
                            <div id="invoicePreviewCard" style="background: #fff; padding: 20px; min-height: 380px; border-style: solid; border-width: 1px; border-color: #e2e8f0; border-radius: 8px; box-shadow: 0 2px 6px rgba(15,23,42,0.05);">
                                <div class="d-flex align-items-start justify-content-between mb-3" style="gap: 10px;">
                                    <div class="invoice-prv-logo" style="width: 56px; height: 56px; background: rgba(59,109,240,0.12); border-radius: 8px; display: grid; place-items: center; color: #3b6df0; font-weight: 800;">L</div>
                                    <div class="text-right">
                                        <div style="font-weight: 800; font-size: 16px; letter-spacing: 0.04em;">INVOICE</div>
                                        <div class="text-muted" style="font-size: 11px;">#INV-00123</div>
                                        <div class="text-muted invoice-prv-date" style="font-size: 11px; margin-top: 2px;">06-04-2026</div>
                                    </div>
                                </div>
                                <div class="invoice-prv-vat text-muted" style="font-size: 11px; margin-bottom: 12px;">VAT: GB123456789</div>
                                <div style="border-top: 1px dashed #e2e8f0; margin: 8px 0 12px;"></div>
                                <div style="font-size: 12px; color: #475569; line-height: 1.6;">
                                    <div><strong>Bill to:</strong> John Doe</div>
                                    <div>123 Sample Street</div>
                                </div>
                                <table style="width: 100%; margin-top: 12px; font-size: 11.5px; border-collapse: collapse;">
                                    <thead>
                                        <tr style="background: #f1f5f9; color: #334155;">
                                            <th style="padding: 6px 8px; text-align: left;">Item</th>
                                            <th style="padding: 6px 8px; text-align: right;">Total</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr><td style="padding: 6px 8px; border-bottom: 1px solid #f1f5f9;">Sample product</td><td style="padding: 6px 8px; border-bottom: 1px solid #f1f5f9; text-align: right;">$ 49.00</td></tr>
                                        <tr><td style="padding: 6px 8px; font-weight: 600;">Total</td><td style="padding: 6px 8px; font-weight: 700; text-align: right;">$ 49.00</td></tr>
                                    </tbody>
                                </table>
                                <div class="invoice-prv-qr text-center" style="margin-top: 14px;">
                                    <div style="display: inline-block; padding: 6px; background: #fff; border: 1px solid #e2e8f0;">
                                        <svg width="48" height="48" viewBox="0 0 16 16" fill="currentColor" class="text-deep"><rect width="6" height="6"/><rect x="10" width="6" height="6"/><rect y="10" width="6" height="6"/><rect x="8" y="8" width="2" height="2"/><rect x="12" y="8" width="2" height="2"/><rect x="8" y="12" width="2" height="2"/><rect x="14" y="14" width="2" height="2"/></svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <p class="text-muted small mt-3 mb-0">
                            <i class="feather icon-info mr-1"></i> {{ __('Preview reflects unsaved changes.') }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

@endsection

@section('custom-script')
<script>
(function(){
    var card = document.getElementById('invoicePreviewCard');
    var radius = document.querySelector('input[name="border_radius"]');
    var colorPicker = document.getElementById('border_color_picker');
    var colorText = document.getElementById('border_color_text');
    var styleSel = document.querySelector('select[name="border_style"]');
    var dateSel = document.querySelector('select[name="date_format"]');

    function refresh(){
        if (!card) return;
        if (radius) card.style.borderRadius = (parseInt(radius.value, 10) || 0) + 'px';
        if (styleSel) card.style.borderStyle = styleSel.value || 'solid';
        if (colorPicker) card.style.borderColor = colorPicker.value;

        var logo = document.querySelector('.invoice-prv-logo');
        var qr   = document.querySelector('.invoice-prv-qr');
        var vat  = document.querySelector('.invoice-prv-vat');
        var dt   = document.querySelector('.invoice-prv-date');

        var sl = document.getElementById('show_logo');
        var sq = document.getElementById('show_qr');
        var sv = document.getElementById('show_vat');
        if (logo && sl) logo.style.display = sl.checked ? '' : 'none';
        if (qr   && sq) qr.style.display   = sq.checked ? '' : 'none';
        if (vat  && sv) vat.style.display  = sv.checked ? '' : 'none';

        if (dt && dateSel) {
            var fmts = {
                'd-m-Y': '06-04-2026',
                'Y-m-d': '2026-04-06',
                'd/m/Y': '06/04/2026',
                'd M, Y': '06 Apr, 2026',
                'jS M Y': '6th Apr 2026'
            };
            dt.textContent = fmts[dateSel.value] || dateSel.value;
        }
    }

    function syncColor(src){
        if (!colorPicker || !colorText) return;
        if (src === 'picker') colorText.value = colorPicker.value.toUpperCase();
        else if (/^#[0-9a-fA-F]{6}$/.test(colorText.value.trim())) colorPicker.value = colorText.value.trim();
        refresh();
    }

    document.querySelectorAll('input[name="show_logo"], input[name="show_qr"], input[name="show_vat"], input[name="border_radius"], select[name="border_style"], select[name="date_format"]').forEach(function(el){
        el.addEventListener('input', refresh);
        el.addEventListener('change', refresh);
    });
    if (colorPicker) colorPicker.addEventListener('input', function(){ syncColor('picker'); });
    if (colorText)   colorText.addEventListener('input',   function(){ syncColor('text'); });

    // Print mode card visual selected state
    function paintPrintMode(){
        document.querySelectorAll('.print-mode-radio').forEach(function(r){
            var card = r.parentElement.querySelector('.print-mode-card');
            if (!card) return;
            if (r.checked) {
                card.style.borderColor = '#3b6df0';
                card.style.backgroundColor = 'rgba(59,109,240,0.06)';
            } else {
                card.style.borderColor = 'var(--adm-border)';
                card.style.backgroundColor = '';
            }
        });
    }
    document.querySelectorAll('.print-mode-radio').forEach(function(r){ r.addEventListener('change', paintPrintMode); });
    paintPrintMode();
    refresh();
})();
</script>
@endsection