@extends('layouts.base')

@section('content-header')
    <div class="col-12">
        <div class="container" style="display: contents">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h3 class="m-0"> Master Data</h3>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item"><a href="#">Admin</a></li>
                        <li class="breadcrumb-item active">Distributor</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div class="col-lg-12 col-md-12 col-sm-12 mt-2">
        <div class="container" style="display: contents">
            <div class="card">
                <div class="card bg-warning" style="min-height:5px; border-radius:1px;"></div>
                <div class="card-header mt-0 pt-0">
                    <div class="d-flex">
                        <h4>Daftar Distributor</h4>
                        <!-- Button trigger modal -->
                        <div class="ml-auto">
                            <button type="button" class="btn btn-primary" data-toggle="modal"
                                data-target="#modal-default-add-distributor">
                                Tambah Distributor
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    {{-- <h5 class="card-title">Form List Data</h5> --}}
                    <div class="table-responsive mt-3">
                        <table id="tabeldistributor" class="table table-hover display" style="width: 100%">
                            <thead>
                                <tr>
                                    <th class="text-center">No</th>
                                    <th>Nama Distributor</th>
                                    <th>Alamat</th>
                                    <th>Telepon</th>
                                    <th class="text-center"><i class="fas fa-cog"></i></th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Tambah Menu -->
    <div class="modal fade" id="modal-default-add-distributor">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Tambah Distributor</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="form-tambah-distributor" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group row">
                            <div class="col-md-6">
                                <label for="nama-distributor" class="col-form-label">Nama Distributor:</label>
                                <input type="text" class="form-control" id="nama-distributor" name="nama_distributor"
                                    required>
                            </div>
                            <div class="col-md-6">
                                <label for="telepon" class="col-form-label">Telepon:</label>
                                <input type="text" class="form-control" id="telepon" name="telepon" required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12">
                                <label for="alamat" class="col-form-label">Alamat:</label>
                                <input type="text" class="form-control" id="alamat" name="alamat" required>
                            </div>
                        </div>
                        <div class="modal-footer justify-content-between">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
                            <button type="submit" class="btn btn-primary" id="simpan-form-tambah">Simpan</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-default-edit-distributor">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Edit Distributor</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="form-edit-distributor" method="put" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group row">
                            <input type="hidden" id="id-edit" name="id_edit">
                            <div class="col-md-6">
                                <label for="nama-distributor-edit" class="col-form-label">Nama
                                    Distributor:</label>
                                <input type="text" class="form-control" id="nama-distributor-edit"
                                    name="nama_distributor_edit" required>
                            </div>
                            <div class="col-md-6">
                                <label for="telepon-edit" class="col-form-label">Telepon:</label>
                                <input type="text" class="form-control" id="telepon-edit" name="telepon_edit"
                                    required>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12">
                                <label for="alamat-edit" class="col-form-label">Alamat:</label>
                                <input type="text" class="form-control" id="alamat-edit" name="alamat_edit" required>
                            </div>
                        </div>
                        <div class="modal-footer justify-content-between">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
                            <button type="submit" class="btn btn-primary" id="simpan-form-edit">Simpan</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-default-hapus-distributor">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Hapus Distributor</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="title-terhapus-distributor">&hellip;</p>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-danger button-hapus-distributor">Hapus</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <!-- Toastr -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/toastr/toastr.min.css') }}">

    <link rel="stylesheet" href="{{ asset('assets/datatables/datatables.min.css') }}">

    <!-- Select2 -->
    <link rel="stylesheet" href="{{ asset('assets/plugins/select2/css/select2.min.css') }}">

    <style>
        input.switch {
            -moz-appearance: none;
            -webkit-appearance: none;
            -o-appearance: none;
            appearance: none;
            height: 1em;
            width: 2em;
            border-radius: 1em;
            box-shadow: inset -1em 0px 0px 0px rgba(192, 192, 192, 1);
            background-color: white;
            border: 1px solid rgba(192, 192, 192, 1);
            outline: none;
            -webkit-transition: 0.2s;
            transition: 0.2s;
        }

        input.switch:checked {
            box-shadow: inset 1em 0px 0px 0px rgba(33, 150, 243, 0.5);
            border: 1px solid rgba(33, 150, 243, 1);
        }
    </style>
@endpush

