@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    <style>
        .currency-rates-page .ui-card {
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            overflow: hidden;
        }

        .currency-rates-page .ui-card__header {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid #eef2f7;
            background: #fff;
        }

        .currency-form-card {
            padding: 1.25rem;
        }

        .currency-form-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            padding-bottom: 1rem;
            margin-bottom: 1rem;
            border-bottom: 1px solid #eef2f7;
            flex-wrap: wrap;
        }

        .currency-form-head__main {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            min-width: 0;
        }

        .currency-form-head__icon {
            width: 48px;
            height: 48px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #eff6ff, #eef2ff);
            color: #2563eb;
            font-size: 1.25rem !important;
            flex-shrink: 0;
        }

        .currency-form-head__title {
            color: #111827;
            font-size: 1.05rem !important;
            font-weight: 900;
            margin: 0;
        }

        .currency-form-head__sub {
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.55;
            margin-top: 0.2rem;
            margin-bottom: 0;
        }

        .asset-form-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
            align-items: end;
        }

        .asset-col-12 {
            grid-column: span 12 / span 12;
        }

        .asset-col-6 {
            grid-column: span 6 / span 6;
        }

        .asset-col-3 {
            grid-column: span 3 / span 3;
        }

        .asset-label {
            display: inline-block;
            margin-bottom: 0.45rem;
            font-weight: 750;
            color: #374151;
            font-size: 0.9rem;
        }

        .asset-input,
        .asset-select,
        .currency-modal .form-control {
            width: 100% !important;
            min-height: 44px;
            border: 1px solid #dbe2ea !important;
            border-radius: 14px !important;
            padding: 0.68rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
            box-shadow: none !important;
        }

        .asset-input:focus,
        .asset-select:focus,
        .currency-modal .form-control:focus {
            outline: none;
            border-color: #b8c4d6 !important;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08) !important;
        }

        .currency-table-card {
            padding: 0 !important;
        }

        .currency-table-title {
            color: #111827;
            font-size: 1.05rem !important;
            font-weight: 900;
            margin: 0;
        }

        .currency-table-sub {
            color: #64748b;
            font-size: 0.9rem !important;
            line-height: 1.55;
            margin-top: 0.2rem;
            margin-bottom: 0;
        }

        .currency-table-wrap {
            width: 100%;
            overflow-x: auto;
        }

        .currency-rates-page table {
            min-width: 900px;
            width: 100%;
            vertical-align: middle;
        }

        .currency-rates-page table thead th {
            background: #f8fafc;
            color: #475569;
            font-size: 0.78rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.035em;
            border-bottom: 1px solid #e5e7eb;
            white-space: nowrap;
        }

        .currency-rates-page table tbody td {
            color: #334155;
            font-size: 0.9rem;
            font-weight: 600;
            border-color: #eef2f7;
            vertical-align: middle;
            white-space: nowrap;
        }

        .currency-rates-page table tbody tr {
            transition: 0.16s ease;
        }

        .currency-rates-page table tbody tr:hover {
            background: #f8fafc;
        }

        .currency-index {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 34px;
            height: 30px;
            border-radius: 999px;
            background: #f3f4f6;
            color: #374151;
            font-size: 0.78rem;
            font-weight: 850;
        }

        .currency-cell {
            display: inline-flex;
            align-items: center;
            gap: 0.65rem;
            min-width: 170px;
        }

        .currency-icon {
            width: 38px;
            height: 38px;
            border-radius: 13px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #eff6ff, #eef2ff);
            color: #2563eb;
            font-size: 1rem !important;
            flex-shrink: 0;
        }

        .currency-code {
            color: #111827;
            font-size: 0.92rem;
            font-weight: 900;
            line-height: 1.35;
        }

        .currency-sub {
            color: #94a3b8;
            font-size: 0.76rem;
            font-weight: 650;
            margin-top: 0.1rem;
        }

        .currency-rate-value {
            color: #166534;
            font-weight: 900;
            font-size: 0.95rem;
        }

        .currency-created-by {
            color: #475569;
            font-weight: 750;
            max-width: 210px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .currency-actions {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.45rem;
            flex-wrap: wrap;
        }

        .table-empty-state {
            padding: 3rem 1rem;
            text-align: center;
            color: #94a3b8;
            background: #fff;
        }

        .table-empty-state i {
            display: block;
            font-size: 2.3rem;
            color: #cbd5e1;
            margin-bottom: 0.75rem;
        }

        .table-empty-state h6 {
            margin: 0;
            color: #475569;
            font-weight: 850;
        }

        .table-empty-state p {
            margin: 0.35rem 0 0;
            font-size: 0.9rem;
        }

        .currency-modal .modal-content {
            border: 0;
            border-radius: 20px;
            box-shadow: 0 24px 70px rgba(15, 23, 42, 0.20);
            overflow: hidden;
        }

        .currency-modal .modal-header {
            border-bottom: 1px solid #eef2f7;
            background: #f8fafc;
            padding: 1rem 1.25rem;
        }

        .currency-modal .modal-title {
            color: #111827;
            font-size: 1rem;
            font-weight: 900;
        }

        .modal-subtitle {
            color: #64748b;
            font-size: 0.86rem;
            margin-top: 0.15rem;
        }

        .currency-modal .modal-body {
            padding: 1.25rem;
        }

        .currency-modal .modal-footer {
            border-top: 1px solid #eef2f7;
            background: #fff;
            padding: 1rem 1.25rem;
        }

        .delete-warning-box {
            border: 1px solid #fecaca;
            background: #fef2f2;
            color: #991b1b;
            border-radius: 18px;
            padding: 1rem;
            display: flex;
            align-items: flex-start;
            gap: 0.85rem;
        }

        .delete-warning-box__icon {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            background: #fff;
            color: #dc2626;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            flex-shrink: 0;
        }

        .delete-warning-box__title {
            font-weight: 900;
            margin-bottom: 0.15rem;
        }

        .delete-warning-box__text {
            font-size: 0.9rem;
            line-height: 1.5;
            color: #b91c1c;
        }

        .ui-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            border-radius: 999px;
            padding: 0.36rem 0.72rem;
            font-size: 0.74rem;
            font-weight: 850;
            line-height: 1.2;
            white-space: nowrap;
        }

        .ui-pill--primary { background: #eff6ff; color: #1d4ed8; }
        .ui-pill--info { background: #eef2ff; color: #4338ca; }
        .ui-pill--success { background: #f0fdf4; color: #166534; }
        .ui-pill--danger { background: #fef2f2; color: #b91c1c; }
        .ui-pill--neutral { background: #f3f4f6; color: #374151; }

        @media (max-width: 991.98px) {
            .asset-col-3,
            .asset-col-6 {
                grid-column: span 6 / span 6;
            }
        }

        @media (max-width: 575.98px) {
            .currency-form-card,
            .currency-rates-page .ui-card__header {
                padding: 1rem;
            }

            .asset-col-3,
            .asset-col-6 {
                grid-column: span 12 / span 12;
            }
        }
    </style>

    <div class="container-fluid app-bg currency-rates-page">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title
                    title="Currency Rates Management"
                    description="Manage currency conversion rates, default currency status, creator information, and rate history.">
                </x-page-title>

                <p class="text-muted">Exchange rate: one unit of the currency equals this many units of the default currency. The default rate is 1. Changing the default keeps track price numbers unchanged.</p>
                @can('finance_currency_rate_store')
                    <div class="ui-card currency-form-card">
                        <div class="currency-form-head">
                            <div class="currency-form-head__main">
                                <div class="currency-form-head__icon">
                                    <i class="fas fa-coins"></i>
                                </div>

                                <div>
                                    <h5 class="currency-form-head__title">Add New Currency Rate</h5>
                                    <p class="currency-form-head__sub">
                                        Create a new rate and optionally set it as the default conversion currency.
                                    </p>
                                </div>
                            </div>

                            <span class="ui-pill ui-pill--info">
                                <i class="fas fa-plus-circle"></i>
                                New Rate
                            </span>
                        </div>

                        <form action="{{ route('currency.store') }}" method="POST">
                            @csrf

                            <div class="asset-form-grid">
                                <div class="asset-col-3">
                                    <label class="asset-label">Currency <span class="text-danger">*</span></label>
                                    <select name="currency" class="asset-select" required>
                                        <option value="" disabled selected>Select Currency</option>
                                        @php
                                            $currencies = ['USD', 'SAR', 'EGP'];
                                        @endphp

                                        @foreach($currencies as $curr)
                                            <option value="{{ $curr }}" {{ old('currency') == $curr ? 'selected' : '' }}>
                                                {{ $curr }}
                                            </option>
                                        @endforeach
                                    </select>

                                    @error('currency')
                                        <small class="text-danger d-block mt-1">{{ $message }}</small>
                                    @enderror
                                </div>

                                <div class="asset-col-3">
                                    <label class="asset-label">Rate <span class="text-danger">*</span></label>
                                    <input type="number"
                                           step="any"
                                           name="rate"
                                           class="asset-input"
                                           placeholder="0.00"
                                           value="{{ old('rate') }}"
                                           required>

                                    @error('rate')
                                        <small class="text-danger d-block mt-1">{{ $message }}</small>
                                    @enderror
                                </div>

                                <div class="asset-col-3">
                                    <label class="asset-label">Set as Default <span class="text-danger">*</span></label>
                                    <select class="asset-select" name="is_default" required>
                                        <option value="0" {{ old('is_default', '0') == '0' ? 'selected' : '' }}>No</option>
                                        <option value="1" {{ old('is_default') == '1' ? 'selected' : '' }}>Yes</option>
                                    </select>

                                    @error('is_default')
                                        <small class="text-danger d-block mt-1">{{ $message }}</small>
                                    @enderror
                                </div>

                                <div class="asset-col-3">
                                    <label class="asset-label d-block">&nbsp;</label>
                                    <button type="submit" class="asset-btn asset-btn--primary w-100">
                                        <i class="fas fa-save me-1"></i>
                                        Add Rate
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                @endcan

                <div class="ui-card ui-card--table currency-table-card">
                    <div class="ui-card__header">
                        <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap w-100">
                            <div>
                                <h5 class="currency-table-title">Current Currency Rates</h5>
                                <p class="currency-table-sub">
                                    Current stored exchange rates, default status, creator, and available actions.
                                </p>
                            </div>

                            <span class="ui-pill ui-pill--primary">
                                <i class="fas fa-list"></i>
                                {{ $rates->count() }} Rate(s)
                            </span>
                        </div>
                    </div>

                    <div class="currency-table-wrap">
                        <x-table :headers="['#', 'Currency', 'Rate', 'Default', 'Created By', 'Actions']">
                            @forelse($rates as $rate)
                                <tr>
                                    <td class="text-center">
                                        <span class="currency-index">
                                            {{ $loop->iteration }}
                                        </span>
                                    </td>

                                    <td class="text-center">
                                        <div class="currency-cell">
                                            <div class="currency-icon">
                                                <i class="fas fa-money-bill-wave"></i>
                                            </div>

                                            <div>
                                                <div class="currency-code">
                                                    {{ $rate->currency }}
                                                </div>
                                                <div class="currency-sub">
                                                    Currency rate
                                                </div>
                                            </div>
                                        </div>
                                    </td>

                                    <td class="text-center">
                                        <strong class="currency-rate-value">
                                            {{ number_format($rate->rate, 2) }}
                                        </strong>
                                    </td>

                                    <td class="text-center">
                                        @if($rate->is_default)
                                            <span class="ui-pill ui-pill--success">
                                                <i class="fas fa-check-circle"></i>
                                                Yes
                                            </span>
                                        @else
                                            <span class="ui-pill ui-pill--neutral">
                                                <i class="fas fa-minus-circle"></i>
                                                No
                                            </span>
                                        @endif
                                    </td>

                                    <td>
                                        <div class="currency-created-by" title="{{ $rate->createdBy->full_name ?? '' }}">
                                            {{ $rate->createdBy->full_name ?? '—' }}
                                        </div>
                                    </td>

                                    @canany(['finance_currency_rate_update', 'finance_currency_rate_destroy', 'finance_currency_rate_history'])
                                        <td class="text-center">
                                            <div class="currency-actions">
                                                @can('finance_currency_rate_history')
                                                    <x-table-action
                                                        type="view"
                                                        url="{{ route('currency.history', $rate->id) }}"
                                                        title="History"
                                                    />
                                                @endcan

                                                @can('finance_currency_rate_update')
                                                    <x-table-action
                                                        type="edit"
                                                        target="#editModal"
                                                        class="editBtn"
                                                        data-id="{{ $rate->id }}"
                                                        data-rate="{{ $rate->rate }}"
                                                        data-default="{{ $rate->is_default }}"
                                                    />
                                                @endcan

                                                @can('finance_currency_rate_destroy')
                                                    <x-table-action
                                                        type="delete"
                                                        target="#deleteModal"
                                                        data-id="{{ $rate->id }}"
                                                    />
                                                @endcan
                                            </div>
                                        </td>
                                    @endcanany
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6">
                                        <div class="table-empty-state">
                                            <i class="fas fa-coins"></i>
                                            <h6>No currency rates found.</h6>
                                            <p>Create a currency rate to start managing conversions.</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </x-table>
                    </div>
                </div>

            </div>
        </div>
    </div>

    {{-- Delete Modal --}}
    <div class="modal fade currency-modal" id="deleteModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="deleteForm" method="POST">
                    @csrf
                    @method('DELETE')

                    <div class="modal-header">
                        <div>
                            <h5 class="modal-title">Confirm Delete</h5>
                            <p class="modal-subtitle mb-0">This action cannot be undone.</p>
                        </div>

                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <div class="delete-warning-box">
                            <div class="delete-warning-box__icon">
                                <i class="fas fa-trash-alt"></i>
                            </div>

                            <div>
                                <div class="delete-warning-box__title">
                                    Are you sure?
                                </div>
                                <div class="delete-warning-box__text">
                                    You are about to delete this currency rate.
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary rounded-pill" data-bs-dismiss="modal">
                            Cancel
                        </button>

                        <button type="submit" class="btn btn-outline-danger rounded-pill">
                            <i class="fas fa-trash me-1"></i>
                            Yes, Delete
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Edit Modal --}}
    <div class="modal fade currency-modal" id="editModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="editForm" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="modal-header">
                        <div>
                            <h5 class="modal-title">Edit Currency Rate</h5>
                            <p class="modal-subtitle mb-0">Update currency rate and default status.</p>
                        </div>

                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <div class="asset-form-grid">
                            <div class="asset-col-12">
                                <label class="asset-label">Rate <span class="text-danger">*</span></label>
                                <input type="number"
                                       step="any"
                                       id="edit_rate"
                                       name="rate"
                                       class="asset-input"
                                       required>
                            </div>

                            <div class="asset-col-12">
                                <label class="asset-label">Set as Default <span class="text-danger">*</span></label>
                                <select id="edit_default" class="asset-select" name="is_default" required>
                                    <option value="0">No</option>
                                    <option value="1">Yes</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary rounded-pill" data-bs-dismiss="modal">
                            Cancel
                        </button>

                        <button type="submit" class="btn btn-outline-primary rounded-pill">
                            <i class="fas fa-check me-1"></i>
                            Update
                        </button>
                    </div>

                </form>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const deleteModal = document.getElementById('deleteModal');
            const deleteForm = document.getElementById('deleteForm');

            if (deleteModal && deleteForm) {
                deleteModal.addEventListener('show.bs.modal', function (event) {
                    const trigger = event.relatedTarget;

                    if (!trigger) {
                        return;
                    }

                    const id = trigger.getAttribute('data-id');
                    deleteForm.action = `/currency/${id}`;
                });
            }

            const editForm = document.getElementById('editForm');
            const editRate = document.getElementById('edit_rate');
            const editDefault = document.getElementById('edit_default');

            document.querySelectorAll('.editBtn').forEach(button => {
                button.addEventListener('click', () => {
                    const id = button.getAttribute('data-id');
                    const rate = button.getAttribute('data-rate');
                    const isDefault = button.getAttribute('data-default');

                    if (editForm) {
                        editForm.action = `/currency/${id}`;
                    }

                    if (editRate) {
                        editRate.value = rate;
                    }

                    if (editDefault) {
                        editDefault.value = isDefault;
                    }
                });
            });
        });
    </script>
@endsection