@extends('voyager::master')

@section('page_title', 'Currency')

@section('page_header')
<div class="page-header">
    <div class="row align-items-center py-2">
        <div class="col-sm mb-2 mb-sm-0">
            <div class="d-flex align-items-center">
                <img class="onerror-image" data-onerror-image="{{ asset('thumb.png') }}" src="{{ asset('thumb.png') }}"
                    width="38" alt="BlackList Image">
                <div class="w-0 flex-grow pl-2">
                    <h1 class="page-header-title mb-0">{{ __('form.currency.title.heading') }} </h1>
                    <p class="page-header-text m-0">{{ __('form.currency.title.sub_heading') }}</p>
                </div>
            </div>
        </div>
    </div>
</div>
@stop

@section('content')
@include('_partials.alerts')

<div class="col-sm-auto min--280 text-right">
    <div class="row">
        <div class="text-left float">
        </div>

        <div class="col text-right">
            <a href="{{route('currency.create')}}" class="btn btn-sm btn-success">
               {{__('voyager::generic.add')}}
            </a>
        </div>
    </div>
</div>


<div class="row">
    <div class="col-md-12 mt-4">
        <div class="panel panel-bordered">
            <div class="panel-body">
                <div class="table-responsive">
                    <table id="dataTable" class="table table-hover customers-table">
                        <thead>
                            <tr>
                                <th class="no-sort">{{ __('seeders.data_rows.id') }}</th>
                                <th>{{ __('form.currency.fields.currency_code') }}</th>
                                <th>{{ __('form.currency.fields.currency_name') }}</th>
                                <th>{{__('form.currency.fields.symbol')}}</th>
                                <th class="no-sort">{{ __('generic.action') }}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@stop


@push('javascript')
<div class="modal modal-danger fade" tabindex="-1" id="delete_modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="{{ __('voyager::generic.close') }}"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"><i class="voyager-trash"></i> {{ __('voyager::generic.delete_question') }}
                    {{ __('form.currency.title.heading') }}?</h4>
            </div>
            <div class="modal-footer">
                <form action="#" id="delete_form" method="POST">
                    {{ method_field('DELETE') }}
                    {{ csrf_field() }}
                    <input type="submit" class="btn btn-danger pull-right delete-confirm"
                        value="{{ __('voyager::generic.delete_confirm') }}">
                </form>
                <button type="button" class="btn btn-default pull-right"
                    data-dismiss="modal">{{ __('voyager::generic.cancel') }}</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
    <script>
        $(document).ready(function() {
            $('#dataTable').DataTable({
                processing: true,
                serverSide: false,
                ajax: {
                    url: "{{ url()->current() }}",
                    type: 'GET',
                    dataSrc: function(json) {
                        window.role = json.role;

                        return json.data;
                    }
                },
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'currencyCode',
                        name: 'currencyCode',
                        defaultContent: ''
                    },
                    {
                        data: 'currencyName',
                        name: 'currencyName',
                        defaultContent: ''
                    },
                    {
                        data: 'symbol',
                        name: 'symbol'
                    },
                    {
                        data: null,
                        name: 'actions',
                        render: function(data) {
                            let actionsHtml = '';
                            const currencyId = data['id'];

                            const viewRoute = "{{ route('currency.detail', ':id') }}"
                                .replace(':id', currencyId);
                            const editRoute =
                                "{{ route('currency.edit', ':id') }}".replace(':id',
                                    currencyId);

                            const deleteRoute =
                                "{{ route('currency.delete', ':id') }}".replace(':id',
                                    currencyId);

                                actionsHtml += `
                                <a href="${viewRoute}" title="View"
                                        class="btn btn-sm btn-warning view">
                                        <i class="voyager-eye"></i> <span
                                            class="hidden-xs hidden-sm">{{ __('voyager::generic.view') }}</span>
                                    </a>
                                    <a href="${editRoute}" title="Edit"
                                        class="btn btn-sm btn-primary edit">
                                        <i class=" voyager-edit"></i> <span
                                            class="hidden-xs hidden-sm">{{ __('voyager::generic.edit') }}</span>
                                    </a>
                                    <a href="javascript:;" title="Delete"
                                        class="btn btn-sm btn-danger delete"
                                        data-id="${currencyId}" id="delete-${currencyId}">
                                        <i class=" voyager-trash"></i> <span
                                            class="hidden-xs hidden-sm">{{ __('voyager::generic.delete') }}</span>
                                    </a>`;

                            return actionsHtml;
                        }
                    }
                ],
                order: [
                    [1, 'desc']
                ],
                "fnRowCallback": function(nRow, aData, iDisplayIndex) {
                    var pageInfo = $('#dataTable').DataTable().page.info();
                    var startIndex = pageInfo.start;
                    $("td:first", nRow).html(startIndex + iDisplayIndex + 1);
                    return nRow;
                }, // Adjust based on column index for sorting
                language: {
                    search: "@lang('datatable.sSearch')",
                    lengthMenu: "@lang('datatable.sLengthMenu')",
                    info: "@lang('datatable.sInfo')",
                    infoEmpty: "@lang('datatable.sInfoEmpty')",
                    infoFiltered: "@lang('datatable.sInfoFiltered')",
                    loadingRecords: "@lang('datatable.sLoadingRecords')",
                    processing: "@lang('datatable.sProcessing')",
                    zeroRecords: "@lang('datatable.sZeroRecords')",
                    paginate: {
                        first: "@lang('datatable.oPaginate.sFirst')",
                        last: "@lang('datatable.oPaginate.sLast')",
                        next: "@lang('datatable.oPaginate.sNext')",
                        previous: "@lang('datatable.oPaginate.sPrevious')"
                    },
                    aria: {
                        sortAscending: "@lang('datatable.oAria.sSortAscending')",
                        sortDescending: "@lang('datatable.oAria.sSortDescending')"
                    }
                },
                columnDefs: [{
                        targets: 'no-sort',
                        orderable: false
                    }
                ]
            });
            $('#dataTable').on('click', '.delete', function (e) {
                e.preventDefault(); // Prevent the default action
                $('#delete_form')[0].action = '{{ route('currency.delete', '__id') }}'.replace(
                    '__id',
                    $(this).data('id')
                );
                console.log($('#delete_form')[0].action);
                $('#delete_modal').modal('show');
            });
        });

    </script>
@endpush