@extends('layouts.admin')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="mb-6 flex justify-between items-center">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Courier Integrations</h1>
            <p class="text-gray-500 text-sm mt-1">Configure direct API integrations with delivery services.</p>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <form action="{{ route('admin.settings.integrations.update') }}" method="POST" class="p-6">
            @csrf
            
            <div class="space-y-8">
                <!-- Pathao Section -->
                <div>
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center space-x-3">
                            <div class="h-10 w-10 bg-red-100 rounded flex items-center justify-center text-red-600 font-bold">P</div>
                            <h3 class="text-lg font-medium leading-6 text-gray-900">Pathao Courier</h3>
                        </div>
                        <div class="flex items-center">
                            <label class="flex items-center cursor-pointer">
                                <div class="relative">
                                    <input type="checkbox" name="pathao_is_active" value="1" class="sr-only" {{ ($settings['pathao_is_active']->value ?? 0) ? 'checked' : '' }}>
                                    <div class="block bg-gray-200 w-10 h-6 rounded-full checkbox-bg"></div>
                                    <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition checkbox-dot"></div>
                                </div>
                                <div class="ml-3 text-sm font-medium text-gray-700">Enable</div>
                            </label>
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 bg-gray-50 p-4 rounded-lg border border-gray-100">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Client ID / API Key</label>
                            <input type="text" name="pathao_api_key" value="{{ $settings['pathao_api_key']->value ?? '' }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" placeholder="Enter Pathao API Key">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Store ID</label>
                            <input type="text" name="pathao_store_id" value="{{ $settings['pathao_store_id']->value ?? '' }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" placeholder="Enter Pathao Store ID">
                        </div>
                    </div>
                </div>

                <!-- Steadfast Section -->
                <div class="pt-6 border-t border-gray-200">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center space-x-3">
                            <div class="h-10 w-10 bg-green-100 rounded flex items-center justify-center text-green-600 font-bold">S</div>
                            <h3 class="text-lg font-medium leading-6 text-gray-900">Steadfast Courier</h3>
                        </div>
                        <div class="flex items-center">
                            <label class="flex items-center cursor-pointer">
                                <div class="relative">
                                    <input type="checkbox" name="steadfast_is_active" value="1" class="sr-only" {{ ($settings['steadfast_is_active']->value ?? 0) ? 'checked' : '' }}>
                                    <div class="block bg-gray-200 w-10 h-6 rounded-full checkbox-bg"></div>
                                    <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition checkbox-dot"></div>
                                </div>
                                <div class="ml-3 text-sm font-medium text-gray-700">Enable</div>
                            </label>
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 bg-gray-50 p-4 rounded-lg border border-gray-100">
                        <div>
                            <label class="block text-sm font-medium text-gray-700">API Key</label>
                            <input type="text" name="steadfast_api_key" value="{{ $settings['steadfast_api_key']->value ?? '' }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" placeholder="Enter Steadfast API Key">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700">Secret Key</label>
                            <input type="password" name="steadfast_secret_key" value="{{ $settings['steadfast_secret_key']->value ?? '' }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" placeholder="Enter Steadfast Secret Key">
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-8 flex justify-end pt-5 border-t border-gray-200">
                <button type="submit" class="bg-blue-600 border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                    Save Integrations
                </button>
            </div>
        </form>
    </div>
</div>

<style>
    input:checked ~ .checkbox-bg { background-color: #3b82f6; }
    input:checked ~ .checkbox-dot { transform: translateX(100%); }
</style>
@endsection