@extends('layouts.admin.master')

@section('title')
    Languages
@endsection

@push('css')
@endpush

@section('content')
    @component('components.breadcrumb')
        @slot('breadcrumb_title')
            <h3></h3>
        @endslot

        <li class="breadcrumb-item"><a href="{{ route('users.index') }}">Language</a></li>
        <li class="breadcrumb-item active">Add Language</li>
    @endcomponent
    <div class="row justify-content-center mt-3">
        <div class="col-lg-12">
            <div class="card mb-4">
                <div class="card-header pb-0">
                    <h5>{{ __('master.data') }}</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('languages.update', $language->id) }}" method="POST"
                        enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <div class="row g-1">
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="validationCustom01">{{ __('master.name') }}</label>
                                <input class="form-control" id="validationCustom01" type="text" required=""
                                    name="name" placeholder="Lang Name"
                                    value="{{ old('name') ? old('name') : $language->name }}" />
                                <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>
                                <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>
                            </div>
                        </div>

                        <div class="row g-1">
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="validationCustom02">Code</label>
                                <input class="form-control" id="validationCustom02" type="text" required=""
                                    name="code" placeholder="Code Lang"
                                    value="{{ old('code') ? old('code') : $language->code }}" />
                                <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>
                                <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>
                            </div>
                        </div>

