@extends('admin::layouts.master')

@push('styles')
<style>
    table#translation-table tr td a.button {
        display: none;
    }

    table#translation-table tr:hover td a.button {
        display: inline-block;
    }

    select {
        /* styling */
        background-color: white;
        border: thin solid var(--primary);
        border-radius: 4px;
        display: inline-block;
        font: inherit;
        line-height: 1.5em;
        padding: 0.5em 3.5em 0.5em 1em;

        /* reset */

        margin: 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-appearance: none;
        -moz-appearance: none;
    }

    /* arrows */
    select.round {
        background-image:
            linear-gradient(45deg, transparent 50%, gray 50%),
            linear-gradient(135deg, gray 50%, transparent 50%),
            radial-gradient(#ddd 70%, transparent 72%);
        background-position:
            calc(100% - 17px) calc(1em + 2px),
            calc(100% - 12px) calc(1em + 2px),
            calc(100% - .5em) .5em;
        background-size:
            5px 5px,
            5px 5px,
            1.5em 1.5em;
        background-repeat: no-repeat;
    }

    select.round:focus {
        background-image:
            linear-gradient(45deg, white 50%, transparent 50%),
            linear-gradient(135deg, transparent 50%, white 50%),
            radial-gradient(gray 70%, transparent 72%);
        background-position:
            calc(100% - 12px) 1em,
            calc(100% - 17px) 1em,
            calc(100% - .5em) .5em;
        background-size:
            5px 5px,
            5px 5px,
            1.5em 1.5em;
        background-repeat: no-repeat;
        border-color: var(--primary);
        outline: 0;
    }
</style>
@endpush

@section('content')

<div class="card">
    <form class="" id="" action="" method="GET">
        <div class="card-header row gutters-5 align-items-center">
            <div class="col-12 col-md-4 text-center text-md-left mb-2 mb-md-0">
                <h5 class="mb-0 h6">{{ translate('Web App Label Translation') }}</h5>
            </div>
            <div class="col-12 col-md-4 mb-2 mb-md-0">
                <input type="text" class="form-control" id="sort_translation" name="filters[name]" @isset(request()->get('filters')['name']) value="{{ request()->get('filters')['name'] }}" @endisset placeholder="{{ translate('Search by Page, Key or Value...') }}">
            </div>

            <div class="col-12 col-md-4 d-flex justify-content-md-end gap-1">
                <a class="btn btn-success flex-fill" onclick="initTranslationEdit(this)" data-href="{{ route('admin.webTranslation.addKey') }}" href="javascript:void(0)">
                    {{ translate('New') }}
                </a>
                <a href="{{ route('admin.webTranslation.create') }}" class="btn btn-success mx-3 flex-fill text-nowrap">
                    {{ translate('Import') }}
                </a>
                <a href="{{ route('admin.webTranslation.export') }}" class="btn btn-success flex-fill text-nowrap">
                    {{ translate('Export') }}
                </a>
            </div>
        </div>
    </form>

    <div class="card-body">
        <table id="language-table" class="table table-striped table-bordered aiz-table" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th width="5%">SN</th>
                    <th>{{ translate('Page') }}</th>
                    <th>{{ translate('Key') }}</th>
                    <th>{{ translate('Value (EN)') }}</th>
                    <th width="10%" class="text-right">{{translate('Actions')}}</th>
                </tr>
            </thead>
            <tbody>
                @foreach($translations as $key => $translation)
                <tr>
                    <td>{{ $key + 1 + ($translations->currentPage() - 1) * $translations->perPage() }}</td>
                    <td>{{ $translation->page }}</td>
                    <td>{{ $translation->name }}</td>
                    <td>{{ $translation->en }}</td>
                    <td class="text-right">
                        <a class="btn btn-soft-info btn-icon btn-circle btn-sm" onclick="initTranslationEdit(this)"
                            data-href="{{ route('admin.webTranslation.edit',  $translation->id) }}"
                            href="javascript:void(0)"
                            title="{{ translate('Edit') }}">
                            <i class="las la-edit"></i>
                        </a>
                        <a href="#" class="btn btn-soft-danger btn-icon btn-circle btn-sm confirm-delete"
                            data-href="{{ route('admin.webTranslation.delete',   $translation->id) }}"
                            title="{{ translate('Delete') }}">
                            <i class="las la-trash"></i>
                        </a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        <div class="aiz-pagination">
            {{ $translations->links() }}
        </div>
    </div>
</div>

<!--  -->

<!--  -->
@endsection

@section('modal')
@include('admin::modals.delete_modal')
@include('admin::modals.confirm_modal')
<div id="edit-modal">
</div>

@endsection

@section('script')
@include('translation::webTranslation.scripts.index_scripts')

@endsection