@extends('layouts.app')
@section('title', 'Customers')

@section('content')
<div class="content-wrapper">
    <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-2">
                        </div>
                        <div class="col-md-8 text-center mt-4">
                            <a href="{{ route('customers.create') }}" class="btn btn-outline-primary btn-sm mb-0"><i class="mdi mdi-plus"></i> Tambah Data</a>
                            <button class="btn btn-outline-success btn-sm mb-0" data-toggle="modal" data-target="#importModal"><i class="mdi mdi-cloud-upload"></i> Import Data</button>
                            <a href="{{ route('customers.export') }}" class="btn btn-outline-warning btn-sm mb-0" id="exportBtn" target="_blank"><i class="mdi mdi-cloud-download"></i> Export Data</a>
                        </div>
                        <div class="col-md-2">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="card-title">Data Customers</h4>
                        </div>
                    </div>

                  <div class="table-responsive">
                    <table class="table" id="data-table">
                      <thead>
                        <tr>
                          <th class="text-center">No</th>
                          <th class="text-center">Full Name</th>
                          <th class="text-center">Marking Code</th>
                          <th class="text-center">Phone Number | WA</th>
                          <th class="text-center">Company Name</th>
                          <th class="text-center">Email</th>
                          <th class="text-center">Bank Number</th>
                          <th class="text-center">Action</th>
                        </tr>
                      </thead>
                      <tbody>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
        </div>
    </div>
</div>

<div class="modal fade" id="importModal" tabindex="-1" role="dialog" aria-labelledby="importModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="importModalLabel">Impor Data Customers</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="file">Pilih File Excel</label>
          <input type="file" class="form-control-file" id="file" name="file">
        </div>
        <div class="form-group">
          <label for="format">Format Excel Import Customers</label>
          <br>
          <a href="{{ asset('storage/docs/Format Import Customers.xlsx') }}" class="form-control" download>Unduh Format Import Customers.xlsx</a>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
        <button type="button" class="btn btn-primary" id="importBtn">Impor</button>
      </div>
    </div>
  </div>
</div>

@stop

@section('footer')
<script type="text/javascript">
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });

    var dtTableOption = {
        "paging": true,
        "lengthChange": false,
        "searching": true,
        "ordering": true,
        "info": true,
        "autoWidth": true,
        "responsive": true,
        "stateSave": true
    };

    var Notif = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 2000,
            timerProgressBar: true,
        })

    $('#data-table').DataTable({
        processing: true,
        serverSide: false,
        ajax: '{{ route("customers.index") }}',
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', class: 'text-center' },
            { data: 'full_name', name: 'full_name', class: 'text-center' },
            { data: 'marking_code', name: 'marking_code', class: 'text-center' },
            {
                data: null,
                name: 'phone_number',
                render: function(data, type, row) {
                    return data.phone_number + ' | WA: ' + data.whatsapp;
                },
                class: 'text-center'
            },
            { data: 'company_name', name: 'company_name', class: 'text-center' },
            { data: 'email', name: 'email', class: 'text-center' },
            { data: 'bank_number', name: 'bank_number', class: 'text-center' },
            { data: 'action', name: 'action', orderable: false, searchable: false, class: 'text-center' }
        ],
        paging: true,
        searching: true,
        ordering: true,
        responsive: true,
        stateSave: true
    });

    function deleteData(id) {
        var urlRedirect = "{{ route('customers.index') }}"
        var _url = "{{ route('customers.destroy', ':id') }}"
        _url = _url.replace(':id', id),
        Swal.fire({
                title: "Apakah anda yakin hapus data ini?",
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "Ya, Hapus!",
                cancelButtonText: "Tidak",
            })
            .then((result) => {
                if (result.isConfirmed) {
                    var _token = $('meta[name="csrf-token"]').attr('content');

                    $.ajax({
                        url: _url,
                        type: 'DELETE',
                        data: {
                            _token: _token
                        },
                        success: function(res) {
                            if(res.code == 200){
                                Notif.fire({
                                    icon: 'success',
                                    title: res.message,
                                })
                                $('#data-table').DataTable().ajax.reload();
                            }else{
                                Notif.fire({
                                    icon: 'error',
                                    title: res.message,
                                })
                                $('#data-table').DataTable().ajax.reload();
                            }
                        },
                        error: function(err) {
                            console.log(err);
                        }
                    })
                }
            });
    }
</script>

<script type="text/javascript">
  $(document).ready(function(){
    $('#importBtn').click(function() {
        var fileInput = $('#file')[0].files[0];

        if (!fileInput) {
            Swal.fire(
                'Gagal!',
                'Pilih file Excel terlebih dahulu!',
                'error'
            );
            return;
        }

        var formData = new FormData();
        formData.append('file', fileInput);

        $.ajax({
            url: '{{ route("customers.import") }}',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if(response.code == 200){
                    Swal.fire(
                        'Berhasil!',
                        response.message,
                        'success'
                    );
                    $('#data-table').DataTable().ajax.reload();
                }else{
                    Swal.fire(
                        'Gagal!',
                        response.message,
                        'error'
                    );
                }
            },
            error: function(xhr, status, error) {
                Swal.fire(
                    'Gagal!',
                    'Terdapat Kesalahan Program!',
                    'error'
                );
                console.error(xhr.responseText);
            }
        });
    });

  })
</script>
@stop