@extends('admin.layouts.app')

@section('title', 'Cart Settings')

@section('content')
    <div class="max-w-3xl mx-auto">
        <div class="mb-6">
            <h1 class="text-2xl font-bold text-white tracking-tight">Shopping Cart Settings</h1>
            <p class="text-slate-400 mt-1">Configure checkout options, COD, and free shipping thresholds.</p>
        </div>

        @if(session('success'))
            <div
                class="mb-6 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 flex items-center gap-3">
                <i data-lucide="check-circle" class="w-5 h-5"></i>
                {{ session('success') }}
            </div>
        @endif

        @if($errors->any())
            <div class="mb-6 p-4 rounded-xl bg-red-500/10 border border-red-500/20 text-red-400">
                <ul class="list-disc list-inside">
                    @foreach($errors->all() as $error) <li>{{ $error }}</li> @endforeach
                </ul>
            </div>
        @endif

        <div class="glass-card rounded-2xl p-6 md:p-8">
            <form action="{{ route('admin.settings.cart.update') }}" method="POST" class="space-y-8">
                @csrf

                <div x-data="{ 
                                        codEnabled: {{ $settings->cod_enabled ? 'true' : 'false' }},
                                        freeShippingEnabled: {{ $settings->free_shipping_enabled ? 'true' : 'false' }}
                                    }">

                    <!-- COD Section -->
                    <div class="flex items-center justify-between py-4 border-b border-white/5">
                        <div class="flex flex-col">
                            <h3 class="text-base font-semibold text-white">Cash on Delivery (COD)</h3>
                            <p class="text-sm text-slate-400">Enable or disable COD payment option for customers.</p>
                        </div>

                        <input type="hidden" name="cod_enabled" :value="codEnabled ? '1' : '0'">

                        <button type="button"
                            class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-slate-900"
                            :class="{ 'bg-blue-600': codEnabled, 'bg-slate-700': !codEnabled }"
                            @click="codEnabled = !codEnabled" role="switch" :aria-checked="codEnabled">
                            <span class="sr-only">Toggle COD</span>
                            <span aria-hidden="true"
                                class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
                                :class="{ 'translate-x-5': codEnabled, 'translate-x-0': !codEnabled }">
                            </span>
                        </button>
                    </div>

                    <!-- Min COD Amount -->
                    <div class="py-6 border-b border-white/5" x-show="codEnabled"
                        x-transition:enter="transition ease-out duration-200"
                        x-transition:enter-start="opacity-0 -translate-y-2"
                        x-transition:enter-end="opacity-100 translate-y-0"
                        x-transition:leave="transition ease-in duration-150"
                        x-transition:leave-start="opacity-100 translate-y-0"
                        x-transition:leave-end="opacity-0 -translate-y-2">
                        <label class="block text-sm font-medium text-slate-300 mb-2">Min Order Amount for COD</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <span class="text-slate-500 sm:text-sm">₹</span>
                            </div>
                            <input type="number" name="min_cod_amount" value="{{ $settings->min_cod_amount ?? 0 }}"
                                class="bg-slate-900/50 border border-white/10 text-white text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block w-full pl-8 p-2.5 transition-all"
                                placeholder="0.00" min="0" step="0.01">
                        </div>
                        <p class="mt-2 text-xs text-slate-500">Minimum cart total required to enable COD option.</p>
                    </div>

                    <!-- Min Stock Threshold -->
                    <div class="py-6 border-b border-white/5">
                        <label class="block text-sm font-medium text-slate-300 mb-2">Min Stock Value (Low Stock
                            Threshold)</label>
                        <div class="relative">
                            <input type="number" name="min_stock_threshold"
                                value="{{ $settings->min_stock_threshold ?? 0 }}"
                                class="bg-slate-900/50 border border-white/10 text-white text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 transition-all"
                                placeholder="0" min="0" step="1">
                        </div>
                        <p class="mt-2 text-xs text-slate-500">Global minimum stock quantity. Products below this stock
                            level will be marked as 'Low Stock'.</p>
                    </div>

                    <!-- Free Shipping -->
                    <div class="py-6">
                        <div class="flex items-center justify-between mb-4">
                            <div>
                                <h3 class="text-base font-semibold text-white">Free Shipping</h3>
                                <p class="text-sm text-slate-400">Enable free shipping functionality.</p>
                            </div>
                            <div
                                class="relative inline-block w-12 mr-2 align-middle select-none transition duration-200 ease-in">
                                <input type="hidden" name="free_shipping_enabled" :value="freeShippingEnabled ? '1' : '0'">
                                <button type="button"
                                    class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-slate-900"
                                    :class="{ 'bg-blue-600': freeShippingEnabled, 'bg-slate-700': !freeShippingEnabled }"
                                    @click="freeShippingEnabled = !freeShippingEnabled" role="switch"
                                    :aria-checked="freeShippingEnabled">
                                    <span class="sr-only">Toggle Free Shipping</span>
                                    <span aria-hidden="true"
                                        class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
                                        :class="{ 'translate-x-5': freeShippingEnabled, 'translate-x-0': !freeShippingEnabled }">
                                    </span>
                                </button>
                            </div>
                        </div>

                        <div id="shipping_threshold_container" x-show="freeShippingEnabled" style="display: none;"
                            x-transition:enter="transition ease-out duration-200"
                            x-transition:enter-start="opacity-0 -translate-y-2"
                            x-transition:enter-end="opacity-100 translate-y-0"
                            x-transition:leave="transition ease-in duration-150"
                            x-transition:leave-start="opacity-100 translate-y-0"
                            x-transition:leave-end="opacity-0 -translate-y-2"
                            class="mt-4 bg-slate-800/50 p-6 rounded-xl border border-white/5">
                            <label class="block text-sm font-medium text-slate-300 mb-2">Free Shipping Amount
                                Threshold</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <span class="text-slate-500 sm:text-sm">₹</span>
                                </div>
                                <input type="number" name="min_order_amount_for_free_shipping"
                                    value="{{ $settings->min_order_amount_for_free_shipping }}"
                                    class="bg-slate-900/50 border border-white/10 text-white text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block w-full pl-8 p-2.5 transition-all"
                                    placeholder="0.00">
                            </div>
                            <p class="mt-2 text-xs text-slate-500">Cart total must be above this amount to qualify for
                                free shipping.</p>
                        </div>
                    </div>

                    <div class="pt-6 flex justify-end border-t border-white/5">
                        <button type="submit"
                            class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-xl transition-all shadow-lg shadow-blue-500/20 flex items-center gap-2">
                            <i data-lucide="save" class="w-4 h-4"></i>
                            Save Cart Settings
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection