@extends('layouts.support_member')

@section('breadcrumb')
<div class="main-breadcrumb d-flex flex-wrap align-items-center my-4 position-relative gap-3">
    <h2 class="breadcrumb-title mb-0 flex-grow-1 fs-16">{{ tr('fees') }}</h2>
    <div class="flex-shrink-0">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb justify-content-end mb-0">
                <li><i class="ri-home-4-line fs-16 me-2 lh-sm text-primary"></i></li>
                <li class="breadcrumb-item"><a href="{{ route('support_member.dashboard') }}">{{ tr('home') }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ tr('fees') }}</li>
            </ol>
        </nav>
    </div>
</div>
@endsection

@section('content')
@php
$fee_types = [FEE_TYPE_FIXED => 'Flat', FEE_TYPE_PERCENTAGE => 'Percent'];
@endphp
<div class="col-12 col-lg-12">
    <div class="card card-h-100">
        <div class="card-header">
            <h5 class="card-title">{{ tr('fees') }}</h5>
        </div>
        <div class="card-body">

            @include('support_member.fees.search')


            <ul class="nav nav-tabs nav-justified" role="tablist">
                <li class="nav-item" role="presentation">
                    <a class="nav-link active" data-bs-toggle="tab" href="#fx-fee-tab" role="tab" aria-selected="false" tabindex="-1">
                        <span>{{ tr('fx_fee') }}</span>
                    </a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" data-bs-toggle="tab" href="#deposit-fee-tab" role="tab" aria-selected="true">
                        <span>{{ tr('deposit_fee') }}</span>
                    </a>
                </li>
                <li class="nav-item" role="presentation">
                    <a class="nav-link" data-bs-toggle="tab" href="#transaction-fee-tab" role="tab" aria-selected="false" tabindex="-1">
                        <span>{{ tr('transaction_fee') }}</span>
                    </a>
                </li>
            </ul>

            <div class="tab-content pt-3">
                <div class="tab-pane show active" id="fx-fee-tab" role="tabpanel">
                    @include('support_member.fees.fx_fees')
                </div>
                <div class="tab-pane" id="deposit-fee-tab" role="tabpanel">
                    @include('support_member.fees.deposit_fees')
                </div>
                <div class="tab-pane" id="transaction-fee-tab" role="tabpanel">
                    @include('support_member.fees.transaction_fees')
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
<script>
    document.addEventListener('DOMContentLoaded', function() {

        const hash = window.location.hash;
        if (hash) {
            const trigger = document.querySelector(`a[href="${hash}"]`);
            if (trigger) {
                new bootstrap.Tab(trigger).show();
            }
        }

        document.querySelectorAll('a[data-bs-toggle="tab"]').forEach(tab => {
            tab.addEventListener('shown.bs.tab', function(e) {
                history.replaceState(null, null, e.target.getAttribute('href'));
            });
        });
    });
</script>