@extends('layouts.app')
@section('content')

@php $priorities = ['P0'=>'P0', 'P1'=>'P1', 'P2'=>'P2','P3'=>'P3', 'P4'=>'P4']; @endphp


<div class="page-header">
    <div>
        <h1>Metering Documents <small>List & Management</small></h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
        </ol>
    </div>

    <div class="float-end">

    </div>
</div>


<div class="content mt-3">

    <div class="card shadow mb-4">

        <div class="card-header">
            <strong>Site Metering Documents List</strong>
        </div>

        <div class="card-body">
            <div class="">

                <div class="row mb-3">

                    <div class="col-md-4 mb-3 form-group">
                        {{ Form::select('stage', [''=>'Select Stage']+$types, '', ['class'=>'standardSelect form-control', 'title'=>'Select Type', 'data-live-search'=>'true', 'id'=>'stage' , 'data-dropup-auto'=>'false', 'data-size'=>'5']) }}
                    </div>
                </div>

                <div class="table-responsive">
                    <table class="table table-bordered data-table" id="dataTable" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>Sr.</th>
                                <th>Stage</th>
                                <th>Title</th>
                                <th>Status</th>
                                <th>Last Updated At</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>
</div>


@include('view-modals/add_metering_document')

@stop


@section('scripting')

<script type="text/javascript">
    $(document).ready(function() {

        $(".standardSelect").selectpicker();

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });


        $('#stage').change(function() {
            $(".data-table").DataTable().ajax.reload();
        })



        var table = $('.data-table').DataTable({

            processing: true,
            serverSide: true,
            ajax: {
                data: function(d) {
                    d.stage = $('#stage').val();
                    d._token = "{{ csrf_token() }}";
                },
                url: "{{ url('get_metering_documents_data') }}/{{ $site->id }}",
                type: "POST",
                dataType: 'json',
            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'stage',
                    name: 'stage'
                },
                {
                    data: 'title',
                    name: 'title'
                },
                {
                    data: 'status_label',
                    name: 'status_label'
                },
                {
                    data: 'updated_at',
                    name: 'updated_at',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                },
            ],

            language: {
                search: "_INPUT_",
                searchPlaceholder: "Search records",
            },

        });

        table.on('draw', function() {
            $('[data-toggle="tooltip"]').tooltip({
                placement: 'top',
            });
        });


        $(document).on('click', '.upload-doc', function() {
            $('#saveBtn').val("Create");
            $('#status').val('').trigger("chosen:updated");
            $('#dataForm').trigger("reset");

            let document_type_id = $(this).data('type');

            $('#document_type_id').val(document_type_id);
            $('#modelHeading').html("Upload Metering Document");
            $('#ajaxModel').modal('show');
        });


        $('#saveBtn').click(function(e) {
            e.preventDefault();
            $(this).html('Sending..');

            const formData = new FormData(document.getElementById('dataForm'));

            $.ajax({
                data: formData,
                url: "{{ url('metering/document/store') }}",
                type: "POST",
                dataType: 'json',
                processData: false,
                contentType: false,

                success: function(data) {
                    $('#dataForm').trigger("reset");
                    $('#ajaxModel').modal('hide');
                    table.draw();
                    swal({
                        title: "Good job!",
                        text: data.msg,
                        icon: "success",
                    });
                },
                error: function(data) {
                    if (data.status == 422) {
                        var x = data.responseJSON;
                        $.each(x.errors, function(index, value) {
                            $("#" + index).addClass("is-invalid");
                            $("#" + index + "-error").html(value[0]);
                        });
                    }
                    $('#saveBtn').html('Save Changes');
                }
            });
        });


        $('body').on('click', '.deleteProduct', function(e) {
            var product_id = $(this).data("id");

            swal({
                    title: "Are you sure?",
                    text: "Once deleted, you will not be able to recover this imaginary file!",
                    icon: "warning",
                    buttons: true,
                    dangerMode: true,
                })
                .then((willDelete) => {
                    if (willDelete) {

                        $.ajax({
                            type: "GET",
                            url: "{{ url('design/delete') }}" + '/' + product_id,
                            success: function(data) {
                                table.draw();
                                swal("Great! Category has been deleted!", {
                                    icon: "success",
                                });
                            },
                            error: function(data) {
                                console.log('Error:', data);
                            }
                        });
                    } else {
                        swal("Your Lead delete request Cancelled!")
                    }

                });

        });


    });


    function reset_modal() {
        $("#cat_id").val("");
        $("name").val("");
        //$('#status').val("").trigger("chosen:updated");
        $('#status').val("");
        $('.standardSelect').selectpicker('refresh');

        $("#name").removeClass("is-invalid");
        $("#country_id_fk").removeClass("is-invalid");
        $("#status").removeClass("is-invalid");

        $("#name-error").html("");
        $("#country_id_fk-error").html("");
        $("#status-error").html("");

        $('#saveBtn').html('Save Changes');
    }

    function reset_modal_comment() {
        $("#cat_id").val("");
        $("name").val("");
        //$('#status').val("").trigger("chosen:updated");
        $('#status').val("");
        $('.standardSelect').selectpicker('refresh');

        $("#name").removeClass("is-invalid");
        $("#country_id_fk").removeClass("is-invalid");
        $("#status").removeClass("is-invalid");

        $("#name-error").html("");
        $("#country_id_fk-error").html("");
        $("#status-error").html("");

        $('#saveBtn').html('Save Changes');
    }
</script>


@endsection