@extends('app')
@section('css')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/css/bootstrap-select.min.css" rel="stylesheet">
    <style>
        .bank-card {
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .bank-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }
        .bank-logo {
            width: 35px;
            height: 35px;
            object-fit: cover;
            border-radius: 50%;
        }
        .bank-info {
            flex-grow: 1;
        }
        .bank-update {
            color: #6c757d;
            font-size: 0.9rem;
            margin-bottom: 0;
            /* لإزالة المسافة السفلية */
        }
        .btn-small {
            padding: 0.25rem 0.5rem;
            font-size: 0.8rem;
        }
        .card-title {
            font-size: 1rem;
            margin-bottom: 0.5rem;
        }
    </style>
@endsection
@section('content')
    <div class="container-lg">
        <div class="row justify-content-between mt-5">
            <div class="col-12 col-lg-6 mb-5">
                <section id="ratesInBanks">
                    <div class="mt-4 mb-2">
                        <h1 class="text-start fs-5 mb-0">
                            <span class="start-head mx-1 bg-danger"></span> {{ __('main.rates_in_banks') }}
                        </h1>
                        <p class="text-start mt-3 bl-text-xs">
                            {{ __('main.desc_rates_in_banks') }}
                        </p>
                    </div>
                    <div id="table-container" class="table-wrapper">
                        <table class="table table-hover text-center"
                            style="box-shadow: 0 8px 16px 0 rgb(10 14 29 / 2%), 0 8px 64px 0 rgb(119 119 119 / 8%);border-radius: 10px; overflow: hidden;">
                            <thead>
                                <tr>
                                    <th  class="text-start py-3">{{ __('main.currency') }}</th>
                                    <th class="text-start py-3">{{ __('main.price_buy') }}</th>
                                    <th class="text-end py-3">{{ __('main.price_sell') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($rates as $rate)
                                    @if ($rate['rate']->bankp_buy_banknote == 0)
                                        @continue
                                    @endif
                                    <tr>
                                        <td class="text-start">
                                            <a class="fs-6" href="{{ currency_url($rate['currency']->toArray()) }}">
                                                {{-- <div class="info">
                          <img width="20" alt="{{$rate['currency']->name}}" class="bank-logo-small" data-src="/assets/img/loader.png" src="{{ $rate['currency']->smallflag }}" />
                          <span class="code">{{ $rate['currency']->cur_code }}EGP</span>
                        </div> --}}
                                                <img loading="lazy" width="15" alt="{{ $rate['currency']->name }}"
                                                    class="bank-logo-small" data-src="/assets/img/loader.png"
                                                    src="{{ $rate['currency']->smallflag }}" />
                                                <span class="currencyName">{{ $rate['currency']->name }}</span>
                                            </a>
                                        </td>
                                        <td class="text-start price {{ $rate['rate']->bankp_status_buy }}">
                                            <span class="bankRate">
                                                <i class="m-1 fas fa-arrow-{{ $rate['rate']->bankp_status_buy }}"></i>
                                                {{ priceFormat($rate['rate']->bankp_buy_banknote, 6) }}
                                            </span>
                                            {{-- <span class="small">{{__('main.egCurr')}}</span> --}}
                                            {{-- <div class="rate-change ltr fs-6 my-2">
                            <i class="fas fa-arrow-{{ $rate['rate']->bankp_status_buy }}"></i> {{ priceFormat($rate['rate']->bankp_percent_buy,5) }}%
                          </div> --}}
                                        </td>
                                        <td class="text-end price {{ $rate['rate']->bankp_status_sell }}">
                                            <span class="bankRate">
                                                {{ priceFormat($rate['rate']->bankp_sell_banknote, 6) }}
                                                <i class="m-1 fas fa-arrow-{{ $rate['rate']->bankp_status_sell }}"></i>
                                            </span>
                                            {{-- <span class="small">{{__('main.egCurr')}}</span> --}}
                                            {{-- <div class="rate-change ltr fs-6 my-2">
                            <i class="fas fa-arrow-{{ $rate['rate']->bankp_status_sell }}"></i> {{ priceFormat($rate['rate']->bankp_percent_sell,5) }}%
                          </div> --}}
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                            <tfoot>
                                <td colspan="3" class="text-center">
                                    <a href="{{ url(route('banks')) }}">{{ __('main.show_all_currencies') }}</a>
                                </td>
                            </tfoot>
                        </table>
                    </div>
                </section>
            </div>
            <div class="col-12 col-lg-6">
                @include('partials.__calculator_egy_market_general')
                <div class="row">
                    <div class="col-12 col-lg-6">
                        <section id="gold-price">
                            <div class="mt-4 mb-2">
                                <h2 class="text-start fs-5 mb-0">
                                    <span class="start-head mx-1 bg-warning"></span>{{ __('main.gold_rates_today') }}
                                </h2>
                                <p class="text-start mt-3 bl-text-xs">
                                    {{ __('main.desc_gold_rates_today') }}
                                </p>
                            </div>
                            <div class="table-wrapper">
                                <table class="table table-hover text-center"
                                    style="box-shadow: 0 8px 16px 0 rgb(10 14 29 / 2%), 0 8px 64px 0 rgb(119 119 119 / 8%);border-radius: 10px; overflow: hidden;">
                                    <thead>
                                        <tr>
                                            <th style="width: 50%;" class="text-start py-3">{{ __('main.karat_type') }}</th>
                                            <th class="text-end py-3">{{ __('main.price_buy') }}</th>
                                            {{-- <th class="text-center py-3">{{__('main.price_sell')}}</th> --}}
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($goldPrice as $gold)
                                            <tr>
                                                <td class="text-start">
                                                    <a class="fs-6" href="{{ $gold->fullUrl }}">
                                                        <span class="currencyName">{{ $gold->name }}</span>
                                                    </a>
                                                </td>
                                                <td class="text-end fs-6 price {{ $gold->price->p_status }}">
                                                    <span
                                                        class="bankRate">{{ priceFormat($gold->price->p_price, 6) }}</span>
                                                    <i class="m-1 fas fa-arrow-{{ $gold->price->p_status }}"></i>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                    <tfoot>
                                        <td colspan="3" class="text-center fs-6">
                                            <a href="{{ url(route('goldprice')) }}" title="{{ __('main.gold_rates_egypt') }}">{{ __('main.show_all_gold_rates') }}</a>
                                        </td>
                                    </tfoot>
                                </table>
                            </div>
                        </section>
                    </div>
                    <div class="col-12 col-lg-6">
                        <section id="silver-price">
                            <div class="mt-4 mb-2">
                                <h2 class="text-start fs-5 mb-0">
                                    <span class="start-head mx-1 bg-info"></span>{{ __('main.silver_rates_today') }}
                                </h2>
                                <p class="text-start mt-3 bl-text-xs">{{ __('main.desc_silver_rates_today') }}</p>
                            </div>
                            <div class="table-wrapper">
                                <table class="table table-hover text-center"
                                    style="box-shadow: 0 8px 16px 0 rgb(10 14 29 / 2%), 0 8px 64px 0 rgb(119 119 119 / 8%);border-radius: 10px; overflow: hidden;">
                                    <thead>
                                        <tr>
                                            <th style="width: 50%;" class="text-start py-3">{{ __('main.karat_type') }}</th>
                                            <th class="text-end py-3">{{ __('main.price_buy') }}</th>
                                            {{-- <th class="text-center py-3">{{__('main.price_sell')}}</th> --}}
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($silverPrice as $silver)
                                            <tr>
                                                <td class="text-start">
                                                    <a class="fs-6" href="{{ $silver->fullUrl }}">
                                                        <span class="currencyName">{{ $silver->short_name }}</span>
                                                    </a>
                                                </td>
                                                <td class="text-end price {{ $silver->price->change_status }}">
                                                    <span class="bankRate">{{ priceFormat($silver->price->p_price, 6) }}
                                                        <i
                                                            class="m-1 fas fa-arrow-{{ $silver->price->change_status }}"></i>
                                                    </span>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                    <tfoot>
                                        <td colspan="3" class="text-center">
                                            <a href="{{ url(route('silverprice')) }}">{{ __('main.show_silver_rates_today') }}</a>
                                        </td>
                                    </tfoot>
                                </table>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-2 mb-5">
                <section id="silver-price">
                    <div class="mb-2">
                        <h2 class="text-start fs-5 mb-0">
                            <span class="start-head mx-1 bg-info"></span>{{ __('main.gasoline_rates_today') }}
                        </h2>
                        <p class="text-start mt-3 bl-text-xs">{{ __('main.desc_gasoline_rates_today') }}</p>
                    </div>
                    <div class="table-wrapper">
                        <table class="table table-hover text-center"
                            style="box-shadow: 0 8px 16px 0 rgb(10 14 29 / 2%), 0 8px 64px 0 rgb(119 119 119 / 8%);border-radius: 10px; overflow: hidden;">
                            <thead>
                                <tr>
                                    <th style="width: 50%;" class="text-start py-3">{{ __('main.type') }}</th>
                                    <th class="text-end py-3">{{ __('main.price_buy') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($petroleumPrice as $petrol)
                                    <tr>
                                        <td class="text-start">
                                            <a class="fs-6" href="{{ egyPetrolUrl($petrol) }}">
                                                <span class="currencyName">{{ $petrol->name }}</span>
                                            </a>
                                        </td>
                                        <td class="text-end price {{ $petrol->rate->change_type }}">
                                            <span
                                                class="bankRate">{{ number_format(priceFormat($petrol->rate->price, 6), 2) }}</span>
                                            <i class="m-1 fas fa-arrow-{{ $petrol->rate->change_type }}"></i>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                            <tfoot>
                                <td colspan="3" class="text-center">
                                    <a href="{{ url(route('petrol')) }}">{{ __('main.show_gasoline_rates') }}</a>
                                </td>
                            </tfoot>
                        </table>
                    </div>
                </section>
            </div>
            <div class="col-12 col-lg-6 mb-5">
                <div id="curencyNotSupport">
                    <div class="head">
                        <h2 class="text-start fs-5 mb-0">
                            <span class="start-head mx-1" style="background: #ff0000;"></span>
                            {{ __('main.unsupportCurrencies') }}
                        </h2>
                        <p class="text-start bl-text-xs mt-3">{{ __('main.minor_currencies') }}</p>
                    </div>
                    <div class="container-fluid">
                        <div class="row">
                            @foreach ($GeneralCurrencyRates as $rate)
                                <div class="col-6 p-1 col-sm-3">
                                    <div class="item">
                                        <a title="{{ __('main.newCurrencyPageTitle', ['cur_from_name' => $rate->currency->name, 'cur_from_code' => $rate->currency->cur_code]) }}"
                                            href="{{ route('currency', ['c_from' => $rate->currency->cur_code, 'c_to' => 'EGP']) }}">
                                            <div class="currency">
                                                <img loading="lazy" src="{{ $rate->currency->smallflag }}" height="20"
                                                    width="20" alt="{{ $rate->currency->name }}">
                                                <h2 style="margin-top: 5px;">{{ $rate->currency->name }}</h2>
                                                <div class="currency-rates">
                                                    <p class="text-center">
                                                        <span>{{ $rate->current_price }}</span>
                                                        <span>{{ __('main.egCurr') }}</span>
                                                    </p>
                                                    <span
                                                        class="{{ $rate->change_status }} opacity-50 bg-light px-1 rounded-2"
                                                        dir="ltr">
                                                        <i class="fas fa-arrow-{{ $rate->change_status }}"></i>
                                                        {{ $rate->change_amount }} {{ $rate->change_percent }}%
                                                    </span>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            @endforeach
                            <div class="col-12 text-end">
                                <a class="btn btn-primary" href="{{ lurl(route('currencies')) }}"
                                    title="{{ __('main.allCurrenciesNew') }}">
                                    <i class="fas fa-dollar-sign"></i>
                                    {{ __('main.allCurrencies') }}
                                </a>
                            </div>
                        </div>
                    </div>
                </div><!-- End of general currecy rates Not Support in Banks-->
            </div>
            <div class="col-12 col-lg-4 mb-5">
                @include('components.egypt_central_bank')
            </div>
        </div>
    </div>
    <section class="container py-5">
        <div class="row">
            <div class="col">
                <h6 class="text-center fw-bold fs-1"><i class="fas fa-university"></i> {{ __('main.listOfBanks') }}</h6>
                <p class="text-muted mb-5 text-center opacity-75" style="    font-size: 13px;">{{ __('main.desc_minor_currencies') }}</p>
            </div>
        </div>
        <div class="row gy-4  pb-5">
            @foreach ($banks as $bank)
                <div class="col-12 col-sm-12 col-md-6 col-lg-4">
                    <a title="{{ __('main.bank_title', ['bank_name' => $bank->name]) }}"
                        href="{{ route('bank_price', ['slug' => $bank->bank_slug]) }}">
                        <div
                            class="card bank-card shadow-sm h-100 @if ($bank->is_central == 1) bg-warning-subtle @endif">
                            <div class="card-body d-flex align-items-center">
                                <img loading="lazy" src="/uploads/35x35/{{ $bank['bank_image'] }}" alt="{{ $bank->name }}"
                                    class="bank-logo me-3">
                                <div
                                    class="bank-info gap-2 d-flex align-items-start flex-column @if ($bank->is_central == 1) text-warning-emphasis @endif">
                                    <h5 class="card-title mb-1 text-truncate"style="font-size: 1rem; color: #333;">
                                        {{ $bank->name }}</h5>
                                    <div class="d-flex w-100 justify-content-between">
                                        <p class="card-text bank-update mb-1">{{ __('main.ago') }}
                                            {{ timeago($bank->bank_last_update) }}</p>
                                        <span class="btn btn-primary btn-small">
                                            <i class="fas m-0 fa-money-bill-wave"></i> {{ __('main.currency_prices') }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach
            <div class="col-12 text-end">
                <a class="btn btn-primary btn-sm" href="{{ url(route('banks')) }}">
                    <i class="fas fa-university"></i>
                    {{ __('main.more_banks') }}
                </a>
            </div>
        </div>
    </section>
@endsection
@section('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js"></script>

@endsection