@extends('parts.container')

@section('styles')
    <!-- BEGIN PAGE LEVEL STYLES -->
    <link href="{{ asset('vendor/src/assets/css/light/components/modal.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('vendor/src/assets/css/dark/components/modal.css') }}" rel="stylesheet" type="text/css" />
    <!-- END PAGE LEVEL STYLES -->
@endsection

@section('content')

<div class="row layout-top-spacing">
    <div class="col-xl-12 col-lg-12 col-sm-12 layout-spacing">
        <div class="widget-content widget-content-area br-8">
            <!-- Button to trigger the modal -->
            <div class="text-center">
                <button type="button" class="btn btn-primary mb-2 mr-2" data-bs-toggle="modal" data-bs-target="#createCurrencyModal">
                    Create Currency
                </button>
            </div>

            <div id="message-area" style="display:none;"></div>

            <!-- Success Alert -->
            @if(session('success'))
                <div id="success-alert" class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                <script>
                    hideAlert('success-alert');
                </script>
            @endif

            <!-- Error Alert -->
            @if(session('error'))
                <div id="error-alert" class="alert alert-danger alert-dismissible fade show" role="alert">
                    {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                <script>
                    hideAlert('error-alert');
                </script>
            @endif

            <div class="table-responsive backoffice-table-scroll">
                <table id="zero-config" class="table table-striped dt-table-hover" style="width:100%">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Code</th>
                            <th>Symbol</th>
                            <th>Buying Rate</th>
                            <th>Selling Rate</th>
                            <th>Is Base Currency</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($currencies as $currency)
                        <tr id="currency-row-{{ $currency->id }}"
                            data-id="{{ $currency->id }}"
                            data-name="{{ $currency->name }}"
                            data-code="{{ $currency->code }}"
                            data-symbol="{{ $currency->symbol }}"
                            data-buying-rate="{{ $currency->buying_rate }}"
                            data-selling-rate="{{ $currency->selling_rate }}"
                            data-is-base-currency="{{ $currency->isBaseCurrency }}">
                            <td>{{ $currency->name }}</td>
                            <td>{{ $currency->code }}</td>
                            <td>{{ $currency->symbol }}</td>
                            <td>{{ $currency->buying_rate }}</td>
                            <td>{{ $currency->selling_rate }}</td>
                            <td>{{ $currency->isBaseCurrency ? 'True' : 'False' }}</td>
                            <td>
                                <button class="btn btn-primary btn-sm" onclick="openUpdateModal(this)">Update</button>
                                <form action="{{ route('currencies.delete') }}" method="POST" style="display:inline;">
                                    @csrf
                                    <input type="hidden" name="id" value="{{ $currency->id }}">
                                    <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                                </form>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

             <!-- Modal for creating a currency -->
            <div class="modal fade" id="createCurrencyModal" tabindex="-1" role="dialog" aria-labelledby="createCurrencyModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="createCurrencyModalLabel">Create New Currency</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form id="createCurrencyForm">
                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        <label for="name" class="form-label">Currency Name</label>
                                        <input type="text" class="form-control" id="name" required>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="code" class="form-label">Currency Code</label>
                                        <input type="text" maxlength="3" class="form-control" id="code" required>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="symbol" class="form-label">Currency Symbol</label>
                                        <input type="text" maxlength="10" class="form-control" id="symbol" required>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        <label for="exchange_rate" class="form-label">Buying Rate</label>
                                        <input type="number" class="form-control" id="buying_rate" required>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="exchange_rate" class="form-label">Selling Rate</label>
                                        <input type="number" class="form-control" id="selling_rate" required>
                                    </div>
                                    <div class="col-md-4 mb-3" id="baseCurrencyContainer" style="display: none;">
                                        <label for="is_base_currency" class="form-label">Is Base Currency</label>
                                        <select class="form-select" id="is_base_currency">
                                            <option value="true">True</option>
                                            <option value="false">False</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4"></div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button class="btn" data-bs-dismiss="modal"><i class="flaticon-cancel-12"></i>Cancel</button>
                            <button type="button" class="btn btn-primary" id="saveCurrencyButton">Save</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal for updating a currency -->
            <div class="modal fade" id="updateCurrencyModal" tabindex="-1" role="dialog" aria-labelledby="updateCurrencyModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="updateCurrencyModalLabel">Update Currency</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div id="message-area" style="display:none;"></div>
                            <form id="updateCurrencyForm">
                                <input type="hidden" name="currency_id" id="currency_id"> <!-- Dynamic value populated here -->
                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        <label for="update-name" class="form-label">Currency Name</label>
                                        <input type="text" class="form-control" id="update-name" required>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="update-code" class="form-label">Currency Code</label>
                                        <input type="text" maxlength="3" class="form-control" id="update-code" required>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="update-symbol" class="form-label">Currency Symbol</label>
                                        <input type="text" maxlength="10" class="form-control" id="update-symbol" required>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        <label for="update-exchange_rate" class="form-label">Buying Rate</label>
                                        <input type="number" class="form-control" id="update-buying_rate" required>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="update-exchange_rate" class="form-label">Selling Rate</label>
                                        <input type="number" class="form-control" id="update-selling_rate" required>
                                    </div>

                                    <div id="base-currency-container" class="col-md-4 mb-3" style="display: none;">
                                        <label for="update-base-currency" class="form-label">Is Base Currency</label>
                                        <select class="form-select" id="update-base-currency">
                                            <option value="1">True</option>
                                            <option value="0">False</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4"></div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button class="btn" data-bs-dismiss="modal"><i class="flaticon-cancel-12"></i>Cancel</button>
                            <button type="button" class="btn btn-primary" id="updateCurrencyButton">Save</button>
                        </div>
                    </div>
                </div>
            </div>


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

@endsection


@section('scripts')

<script>
    document.getElementById('createCurrencyModal').addEventListener('show.bs.modal', function () {
        // Check if there is a base currency
        fetch('{{ route('currencies.checkBaseCurrency') }}', {
            method: 'GET',
            headers: { 'Content-Type': 'application/json' }
        })
        .then(response => response.json())
        .then(data => {
            // Show "is base currency" option only if no base currency exists
            const baseCurrencyContainer = document.getElementById('baseCurrencyContainer');
            baseCurrencyContainer.style.display = data.hasBaseCurrency ? 'none' : 'block';
        })
        .catch(error => console.error('Error checking base currency:', error));


    });
    
    const isBaseCurrencySelect = document.getElementById('is_base_currency');
    if (document.getElementById('baseCurrencyContainer').style.display === 'none') {
        isBaseCurrencySelect.value = '0'; // Set to '0' by default if hidden
    }
    // Handle the form submission for creating a new currency
    document.getElementById('saveCurrencyButton').addEventListener('click', function() {
        const name = document.getElementById('name').value;
        const code = document.getElementById('code').value;
        const symbol = document.getElementById('symbol').value;
        const buying_rate = document.getElementById('buying_rate').value;
        const selling_rate = document.getElementById('selling_rate').value;
        const isBaseCurrency = isBaseCurrencySelect.value === '1' ? 1 : 0;

        const data = {
            _token: "{{ csrf_token() }}",
            name: name,
            code: code,
            symbol: symbol,
            buying_rate: buying_rate,
            selling_rate: selling_rate,
            isBaseCurrency: isBaseCurrency  // Pass as camelCase to match the database field
        };

        const modal = bootstrap.Modal.getInstance(document.getElementById('createCurrencyModal'));
        fetch('{{ route('currencies.store') }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                displayMessage('Currency created successfully!', 'success');
                
                modal.hide();
                location.reload();
            } else {
                console.log(data);
                displayMessage('Error creating currency.', 'danger');
                modal.hide();
            }
        })
        .catch(error => {displayMessage('Error creating currency.', 'danger'); modal.hide();});
    });

    // Open modal and populate it with currency data
    function openUpdateModal(button) {
        const row = button.closest('tr');

        const currencyId = row.getAttribute('data-id');
        const name = row.getAttribute('data-name');
        const code = row.getAttribute('data-code');
        const symbol = row.getAttribute('data-symbol');
        const buyingRate = row.getAttribute('data-buying-rate');
        const sellingRate = row.getAttribute('data-selling-rate');
        const isBaseCurrency = row.getAttribute('data-is-base-currency') === '1';

        document.getElementById('update-name').value = name;
        document.getElementById('update-code').value = code;
        document.getElementById('update-symbol').value = symbol;
        document.getElementById('update-buying_rate').value = buyingRate;
        document.getElementById('update-selling_rate').value = sellingRate;
        document.getElementById('currency_id').value = currencyId;
        document.getElementById('update-base-currency').value = isBaseCurrency ? '1' : '0';

        const baseCurrencyContainer = document.getElementById('base-currency-container');

        if (isBaseCurrency) {
            baseCurrencyContainer.style.display = 'block';
        } else {
            fetch('{{ route('currencies.checkBaseCurrency') }}', {
                method: 'GET',
                headers: { 'Content-Type': 'application/json' }
            })
            .then(response => response.json())
            .then(data => {
                baseCurrencyContainer.style.display = !data.hasBaseCurrency ? 'block' : 'none';
            })
            .catch(error => console.error('Error checking base currency:', error));
        }

        new bootstrap.Modal(document.getElementById('updateCurrencyModal')).show();
    }

    document.getElementById('updateCurrencyButton').addEventListener('click', function() {
        const currencyId = document.getElementById('currency_id').value;
        const name = document.getElementById('update-name').value;
        const code = document.getElementById('update-code').value;
        const symbol = document.getElementById('update-symbol').value;
        const buying_rate = document.getElementById('update-buying_rate').value;
        const selling_rate = document.getElementById('update-selling_rate').value;
        const isBaseCurrency = document.getElementById('update-base-currency').value === '1' ? 1 : 0;

        const data = {
            _token: "{{ csrf_token() }}",
            currency_id: currencyId,
            name: name,
            code: code,
            symbol: symbol,
            buying_rate: buying_rate,
            selling_rate: selling_rate,
            is_base_currency: isBaseCurrency
        };

        const modal = bootstrap.Modal.getInstance(document.getElementById('updateCurrencyModal'));
        fetch('{{ route('currencies.update') }}', {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                displayMessage('Currency updated successfully!', 'success');
                modal.hide();
                location.reload(); // Reload page or update UI dynamically
            } else {
                console.log(data);
                displayMessage('Error updating currency.', 'danger');
            }
        })
        .catch(error => displayMessage('Error updating currency.', 'danger'));
    });
    
    function displayMessage(message, type) {
        const messageContainer = document.getElementById('message-area');
        messageContainer.className = `alert alert-${type}`;
        messageContainer.textContent = message;
        messageContainer.style.display = 'block';

        setTimeout(() => {
            messageContainer.style.display = 'none';
        }, 3000); // Hide after 3 seconds
    }

    // Function to hide the alert after a few seconds
    function hideAlert(alertId) {
        setTimeout(function() {
            document.getElementById(alertId).classList.add('fade');
            document.getElementById(alertId).classList.remove('show');
        }, 3000);
    }
</script>
@endsection