@extends('layouts.app')
@section('title', __('lang_v1.imei_statuses'))

@section('content')
<section class="content-header">
    <h1>@lang('lang_v1.imei_statuses')
        <small>@lang('lang_v1.manage_your_imei_statuses')</small>
    </h1>
</section>

<section class="content">
    @component('components.widget', ['class' => 'box-primary', 'title' => __('lang_v1.all_imei_statuses')])
        @can('brand.create')
            @slot('tool')
                <div class="box-tools">
                    <button type="button" class="btn btn-block btn-primary btn-modal"
                        data-href="{{ action('ImeiStatusController@create') }}"
                        data-container=".imei_status_modal">
                        <i class="fa fa-plus"></i> @lang('messages.add')
                    </button>
                </div>
            @endslot
        @endcan

        @can('brand.view')
            <div class="table-responsive">
                <table class="table table-bordered table-striped" id="imei_statuses_table">
                    <thead>
                        <tr>
                            <th>@lang('lang_v1.name')</th>
                            <th>@lang('lang_v1.sort_order')</th>
                            <th>@lang('lang_v1.status_type')</th>
                            <th>@lang('messages.action')</th>
                        </tr>
                    </thead>
                </table>
            </div>
        @endcan
    @endcomponent

    <div class="modal fade imei_status_modal" tabindex="-1" role="dialog" aria-labelledby="imeiStatusModalLabel"></div>
</section>
@endsection

@section('javascript')
<script>
window.LANG = {
    confirm_delete_imei_status: @json(__('lang_v1.confirm_delete_imei_status')),
    sure: @json(__('messages.sure')),
};
</script>

<script>
var imei_statuses_table = $('#imei_statuses_table').DataTable({
    processing: true,
    serverSide: true,
    ajax: '/imei-statuses',
    columns: [
        { data: 'name', name: 'name' },
        { data: 'sort_order', name: 'sort_order' },
        { data: 'status_type', name: 'status_type' },
        { data: 'action', name: 'action', orderable: false, searchable: false }
    ],
});

$(document).on('submit', 'form#imei_status_add_form', function(e) {
    e.preventDefault();
    var form = $(this);
    var data = form.serialize();

    $.ajax({
        method: 'POST',
        url: form.attr('action'),
        dataType: 'json',
        data: data,
        beforeSend: function(xhr) {
            __disable_submit_button(form.find('button[type="submit"]'));
        },
        success: function(result) {
            if (result.success == true) {
                $('div.imei_status_modal').modal('hide');
                toastr.success(result.msg);
                imei_statuses_table.ajax.reload();

                var evt = new CustomEvent("imeiStatusAdded", { detail: result.data });
                window.dispatchEvent(evt);
            } else {
                toastr.error(result.msg);
            }
        },
    });
});

$(document).on('click', 'button.edit_imei_status_button', function() {
    $('div.imei_status_modal').load($(this).data('href'), function() {
        $(this).modal('show');

        $('form#imei_status_edit_form').submit(function(e) {
            e.preventDefault();
            var form = $(this);
            var data = form.serialize();

            $.ajax({
                method: 'POST',
                url: form.attr('action'),
                dataType: 'json',
                data: data,
                beforeSend: function(xhr) {
                    __disable_submit_button(form.find('button[type="submit"]'));
                },
                success: function(result) {
                    if (result.success == true) {
                        $('div.imei_status_modal').modal('hide');
                        toastr.success(result.msg);
                        imei_statuses_table.ajax.reload();
                    } else {
                        toastr.error(result.msg);
                    }
                },
            });
        });
    });
});

$(document).on('click', 'button.delete_imei_status_button', function() {
    swal({
        title: LANG.sure,
        text: LANG.confirm_delete_imei_status,
        icon: 'warning',
        buttons: true,
        dangerMode: true,
    }).then(willDelete => {
        if (willDelete) {
            var href = $(this).data('href');
            $.ajax({
                method: 'DELETE',
                url: href,
                dataType: 'json',
                success: function(result) {
                    if (result.success == true) {
                        toastr.success(result.msg);
                        imei_statuses_table.ajax.reload();
                    } else {
                        toastr.error(result.msg);
                    }
                },
            });
        }
    });
});
</script>


@endsection