@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'Currencies')

@push('styles')
    <!-- Load DataTables CSS -->
    <link href="{{ asset('backend/assets/css/jquery.dataTables.min.css') }}" rel="stylesheet">
@endpush

@section('content')
    <div class="flex justify-between items-center mb-4">
        <h1 class="text-xl font-semibold">Currency Management</h1>
        <a href="{{ route('admin.currency.create') }}" class="btn btn-primary">
            <i class="fas fa-plus mr-2"></i> Add New Currency
        </a>
    </div>

    <div class="card">
        <div class="p-4 overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200" id="currency-table">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Code</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Country code</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Symbol</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Exchange rate</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Is default</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    <!-- Currency rows will be dynamically populated here -->
                </tbody>
            </table>
        </div>
    </div>
@endsection


@push('scripts')
    <!-- Load jQuery -->
    <script src="{{ asset('backend/assets/js/jquery-3.7.1.min.js') }}"></script>

    <!-- Load DataTables JS -->
    <script src="{{ asset('backend/assets/js/jquery.dataTables.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            var table = $('#currency-table').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                ajax: {
                    url: `{{ route('admin.currency.index') }}`
                },
                columns: [{
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'code',
                        name: 'code'
                    },
                    {
                        data: 'country_code',
                        name: 'country_code'
                    },
                    {
                        data: 'symbol',
                        name: 'symbol'
                    },
                    {
                        data: 'exchange_rate',
                        name: 'exchange_rate'
                    },
                    {
                        data: 'is_default',
                        name: 'is_default',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'status',
                        name: 'status',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ],
                order: [
                    [0, 'asc']
                ]
            });

            // Delete functionality
            $(document).on('click', '.delete-btn', function() {

                Swal.fire({
                    title: "Are you sure to delete?",
                    text: "You won't be able to revert this!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "Yes, delete it!"
                }).then((result) => {
                    if (result.isConfirmed) {
                        var id = $(this).data('id');
                        $.ajax({
                            url: `{{ route('admin.currency.destroy', ':id') }}`
                                .replace(':id', id),
                            type: 'DELETE',
                            data: {
                                _token: '{{ csrf_token() }}'
                            },
                            success: function(response) {
                                if (response.success) {
                                    toastr.success(response.message);
                                } else {
                                    toastr.error(response.message);
                                }
                                table.draw();
                            },
                            error: function() {
                                toastr.error("Server error.");
                            }
                        });
                    }
                });
            });

            // Status toggle
            $(document).on('change', '.status-toggle', function() {
                var id = $(this).data('id');
                var status = $(this).is(':checked') ? 1 : 0;

                $.ajax({
                    url: `{{ route('admin.currency.toggle-status', ':id') }}`.replace(
                        ':id', id),
                    type: 'GET',
                    data: {
                        _token: '{{ csrf_token() }}',
                        id: id,
                        status: status
                    },
                    success: function(response) {
                        if (response.success) {
                            toastr.success(response.message);
                        } else {
                            toastr.error("Failed to update status.");
                        }
                        table.draw();
                    },
                    error: function() {
                        toastr.error("Server error.");
                    }
                });
            });

            // Default toggle
            $(document).on('change', '.default-toggle', function() {
                var id = $(this).data('id');
                var is_default = $(this).is(':checked') ? 1 : 0;

                $.ajax({
                    url: `{{ route('admin.currency.toggle-default', ':id') }}`.replace(
                        ':id', id),
                    type: 'GET',
                    data: {
                        _token: '{{ csrf_token() }}',
                        id: id,
                        is_default: is_default
                    },
                    success: function(response) {
                        if (response.success) {
                            toastr.success(response.message);
                        } else {
                            toastr.error("Failed to update status.");
                        }
                        table.draw();
                    },
                    error: function() {
                        toastr.error("Server error.");
                    }
                });
            });
        });
    </script>
@endpush