{{--                        <div class="row g-1">--}}
{{--                            <div class="col-md-12 mb-3">--}}
{{--                                <label class="form-label" for="validationCustom03">Flag</label>--}}
{{--                                <input class="form-control" id="validationCustom03" type="text" name="flag"--}}
{{--                                    placeholder="fi fi-us" value="{{ old('flag') ? old('flag') : $language->flag }}" />--}}
{{--                                <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>--}}
{{--                                <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>--}}
{{--                            </div>--}}
{{--                        </div>--}}

                        <div class="row g-1">
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="validationDefault04">Direction</label>
                                <select class="form-select" id="validationDefault04" required="" name="direction">
                                    <option value="rtl"
                                        {{ old('direction') ? (old('direction') == 'rtl' ? 'selected' : '') : ($language->direction == 'rtl' ? 'selected' : '') }}>
                                        Rtl</option>
                                    <option value="ltr"
                                        {{ old('direction') ? (old('direction') == 'ltr' ? 'selected' : '') : ($language->direction == 'ltr' ? 'selected' : '') }}>
                                        Ltr</option>
                                </select>
                                <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>
                                <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>
                            </div>
                        </div>

                        <div class="row g-1">
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="validationDefault04">{{ __('Status') }}</label>
                                <select class="form-select" id="validationDefault04" required="" name="status">
                                    <option value="active"
                                        {{ old('status') ? (old('status') == 'active' ? 'selected' : '') : ($language->status == 'active' ? 'selected' : '') }}>
                                        {{ __('Active') }}</option>
                                    <option value="inactive"
                                        {{ old('status') ? (old('status') == 'inactive' ? 'selected' : '') : ($language->status == 'inactive' ? 'selected' : '') }}>
                                        {{ __('Inactive') }}</option>
                                </select>
                                <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>
                                <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>
                            </div>
                        </div>
                        <div class="row g-1">
                            <div class="col-md-12 mb-3">
                                <label class="form-label" for="validationDefault04">{{ __('Image') }}</label>
                                <div class="avatar">
                                    <img class="img-100 b-r-8" id="showImage" src="{{ $language->imagePath }}" alt="#">
                                </div>
                                @include('dashbord.include.image', ['button_name' => 'Image', 'model_id' => 'ImageModel', 'type' => 'radio', 'name' => 'image_id'])
                                <div class="valid-feedback">{{ __('validation.valid_feedback') }}</div>
                                <div class="invalid-feedback">{{ __('validation.invalid_feedback') }}</div>
                            </div>
                        </div>

                        <button class="btn btn-primary" type="submit">{{ __('master.save') }}</button>
                    </form>

                </div>
            </div>

        </div>
        <div class="col-md-12">
            <div class="card">

                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead class="bg-green mb-2">
                                <tr>
                                    {{-- <th class="text-white">@lang('Sl')</th> --}}
                                    <th class="text-white">Key</th>
                                    <th class="text-white">Value</th>
                                    <th class="text-right text-white">@lang('Action')</th>
                                </tr>
                            </thead>
                            <tbody class="custom-data">
                                @php
                                    $i = 0;
                                @endphp
                                @forelse ($lang as $key => $value)
                                    <tr class="elements">
                                        {{-- <td data-label="@lang('Sl')">
                                            {{ ++$i }}
                                        </td> --}}
                                        <td data-label="@lang('Key')" data-toggle="tooltip"
                                            title="{{ $key }}">
                                            {{ Str::limit($key, 60) }}
                                        </td>
                                        <td data-label="@lang('Value')" data-toggle="tooltip"
                                            title="{{ $value }}">{{ Str::limit($value, 40) }}</td>
                                        <td data-label="@lang('Action')" class="text-right">
                                            <a class="btn btn-primary edit mt-2" data-key="{{ $key }}"
                                                data-value="{{ $value }}"
                                                data-route="{{ route('translate.update', $language->id) }}"
                                                href="javascript:void(0)"><i class="fas fa-edit"></i>Edit</a>

                                        </td>
                                    </tr>
                                @empty

                                    <tr>
                                        <td class="text-center" colspan="100%">@lang('No Data Found')</td>
                                    </tr>
                                @endforelse

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="translate" tabindex="-1" role="dialog" aria-labelledby="modelTitleId"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <form action="{{ route('translate.store', $language->id) }}" method="post">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">@lang('Add New Translation')</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label>@lang('Key')</label>
                            <input class="form-control" type="text" name="key" required
                                value="{{ old('key') }}">
                        </div>
                        <div class="form-group">
                            <label>@lang('Value')</label>
                            <textarea class="form-control" name="value" required>{{ old('value') }}</textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-dark" data-dismiss="modal">@lang('Close')</button>
                        <button type="submit" class="btn btn-primary">@lang('Save')</button>
                    </div>
                </div>
            </form>
        </div>
    </div>



    <div class="modal fade" id="remove" tabindex="-1" role="dialog" aria-labelledby="modelTitleId"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <form action="{{ route('translate.remove') }}" method="post">
                @csrf
                <input type="hidden" name="language" value="{{ $language->id }}">
                <div class="modal-content">
                    <div class="modal-body">
                        <h5 class="mt-3">@lang('Are you sure to remove?')</h5>
                        <input type="hidden" name="key" required>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-dark" data-dismiss="modal">@lang('Close')</button>
                        <button type="submit" class="btn btn-danger">@lang('Confirm')</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('assets/js/notify/bootstrap-notify.min.js') }}"></script>
    <script src="{{ asset('assets/js/sweet-alert/sweetalert.min.js') }}"></script>
    <script src="{{ asset('assets/js/select2/select2.full.min.js') }}"></script>
    <script src="{{ asset('assets/js/select2/select2-custom.js') }}"></script>
    <script src="{{ asset('assets/js/form-validation-custom.js') }}"></script>
    <script src="{{ asset('assets/js/bookmark/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('assets/js/contacts/custom.js') }}"></script>
    <script>
        'use strict';
        var elements = $('.elements');


        $(document).on('click', '.edit', function() {
            const modal = $('#translate')
            modal.find('.modal-title').text()
            modal.find('input[name=key]').val($(this).data('key'))
            modal.find('textarea[name=value]').val($(this).data('value'))
            modal.find('form').attr('action', $(this).data('route'))
            modal.modal('show')
        })

        $(document).on('click', '.remove', function() {
            const modal = $('#remove')
            modal.find('input[name=key]').val($(this).data('key'))
            modal.modal('show')
        })
        $('.add').on('click', function() {
            $('#translate').find('form')[0].reset();
            $('#translate').find('.modal-title').text('')
        })
    </script>


    @include('dashbord.include.imageScriptEdit')

@endpush