@extends('adminlte::page')

@section('title', 'Currency Convertor')

@section('content_header')
    <h1>Currency Convertor</h1>
@stop
@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="box-header with-border">
                <span class="float-end">
                    <a href="{{ route('currency.add') }}" class="btn btn-primary">Add</a>
                </span>
                <span class="float-end">
                    <a href="{{route('currency.faq.index',['id'=>0])}}" class="btn btn-primary">Faq's</a>
                </span>
            </div>
            <div class="card">
                <!-- /.card-header -->
                <div class="card-body table-responsive">
                    <table class="table table-bordered">
                        <tr>
                            <th>Curreny Code</th>
                            <th>Flag</th>
                            <th>Price in USD</th>
                            <th>Action</th>
                        </tr>
                        @foreach ($CurrencyConverters as $CurrencyConverter)
                            <tr>
                                <td>{{$CurrencyConverter->currency_code }}</td>
                                <td>
                                    <img 
                                        width="50"
                                        onError="this.onerror=null;this.src='{{ asset('img/no-image.png') }}';"
                                        src="{{ !empty($CurrencyConverter->flag) ? asset('currency/flags/'.$CurrencyConverter->flage) : asset('img/no-image.png') }}" 
                                    />
                                </td>
                                <td>{{ $CurrencyConverter->price_in_usd }}</td>
                                <td>
                                    <input 
                                        type="checkbox" 
                                        {{$CurrencyConverter->is_active == '1' ? 'checked' : ''}} 
                                        class="chk_recent"
                                        data-url="{{ route('currency.updateIsactive', ['currency_code' => $CurrencyConverter->currency_code]) }}"
                                    />
                                    <a href="{{route('currency.edit',['id'=>$CurrencyConverter->id])}}"><i class="fa fa-edit"></i></a>
                                    <a href="{{route('currency.faq.index',['id'=>$CurrencyConverter->id])}}" class="badge bg-info" data-toggle="tooltip" data-placement="top" title="Edit Faq Section">Faqs</a>
                                
                                </td>
                            </tr>
                        @endforeach
                    </table>
                </div>
                <!-- /.card-body -->
            </div>
        </div>
        <!-- /.col -->
    </div>
@stop
@section('js')
<script type="text/javascript">
     $(document).ready(function () {
    $('.chk_recent').change(function (e) {
        // Prevent the default action before confirmation
        e.preventDefault();

        // Store the current checkbox
        var checkbox = $(this);

        // Determine the action based on the checkbox state
        var isChecked = checkbox.is(':checked');
        var actionMessage = isChecked 
            ? 'Are you sure you want to check this?' 
            : 'Are you sure you want to uncheck this?';

        // Ask for confirmation
        var isConfirmed = confirm(actionMessage);

        if (!isConfirmed) {
            // Revert the checkbox state if the user cancels
            checkbox.prop('checked', !isChecked);
            return;
        }

        // Proceed if the user confirms
        var featured = isChecked ? 1 : 0;

        $.ajax({
            url: checkbox.attr('data-url'),
            data: { featured: featured },
            type: "GET",
            success: function (data) {
                try {
                    data = JSON.parse(data); // Parse the response if it's JSON
                } catch (err) {
                    console.error('Failed to parse response:', err);
                    return;
                }

                // Show a notification based on the response
                new PNotify({
                    title: 'Alert',
                    text: data['message'],
                    type: data['error'] ? 'error' : 'success',
                    styling: 'bootstrap3',
                    delay: 3000
                });
            },
            error: function () {
                new PNotify({
                    title: 'Error',
                    text: 'Something went wrong. Please try again.',
                    type: 'error',
                    styling: 'bootstrap3',
                    delay: 3000
                });

                // Revert the checkbox state if the request fails
                checkbox.prop('checked', !isChecked);
            }
        });
    });
});
</script>
@stop