@extends('layouts.admin')

@section('title', trans('admin.Categories'))
@section('page-title', trans('admin.Categories'))

@section('content')

<section class="dpage active">
    <div class="page-head">
        <div>
            <h2>{{ trans('admin.Categories') }}</h2>
            <p>{{ trans('admin.categories subtitle') }}</p>
        </div>
        <div class="page-head-actions">
            @if (auth('user')->user()->has_permission('create-categories'))
                <button type="button" class="btn btn-primary btn-sm" onclick="openCategoryModal('create')">＋ {{ trans('admin.Add') }}</button>
            @endif
        </div>
    </div>

    <div class="card">
        <div class="table-wrap">
            <table class="table" id="categoriesTable" style="width:100%;">
                <thead>
                <tr>
                    <th>#</th>
                    <th>{{ trans('admin.Name') }}</th>
                    <th>{{ trans('admin.Order by') }}</th>
                    <th>{{ trans('admin.Created at') }}</th>
                    <th>{{ trans('admin.Actions') }}</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</section>

<!-- ============ MODAL: Add / Edit specialty ============ -->
@if (auth('user')->user()->has_permission('create-categories') || auth('user')->user()->has_permission('update-categories'))
<div class="modal-backdrop" id="categoryModal">
  <div class="modal-box">
    <div class="modal-head">
      <h3 id="categoryModalTitle">{{ trans('admin.Add') }} {{ trans('admin.Categories') }}</h3>
      <button class="modal-close" onclick="closeModal('categoryModal')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
    </div>
    <form id="categoryForm">
      @csrf
      <input type="hidden" name="category_id" id="categoryId" value="">
      @foreach(\Mcamara\LaravelLocalization\Facades\LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
        <div class="modal-body" style="padding-bottom:0;">
          <div class="field" style="margin-bottom:16px;">
            <label>{{ trans('admin.name') }} ({{ $properties['native'] }})</label>
            <input type="text" name="{{ $localeCode }}[name]" id="categoryName_{{ $localeCode }}" required>
          </div>
        </div>
      @endforeach
      <div class="modal-body" style="padding-top:0;">
        <div class="field">
          <label>{{ trans('admin.Order by') }}</label>
          <input type="number" name="order_by" id="categoryOrderBy" value="0">
        </div>
        <div class="hint" id="categoryErrors" style="color:var(--red); margin-top:10px;"></div>
      </div>
      <div class="modal-foot">
        <button type="button" class="btn btn-ghost" onclick="closeModal('categoryModal')">{{ trans('admin.Close') }}</button>
        <button type="submit" class="btn btn-primary" id="categorySubmitBtn">{{ trans('admin.Save') }}</button>
      </div>
    </form>
  </div>
</div>
@endif

@endsection

@section('script')
@if(auth('user')->user()->has_permission('export-categories'))
<script src="{{ asset('theme/dashboard/plugins/datatables-buttons/js/buttons.colVis.js') }}"></script>
<script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>
@endif
<script type="text/javascript">
    var categoriesTable = $('#categoriesTable').DataTable({
        processing: true,
        serverSide: true,
        dom: '{{ auth('user')->user()->has_permission('export-categories') ? 'Blfrtip' : 'lfrtip' }}',
        pageLength: 10,
        lengthMenu: [10, 25, 50, 100],
        ajax: {
          "url": "{{ route('dashboard.categories.index') }}",
        },
        columns: [
            {data: 'id', name: 'id'},
            {data: 'name', name: 'name'},
            {data: 'order_by', name: 'order_by'},
            {data: 'created_at', name: 'created_at'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ],
        @if(auth('user')->user()->has_permission('export-categories'))
        buttons: [
            { extend: 'colvis', text: '{{ __('admin.column_visibility') }}' },
            { extend: 'postExcelVisibleColumns', text: '{{ __('admin.excel') }}' },
            { extend: 'postCsvVisibleColumns', text: '{{ __('admin.csv') }}' },
            { extend: 'postPdfVisibleColumns', text: '{{ __('admin.pdf') }}' },
        ],
        @endif
        language: {
            search: "{{ __('admin.search') }}: ",
            loadingRecords: "{{ __('admin.loading') }}",
            emptyTable: "{{ __('admin.no_result') }}",
            zeroRecords: "{{ __('admin.no_result') }}",
            lengthMenu: "{{ __('admin.Show') }} _MENU_ {{ __('admin.entries') }}",
            paginate: {
                previous: "{{ __('admin.previous') }}",
                next: "{{ __('admin.next') }}",
            }
        },
    });

    function openCategoryModal(mode, id){
        $('#categoryForm')[0].reset();
        $('#categoryId').val('');
        $('#categoryErrors').html('');

        if (mode === 'edit') {
            $('#categoryModalTitle').text("{{ trans('admin.Edit') }} {{ trans('admin.Categories') }}");
            $.get("{{ url('dashboard/categories') }}/" + id + "/edit", function(res){
                var data = res.data;
                $('#categoryId').val(data.id);
                $('#categoryOrderBy').val(data.order_by);
                $.each(data.translations, function(locale, name){
                    $('#categoryName_' + locale).val(name);
                });
                openModal('categoryModal');
            }).fail(function(){
                dashToast('✕', "{{ trans('admin.faild') }}");
            });
        } else {
            $('#categoryModalTitle').text("{{ trans('admin.Add') }} {{ trans('admin.Categories') }}");
            openModal('categoryModal');
        }
    }

    $(document).on('click', '.edit-category', function(){
        openCategoryModal('edit', $(this).data('id'));
    });

    $('#categoryForm').on('submit', function(e){
        e.preventDefault();
        var $btn = $('#categorySubmitBtn');
        var id = $('#categoryId').val();
        var url = id
            ? "{{ url('dashboard/categories') }}/" + id + "/edit"
            : "{{ route('dashboard.categories.store') }}";
        $('#categoryErrors').html('');
        $btn.prop('disabled', true);

        $.ajax({
            url: url,
            method: 'POST',
            data: $(this).serialize(),
            success: function(res){
                closeModal('categoryModal');
                $('#categoryForm')[0].reset();
                categoriesTable.ajax.reload(null, false);
                dashToast('✓', "{{ trans('admin.success') }}");
            },
            error: function(xhr){
                if (xhr.status === 422) {
                    var errors = xhr.responseJSON.errors;
                    var html = '';
                    $.each(errors, function(key, val){ html += val[0] + '<br>'; });
                    $('#categoryErrors').html(html);
                } else {
                    dashToast('✕', "{{ trans('admin.faild') }}");
                }
            },
            complete: function(){
                $btn.prop('disabled', false);
            }
        });
    });
</script>
@endsection