@extends('layouts.master')

@section('content')

<div class="page-header mb-3">

    <div class="row">

        <div class="col-lg-12 col-md-12 col-12">

            <ul class="breadcrumb">

                <li class="breadcrumb-item">

                    <a href="#">{{ $title }}</a>

                </li>

                <li class="breadcrumb-item active">{{ $subtitle }}</li>

            </ul>

        </div>

    </div>

</div>

    <div class="row">

        <div class="col-sm-8">

            <div class="card">

                {{-- <div class="card-header d-md-flex border-bottom-1">

                    <div class="flex-grow-1">

                        <a href="#" class="btn btn-primary"><i class="feather-16" data-feather="plus-circle"></i> Tambah User</a>

                    </div>

                    <div class="mt-3 mt-md-0">

                        <a href="#!" class="btn  btn-white ms-2"><i class="featherbtn-16" data-feather="download"></i>

                            Import</a>

                        <a href="#!" class="btn  btn-white ms-2"><i class="featherbtn-16" data-feather="upload"></i>

                            Export</a>

                    </div>

                </div> --}}

                <div class="card-body">

                    <div class="table-responsive">

                        <table class="datatable table table-stripped">

                            <thead>

                                <tr>

                                    <th>No</th>

                                    <th>Name</th>

                                    <th>Deskripsi</th>

                                    <th>Tanggal Dibuat</th>

                                    <th class="text-center">Action</th>

                                </tr>

                            </thead>

                            <tbody>

                                @foreach ($kategori as $item)

                                <tr>

                                    <td>{{ $loop->iteration }}</td>

                                    <td>{{ $item->name_categori }}</td>

                                    <td>{{ $item->deskripsi }}</td>

                                    <td>{{ $item->created_at->format('Y-m-d') }}</td>

                                    <td class="text-center">

                                            <div class="dropdown">

                                            <a data-bs-toggle="dropdown">

                                                <i class="featherbtn-16" data-feather="more-vertical" class="icon-xs"></i>

                                            </a>

                                            <div class="dropdown-menu">

                                                <a href="#" id="{{ $item->id }}" class="dropdown-item editIcon"><i class="featherbtn-16" data-feather="edit"></i> Edit</a>

                                                <a href="#" name='{{ $item->name_categori }}' id="{{ $item->id }}" class="dropdown-item deleteIcon"><i class="featherbtn-16" data-feather="trash"></i> Delete</a>

                                            </div>

                                        </div>

                                    </td>    

                                </tr>

                              @endforeach

                            

                            </tbody>

                        </table>

                    </div>

                </div>

            </div>

        </div>

        <div class="col-sm-4">

            {{-- Tambah Data --}}

            <form action="" method="POST" id="add_categori_form">

            @csrf

            <div class="card">

              <div class="card-body">

                  <div class="row">

                    <div class="col-xl-12">

                        <div class="form-group mb-2">

                          <label class="form-label">Nama Kategori<a class="text-danger">*</a></label>

                          <input type="hidden" id="id" name="id">

                          <input type="text" id="name_categoriInput" name="name_categori" value="{{ old('name_categori') }}" placeholder="Kategori" class="form-control" />

                          <span class="invalid-feedback" role="alert"  id="name_categoriError">

                            <strong></strong>

                        </span>

                        </div>

                        <div class="form-group mb-2">

                          <label class="form-label">Deskripsi<a class="text-danger">*</a></label>

                          <textarea type="text" id="deskripsi" name="deskripsi" class="form-control" placeholder="deskripsi" rows="3">{{ old('deskripsi') }}</textarea>

                        </div>

                    </div>

                  </div>

              </div>

            </div>

            <div class="d-grid mb-4">

                <button type="submit" id="add_categori_btn" class="btn btn-primary mb-2">

                    Buat Kategori

                </button>

                <a type="reset" id="btn-reset" class="btn btn-success">

                    Reset

                  </a>

            </div>

            </form>

            {{-- End Tambah Data --}}

            {{-- Form Update --}}

            <form action="" method="POST" style="display:none;" id="update_categori_form">

                @csrf

                <div class="card">

                  <div class="card-body">

                      <div class="row">

                        <div class="col-xl-12">

                            <div class="form-group mb-2">

                              <label class="form-label">Nama Kategori<a class="text-danger">*</a></label>

                              <input type="hidden" id="idIn" name="id">

                              <input type="text" id="name_categoriIn" name="name_categori" value="{{ old('name_categori') }}" placeholder="Kategori" class="form-control" />

                              <span class="invalid-feedback" role="alert"  id="name_categoriEr">

                                <strong></strong>

                            </span>

                            </div>

                            <div class="form-group mb-2">

                              <label class="form-label">Deskripsi<a class="text-danger">*</a></label>

                              <textarea type="text" id="deskripsiIn" name="deskripsi" class="form-control" placeholder="deskripsi" rows="3">{{ old('deskripsi') }}</textarea>

                            </div>

                        </div>

                      </div>

                  </div>

                </div>

                <div class="d-grid mb-4">

                    <button type="submit" id="update_categori_btn" class="btn btn-primary mb-2">

                       Update Kategori

                    </button>

                    <a href="{{ route('categori-produk') }}" id="btn-reset" class="btn btn-danger">

                        Cancel

                    </a>

                </div>

                </form>

                {{-- end Form Update --}}

          </div>

    </div>

    @section('script')

        <script>

        $(function(){

            // add categori request

            $('#add_categori_form').submit(function (e) {

                    e.preventDefault();

                    let formData = $(this).serializeArray();

                    $(".invalid-feedback").children("strong").text("");

                    $("#add_categori_form input").removeClass("is-invalid");



                    $.ajax({

                        method: "POST",

                        headers: {

                            Accept: "application/json"

                        },

                        url: "{{ route('categori-produk/save') }}",

                        data: formData,

                        success: function(response) {

                            let timerInterval;

                            Swal.fire({

                            title: response.title,

                            text: response.message,

                            icon: response.icon,

                            timer: 2500,

                            timerProgressBar: true,

                            showConfirmButton:false,

                            willClose: () => {

                            clearInterval(timerInterval);

                            }

                         }).then((result) => {

                            window.location.reload();

                            })

                            $("#add_categori_form")[0].reset();

                        },

                        error: (response) => {

                            if(response.status === 422) {

                                let errors = response.responseJSON.errors;



                                Object.keys(errors).forEach(function (key) {

                                    $("#" + key + "Input").addClass("is-invalid");

                                    $("#" + key + "Error").children("strong").text(errors[key][0]);

                                });

                            } else {

                                window.location.reload();

                            }



                        }

                    })

                });

                // edit categori request

                $(document).on('click', '.editIcon', function(e) {

                    e.preventDefault();

                    let id = $(this).attr('id');

                    $.ajax({

                    url: '{{ route('categori-produk/edit') }}',

                    method: 'get',

                    data: {

                        id: id,

                        _token: '{{ csrf_token() }}'

                    },

                    success: function(response) {

                        $("#name_categoriIn").val(response.name_categori);

                        $("#deskripsiIn").val(response.deskripsi);

                        $("#idIn").val(response.id);

                        $("#add_categori_form").hide();

                        $("#update_categori_form").show();

                    }

                    });

                });

                //edit categori action request

                $('#update_categori_form').submit(function (e) {

                    e.preventDefault();

                    let formData = $(this).serializeArray();

                    $(".invalid-feedback").children("strong").text("");

                    $("#update_categori_form input").removeClass("is-invalid");



                    $.ajax({

                        method: "POST",

                        headers: {

                            Accept: "application/json"

                        },

                        url: "{{ route('categori-produk/update') }}",

                        data: formData,

                        success: function(response) {

                            let timerInterval;

                            Swal.fire({

                            title: response.title,

                            text: response.message,

                            icon: response.icon,

                            timer: 2500,

                            timerProgressBar: true,

                            showConfirmButton:false,

                            willClose: () => {

                            clearInterval(timerInterval);

                            }

                         }).then((result) => {

                            window.location.reload();

                            })

                            $("#add_categori_form")[0].reset();

                        },

                        error: (response) => {

                            if(response.status === 422) {

                                let errors = response.responseJSON.errors;



                                Object.keys(errors).forEach(function (key) {

                                    $("#" + key + "In").addClass("is-invalid");

                                    $("#" + key + "Er").children("strong").text(errors[key][0]);

                                });

                            } else {

                                window.location.reload();

                            }



                        }

                    })

                });

            // delete categori request

            $(document).on('click', '.deleteIcon', function(e) {

                e.preventDefault();

                let id = $(this).attr('id');

                let name = $(this).attr('name');

                let csrf = '{{ csrf_token() }}';

                Swal.fire({

                title: 'Apakah anda yakin?',

                text: "Menghapus data user : "+name+" !!",

                icon: "warning",

                showCancelButton: true,

                confirmButtonColor: "#3085d6",

                cancelButtonColor: "#d33",

                confirmButtonText: "Yes, delete it!"

                }).then((result) => {

                    if (result.isConfirmed) {

                        $.ajax({

                        url: '{{ route('categori-produk/delete') }}',

                        method: 'delete',

                        data: {

                            id: id,

                            _token: csrf

                            },

                            success: function(response) {

                                console.log(response);

                                let timerInterval;

                                    Swal.fire({

                                        title: response.title,

                                        text: response.message,

                                        icon: response.icon,

                                    timer: 2500,

                                    timerProgressBar: true,

                                    showConfirmButton:false,

                                    willClose: () => {

                                        clearInterval(timerInterval);

                                    }

                                    }).then((result) => {

                                        window.location.reload();

                                    });

                            }

                        })

                    }

                });

            });



        });

        </script>

    @endsection

@endsection