@extends('admin.layouts.master-soyuz')
@section('title', __('Add New Coupon'))

@section('body')
@component('admin.component.breadcumb',['thirdactive' => 'active'])
    @slot('heading'){{ __('Home') }}@endslot
    @slot('menu1'){{ __('Coupon') }}@endslot
    @slot('menu2'){{ __('Add Coupon') }}@endslot
    @slot('button')
        <div class="col-md-6">
            <div class="widgetbar">
                <a href="{{ route('coupan.index') }}" class="btn btn-primary-rgba"><i class="feather icon-arrow-left mr-2"></i> {{ __('Back') }}</a>
            </div>
        </div>
    @endslot
@endcomponent

<div class="contentbar">
    {{-- Hero --}}
    <div class="card m-b-30" style="border:0;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#10b981 0%,#059669 100%);">
        <div class="card-body" style="padding:24px;color:#fff;">
            <div class="row align-items-center">
                <div class="col-md-1 text-center">
                    <div style="width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,0.18);display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto;">
                        <i class="feather icon-tag"></i>
                    </div>
                </div>
                <div class="col-md-11">
                    <h4 style="margin:0;font-weight:800;">{{ __('Create a new coupon') }}</h4>
                    <p style="margin:6px 0 0;opacity:.9;font-size:14px;">{{ __('Drive sales by giving customers a discount on a cart, product, or category.') }}</p>
                </div>
            </div>
        </div>
    </div>

    @if($errors->any())
        <div class="alert alert-danger" role="alert" style="border-radius:10px;">
            @foreach($errors->all() as $error)<p style="margin:0;">{{ $error }}</p>@endforeach
        </div>
    @endif

    <form action="{{ route('coupan.store') }}" method="POST">
        @csrf
        <div class="row">
            {{-- LEFT: main fields --}}
            <div class="col-lg-8">
                {{-- Section: Code & Discount --}}
                <div class="card m-b-30" style="border:0;border-radius:14px;box-shadow:0 1px 3px rgba(15,23,42,.06);">
                    <div class="card-header" style="background:#fff;border-bottom:1px solid #f1f5f9;border-radius:14px 14px 0 0;padding:16px 20px;">
                        <h5 class="box-title" style="margin:0;font-weight:700;"><i class="feather icon-hash text-primary mr-2"></i>{{ __('Code & Discount') }}</h5>
                    </div>
                    <div class="card-body" style="padding:24px;">
                        <div class="row">
                            <div class="col-md-12 form-group">
                                <label style="font-weight:600;color:#0a1430;">{{ __('Coupon Code') }} <span class="text-danger">*</span></label>
                                <input required type="text" class="form-control" name="code" placeholder="e.g. SAVE20" style="font-family:monospace;text-transform:uppercase;border-radius:10px;font-weight:700;letter-spacing:.5px;">
                                <small class="text-muted">{{ __('Customers will type this exact code at checkout.') }}</small>
                            </div>
                            <div class="col-md-6 form-group">
                                <label style="font-weight:600;color:#0a1430;">{{ __('Discount Type') }} <span class="text-danger">*</span></label>
                                <select required name="distype" id="distype" class="form-control select2">
                                    <option value="fix">{{ __('Fixed Amount') }}</option>
                                    <option value="per">{{ __('Percentage (%)') }}</option>
                                </select>
                            </div>
                            <div class="col-md-6 form-group">
                                <label style="font-weight:600;color:#0a1430;">{{ __('Discount Value') }} <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input required type="number" step="0.01" min="0" class="form-control" name="amount" placeholder="0.00" style="border-radius:10px 0 0 10px;">
                                    <div class="input-group-append">
                                        <span class="input-group-text" id="distypeUnit" style="border-radius:0 10px 10px 0;background:#f1f5f9;font-weight:700;"><i class="feather icon-dollar-sign"></i></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Section: Apply To --}}
                <div class="card m-b-30" style="border:0;border-radius:14px;box-shadow:0 1px 3px rgba(15,23,42,.06);">
                    <div class="card-header" style="background:#fff;border-bottom:1px solid #f1f5f9;border-radius:14px 14px 0 0;padding:16px 20px;">
                        <h5 class="box-title" style="margin:0;font-weight:700;"><i class="feather icon-link-2 text-warning mr-2"></i>{{ __('What does it apply to?') }}</h5>
                    </div>
                    <div class="card-body" style="padding:24px;">
                        <div class="row" id="applyTiles" style="margin-bottom:16px;">
                            @php
                                $opts = [
                                    'cart'           => ['label' => __('Whole Cart'),       'icon' => 'shopping-cart', 'desc' => __('Discount the entire order')],
                                    'product'        => ['label' => __('Variant Product'),  'icon' => 'box',           'desc' => __('Single variant product')],
                                    'simple_product' => ['label' => __('Simple Product'),   'icon' => 'package',       'desc' => __('Single simple product')],
                                    'category'       => ['label' => __('Category'),         'icon' => 'grid',          'desc' => __('All products in a category')],
                                ];
                            @endphp
                            @foreach($opts as $val => $opt)
                                <div class="col-md-3 col-6 mb-2">
                                    <label class="apply-tile" data-val="{{ $val }}" style="display:block;cursor:pointer;border:2px solid #e2e8f0;border-radius:12px;padding:14px;text-align:center;transition:all .15s;height:100%;">
                                        <i class="feather icon-{{ $opt['icon'] }}" style="font-size:22px;color:#3b6df0;"></i>
                                        <div style="font-weight:700;font-size:13px;color:#0a1430;margin-top:8px;">{{ $opt['label'] }}</div>
                                        <small style="color:#64748b;display:block;line-height:1.3;margin-top:2px;">{{ $opt['desc'] }}</small>
                                    </label>
                                </div>
                            @endforeach
                        </div>

                        <input type="hidden" name="link_by" id="link_by" value="cart">

                        {{-- Variant product --}}
                        <div id="probox" class="form-group" style="display:none;">
                            <label style="font-weight:600;color:#0a1430;">{{ __('Select Variant Product') }} <span class="text-danger">*</span></label>
                            <select id="pro_id" name="pro_id" class="form-control select2">
                                @foreach(App\Product::where('status','1')->get() as $product)
                                    @if(count($product->subvariants)>0)
                                        <option value="{{ $product->id }}">{{ $product->name }}</option>
                                    @endif
                                @endforeach
                            </select>
                        </div>

                        {{-- Simple product --}}
                        <div id="simpleprobox" class="form-group" style="display:none;">
                            <label style="font-weight:600;color:#0a1430;">{{ __('Select Simple Product') }} <span class="text-danger">*</span></label>
                            <select id="simple_pro_id" name="simple_pro_id" class="form-control select2">
                                @foreach(App\SimpleProduct::where('type','!=','ex_product')->where('status','1')->get() as $sproduct)
                                    <option value="{{ $sproduct->id }}">{{ $sproduct->product_name }}</option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Category --}}
                        <div id="catbox" class="form-group" style="display:none;">
                            <label style="font-weight:600;color:#0a1430;">{{ __('Select Category') }} <span class="text-danger">*</span></label>
                            <select id="cat_id" name="cat_id" class="form-control select2">
                                @foreach(App\Category::where('status','1')->get() as $cat)
                                    <option value="{{ $cat->id }}">{{ $cat->title }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            {{-- RIGHT: rules & limits --}}
            <div class="col-lg-4">
                <div class="card m-b-30" style="border:0;border-radius:14px;box-shadow:0 1px 3px rgba(15,23,42,.06);">
                    <div class="card-header" style="background:#fff;border-bottom:1px solid #f1f5f9;border-radius:14px 14px 0 0;padding:16px 20px;">
                        <h5 class="box-title" style="margin:0;font-weight:700;"><i class="feather icon-sliders text-success mr-2"></i>{{ __('Rules & Limits') }}</h5>
                    </div>
                    <div class="card-body" style="padding:20px;">
                        <div class="form-group">
                            <label style="font-weight:600;color:#0a1430;">{{ __('Max Usage Limit') }} <span class="text-danger">*</span></label>
                            <input required type="number" min="1" class="form-control" name="maxusage" placeholder="100" style="border-radius:10px;">
                            <small class="text-muted">{{ __('How many times this coupon can be used in total.') }}</small>
                        </div>

                        <div class="form-group">
                            <label style="font-weight:600;color:#0a1430;">{{ __('Minimum Cart Amount') }}</label>
                            <div class="input-group">
                                <input type="number" min="0" step="0.01" value="0.00" class="form-control" name="minamount" style="border-radius:10px 0 0 10px;">
                                <div class="input-group-append">
                                    <span class="input-group-text" style="border-radius:0 10px 10px 0;background:#f1f5f9;"><i class="feather icon-dollar-sign"></i></span>
                                </div>
                            </div>
                            <small class="text-muted">{{ __('Coupon only applies if cart total exceeds this amount.') }}</small>
                        </div>

                        <div class="form-group">
                            <label style="font-weight:600;color:#0a1430;">{{ __('Expiry Date') }}</label>
                            <div class="input-group">
                                <input type="text" id="default-date" class="form-control" name="expirydate" placeholder="dd/mm/yyyy" style="border-radius:10px 0 0 10px;">
                                <div class="input-group-append">
                                    <span class="input-group-text" style="border-radius:0 10px 10px 0;background:#f1f5f9;"><i class="feather icon-calendar"></i></span>
                                </div>
                            </div>
                            <small class="text-muted">{{ __('Leave empty for no expiry.') }}</small>
                        </div>

                        <div style="background:#f8fafc;border-radius:10px;padding:14px;margin-top:6px;display:flex;justify-content:space-between;align-items:center;">
                            <div>
                                <div style="font-weight:700;color:#0a1430;font-size:13px;">{{ __('Logged-in users only') }}</div>
                                <small class="text-muted" style="font-size:11px;">{{ __('Block guests from using this coupon') }}</small>
                            </div>
                            <label class="switch" style="margin:0;">
                                <input type="checkbox" class="quizfp toggle-input toggle-buttons" name="is_login" checked>
                                <span class="knob"></span>
                            </label>
                        </div>
                    </div>
                </div>

                {{-- Live preview --}}
                <div class="card m-b-30" style="border:0;border-radius:14px;background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);overflow:hidden;">
                    <div class="card-body" style="padding:20px;text-align:center;">
                        <div style="font-size:11px;text-transform:uppercase;color:#92400e;font-weight:700;letter-spacing:.5px;">{{ __('Preview') }}</div>
                        <div id="couponPreviewCode" style="font-family:monospace;font-weight:800;font-size:22px;color:#0a1430;background:#fff;padding:12px 16px;border-radius:10px;border:2px dashed #f59e0b;margin:10px 0;letter-spacing:1px;">{{ __('YOUR-CODE') }}</div>
                        <div id="couponPreviewVal" style="color:#92400e;font-weight:700;font-size:14px;">{{ __('Discount: $0') }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-end" style="gap:8px;">
            <button type="reset" class="btn btn-light" style="border-radius:10px;font-weight:600;"><i class="fa fa-ban"></i> {{ __('Reset') }}</button>
            <button type="submit" class="btn btn-primary" style="border-radius:10px;font-weight:600;padding:10px 24px;">
                <i class="fa fa-check-circle"></i> {{ __('Create Coupon') }}
            </button>
        </div>
    </form>
</div>
@endsection

@section('custom-script')
<script>
$(function(){
    function setApply(val){
        $('#link_by').val(val);
        $('.apply-tile').css({'border-color':'#e2e8f0','background':'#fff'});
        $('.apply-tile[data-val="'+val+'"]').css({'border-color':'#3b6df0','background':'#eff6ff'});
        $('#probox,#simpleprobox,#catbox').hide();
        if (val === 'product')        $('#probox').show();
        if (val === 'simple_product') $('#simpleprobox').show();
        if (val === 'category')       $('#catbox').show();
    }
    setApply('cart');
    $(document).on('click', '.apply-tile', function(){ setApply($(this).data('val')); });

    // Distype unit + preview
    function syncUnit(){
        var t = $('#distype').val();
        $('#distypeUnit').html(t === 'per' ? '%' : '<i class="feather icon-dollar-sign"></i>');
        updatePreview();
    }
    $('#distype').on('change', syncUnit);

    function updatePreview(){
        var code = $('input[name="code"]').val().toUpperCase() || @json(__('YOUR-CODE'));
        var amt = parseFloat($('input[name="amount"]').val()) || 0;
        var t = $('#distype').val();
        $('#couponPreviewCode').text(code);
        $('#couponPreviewVal').text((t === 'per' ? amt + '% ' : '$' + amt.toFixed(2) + ' ') + @json(__('off')));
    }
    $('input[name="code"], input[name="amount"]').on('input', updatePreview);

    // Auto-uppercase coupon code
    $('input[name="code"]').on('input', function(){
        this.value = this.value.toUpperCase().replace(/[^A-Z0-9_-]/g, '');
    });

    syncUnit();
});
</script>
@endsection