@extends('layouts.master')
@section('content')
<div class="container-fluid py-3">
    <div class="d-flex justify-content-end mb-3">
        <a href="{{ route('home') }}" class="btn-back">
            <i class="fas fa-arrow-left me-2"></i> Back to Dashboard
        </a>
    </div>

    <div class="row">
        <!-- Form Section -->
        <div class="col-lg-5">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white py-3">
                    <h5 class="mb-0"><i class="fas fa-exchange-alt me-2"></i> Add Daily Rate</h5>
                </div>
                <div class="card-body">
                    <form method="POST" id="dailyRateForm" action="{{ route('daily_rates.store') }}">
                        @csrf
                        <input type="hidden" name="id" id="dailyRateId">
                        <div id="timeout">
                            @if(Session::has('success'))
                                <p class="alert alert-info">{{ Session('success') }}</p>
                            @endif
                            @if($errors->any())
                                @foreach($errors->all() as $err)
                                    <p class="alert alert-danger">{{ $err }}</p>
                                @endforeach
                            @endif
                        </div>

                        <div class="mb-3">
                            <label class="form-label"><strong>Home Currency:</strong></label>
                            <input type="text" class="form-control" 
                                   value="{{ optional($homeCurrency)->description ?? '' }}" readonly>
                        </div>

                       <div class="mb-3">
                            <label for="foreign_currency" class="form-label"><strong>Foreign Currency:</strong></label>
                            <select name="foreign_currency" id="foreign_currency" class="form-control" required {{ $homeCurrency ? '' : 'disabled' }}>
                                <option value="" disabled selected>Select Foreign Currency</option>
                                @foreach ($foreignCurrencies as $fc)
                                    <option value="{{ $fc->id }}">{{ $fc->code }} - {{ $fc->name }}</option>
                                @endforeach
                            </select>
                        </div>


                        <div class="mb-3">
                            <label class="form-label"><strong>Foreign Rate:</strong></label>
                            <input type="number" step="0.0001" class="form-control" 
                                   name="foreign_rate" id="foreign_rate" required {{ $homeCurrency ? '' : 'disabled' }}>
                        </div>

                        <div class="mb-3">
                            <label class="form-label"><strong>Description:</strong></label>
                            <input type="text" class="form-control" 
                                   name="description" id="description" {{ $homeCurrency ? '' : 'disabled' }}>
                        </div>

                        <div class="d-flex justify-content-end mt-4">
                            <input type="submit" id="submitButton" class="btn btn-primary me-2" 
                                   value="SUBMIT" {{ $homeCurrency ? '' : 'disabled' }}>
                            <input type="reset" class="btn btn-outline-secondary" onclick="resetForm()" value="REFRESH">
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Table Section -->
        <div class="col-lg-7 mt-4 mt-lg-0">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white py-3">
                    <h5 class="mb-0"><i class="fas fa-list me-2"></i> Daily Rate List</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Date</th>
                                    <th>Home Currency (code)</th>
                                    <th>Symbol</th>
                                    <th>Foreign Currency (code)</th>
                                    <th>Rate</th>
                                    <th>Buy Rate</th>
                                    <th>Description</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($records as $record)
                                <tr>
                                    <td>{{ \Carbon\Carbon::parse($record->created_at)->format('Y-m-d') }}</td>
                                    <td>{{ $record->home_currency_code }}</td>
                                    <td>{{ $record->home_currency_symbol }}</td>
                                    <td>{{ $record->foreign_currency_code }}</td>
                                    <td>{{ $record->foreign_rate }}</td>
                                    <td>{{ $record->home_rate }}</td>
                                    <td>{{ $record->description }}</td>
                                    <td class="text-center">
                                        <a href="#" class="btn btn-sm btn-primary" 
                                           onclick="editDailyRate(event,
                                               '{{ $record->id }}',
                                               '{{ $record->foreign_currency_id }}',
                                               '{{ $record->foreign_rate }}',
                                               '{{ addslashes($record->description) }}'
                                           )">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <a href="{{ route('daily_rates.delete', ['id' => $record->id]) }}" class="btn btn-sm btn-danger deleteBtn">
                                            <i class="fas fa-trash-alt"></i>
                                        </a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">Confirm Deletion</h5>
            </div>
            <div class="modal-body">
                Are you sure you want to delete this daily rate?
            </div>
            <div class="modal-footer">
                <button id="cancelDeleteBtn" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button id="confirmDeleteBtn" type="button" class="btn btn-danger">Delete</button>
            </div>
        </div>
    </div>
</div>

<script>
    function editDailyRate(e, id, foreignCurrencyId, foreignRate, description) {
        e.preventDefault();
        document.getElementById('dailyRateId').value = id;
        document.getElementById('foreign_currency').value = foreignCurrencyId;
        document.getElementById('foreign_rate').value = foreignRate;
        document.getElementById('description').value = description;
        document.querySelector('.card-header h5').innerHTML = '<i class="fas fa-exchange-alt me-2"></i> Edit Daily Rate';
        document.getElementById('submitButton').value = 'Update';
        document.getElementById('dailyRateForm').action = '{{ route("daily_rates.edit") }}';
    }

    function resetForm() {
        document.getElementById('dailyRateId').value = '';
        document.getElementById('foreign_currency').selectedIndex = 0;
        document.getElementById('foreign_rate').value = '';
        document.getElementById('description').value = '';
        document.querySelector('.card-header h5').innerHTML = '<i class="fas fa-exchange-alt me-2"></i> Add Daily Rate';
        document.getElementById('submitButton').value = 'SUBMIT';
        document.getElementById('dailyRateForm').action = '{{ route("daily_rates.store") }}';
        document.getElementById('timeout').innerHTML = '';
    }

    document.addEventListener('DOMContentLoaded', function () {
        let deleteUrl = null;
        const modalEl = document.getElementById('deleteConfirmModal');
        const bsModal = new bootstrap.Modal(modalEl);

        document.querySelectorAll('.deleteBtn').forEach(btn => {
            btn.addEventListener('click', function (e) {
                e.preventDefault();
                deleteUrl = this.getAttribute('href');
                bsModal.show();
            });
        });

        document.getElementById('confirmDeleteBtn').addEventListener('click', function () {
            bsModal.hide();
            window.location.href = deleteUrl;
        });

        document.getElementById('cancelDeleteBtn').addEventListener('click', function () {
            bsModal.hide();
        });
    });
</script>

<style>
.btn-back {
    text-decoration: none;
    color: #1AB9D9;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    padding: 5px 15px;
    border-radius: 4px;
    transition: all 0.3s;
}
.btn-back:hover {
    background-color: rgba(26, 185, 217, 0.1);
    text-decoration: none;
}
.card {
    border-radius: 8px;
    overflow: hidden;
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.card-header {
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 12px 20px;
}
.table th {
    background-color: #f8f9fa;
}
</style>
@endsection