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

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


<div class="page-header">
    <div>
        <h1>Sites <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>


<div class="content mt-3">

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

        <div class="card-header">
            <strong>All Sites List</strong>
        </div>

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


                <div class="table-responsive">
                    <table class="table table-bordered data-table" id="dataTable" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>Sr.</th>
                                <th>Account Name</th>
                                <th>Project Name</th>
                                <th>Site</th>
                                <th>Site Name</th>
                                <th>Current milestone</th>
                                <th>Metering</th>
                                <th>Last Updated At</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

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

@include('view-modals/site_metering_addedit')

@stop


@section('scripting')

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


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

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

            processing: true,
            serverSide: true,
            scrollX: true,
            // ajax: "{{ url('getleadsData') }}",
            ajax: {
                data: function(d) {
                    d.priority = $('#priority').val();
                    d.assigned_to = $('#assigned_to').val();
                    d._token = "{{ csrf_token() }}";
                },
                url: "{{ url('getAllSitesData') }}",
                type: "GET",
                dataType: 'json',
            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'business_name',
                    name: 'business_name'
                },
                {
                    data: 'project_name',
                    name: 'project_name'
                },
                {
                    data: 'title',
                    name: 'title'
                },
                {
                    data: 'site_name',
                    name: 'site_name'
                },
                {
                    data: 'current_milestone',
                    name: 'current_milestone'
                },
                {
                    data: 'metering_link',
                    name: 'metering_link'
                },
                {
                    data: 'updated_at',
                    name: 'updated_at',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                },
            ],

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

        });


        $('#meteringModal').on('show.bs.modal', function(event) {
            const button = $(event.relatedTarget);
            const leadId = button.data('id');
            const link = button.data('link');
            const description = button.data('description');

            $('#lead_id').val(leadId);
            $('#metering_link').val(link || '');
            $('#metering_description').val(description || '');
        });

        $('#meteringForm').on('submit', function(e) {
            e.preventDefault();

            const formData = $(this).serialize();

            $.ajax({
                url: '/site-metering/save', // Your route
                method: 'POST',
                data: formData,
                success: function(data) {
                    $('#dataForm').trigger("reset");
                    $('#meteringModal').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');
                }
            });
        });




    });


    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