@extends('panel.layouts.app')
@section('page-title')
    <title>
        {{ LaraCore::setting('html_prefix') }} {{ LaraCore::setting('html_prefix') != '' ? '|' : '' }} Receipt Settings
    </title>
@stop
@section('content')
    <div class="content-wrapper">
        <div class="row">
            {{ Form::open([
                'url' => route('receiptsettings.preview'),
                'method' => 'POST',
                'target' => '_blank',
                'id' => 'receipt-preview-form'
            ]) }}
                @csrf
                {{ Form::hidden('carrier', '', ['id' => 'receipt-carrier']) }}
            {{ Form::close() }}
            <div class="col-md-1"></div>
            <div class="col-md-10">
                <section class="content">
                    <div class="box box-default">
                        <div class="box-header with-border">
                            <i class="fa fa-gear"></i>
                            <h3 class="box-title">Receipt Settings</h3>
                            <div class="box-tools box-tools-common pull-right">
                                <a href="javascript:void(0)" class="btn btn-box-tool show-tooltip"
                                    onclick="ToggleDataTable('receiptlist-grid')" title="Search"><i
                                        class="fa fa-search"></i></a>
                            </div>
                        </div>
                        <div class="box-body">
                            <div class="table-responsive">
                                <table id="receiptlist-grid" class="table table-bordered table-hover display">
                                    <thead>
                                        <th>Receipts</th>
                                        <th>&nbsp;</th>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="complaints_modal_div">
                        <div class="edit_modal">
                        </div>
                    </div>
                </section>
            </div>
            <div class="col-md-1"></div>
        </div>
    </div>
@stop
@section('custom-scripts')
    <script>
        function previewReceiptLogo(input) {
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('receiptLogoPreview').src = e.target.result;
                };
                reader.readAsDataURL(input.files[0]);
            }
        }

        $(document).ready(function() {

            $('#receiptlist-grid').DataTable({
                processing: true,
                serverSide: true,
                order: [
                    [0, 'asc']
                ],
                ajax: {
                    url: '{{ route('receiptsettings.list') }}',
                    type: 'POST',
                    data: function(d) {
                        d._token = '{{ csrf_token() }}';
                    }
                },
                columns: [{
                        data: 'template_name',
                        name: 'template_name',
                        title: 'Receipts'
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false,
                        className: 'text-center'
                    }
                ],
                language: {
                    emptyTable: '{{ LaraCore::setting('no_records') }}',
                    processing: "<i class='fa fa-spinner fa-spin fa-3x'></i>"
                }
            });

        });

        function SetEditWhatsAppBill(el) {

            let id = $(el).data('id');

            $.ajax({
                url: "{{ route('receiptsettings.edit') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    id: id
                },
                success: function(html) {
                    $('.edit_modal').html(html);
                }
            });
        }

        function saveReceiptLogo() {
            let formData = new FormData($('#receiptSettingForm')[0]);
            $.ajax({
                url: "{{ route('receiptsettings.update') }}",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function(res) {
                    toastr.success(res.message, 'Success');
                    $('.edit_modal').html('');
                    $('#receiptlist-grid').DataTable().ajax.reload();
                },
                error: function(err) {
                    toastr.error(res.message || 'Something went wrong', 'Error');

                }
            });
        }

        function CloseModal() {
            $('.edit_modal').html('');
        }

        function openReceiptSettingModal(carrierId) {
            console.log('Carrier ID:', carrierId);
        }

        function previewReceipt(element) {
            let carrier = $(element).data('key');
            $('#receipt-carrier').val(carrier);
            $('#receipt-preview-form').submit();
        }
    </script>
@stop