@extends('layouts.master')
@section('title',trans('language'))
@section('header')

@endsection
@section('main')
    <section id="dashboard-analytics">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="mb-0">{{trans('languages')}}</h4>
                        <a href="javascript:void(0)" data-toggle="modal" data-target="#createLanguageModal"
                           class="btn btn-flat-success">
                            {{trans('create language')}}
                            <i class="fa fa-plus-circle"></i>
                        </a>
                    </div>
                    <div class="card-content">
                        <div class="table-responsive mt-1">
                            <table class="table table-hover-animation mb-0">
                                <thead>
                                <tr>
                                    <th>{{trans('short code')}}</th>
                                    <th>{{trans('image')}}</th>
                                    <th>{{trans('name')}}</th>
                                    <th>{{trans('direction')}}</th>
                                    <th>{{trans('default')}}</th>
                                    <th>{{trans('action')}}</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($languages as $language)
                                    <tr>
                                        <td>{{$language->short_code}}</td>
                                        <td><img src="{{$language->image_url}}" alt="{{$language->name}}" height="20">
                                        </td>
                                        <td>
                                            {{$language->name}}
                                        </td>
                                        <td>{{trans($language->direction)}}</td>
                                        <td>
                                            <a href="{{route('admin.language.default',['language' => $language])}}">
                                                <span class="badge badge-dark round">
                                                    <i class="fa fa-circle font-small-3 text-{{$language->default ?'success':'danger'}}"></i>
                                                </span>
                                            </a>
                                        </td>
                                        <td>
                                            <div class="btn-group-sm">
                                                <a id="editBtn" href="javascript:void(0)"
                                                   class="btn btn-info"
                                                   data-toggle="modal"
                                                   data-target="#editLanguageModal"
                                                   data-id="{{$language->id}}"
                                                   data-name="{{$language->name}}"
                                                   data-short="{{$language->short_code}}"
                                                   data-direction="{{$language->direction}}"
                                                   data-default="{{$language->default}}"
                                                >{{trans('edit')}}</a>
                                                <a
                                                    href="{{route('admin.language.translate',['language'=>$language])}}"
                                                    class="btn btn-primary"
                                                >{{trans('translate')}}</a>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="modal" id="createLanguageModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <form action="{{route('admin.language.store')}}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{trans('create new language')}}</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 for="icon">{{trans('image')}}</label>
                            <input type="file" name="icon" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="short_code">{{trans('short code')}}</label>
                            <input type="text" name="short_code" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="name">{{trans('name')}}</label>
                            <input type="text" name="name" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="direction">{{trans('direction')}}</label>
                            <select class="form-control" name="direction">
                                <option value="ltr">{{trans('ltr')}}</option>
                                <option value="rtl">{{trans('rtl')}}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="default">{{trans('default')}}</label>
                            <select class="form-control" name="default">
                                <option value="1">{{trans('true')}}</option>
                                <option value="0">{{trans('false')}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="submit" class="btn btn-primary" value="{{trans('save')}}">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{trans('close')}}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="modal" id="editLanguageModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <form id="editForm" action="" method="post" enctype="multipart/form-data">
                @csrf
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{trans('edit')}} <span id="title"></span></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 for="icon">{{trans('image')}}</label>
                            <input type="file" name="icon" class="form-control">
                        </div>

                        <div class="form-group">
                            <label for="title">{{trans('name')}}</label>
                            <input type="text" name="name" id="nameInput" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="site">{{trans('short code')}}</label>
                            <input type="text" readonly id="shortInput" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="direction">{{trans('direction')}}</label>
                            <select id="directionInput" class="form-control" name="direction">
                                <option value="ltr">{{trans('ltr')}}</option>
                                <option value="rtl">{{trans('rtl')}}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="default">{{trans('default')}}</label>
                            <select id="defaultInput" class="form-control" name="default">
                                <option value="1">{{trans('true')}}</option>
                                <option value="0">{{trans('false')}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="submit" class="btn btn-primary" value="{{trans('save')}}">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{trans('close')}}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection
@section('footer')
    <script>
        $(document).on("click", "#editBtn", function () {
            var id = $(this).data('id');
            var name = $(this).data('name');
            var short = $(this).data('short');
            var direction = $(this).data('direction');
            var isDefault = $(this).data('default');
            $("#nameInput").val(name);
            $("#shortInput").val(short);
            $("#directionInput").val(direction);
            $("#defaultInput").val(isDefault);
            var url = `/wa-admin/Language/update/${id}`
            $('#editForm').attr('action', url)
            // As pointed out in comments,
            // it is unnecessary to have to manually call the modal.
            // $('#addBookDialog').modal('show');
        });
    </script>
@endsection