@extends('layouts.admin')

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

@section('content')
<div class="py-6">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        {{-- Page Header --}}
        <div class="mb-6">
            <h2 class="text-2xl font-bold text-gray-900 tracking-tight">Refund Setting</h2>
        </div>

        @if(session('success'))
        <div class="mb-6 p-4 bg-emerald-50 border border-emerald-200 text-emerald-700 rounded-lg flex items-center gap-3">
            <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            {{ session('success') }}
        </div>
        @endif

        @if($errors->any())
        <div class="mb-6 p-4 bg-red-50 border border-red-200 text-red-700 rounded-lg">
            {{ $errors->first() }}
        </div>
        @endif

        {{-- Card 1: Set Refund Time --}}
        <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden mb-6">
            <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white">
                <h4 class="text-lg font-semibold text-gray-900">Set Refund Time</h4>
            </div>
            <div class="p-6">
                <form action="{{ route('admin.refunds.settings.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    {{-- N.B Text --}}
                    <div class="mb-4">
                        <p class="text-sm text-blue-600 bg-blue-50 border border-blue-100 rounded-lg p-3">
                            <strong>N.B:</strong> Make sure you have active wallet system. Otherwise refunded amount will not show on customer account.
                        </p>
                    </div>

                    {{-- Refund with shipping cost toggle --}}
                    <div class="mb-4 flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div>
                            <label class="text-sm font-medium text-gray-900">Refund with shipping cost</label>
                            <p class="text-xs text-gray-500 mt-0.5">Include shipping costs in refund amount</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="hidden" name="refund_with_shipping_cost" value="0">
                            <input type="checkbox" name="refund_with_shipping_cost" value="1" {{ old('refund_with_shipping_cost', $settings->refund_with_shipping_cost) ? 'checked' : '' }} class="sr-only peer">
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-100 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                        </label>
                    </div>

                    {{-- Refund request time --}}
                    <div class="mb-4">
                        <label for="refund_request_time" class="block text-sm font-medium text-gray-700 mb-1.5">
                            Set Time for sending Refund Request <small class="text-gray-400">(Day)</small>
                        </label>
                        <input type="number" name="refund_request_time" id="refund_request_time" value="{{ old('refund_request_time', $settings->refund_request_time) }}" placeholder="Enter Refund Request Time" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                        @error('refund_request_time')
                        <p class="text-xs text-red-600 mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Refund Policy page select --}}
                    <div class="mb-4">
                        <label for="refund_policy_agreement" class="block text-sm font-medium text-gray-700 mb-1.5">Refund Policy</label>
                        <select name="refund_policy_agreement" id="refund_policy_agreement" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm bg-white">
                            <option value="">Select Page</option>
                            <option value="refund-policy" {{ old('refund_policy_agreement', $settings->refund_policy_agreement) === 'refund-policy' ? 'selected' : '' }}>Refund Policy</option>
                            <option value="seller-policy" {{ old('refund_policy_agreement', $settings->refund_policy_agreement) === 'seller-policy' ? 'selected' : '' }}>Seller Policy</option>
                            <option value="support-policy" {{ old('refund_policy_agreement', $settings->refund_policy_agreement) === 'support-policy' ? 'selected' : '' }}>Support Policy</option>
                            <option value="terms-conditions" {{ old('refund_policy_agreement', $settings->refund_policy_agreement) === 'terms-conditions' ? 'selected' : '' }}>Term and Conditions</option>
                            <option value="privacy-policy" {{ old('refund_policy_agreement', $settings->refund_policy_agreement) === 'privacy-policy' ? 'selected' : '' }}>Privacy Policy</option>
                            <option value="about" {{ old('refund_policy_agreement', $settings->refund_policy_agreement) === 'about' ? 'selected' : '' }}>About Us</option>
                            <option value="contact" {{ old('refund_policy_agreement', $settings->refund_policy_agreement) === 'contact' ? 'selected' : '' }}>Contact Us</option>
                        </select>
                    </div>

                    {{-- Refund Sticker upload --}}
                    <div class="mb-4">
                        <label for="refund_sticker" class="block text-sm font-medium text-gray-700 mb-1.5">Refund Sticker</label>
                        <input type="file" name="refund_sticker" id="refund_sticker" accept="image/*" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                        <div class="mt-3">
                            @if($settings->refund_sticker)
                            <img src="{{ asset('storage/' . $settings->refund_sticker) }}" alt="refund-sticker" class="w-20 h-20 object-cover rounded-lg border border-gray-200">
                            @else
                            <div class="w-20 h-20 rounded-lg border border-gray-200 bg-gray-100 flex items-center justify-center">
                                <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.908M3.75 21h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5z"/></svg>
                            </div>
                            @endif
                        </div>
                    </div>

                    {{-- Submit --}}
                    <div class="flex justify-end pt-2 border-t border-gray-100">
                        <button type="submit" class="px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors text-sm">
                            Update
                        </button>
                    </div>
                </form>
            </div>
        </div>

        {{-- Card 2: Refund Protection --}}
        <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white">
                <h4 class="text-lg font-semibold text-gray-900">Refund Protection</h4>
            </div>
            <div class="p-6">
                <form action="{{ route('admin.refunds.settings.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    {{-- Refund Protection Title --}}
                    <div class="mb-4">
                        <label for="refund_protection_title" class="block text-sm font-medium text-gray-700 mb-1.5">Refund Protection Title</label>
                        <input type="text" name="refund_protection_title" id="refund_protection_title" value="{{ old('refund_protection_title', $settings->refund_protection_title) }}" placeholder="Enter title" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                    </div>

                    {{-- Refund Protection Sub-title --}}
                    <div class="mb-4">
                        <label for="refund_protection_sub_title" class="block text-sm font-medium text-gray-700 mb-1.5">Refund Protection Sub-title</label>
                        <input type="text" name="refund_protection_sub_title" id="refund_protection_sub_title" value="{{ old('refund_protection_sub_title', $settings->refund_protection_sub_title) }}" placeholder="Enter sub-title" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                    </div>

                    {{-- Submit --}}
                    <div class="flex justify-end pt-2 border-t border-gray-100">
                        <button type="submit" class="px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors text-sm">
                            Update
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection