@extends('layouts.member-app')

@section('page-title')
<div class="row bg-title">

    <!-- .page title -->
    <div class="col-lg-8 col-md-5 col-sm-6 col-xs-12">
        <h4 class="page-title"><i class="{{ $pageIcon }}"></i> {{ __($pageTitle) }}

        </h4>
    </div>
    <!-- /.page title -->
    <!-- .breadcrumb -->
    <div class="col-lg-4 col-sm-6 col-md-7 col-xs-12 text-right">
        <a href="#" class="btn btn-outline btn-success btn-sm" data-toggle="modal"
            data-target="#mdl_import_excel">Import Excell</a>
        @if ($user->cans('add_paket'))
        <a href="#" class="btn btn-outline btn-success btn-sm" data-toggle="modal" data-target="#mdl_add_paket">Add
            Paket <i class="fa fa-plus" aria-hidden="true"></i></a>
        @endif
        <ol class="breadcrumb">
            <li><a href="{{ route('member.dashboard') }}">@lang('app.menu.home')</a></li>
            <li class="active">{{ __($pageTitle) }}</li>
        </ol>
    </div>
    <!-- /.breadcrumb -->
</div>
@endsection

@push('head-script')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/custom-select/custom-select.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}">


@endpush

@section('filter-section')
<div class="row" id="ticket-filters">

    <form action="" id="filter-form">
        <div class="col-xs-12">
            <h5>@lang('app.selectDateRange')</h5>
            <div class="input-daterange input-group" id="date-range">
                <input type="text" class="form-control" autocomplete="off" id="start-date"
                    placeholder="@lang('app.startDate')" value="" />
                <span class="input-group-addon bg-info b-0 text-white">@lang('app.to')</span>
                <input type="text" class="form-control" id="end-date" autocomplete="off"
                    placeholder="@lang('app.endDate')" value="" />
            </div>
        </div>
        <input type="hidden" id="page_paket" name="page_paket" value="1">
        <div class="col-xs-12">
            <div class="form-group">
                <h5>Unit</h5>
                <input type="text" class="form-control" id="search">
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group p-t-10">
                <button type="button" id="apply-filters" class="btn btn-success col-md-6"><i class="fa fa-check"></i>
                    @lang('app.apply')</button>
                <button type="button" id="reset-filters" class="btn btn-inverse col-md-5 col-md-offset-1"><i
                        class="fa fa-refresh"></i> @lang('app.reset')</button>
            </div>
        </div>
    </form>
</div>
@endsection


@section('content')

<div class="row">

    <div class="col-xs-12">
        <div class="white-box">


            <div class="table-responsive" id="table_paket" style="overflow-y: hidden;">

            </div>
        </div>
    </div>
</div>
<!-- .row -->
<div class="modal fade" id="mdl_add_paket" tabindex="-1" role="dialog" aria-labelledby="mdl_add_bast"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Create Paket</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {!! Form::open(['id'=>'createPaket','class'=>'ajax-form','method'=>'POST','enctype'=>"multipart/form-data"])
            !!}
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="form-group">
                            <label>Unit</label>
                            <select class="form-control select2 clear_after_save" data-style="form-control"
                                name="unit_id" required>
                                <option value="">Pilih Unit</option>
                                                            </select>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="form-group">
                            <label class="required">Due Date</label>
                            <input type="text" class="form-control clear_after_save" name="due_date"
                                id="due_date_paket">
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="form-group">
                            <label>Description</label>
                            <textarea class="form-control summernote" name="description" rows="4"></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="mdl_edit_paket" tabindex="-1" role="dialog" aria-labelledby="mdl_edit_paket"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Edit Paket</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {!! Form::open(['id'=>'editPaket','class'=>'ajax-form','method'=>'POST','enctype'=>"multipart/form-data"])
            !!}
            <div class="modal-body">
                <div class="row">
                    <input type="hidden" name="id" id="id_paket_edit">
                    <div class="col-lg-12">
                        <div class="form-group">
                            <label>Unit</label>
                            <select class="form-control select2 clear_after_save" data-style="form-control"
                                id="unit_edit" name="unit_id" required>
                                <option value="">Pilih Unit</option>
                                                            </select>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="form-group">
                            <label class="required">Due Date</label>
                            <input type="text" class="form-control clear_after_save" name="due_date" id="due_date_edit"
                                autocomplete="off">
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="form-group">
                            <label>Description</label>
                            <textarea class="form-control summernote" id="description_edit" name="description"
                                rows="4"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Update</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>

@endsection

