@extends('layouts.app')

@section('title', 'Manage Outlet')
@section('breadcrumb', 'Manage Outlet')
@section('sub-breadcrumb')
    {{-- <span class="kt-subheader__breadcrumbs-separator"></span> --}}
    <a class="kt-subheader__breadcrumbs-link">
        List Outlet
    </a>
@endsection
@section('franchisee', 'kt-menu__item--open kt-menu__item--here')
@section('list-franchisee', 'kt-menu__item--active')
@section('content')
    <div class="kt-portlet">
        <div class="kt-portlet__head">
            <div class="kt-portlet__head-label">
                <h5 class="kt-portlet__head-title">
                </h5>
            </div>
            <div class="kt-portlet__head-toolbar">
                <button class="btn btn-success sync"><i class="flaticon-refresh"></i> Sync Outlet</button>
            </div>
        </div>
        <div class="kt-portlet__body">
            @include('layouts.notification')
           {{-- begin: datatable --}}
            <table id="datatable" class="table table-hover" style="width:100%">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Name</th>
                        <th>Admin Outlet</th>
                        <th style="width:15%">Mokapos Outlet</th>
                        <th style="width:15%">Accurate Customer</th>
                        <th style="width:15%">Outlet Status</th>
                        <th>Address</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            <div class="kt-separator kt-separator--dashed"></div>
           {{-- begin: datatable --}}

        </div>
    </div>
@endsection

@section('custom-script')
    <script>
        $.fn.dataTable.ext.errMode = 'none';
        $('#datatable').DataTable({
            responsive: true,
            processing: true,
            serverSide: true,
            stateSave: true,
            ajax: "{{ route('franchisee.index.table') }}",
            columns: [
                {data: 'DT_RowIndex', name: 'DT_RowIndex', searchable: false, orderable: false},
                {data: 'name', name: 'name'},
                {data: 'user_franchisee.name', name: 'user_franchisee.name'},
                {data: 'moka_status', name: 'moka_status'},
                {data: 'accurate_status', name: 'accurate_status'},
                {data: 'franchise_status', name: 'franchise_status'},
                {data: 'address', name: 'address'},
                {data: 'status', name: 'status'},
                {data: 'action', name: 'action', searchable: false, orderable: false}
            ],
            columnDefs: [ {
                targets: 6,
                render: function ( data, type, row ) {
                    return data.length > 50 ?
                        data.substr( 0, 50 ) +'…' :
                        data;
                }
            } ]
        }).on('processing.dt', function (e, settings, processing) {
                if (processing) {
                    $('#datatable').hide();
                    $('#loading').show();
                } else {
                    $('#datatable').show();
                    $('#loading').hide();
                }
        });

        $('body').on('click', '.btn-delete', function (event) {
            event.preventDefault();

            var me = $(this),
                url = me.attr('href'),
                title = me.attr('title'),
                csrf_token = $('meta[name="csrf-token"]').attr('content');

            swal.fire({
                title: 'Are you sure want to delete ' + title + ' ?',
                text: 'You won\'t be able to revert this!',
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.value) {
                    $('#loading').show();
                    $.ajax({
                        url: url,
                        type: "POST",
                        data: {
                            '_method': 'DELETE',
                            '_token': csrf_token
                        },
                        success: function (response) {
                            $('#loading').hide();
                            // console.log(response)
                            if (response.status == "fail") {
                                swal.fire({
                                    type: 'error',
                                    title: 'Oops...',
                                    text: 'Something went wrong!'
                                });
                            }
                            if (response.status == "success") {
                                $('#datatable').DataTable().ajax.reload();
                                swal.fire({
                                    type: 'success',
                                    title: 'Success!',
                                    text: 'Data has been deleted!'
                                });
                            }
                        },
                        error: function (xhr) {
                            $('#loading').hide();
                            swal.fire({
                                type: 'error',
                                title: 'Oops...',
                                text: 'Something went wrong!'
                            });
                        }
                    });
                }
            });
        });
    </script>
    <script>
        $('body').on('click', '.sync', function (event) {
            event.preventDefault();

            var csrf_token = $('meta[name="csrf-token"]').attr('content');

            swal.fire({
                title: 'Apa kamu yakin in melakukan sinkronisasi Accurate dan Moka Outlet?',
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                cancelButtonText: 'Tidak',
                confirmButtonText: 'Ya, sinkronkan!'
            }).then((result) => {
                if (result.value) {
                    $('#loading').show();
                    $.ajax({
                        url: "{{route('franchisee.fetch.outlet')}}",
                        type: "POST",
                        data: {
                            '_method': 'POST',
                            '_token': csrf_token
                        },
                        success: function (response) {
                            $('#loading').hide();
                            console.log(response)
                            if (response.status == "fail") {
                                swal.fire({
                                    type: 'error',
                                    title: 'Oops...',
                                    text: response.messages
                                });
                            }
                            if (response.status == "success") {
                                $('#datatable').DataTable().ajax.reload();
                                swal.fire({
                                    type: 'success',
                                    title: 'Sukses',
                                    text: 'Accurate & Moka berhasil di Sinkron Ulang'
                                });
                            }
                        },
                        error: function (xhr) {
                            $('#loading').hide();
                            swal.fire({
                                type: 'error',
                                title: 'Oops...',
                                text: 'Something went wrong!'
                            });
                        }
                    });
                }
            });
        });
    </script>
@endsection