@extends('layout.layout')
@section('content')
<h1 class="text-warning text-center mt-3">Creeaza o categorie noua</h1>

<div class="container category-container">
    <form action="/add-category" id="submit_form_categories">
        @csrf
        <div id="errors-category"></div>
        @if($errors->any())
        <div class="alert alert-success  text-white text-center" role="alert" style="color:#fff !important;font-weight:bold;background: green !important;">
        <p>{{$errors->first()}}</p>
            <button type="button" class="btn-close btn-alerta" data-bs-dismiss="alert" aria-label="Close" style="background: none !important;border:none !important;float:right;font-weight:bold;color:#fff;margin-top:-37px;">x</button>
             </div>
            @endif
        <div class="form-group">
            <label for="">Adauga categorie noua</label>
                <input type="text" class="form-control" name="name" placeholder="Introduceti o categorie">
                <button type="submit" class="add-category mt-2 mb-2 w-100">Salveaza <i class="fas fa-plus" style="margin-left: 5px;"></i></button>

        </div>
    </form>
    <div class="table" id="category_table_id">
        <table class="table table-light " >
            <thead>
              <tr class="text-center text-white">
                <th scope="col">Categorie</th>
                <th scope="col">Status</th>
                <th scope="col">Acțiuni</th>
              </tr>
            </thead>
            <tbody>
              @foreach ($categories as $category)
              <tr class="text-center">
                <td class="fw-bold">{{ $category->name }}</td>
                @if($category->activ === 1)
                <td class="text-success fw-bold">Activ</td>
                @else
                <td class="text-danger fw-bold">Inactiv</td>
                @endif
                <td>
                    <div class="button-group">
                        <button class="btn btn-danger delete-user" data-bs-toggle="modal" data-bs-target="#DeleteModal{{ $category->id }}"title="Stergere User"><i class="fa fa-trash" aria-hidden="true"></i>
                        </button>
                        <button class="btn btn-success edit-user" data-bs-toggle="modal" data-bs-target="#EditModal{{ $category->id }}"title="Editare User"><i class="fas fa-edit"></i></button>
                        @if($category->activ === 0)
                        <button type="button" class="btn btn-primary active-user " data-id="{{$category->id}}" data-activare='1'
                            onclick="button_activare(this)"title="Activare categorie">
                            <i class="fas fa-toggle-on"></i>
                         </button>
                        @else
                        <button type="button" class="btn btn-warning disable-user" data-id="{{$category->id}}" data-dezactivare='0'
                            onclick="button_dezactivare(this)" title="Dezactivare categorie">

                            <i class="fas fa-toggle-off"></i>
                        </button>
                        @endif
                    </div>
                </td>
              </tr>
              {{-- Delete modal --}}
                <div class="modal fade sterge_modal" id="DeleteModal{{ $category->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h5 class="modal-title" id="exampleModalLabel">Sigur vrei sa stergi categoria {{ $category->name }}</h5>
                          <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                          </button>
                        </div>
                        <div class="modal-body">
                          <input type="hidden" name="id" id="id" value="{{ $category->id }}">
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="sterge_btn_category">Close</button>
                          <button  class="btn btn-danger" data-id="{{$category->id}}"
                            onclick="delete_category(this)">Sterge</button>
                        </div>
                      </div>
                    </div>
                  </div>
              {{-- end delete modal --}}

              {{-- Edit modal --}}
                <div class="modal fade" id="EditModal{{ $category->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h5 class="modal-title" id="exampleModalLabel">Editare categoria {{ $category->name }}</h5>
                          <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                          </button>
                        </div>
                        <div class="modal-body">
                          <input type="hidden" name="id" id="id" value="{{ $category->id }}">
                          <input type="text" id="category_name-{{ $category->id }}" name="name" class="form-control" placeholder="{{ $category->name }}" required value="{{$category->name}}">
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="edit_btn_category">Close</button>
                          <button type="submit" class="btn btn-success" data-id="{{$category->id}}"
                            onclick="edit_category(this)">Editeaza</button>
                        </div>
                      </div>
                    </div>
                  </div>
              {{-- end edit modal --}}
              @endforeach
            </tbody>
          </table>
    {{ $categories->links() }}
    </div>
</div>
@push('js')
<script>
    $(function () {
        $("#submit_form_categories").on('submit', function (e) {
            e.preventDefault();
            $.ajax({
                url: '/add-category',
                method: 'POST',
                data: new FormData(this),
                processData: false,
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                contentType: false,
                success: function (response) {
                    $('#submit_form_categories')[0].reset();
                    $('#errors-category').html(response.mesaj);
                    $("#errors-category").fadeTo(8000, 500).slideUp(500);
                    $("#errors-category").slideUp(500);
                    $("#category_table_id").load(window.location + " #category_table_id");
                },
                error: function (error) {
                    $("#errors-category").html(error.responseJSON.message);
                    $("#errors-category").fadeTo(8000, 500).slideUp(500);
                    $("#errors-category").slideUp(500);
                },
            });
        });
});

function delete_category(test) {
            let id = $(test).attr('data-id');
        $.ajax({
            url: '/delete-category',
            method: 'POST',
            data: {
                id,
                "_token": "{{ csrf_token() }}"
            }
            }).done(function (response) {
              $('#errors-category').html(response.message);
              $("#sterge_btn_category").trigger("click");
              $('body').removeClass('modal-open');
              $('.modal-backdrop').remove();
              $("#category_table_id").load(window.location + " #category_table_id");
            });
    }

    function edit_category(test) {
            let id = $(test).attr('data-id');
            let name = $("#category_name-" + id).val();
        $.ajax({
            url: '/edit-category',
            method: 'POST',
            data: {
                id,
                name,
                "_token": "{{ csrf_token() }}"
            }
            }).done(function (response) {
              $('#errors-category').html(response.message);
              $("#edit_btn_category").trigger("click");
              $('body').removeClass('modal-open');
              $('.modal-backdrop').remove();
              $("#category_table_id").load(window.location + " #category_table_id");
            });
    }

function button_activare(test) {
            let button_activare = $(test).attr('data-activare');
            let id = $(test).attr('data-id');
        $.ajax({
            url: '/category/activare',
            method: 'POST',
            data: {
                button_activare,
                id,

                "_token": "{{ csrf_token() }}"
            }
            }).done(function (response) {
                $("#category_table_id").load(window.location + " #category_table_id");
              $('#errors-category').html(response.mesaj);
            });
    }

 function button_dezactivare(test) {
            let button_dezactivare = $(test).attr('data-dezactivare');
            let id = $(test).attr('data-id');
        $.ajax({
            url: '/category/dezactivare',
            method: 'POST',
            data: {
                button_dezactivare,
                id,
                "_token": "{{ csrf_token() }}"
            }
            }).done(function (response) {
                $("#category_table_id").load(window.location + " #category_table_id");
              $('#errors-category').html(response.mesaj);
            });
}
</script>
@endpush
@endsection