@push('footer-script')
<script src="{{ asset('plugins/bower_components/datatables/jquery.dataTables.min.js') }}"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
<script src="{{ asset('plugins/bower_components/custom-select/custom-select.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-select/bootstrap-select.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<script src="{{ asset('js/datatables/buttons.server-side.js') }}"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    var token = "{{ csrf_token() }}";
    function getTablePaket() {
    var page = $('#page_paket').val();
    var start_date = $('#start-date').val();
    var end_date = $('#end-date').val();
    var search = $('#search').val();
    $.get('/member/getTablePaket?page=' + page + '&start_date=' + start_date + '&end_date=' + end_date + '&search=' + search, function (res) {
    $('#table_paket').html(res)
    })
    }
    getTablePaket()
            $(".select2").select2({
    formatNoMatches: function () {
    return "{{ __('messages.noRecordFound') }}";
    }
    });
    jQuery('#date-range').datepicker({
    toggleActive: true,
            format: '{{ $global->date_picker_format }}',
            language: '{{ $global->locale }}',
            autoclose: true,
            weekStart:'{{ $global->week_start }}',
    });
    $('.toggle-filter').click(function () {
    $('#ticket-filters').toggle('slide');
    })

            $('#apply-filters').click(function () {
    getTablePaket()
    });
    $('#reset-filters').click(function () {
    $('#filter-form')[0].reset();
    $('.select2').val('all');
    $('#filter-form').find('select').select2();
    $.easyBlockUI('#buildings-table');
    window.LaravelDataTables["buildings-table"].draw();
    $.easyUnblockUI('#buildings-table');
    })
            $('body').on('click', '.page_paket', function() {
    var id = $(this).attr('id');
    var id_new = id.replace('page_paket_', '');
    $('#page_paket').val(id_new)
            getTablePaket()
    })

            $('#createPaket').on('submit', function (e) {
    $('#mdl_add_paket').modal('hide')
            e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
    type: 'POST',
            url: '{{route('member.units.store_paket')}}',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
            if (data.status == 'success') {
            $('.clear_after_save').val('')
                    $('.nol_after_save').val('0')
                    Swal.fire({
                    icon: 'success',
                            title: 'Success',
                            text: data.message,
                            allowOutsideClick: false
                    }).then((result) => {
            getTablePaket();
            })
            }
            },
            error: function (data) {

            }
    }, 'json');
    });
    $('#editPaket').on('submit', function (e) {
    $('#mdl_edit_paket').modal('hide')
            e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
    type: 'POST',
            url: '{{route('member.units.edit_paket')}}',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
            if (data.status == 'success') {
            $('.clear_after_save').val('')
                    $('.nol_after_save').val('0')
                    Swal.fire({
                    icon: 'success',
                            title: 'Success',
                            text: data.message,
                            allowOutsideClick: false
                    }).then((result) => {
            getTablePaket();
            })
            }
            },
            error: function (data) {

            }
    }, 'json');
    });
    jQuery('#due_date_edit').datepicker({
    autoclose: true,
            todayHighlight: true,
            weekStart:'1',
            minDate: new Date(),
            format: 'dd-mm-yyyy',
    });
    jQuery('#due_date_paket').datepicker({
    autoclose: true,
            todayHighlight: true,
            weekStart:'1',
            minDate: new Date(),
            format: 'dd-mm-yyyy',
    });
    $("#mdl_edit_paket").on('show.bs.modal', function(e) {
    var x = $(e.relatedTarget);
    $('#id_paket_edit').val(x.data('id'))
            $('#unit_edit').val(x.data('unit_id')).trigger('change')
            $('#due_date_edit').val(x.data('due_date'))
            $('#description_edit').val(x.data('description'))
    })
            function delete_data_paket(id){
            Swal.fire({
            title: 'Do you want to delete data?',
                    showDenyButton: false,
                    showCancelButton: true,
                    confirmButtonText: 'Delete',
            }).then((result) => {

            if (result.isConfirmed) {
            $.get('/member/delete_paket/' + id, function(res){
            if (res.status == 'success') {
            Swal.fire(res.message, '', 'success')
                    getTableBast();
            } else{
            Swal.fire(res.msg, '', 'error')
            }
            }, 'json')

            }
            })
            }
            function receive_paket(id){
                Swal.fire({
                    title: 'Keterangan Pengambilan',
                    input: 'textarea',
                    showCancelButton: true,
                    allowOutsideClick: false
                  }).then(function(result) {
                    if (result.value) {
                        var postForm = { //Fetch form data
                                'description'     : result.value,
                                '_token'          : token
                            };
                        $.post('/member/receive_paket/' + id, postForm, function(res){
                            if (res.status == 'success') {
                                Swal.fire(res.message, '', 'success')
                                getTablePaket();
                            } else{
                                Swal.fire(res.msg, '', 'error')
                            }
                        },'json')
                    }
                  })
                  
            }
</script>
@endpush