@extends('admin.layouts.layouts')

@section('title', 'Language Key')

@section('content')
    <div class="page-header">
        <h3 class="page-title">Language Key</h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item active" aria-current="page">Language Key</li>
            </ol>
        </nav>
    </div>

    <div class="card">
        <div class="card-header d-flex justify-content-end">
            @can('language-create')
                <button type="button" class="btn btn-primary mr-3" id="addLanguageButton">Add Language</button>
            @endcan
            @can('language-key-create')
            <a href="{{ route('language-key.create') }}" class="btn btn-primary mr-3">Add Key</a>
            @endcan
            @can('language-key-import')
                <button type="button" class="btn btn-primary mr-3" id="importKeyButton">Import Key</button>
            @endcan
            @can('language-key-export')
                <button type="button" class="btn btn-primary" id="exportKeyButton">Export Key</button>
            @endcan
        </div>
        <div class="card-body">
            <table class="table w-100" id="language-key-table">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Key Name</th>
                        @if (count($languages) > 0)
                            @foreach ($languages as $language)
                                <th>
                                    {{ $language->name }}
                                    @can('language-delete')
                                        <i class="fa fa-trash delete-language" style="color: #BA3838; cursor: pointer;" data-route="{{ route('language.delete', $language->id) }}" title="Delete Language"></i>
                                    @endcan
                                </th>
                            @endforeach
                        @endif
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>


    <div class="modal fade" id="languageModal" tabindex="-1" role="dialog" aria-labelledby="languageModalLabel1" aria-hidden="true"
        data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="languageModalLabel">Add Language</h5>
                    <button type="button" class="close" onclick="resetLanguageForm();" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="POST" id="languageForm" action="javascript:void(0)" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="name" class="form-label">Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" id="name" class="form-control onlytxt"
                                placeholder="Enter Name"
                                data-parsley-required
                                data-parsley-trigger="keyup"
                                data-parsley-required-message="Please enter name"
                                data-parsley-pattern="^[a-zA-Z\s]+$"
                                maxlength="100"
                                data-parsley-pattern-message="Only alphabets and spaces are allowed"
                                data-parsley-errors-container="#name_error">
                            <div class="invalid-feedback1" style="color:#BA3838;" id="name_error"></div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" id="modalLanguageSubmitBtn">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="importLanguageModal" tabindex="-1" role="dialog" aria-labelledby="importLanguageModalLabel1" aria-hidden="true"
        data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="importLanguageModalLabel">Import Language</h5>
                    <button type="button" class="close" onclick="resetImportLanguageForm();" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="POST" id="importLanguageForm" action="javascript:void(0)" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="language" class="form-label">Select Language <span class="text-danger">*</span></label>
                            <select name="language" id="language" class="form-control selectLanguage"
                                data-parsley-required
                                data-parsley-trigger="change"
                                data-parsley-required-message="Please select language"
                                data-parsley-errors-container="#language_error">
                                <option value="">Select Language</option>
                            </select>
                            <div class="invalid-feedback1" style="color:#BA3838;" id="language_error"></div>
                        </div>
                        <div class="form-group">
                            <label for="file" class="form-label">Upload File <span class="text-danger">*</span></label>
                            <input type="file" name="file" id="file" class="form-control"
                                placeholder="Enter File"
                                data-parsley-required
                                data-parsley-required-message="Please upload file"
                                accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                                data-parsley-fileextension="csv,xls,xlsx"
                                data-parsley-accept="text/csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                                data-parsley-errors-container='#file_error'>
                            <div class="invalid-feedback1" style="color:#BA3838;" id="file_error"></div>
                        </div>
                        <small class="ml-2" style="color: #BA3838;"> (In Key Name only allow small letter with underscore. Ex: good_morning)</small>
                        <div class="mt-3">
                            <button class="btn btn-sm btn-outline-primary" id="sampleLanguageKey" type="button">
                                <i class="fas fa-download"></i> Sample File
                            </button>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" id="modalImportLanguageBtn">Import</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="failedImportModal" tabindex="-1" role="dialog" aria-labelledby="failedImportModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Failed Records</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table id="failedImportTable" class="table table-bordered table-striped">
                        <thead></thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-js')
    <script type="text/javascript">
        var countLanguages = "{{ count($languages) }}";
        var languageList = "{{ route('language-list') }}";
        var languageKeyAjaxList = "{{ route('language-key-list') }}";
        var languageStore = "{{ route('language.store') }}";
        var languageImport = "{{ route('language.import') }}";
        
        $('#exportKeyButton').on('click', function () {
            window.location.href = "{{ route('language.export') }}";
        });

        $('#sampleLanguageKey').on('click', function () {
            window.location.href = "{{ route('language.sample-file') }}";
        });
    </script>
    <script src="{{ asset('assets/js/admin/language-key.js') }}?time={{ time() }}"></script>
@endsection