@extends('layouts.admin')


@section('style')
    <style>
        #store_receipt_table img {
            max-width: 200px;
            max-height: 300px;
        }

        .btn-group-wrap .btn {
            padding: 5px;
            margin-bottom: 5px;
        }
    </style>
@endSection

@section('script')
    <script>
        $(function () {

            var t = $('#store_receipt_table').DataTable({
                lengthMenu: [ [10, 25, 50, 100, 200, 500, -1], [10, 25, 50, 100, 200, 500, "All"] ],
                dom:
                    "<'row p-2'<'#create_voucher.col-sm-6 mb-2 text-left'><'#import_export.col-sm-6 mb-2 text-left text-sm-right'B>>" +
                    "<'row px-2'<'col-sm-6'l><'col-sm-6'f>>" +
                    "<'row'<'col-sm-12 overflow-auto'tr>>" +
                    "<'row p-2'<'col-sm-5'i><'col-sm-7'p>>",
                buttons: [{
                    extend: 'csv',
                    text: '<i class="fas fa-file-export"></i> Export CSV',
                    className: 'btn btn-sm btn-default'
                }],
                columnDefs: [{
                    targets: [4],
                    searchable: false,
                    orderable: false,
                    visible: false
                }],
                autoWidth: false
            });

            t.on( 'order.dt search.dt', function () {
                t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
                    cell.innerHTML = i+1;
                } );
            } ).draw();
        });

    </script>

@endSection

@section('content')

    @component('admin.components.tabs')
    <div class="card-header d-none">
        <h3 class="card-title">
            {{ $title }}
            <small>{{ $store->name }}</small>
        </h3>

        <p>
            @if(!$is_demo_receipt)
                <small style="color: red;">{{ __('admin_dashboard.msgReceiptExampleDescription') }}</small>
            @endif
        </p>


        <div class="text-right" style="position: absolute; float: right; margin-top: 0; margin-bottom: 0; top: 15px; right: 10px;">
            <a role='button' href="{{ route('add_store_receipt', [
                                'store_slug' => $store->slug,
                                'store_detail_key' => $store_detail_key,
                            ]) }}" class="btn btn-sm btn-info float-right">
                {{ __('admin_setting.btnAdd') }}
            </a>
        </div>
    </div>
@include('layouts.flashmessage')

    <table id="store_receipt_table" class="table table-bordered table-hover dataTable">
        <thead>
            <tr>
                <th>No.</th>
                <th>Label</th>
                <th>Translation</th>
                <th>Image</th>
                <th>Image URL</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
        @if($store)
        @foreach($store->storeDetails as $item)
            <tr>
                <td></td>
                <td>{{ $item['label'] }}</td>
                <td>{{ __($item['label']) }}</td>
                <td class="text-center">
                    <a href="{{ asset($item['value']) }}" target="_blank">
                        <img src="{{ asset($item['value']) }}">
                    </a>
                </td>
                <td>{{ asset($item['value']) }}</td>
                <td class="btn-group-wrap">
                    @php
                        $route_params = [
                            'store_slug' => $store->slug,
                            'store_detail_key' => $store_detail_key,
                            'store_detail_id' => $item->id,
                        ];
                    @endphp
                    <a class='btn btn-primary btn-xs btn-block' href="{{ route('edit_store_receipt', $route_params) }}">
                        {{ __('admin_setting.btnEdit') }}
                    </a>

                    <button type='button' data-route='{{ route('delete_store_receipt', $route_params) }}' class='btn btn-danger btn-xs btn-delete btn-block'>
                        <i class='fas fa-trash' aria-hidden='true'></i>&nbsp;
                        {{ __('admin_setting.btnDelete') }}
                    </button>
                </td>
            </tr>
        @endforeach
        @endif
        </tbody>
    </table>
    @endcomponent

    @component('components.utility.modal_confirmation_delete')
    @endcomponent
@endsection