@extends('layouts.app')

@section('title', 'Edit Receipt Settings')

@section('content')
<div class="py-6">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="mb-6">
            <a href="{{ route('pos-receipt-settings.index') }}" class="text-indigo-600 hover:text-indigo-800 text-sm">
                &larr; Back to Receipt Settings
            </a>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white mt-2">
                {{ $warehouse ? 'Edit Receipt Settings: ' . $warehouse->name : 'Edit Default Receipt Settings' }}
            </h1>
        </div>

        @if(session('success'))
            <div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded">
                {{ session('success') }}
            </div>
        @endif

        <form action="{{ route('pos-receipt-settings.update', $settings->warehouse_id ? $settings->id : 'default') }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <!-- Header Settings -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg mb-6">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Header Information</h2>
                </div>
                <div class="p-6 space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Store Name</label>
                            <input type="text" name="store_name" value="{{ old('store_name', $settings->store_name) }}"
                                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Registration No (SSM)</label>
                            <input type="text" name="registration_no" value="{{ old('registration_no', $settings->registration_no) }}"
                                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Address</label>
                        <textarea name="address" rows="2"
                                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">{{ old('address', $settings->address) }}</textarea>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Phone</label>
                            <input type="text" name="phone" value="{{ old('phone', $settings->phone) }}"
                                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label>
                            <input type="email" name="email" value="{{ old('email', $settings->email) }}"
                                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Website</label>
                            <input type="text" name="website" value="{{ old('website', $settings->website) }}"
                                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Logo</label>
                        @if($settings->logo_path)
                            <div class="mt-2 flex items-center gap-4">
                                <img src="{{ asset($settings->logo_path) }}" alt="Logo" class="h-16 w-auto">
                                <label class="flex items-center">
                                    <input type="checkbox" name="remove_logo" value="1" class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                    <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">Remove logo</span>
                                </label>
                            </div>
                        @endif
                        <input type="file" name="logo" accept="image/*"
                               class="mt-2 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100">
                        <p class="mt-1 text-xs text-gray-500">Max 1MB. Recommended: 100x100px PNG with transparent background.</p>
                    </div>
                </div>
            </div>

            <!-- Footer Settings -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg mb-6">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Footer Information</h2>
                </div>
                <div class="p-6 space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Footer Text (Main)</label>
                        <input type="text" name="footer_text" value="{{ old('footer_text', $settings->footer_text) }}"
                               placeholder="Thank you for your purchase!"
                               class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Footer Text (Secondary)</label>
                        <input type="text" name="footer_text_2" value="{{ old('footer_text_2', $settings->footer_text_2) }}"
                               placeholder="Please come again"
                               class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    </div>

                    <div class="flex items-start gap-4">
                        <label class="flex items-center">
                            <input type="checkbox" name="show_qr_code" value="1" {{ $settings->show_qr_code ? 'checked' : '' }}
                                   class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                            <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Show QR Code</span>
                        </label>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">QR Code Content (URL or text)</label>
                        <input type="text" name="qr_code_content" value="{{ old('qr_code_content', $settings->qr_code_content) }}"
                               placeholder="https://yourwebsite.com"
                               class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                    </div>
                </div>
            </div>

            <!-- Display Options -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg mb-6">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Display Options</h2>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                        <label class="flex items-center">
                            <input type="checkbox" name="show_customer_info" value="1" {{ $settings->show_customer_info ? 'checked' : '' }}
                                   class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                            <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Show Customer Info</span>
                        </label>

                        <label class="flex items-center">
                            <input type="checkbox" name="show_customer_points" value="1" {{ $settings->show_customer_points ? 'checked' : '' }}
                                   class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                            <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Show Points Balance</span>
                        </label>

                        <label class="flex items-center">
                            <input type="checkbox" name="show_agent_code" value="1" {{ $settings->show_agent_code ? 'checked' : '' }}
                                   class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                            <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Show Agent Code</span>
                        </label>

                        <label class="flex items-center">
                            <input type="checkbox" name="show_cashier_name" value="1" {{ $settings->show_cashier_name ? 'checked' : '' }}
                                   class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                            <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Show Cashier Name</span>
                        </label>

                        <label class="flex items-center">
                            <input type="checkbox" name="show_item_sku" value="1" {{ $settings->show_item_sku ? 'checked' : '' }}
                                   class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                            <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Show Item SKU</span>
                        </label>

                        <label class="flex items-center">
                            <input type="checkbox" name="show_payment_details" value="1" {{ $settings->show_payment_details ? 'checked' : '' }}
                                   class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                            <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Show Payment Details</span>
                        </label>
                    </div>
                </div>
            </div>

            <!-- Print Settings -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg mb-6">
                <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Print Settings</h2>
                </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Paper Width</label>
                            <select name="paper_width"
                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                <option value="80mm" {{ $settings->paper_width === '80mm' ? 'selected' : '' }}>80mm (Standard)</option>
                                <option value="58mm" {{ $settings->paper_width === '58mm' ? 'selected' : '' }}>58mm (Compact)</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Font Size</label>
                            <select name="font_size"
                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                @for($i = 8; $i <= 16; $i++)
                                    <option value="{{ $i }}" {{ $settings->font_size === $i ? 'selected' : '' }}>{{ $i }}px</option>
                                @endfor
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Print Copies</label>
                            <select name="print_copies"
                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                                @for($i = 1; $i <= 5; $i++)
                                    <option value="{{ $i }}" {{ $settings->print_copies === $i ? 'selected' : '' }}>{{ $i }}</option>
                                @endfor
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Actions -->
            <div class="flex justify-between">
                <a href="{{ route('pos-receipt-settings.preview', $settings->warehouse_id ? $settings->id : 'default') }}"
                   target="_blank"
                   class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600">
                    Preview Receipt
                </a>

                <button type="submit"
                        class="inline-flex items-center px-6 py-2 bg-indigo-600 border border-transparent rounded-md font-semibold text-sm text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    Save Settings
                </button>
            </div>
        </form>
    </div>
</div>
@endsection