@extends('laundry::layouts/contentLayoutMaster')

@section('title', __('Categories') )

@section('vendor-style')
  {{-- vendor css files --}}
  <link rel="stylesheet" href="{{ asset(('laundry-files/vendors/css/tables/datatable/dataTables.bootstrap4.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(('laundry-files/vendors/css/tables/datatable/responsive.bootstrap4.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(('laundry-files/vendors/css/tables/datatable/buttons.bootstrap4.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(('laundry-files/vendors/css/tables/datatable/rowGroup.bootstrap4.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(('laundry-files/vendors/css/pickers/flatpickr/flatpickr.min.css')) }}">
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
  
  @livewireStyles
@endsection
@section('page-style')
  <!-- Page css files -->
  <style>
    .dataTables_info{
      padding-left: 15px;
    }
    .dataTables_length{
      padding-left: 15px;
    }
    .pagination{
      padding-right: 15px;
    }
    .dataTables_filter{
      padding-right: 15px;
    }
    </style>
  @endsection

  

@section('content')
@if(session()->has('message'))
    <div class="alert alert-success p-2" role="alert">
        {{ session()->get('message') }}
    </div>
@endif


<!-- Basic table -->
<section id="basic-datatable">
  <div class="row">
    <div class="col-12">
      <div class="card">

        <div class="card-header border-bottom p-1">
          <div class="head-label">
            <h6 class="mb-0"></h6>
          </div>
          <div class="dt-action-buttons text-end" onclick="$('.form-modal').modal('show')">
            <div class="dt-buttons d-inline-flex">
              <button class="dt-button create-new btn btn-primary" tabindex="0" aria-controls="DataTables_Table_0" type="button" data-bs-toggle="modal" data-bs-target="#modals-slide-in">
                <span>
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus me-50 font-small-4"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
                  {{ __('Add New Category') }}
                </span>
              </button>
            </div>
          </div>
        </div>
        

        <table id="mytable" class="table" style="width:100%">
          <thead>
              <tr>
                  <th>{{ __('ID') }}</th>
                  <th>{{ __('Name') }}</th>
                  <th>{{ __('Action') }}</th>
              </tr>
          </thead>
          <tbody>
            @foreach($categories as $category)
              <tr id="rowid{{$category->id}}">
                <td>{{ $category->id }}</td>
                <td>{{ $category->name }}</td>
                <td><i onclick="edit('{{ $category->id }}', '{{ $category->name }}', '{{ $category->name_ar }}')" class="fas fa-edit text-primary mr-1 cursor-pointer"></i>
              </tr>
            @endforeach
          </tbody>
      </table>

      </div>
    </div>
  </div>
</section>
<!--/ Basic table -->


<!-- Modal to add new user starts-->
<div class="modal modal-slide-in form-modal fade" id="modals-slide-in">
      <div class="modal-dialog">
        <form method="post" action="{{ url('/laundry/categories/save') }}"class="add-new-user modal-content pt-0">
          @csrf
          <input name="id" id="id" type="hidden"/>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
          <div class="modal-header mb-1">
            <h5 class="modal-title" id="modalLabel">{{ __('New Category') }}</h5>
          </div>
          <div class="modal-body flex-grow-1">
            <div class="form-group">
              <label class="form-label" for="basic-icon-default-fullname">{{ __('Name') }}</label>
              <input
                type="text"
                class="form-control dt-full-name"
                placeholder="{{ __('Enter name') }}"
                id="name"
                name="name"
                aria-label="Enter name"
                aria-describedby="basic-icon-default-fullname2"
                required
              />
            </div>
            <div class="form-group" style="direction:rtl !important; text-align:right">
              <label class="form-label" for="basic-icon-default-fullname2">اسم التصنیف</label>
              <input
                type="text"
                class="form-control dt-full-name"
                placeholder="ادخل الاسم"
                id="name_ar"
                name="name_ar"
                aria-label="ادخل الاسم"
                aria-describedby="basic-icon-default-fullname2"
                
              />
            </div>
            
            <button type="submit" class="btn btn-primary mr-1 data-submit" id="modalSubmit">{{ __('Submit') }}</button>
            <button type="reset" class="btn btn-outline-secondary" data-dismiss="modal">{{ __('Cancel') }}</button>
          </div>
        </form>
      </div>
    </div>
    <!-- Modal to add new user Ends-->


@endsection


@section('vendor-script')
  @livewireScripts
  {{-- vendor files --}}
  <script src="{{ asset(('laundry-files/vendors/js/tables/datatable/jquery.dataTables.min.js')) }}"></script>
  <script src="{{ asset(('laundry-files/vendors/js/tables/datatable/datatables.bootstrap4.min.js')) }}"></script>
  <script src="{{ asset(('laundry-files/vendors/js/tables/datatable/dataTables.responsive.min.js')) }}"></script>
  <script src="{{ asset(('laundry-files/vendors/js/tables/datatable/responsive.bootstrap4.js')) }}"></script>
  <script src="{{ asset(('laundry-files/vendors/js/tables/datatable/datatables.checkboxes.min.js')) }}"></script>
  <script src="{{ asset(('laundry-files/vendors/js/tables/datatable/datatables.buttons.min.js')) }}"></script>
  <script src="{{ asset(('laundry-files/vendors/js/tables/datatable/jszip.min.js')) }}"></script>
  <script src="{{ asset(('laundry-files/vendors/js/tables/datatable/pdfmake.min.js')) }}"></script>
  <script src="{{ asset(('laundry-files/vendors/js/tables/datatable/vfs_fonts.js')) }}"></script>
  <script src="{{ asset(('laundry-files/vendors/js/tables/datatable/buttons.html5.min.js')) }}"></script>
  <script src="{{ asset(('laundry-files/vendors/js/tables/datatable/buttons.print.min.js')) }}"></script>
  <script src="{{ asset(('laundry-files/vendors/js/tables/datatable/dataTables.rowGroup.min.js')) }}"></script>
  <script src="{{ asset(('laundry-files/vendors/js/pickers/flatpickr/flatpickr.min.js')) }}"></script>
@endsection
@section('page-script')
  {{-- Page js files --}}
  <script src="{{ asset(('laundry-files/js/scripts/tables/table-datatables-basic.js')) }}"></script>
  <script>
  $(document).ready(function() {
    $('#mytable').DataTable();
  });

  function edit(id, name,name_ar){
    $('#id').val(id);
    $('#name').val(name);
    $('#name_ar').val(name_ar);
    $('#modalSubmit').html('Update');
    $('#modalLabel').html('Update Category');
    $('.form-modal').modal('show')
  }

  function removeRow(element){
    var id = $(element).data('id');
    var row = $(element).parents().find(id);
    $(row).remove();
  }
  </script>
@endsection