@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">
        @if ($user->cans('add_bast'))
        <a href="#" class="btn btn-outline btn-success btn-sm" data-toggle="modal" data-target="#mdl_add_bast">Add Bast
            <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_bast" name="page_bast" value="1">
        <div class="col-xs-12">
            <div class="form-group">
                <h5>Search Owner / 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_bast" style="overflow-y: hidden;">

            </div>
        </div>
    </div>
</div>
<!-- .row -->
<div class="modal fade" id="mdl_add_bast" 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 Bast</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {!! Form::open(['id'=>'createBast','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" id="search_unit"
                                data-style="form-control" name="unit_id" required>

                            </select>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label class="required">Owner</label>
                            <select class="form-control select2 clear_after_save" data-style="form-control" required
                                name="owner_id">
                                <option value="">--Pilih Owner--</option>
                                @forelse($owners as $owner)
                                <option value="{{$owner->id}}">{{ $owner->name }}</option>
                                @empty
                                @endforelse
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label class="required">BAST Date</label>
                            <input type="text" class="form-control clear_after_save" name="date_bast" id="date_bast"
                                value="02-07-2025">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Type</label>
                            <select class="form-control select2 clear_after_save" name="type_id" id="type_id"
                                required="">
                                <option value="">-- Select Type --</option>
                                                            </select>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Width</label>
                            <input type="text" class="form-control clear_after_save" readonly="" id="type_width">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Electric (KVA)</label>
                            <input type="number" class="form-control clear_after_save" readonly="" id="type_electric">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label>Condition</label>
                            <input type="text" name="condition" required="" class="form-control clear_after_save">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label>Description</label>
                            <input type="text" name="description" required="" class="form-control clear_after_save">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>PLN Early</label>
                            <input type="number" name="pln_early" required="" id="pln_early"
                                class="form-control nol_after_save" value="0">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>PLN End</label>
                            <input type="number" name="pln_end" required="" id="pln_end"
                                class="form-control nol_after_save" value="0">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Usage</label>
                            <input type="text" name="usage" required="" id="usage" class="form-control clear_after_save"
                                readonly="">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Currency (Rupiah)</label>
                            <input type="number" name="currency" required="" id="currency"
                                class="form-control nol_after_save" value="0" readonly="">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>PJU (0.08)</label>
                            <input type="number" name="pju" required="" id="pju" class="form-control nol_after_save"
                                value="0" readonly>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Total PLN</label>
                            <input type="number" name="total_pln" required="" id="total_pln"
                                class="form-control nol_after_save" value="0" readonly>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>PDAM Early</label>
                            <input type="number" name="pdam_early" required="" id="pdam_early"
                                class="form-control nol_after_save" value="0">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>PDAM End</label>
                            <input type="number" name="pdam_end" required="" id="pdam_end"
                                class="form-control nol_after_save" value="0">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Usage PDAM</label>
                            <input type="number" name="usage_pdam" required="" id="usage_pdam"
                                class="form-control nol_after_save" value="0" readonly>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Currency/M3</label>
                            <input type="number" name="currency_pdam" required="" id="currency_pdam"
                                class="form-control nol_after_save" value="0" readonly>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Fixed Load</label>
                            <input type="number" name="fixed_load_pdam" required="" id="fixed_load_pdam"
                                class="form-control nol_after_save" value="{{$global->fixed_load_pdam}}" readonly>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Admin Fee</label>
                            <input type="number" name="admin_fee" required="" id="admin_fee"
                                class="form-control nol_after_save" value="{{$global->admin_fee_pdam}}" readonly>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label>Total PLN + PDAM</label>
                            <input type="number" name="total_pln_pdam" required="" id="total_pln_pdam"
                                class="form-control nol_after_save" value="0" readonly>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label>Rounding</label>
                            <input type="number" name="rounding" required="" id="rounding"
                                class="form-control nol_after_save" value="0">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Service Charge</label>
                            <input type="number" name="ipl_sc" required="" id="ipl_sc"
                                class="form-control nol_after_save" value="0">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Singking Fund</label>
                            <input type="number" name="ipl_sf" required="" id="ipl_sf"
                                class="form-control nol_after_save" value="0">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Total IPL</label>
                            <input type="number" name="total_ipl" required="" id="total_ipl"
                                class="form-control nol_after_save" value="0" readonly>
                        </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">Save</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>

<div class="modal fade" id="mdl_edit_bast" tabindex="-1" role="dialog" aria-labelledby="mdl_edit_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 Bast</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {!! Form::open(['id'=>'editBast','class'=>'ajax-form','method'=>'POST','enctype'=>"multipart/form-data"])
            !!}
            <div class="modal-body">
                <div class="row">
                    <input type="hidden" name="id" id="edit_id">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label>Type</label>
                            <input type="text" name="type" required="" class="form-control clear_after_save"
                                id="edit_type">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label>PDAM Early</label>
                            <input type="number" name="pdam_early" required="" id="edit_pdam_early"
                                class="form-control nol_after_save" value="0">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label>Condition</label>
                            <input type="text" name="condition" required="" class="form-control clear_after_save"
                                id="edit_condition">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label>Description</label>
                            <input type="text" name="description" required="" class="form-control clear_after_save"
                                id="edit_description">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>PLN Early</label>
                            <input type="number" name="pln_early" required="" id="edit_pln_early"
                                class="form-control nol_after_save" value="0">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>PLN End</label>
                            <input type="number" name="pln_end" required="" id="edit_pln_end"
                                class="form-control nol_after_save" value="0">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Usage</label>
                            <input type="text" name="usage" required="" id="edit_usage"
                                class="form-control clear_after_save" readonly>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Currency (Rupiah)</label>
                            <input type="number" name="currency" required="" id="edit_currency"
                                class="form-control nol_after_save" value="0">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>PJU (0.08)</label>
                            <input type="number" name="pju" required="" id="edit_pju"
                                class="form-control nol_after_save" value="0" readonly>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Total PLN</label>
                            <input type="number" name="total_pln" required="" id="edit_total_pln"
                                class="form-control nol_after_save" value="0" readonly>
                        </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">Save</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 pln_kwh = '{{$global->pln_kwh}}';
    var admin_fee_pln = '{{$global->admin_fee_pln}}';
    var pdam_meter = '{{$global->pdam_meter}}';
    var fixed_load_pdam = '{{$global->fixed_load_pdam}}';
    var admin_fee_pdam = '{{$global->admin_fee_pdam}}';
    var total_pln = 0;
    $('#search_owner').on('change', function(){
        var id = $(this).val()
        $('#input_owner').val(id)
    })
    function getTableBast() {
    var page = $('#page_bast').val();
    var start_date = $('#start-date').val();
    var end_date = $('#end-date').val();
    var search = $('#search').val();
    $.get('/member/getTableBast?page=' + page + '&start_date=' + start_date + '&end_date=' + end_date + '&search=' + search, function (res) {
    $('#table_bast').html(res)
    })
    }
    getTableBast()
            $(".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 () {
    getTableBast()
    });
    $('#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_bast', function() {
    var id = $(this).attr('id');
    var id_new = id.replace('page_bast_', '');
    $('#page_bast').val(id_new)
            getTableBast()
    })
    function getUnits(){
        $.get('/member/getUnits', function(res){
            $('#search_unit').html(res)
        })
    }
    getUnits();
    $('#pln_early').on('blur', function(){
        var start = $(this).val();
        var end = $('#pln_end').val();
        var usage = parseFloat(end) - parseFloat(start);
        var currency = (parseFloat(usage) * parseFloat(pln_kwh)) + parseFloat(admin_fee_pln);
        var pju = parseFloat(currency) * (8 / 100);
        var rounding_pju = pju.toFixed(2);
        var total_pln = parseFloat(currency) + parseFloat(rounding_pju);
        $('#usage').val(usage)
        $('#currency').val(currency)
        $('#pju').val(rounding_pju);
        $('#total_pln').val(total_pln)
        $('#total_pln_pdam').val(total_pln)
    })
    $('#pln_end').on('blur', function(){
        var end = $(this).val();
        console.log(end)
        var start = $('#pln_early').val();
        var usage = parseFloat(end) - parseFloat(start);
        var currency = (parseFloat(usage) * parseFloat(pln_kwh)) + parseFloat(admin_fee_pln);
        var pju = parseFloat(currency) * (8 / 100);
        var rounding_pju = pju.toFixed(2);
        total_pln = parseFloat(currency) + parseFloat(rounding_pju);
        $('#usage').val(usage)
        $('#currency').val(currency)
        $('#pju').val(rounding_pju);
        $('#total_pln').val(total_pln)
        $('#total_pln_pdam').val(total_pln)
    })
    
    $('#pdam_early').on('blur', function(){
        var start = $(this).val();
        var end = $('#pdam_end').val();
        var usage = parseFloat(end) - parseFloat(start);
        var currency = parseFloat(usage) * parseFloat(pdam_meter);
        var total_currency = (parseFloat(usage) * parseFloat(pdam_meter)) + parseFloat(fixed_load_pdam) + parseFloat(admin_fee_pdam);
        var total_pln_pdam = parseFloat(total_currency) + parseFloat(total_pln);
        $('#currency_pdam').val(currency)
        $('#total_pln_pdam').val(total_pln_pdam)
        $('#usage_pdam').val(usage)
    })
    $('#pdam_end').on('blur', function(){
        var end = $(this).val();
        var start = $('#pdam_early').val();
        var usage = parseFloat(end) - parseFloat(start);
        var currency = parseFloat(usage) * parseFloat(pdam_meter);
        var total_currency = (parseFloat(usage) * parseFloat(pdam_meter)) + parseFloat(fixed_load_pdam) + parseFloat(admin_fee_pdam);
        var total_pln_pdam = parseFloat(total_currency) + parseFloat(total_pln);
        $('#currency_pdam').val(currency)
        $('#total_pln_pdam').val(total_pln_pdam)
        $('#usage_pdam').val(usage)
    })
    
    $('#ipl_sc').on('keyup', function(){
        var ipl_sc = $(this).val();
        var ipl_sf = $('#ipl_sf').val();
        var total_ipl = parseFloat(ipl_sc) + parseFloat(ipl_sf);
        $('#total_ipl').val(total_ipl);
    })
    
    $('#ipl_sf').on('keyup', function(){
        var ipl_sf = $(this).val();
        var ipl_sc = $('#ipl_sc').val();
        var total_ipl = parseFloat(ipl_sc) + parseFloat(ipl_sf);
        $('#total_ipl').val(total_ipl);
    })
    
    $('#edit_pln_early').on('blur', function(){
        var start = $(this).val();
        var end = $('#edit_pln_end').val();
        var usage = parseFloat(end) - parseFloat(start);
        $('#edit_usage').val(usage)
    })
    $('#edit_pln_end').on('blur', function(){
        var end = $(this).val();
        console.log(end)
        var start = $('#edit_pln_early').val();
        var usage = parseFloat(end) - parseFloat(start);
        $('#edit_usage').val(usage)
    })
    $('#edit_currency').on('keyup', function(){
        var x = $(this).val();
        var pju = parseFloat(x) * (8/100);
        var total_pln = parseFloat(x) + parseFloat(pju);
        $('#edit_pju').val(pju);
        $('#edit_total_pln').val(total_pln)
    })
    
    $('#createBast').on('submit', function (e) {
        $('#mdl_add_bast').modal('hide')
        e.preventDefault();
        var formData = new FormData(this);
        $.ajax({
            type: 'POST',
            url: '{{route('member.buildings.store_bast')}}',
            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) => {
                        getTableBast();
                        getUnits();
                    })
                }
            },
            error: function (data) {

            }
        }, 'json');
    });
    
    $('#editBast').on('submit', function (e) {
        $('#mdl_edit_bast').modal('hide')
        e.preventDefault();
        var formData = new FormData(this);
        $.ajax({
            type: 'POST',
            url: '{{route('member.buildings.edit_bast')}}',
            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) => {
                        getTableBast();
                        getUnits();
                    })
                }
            },
            error: function (data) {

            }
        }, 'json');
    });
    jQuery('#date_bast').datepicker({
        autoclose: true,
        todayHighlight: true,
        weekStart:'1',
        format: 'dd-mm-yyyy',
    });
    $("#mdl_edit_bast").on('show.bs.modal', function(e) {
        var x = $(e.relatedTarget);
        $('#edit_id').val(x.data('id'))
        $('#edit_type').val(x.data('type'))
        $('#edit_condition').val(x.data('condition'))
        $('#edit_description').val(x.data('description'))
        $('#edit_pln_early').val(x.data('pln_early'))
        $('#edit_pln_end').val(x.data('pln_end'))
        $('#edit_usage').val(x.data('usage'))
        $('#edit_currency').val(x.data('currency'))
        $('#edit_pju').val(x.data('pju'))
        $('#edit_total_pln').val(x.data('total_pln'))
        $('#edit_pdam_early').val(x.data('pdam_early'))
    })
    function delete_data_bast(id){
        Swal.fire({
          title: 'Do you want to delete data?',
          showDenyButton: false,
          showCancelButton: true,
          confirmButtonText: 'Delete',
      }).then((result) => {

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

            }
        })
    }
    
    $('#type_id').on('change', function () {
    var x = $(this).val();
    console.log(x)
            if (x != '') {
    $.get('/member/detail_type/' + x, function (res) {
    $('#type_width').val(res.width)
            $('#type_electric').val(res.kva_electric)
    }, 'json')
    } else {
    $('#type_width').val('')
            $('#type_electric').val('')
    }
    })
</script>
@endpush