@extends('dashboard.layouts.app')

@section('content')

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif


<div class="container-fluid px-3">
    <div class="mb-3 fw-bold">Currency Rates Management</div>



    <!-- Add New Currency Rate -->
    @can('finance_currency_rate_store')

        <div class="card mb-3">
            <div class="card-header">Add New Currency Rate</div>
            <div class="card-body">
                <form action="{{ route('currency.store') }}" method="POST" class="row g-3">
                    @csrf
                    @error('currency')<small class="text-danger">{{ $message }}</small>@enderror

                    <div class="col-md-3">
                        <label class="form-label">Currency</label>
                        <select name="currency" class="form-control" 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>
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Rate</label>
                        <input type="number" step="0.01" name="rate" class="form-control" placeholder="60"
                            value="{{ old('rate') }}" required>
                        @error('rate')<small class="text-danger">{{ $message }}</small>@enderror
                    </div>

                    <div class="col-md-3">
                        <label class="form-label">Set as Default</label>
                        <select class="form-control" name="is_default" required>
                            <option value="0" selected>No</option>
                            <option value="1">Yes</option>
                        </select>
                        @error('is_default')<small class="text-danger">{{ $message }}</small>@enderror
                    </div>

                    <div class="col-md-3 d-flex align-items-end">
                        <button type="submit" class="btn btn-success w-100">Add Rate</button>

                    </div>
                </form>
            </div>
        </div>
    @endcan


    <!-- Currency Rates Table -->
    <div class="card">
        <div class="card-header">Current Currency Rates</div>
        <div class="card-body table-responsive">
            <div style="overflow: auto;">
                <table class="text-center table table-bordered table-sm table bordered-table sm-table mb-0">
                    <thead>
                        <tr>
                            <th class="text-center">#</th>
                            <th class="text-center">Currency</th>
                            <th class="text-center">Rate</th>
                            <th class="text-center">Default</th>
                            <th class="text-center">Created By</th>
                            @canany(['finance_currency_rate_update', 'finance_currency_rate_destroy', 'finance_currency_rate_history'])

                            <th class="text-center">Actions</th>
                            @endcan

                        </tr>
                    </thead>
                    <tbody>
                        @forelse($rates as $rate)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $rate->currency }}</td>

                            <td>{{ number_format($rate->rate, 2) }}</td>
                            <td>
                                @if($rate->is_default)
                                    <span class="badge bg-success">Yes</span>
                                @else
                                    <span class="badge bg-secondary">No</span>
                                @endif
                            </td>
                            <td>{{ $rate->createdBy->full_name ?? '' }}</td>
                            @canany(['finance_currency_rate_update', 'finance_currency_rate_destroy', 'finance_currency_rate_history'])
                            <td>
                                @can('finance_currency_rate_history')

                                    <a href="{{ route('currency.history', $rate->id) }}" class="btn btn-sm btn-info">
                                        History
                                    </a>
                                @endcan
                                @can('finance_currency_rate_update')

                                    <button class="btn btn-sm btn-primary editBtn" data-bs-toggle="modal"
                                        data-bs-target="#editModal" data-id="{{ $rate->id }}" data-rate="{{ $rate->rate }}"
                                        data-default="{{ $rate->is_default }}">
                                        Edit
                                    </button>
                                @endcan
                                @can('finance_currency_rate_destroy')
                                    <button class="btn btn-sm btn-danger" data-bs-toggle="modal"
                                        data-bs-target="#deleteModal" data-id="{{ $rate->id }}">
                                        Delete
                                    </button>
                                @endcan
                            </td>
                            @endcan
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="text-center">No currency rates found.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" 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 class="modal-title">Confirm Delete</div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    Are you sure you want to delete this currency rate?
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">Yes, Delete</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" 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">
                    <h5 class="modal-title">Edit Currency</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <div class="mb-3">
                        <label>Rate</label>
                        <input type="number" step="0.01" id="edit_rate" name="rate" class="form-control" required>
                    </div>

                    <div class="mb-3">
                        <label>Set as Default</label>
                        <select id="edit_default" class="form-control" name="is_default" required>
                            <option value="0">No</option>
                            <option value="1">Yes</option>
                        </select>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Update</button>
                </div>

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

@push('scripts')
    <script>
        // Delete Modal
        const deleteModal = document.getElementById('deleteModal');
        deleteModal.addEventListener('show.bs.modal', function (event) {
            const id = event.relatedTarget.getAttribute('data-id');
            document.getElementById('deleteForm').action = `/currency/${id}`;
        });

        // Edit Modal
        const editModal = document.getElementById('editModal');
        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');

                editForm.action = `/currency/${id}`;
                editRate.value = rate;
                editDefault.value = isDefault;
            });
        });
    </script>
@endpush

@endsection