@extends('layouts.app')

@section('title', __('layout.navigation.gold_prices'))

@section('content')
<div class="min-h-screen bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900">
    <!-- Hero Section with Logo and Caption -->
    <div class="bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 text-white">
        <div class="container mx-auto px-4 py-12">
            <!-- Logo and Title Section -->
            <div class="text-center mb-12">
                <img src="{{ asset('SG LOGO.png') }}" 
                     alt="SBAEK Logo" 
                     class="w-24 h-24 mx-auto mb-6 rounded-lg shadow-2xl hover:shadow-3xl transition-shadow duration-300">
                
                <h1 class="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-yellow-400 via-yellow-500 to-yellow-600 bg-clip-text text-transparent">
                    {{ __('gold_prices.page_title') }}
                </h1>
                
                <!-- Elegant Arabic Caption -->
                <div class="max-w-3xl mx-auto bg-gray-800/50 backdrop-blur-sm rounded-2xl p-6 border border-yellow-500/20 shadow-xl">
                    <p class="text-gray-200 text-base md:text-lg leading-relaxed text-center font-medium">
                        {{ __('gold_prices.caption_1') }}
                    </p>
                    <p class="text-gray-300 text-sm md:text-base leading-relaxed text-center mt-3">
                        {{ __('gold_prices.caption_2') }}
                    </p>
                    <p class="text-yellow-400 text-sm md:text-base leading-relaxed text-center mt-3 font-semibold">
                        {{ __('gold_prices.caption_3') }}
                    </p>
                    <p class="text-gray-400 text-xs md:text-sm leading-relaxed text-center mt-2 italic">
                        {{ __('gold_prices.caption_4') }}
                    </p>
                </div>
            </div>
        </div>
    </div>


    <!-- Main Content -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-12">
        <!-- Price Tables Container -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
            
            <!-- Buy Prices Table -->
            <div class="bg-gray-800/60 backdrop-blur-sm rounded-2xl border border-gray-700 overflow-hidden">
                <div class="bg-gradient-to-r from-green-500/20 to-green-600/20 px-6 py-4 border-b border-green-500/20">
                    <div class="flex items-center justify-between">
                        <h2 class="text-xl font-semibold text-white flex items-center">
                            <svg class="w-6 h-6 mr-3 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            {{ __('gold_prices.buy_prices') }}
                        </h2>
                    </div>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-gray-700/50">
                            <tr>
                                <th class="px-6 py-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
                                    {{ __('gold_prices.product_name') }}
                                </th>
                                <th class="px-6 py-4 text-right text-xs font-medium text-gray-300 uppercase tracking-wider">
                                    {{ __('gold_prices.price') }}
                                </th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-700">
                            @foreach($goldPrices as $price)
                                <tr class="hover:bg-gray-700/30 transition-colors duration-150">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="text-white font-medium">{{ $price->buy_display_name }}</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right">
                                        <span class="text-green-400 font-semibold text-lg">
                                            {{ $price->price_buy_gram }}
                                        </span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Sell Prices Table -->
            <div class="bg-gray-800/60 backdrop-blur-sm rounded-2xl border border-gray-700 overflow-hidden">
                <div class="bg-gradient-to-r from-red-500/20 to-orange-600/20 px-6 py-4 border-b border-red-500/20">
                    <div class="flex items-center justify-between">
                        <h2 class="text-xl font-semibold text-white flex items-center">
                            <svg class="w-6 h-6 mr-3 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/>
                            </svg>
                            {{ __('gold_prices.sell_prices') }}
                        </h2>
                    </div>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-gray-700/50">
                            <tr>
                                <th class="px-6 py-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
                                    {{ __('gold_prices.product_name') }}
                                </th>
                                <th class="px-6 py-4 text-right text-xs font-medium text-gray-300 uppercase tracking-wider">
                                    {{ __('gold_prices.price') }}
                                </th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-700">
                            @foreach($goldPrices as $price)
                                <tr class="hover:bg-gray-700/30 transition-colors duration-150">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="text-white font-medium">{{ $price->getRawOriginal('sell_display_name') ?: $price->display_name ?: $price->karat . 'K' }}</span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right">
                                        <span class="text-red-400 font-semibold text-lg">
                                            {{ $price->price_sell_gram }}
                                        </span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Live Chart Section -->
        <div class="bg-gray-800/60 backdrop-blur-sm rounded-2xl border border-gray-700 p-6">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-xl font-semibold text-white flex items-center">
                    <svg class="w-6 h-6 mr-3 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                    </svg>
                    {{ __('gold_prices.live_gold_chart') }}
                </h2>
                <div class="flex items-center text-sm text-gray-400">
                    <svg class="w-4 h-4 mr-1 text-green-400" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                    </svg>
                    {{ __('gold_prices.live') }}
                </div>
            </div>
            <div id="tradingview_gold_chart" class="w-full h-96 bg-gray-900 rounded-xl"></div>
        </div>
    </div>
</div>

<!-- TradingView Widget -->
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script>
const initWidget = () => {
    if (typeof TradingView === 'undefined') {
        return;
    }

    new TradingView.widget({
        autosize: true,
        symbol: 'OANDA:XAUUSD',
        interval: '60',
        timezone: 'Etc/UTC',
        theme: 'dark',
        style: '1',
        locale: document.documentElement.lang || 'en',
        container_id: 'tradingview_gold_chart'
    });
};

if (typeof TradingView === 'undefined') {
    if (!document.getElementById('tradingview-script')) {
        const script = document.createElement('script');
        script.id = 'tradingview-script';
        script.src = 'https://s3.tradingview.com/tv.js';
        script.onload = initWidget;
        document.head.appendChild(script);
    }
} else {
    initWidget();
}
</script>
@endsection