@push('scripts')
    <!-- Toastr -->
    <script src="{{ asset('assets/plugins/toastr/toastr.min.js') }}"></script>
    <!-- Select2 -->
    <script src="{{ asset('assets/plugins/select2/js/select2.full.min.js') }}"></script>

    <script src="{{ asset('assets/datatables/datatables.min.js') }}"></script>

    <!-- Bootstrap Switch -->
    <script src="{{ asset('assets/plugins/bootstrap-switch/js/bootstrap-switch.min.js') }}"></script>

    <script type="text/javascript">
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        });

        //Initialize Select2 Elements
        $('.select2').select2({
            dropdownParent: $("#modal-default-add-distributor")
        })
        $('.edit_select2').select2({
            dropdownParent: $("#modal-default-edit-distributor")
        })

        $(document).ready(function() {
            $('#tabeldistributor').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('mdistributor.getDataMDistributor') }}",
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        className: 'text-center'
                    },
                    {
                        data: 'nama_distributor',
                        name: 'nama_distributor'
                    },
                    {
                        data: 'alamat',
                        name: 'alamat'
                    },
                    {
                        data: 'telepon',
                        name: 'telepon'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        className: 'text-center'
                    },
                ]
            })
        })

        $(document).ready(function() {
            // ajax tambah distributor
            $('#form-tambah-distributor').on('submit', function(e) {
                e.preventDefault();
                $.ajax({
                    url: "{{ route('mdistributor.store') }}",
                    type: "POST",
                    dataType: "json",
                    data: $(this).serialize(),
                    cache: false,
                    async: false,
                    success: function(response) {
                        toastr.success(response.meta.message)
                        $('#modal-default-add-distributor').modal('hide')
                        $('#form-tambah-distributor')[0].reset()
                        $('#tabeldistributor').DataTable().ajax.reload()
                        // location.reload()
                    },
                    error: function(response) {
                        toastr.error(response.responseJSON.meta.message)
                    }
                })
            })

            // ajax edit distributor
            $(document).on('click', '.btn-edit-distributor', function() {
                idEdit = $(this).attr('data-idDistributor')
                $.ajax({
                    url: "{{ url('distributor') }}" + '/' + idEdit + '/edit',
                    type: "GET",
                    success: function(response) {
                        data = response.data.distributor
                        $('#id-edit').val(data.id)
                        $('#nama-distributor-edit').val(data.nama_distributor)
                        $('#alamat-edit').val(data.alamat)
                        $('#telepon-edit').val(data.telepon)
                        $('#modal-default-edit-distributor').modal('show')
                    },
                    error: function(response) {
                        toastr.error(response.responseJSON.meta.message)
                    }
                })
            })

            $('#form-edit-distributor').on('submit', function(e) {
                // id edit
                var idEdit = $('#id-edit').val()
                e.preventDefault();
                $.ajax({
                    url: "{{ url('distributor/update') }}" + '/' + idEdit,
                    type: "PUT",
                    dataType: "json",
                    data: $(this).serialize(),
                    success: function(response) {
                        toastr.success(response.meta.message)
                        $('#modal-default-edit-distributor').modal('hide')
                        $('#form-edit-distributor')[0].reset()
                        idEdit = null
                        $('#tabeldistributor').DataTable().ajax.reload()
                    },
                    error: function(response) {
                        // enable button submit on interval 1 detik
                        setTimeout(function() {
                            $('#simpan-form-edit').attr('disabled', false)
                        }, 500);
                        idEdit = null
                        toastr.error(response.responseJSON.meta.message)
                    }
                })
            })

            // ajax hapus distributor
            $(document).on('click', '.btn-hapus-distributor', function() {
                idEdit = $(this).attr('data-idDistributor')
                $.ajax({
                    url: "{{ url('distributor') }}" + '/' + idEdit + '/edit',
                    type: "GET",
                    success: function(response) {
                        data = response.data.distributor
                        var dataAppend =
                            '<p>Apakah anda yakin ingin menghapus distributor <b>' + data
                            .nama_distributor +
                            ' alamat: ' + data.alamat + '</b> ?</p>';
                        $('#title-terhapus-distributor').html(dataAppend);
                        $('.button-hapus-distributor').attr('data-id', data.id);
                        $('#modal-default-hapus-distributor').modal('show');
                    },
                    error: function(response) {
                        toastr.error(response.responseJSON.meta.message)
                    }
                })
            })

            $(document).on('click', '.button-hapus-distributor', function() {
                var id = $(this).attr('data-id');
                $.ajax({
                    url: "{{ url('distributor/delete') }}" + '/' + id,
                    type: "DELETE",
                    dataType: "json",
                    cache: false,
                    async: false,
                    success: function(response) {
                        toastr.success(response.meta.message)
                        $('#modal-default-hapus-distributor').modal('hide')
                        $('#tabeldistributor').DataTable().ajax.reload()
                    },
                    error: function(response) {
                        toastr.error(response.responseJSON.meta.message)
                    }
                })
            })
        })
    </script>
@endpush