@extends('layouts.app')

@section('content')
<div class="page-header">
    <div>
        <h1>Customer Requests <small>List & Management</small></h1>
    </div>
</div>

<div class="content mt-3">
    <div class="card shadow mb-4">
        <div class="card-header">
            Customer Request List
        </div>
        <div class="card-body">
            <table class="table table-bordered data-table" id="dataTable">
                <thead>
                    <tr>
                        <th>S.No.</th>
                        <th>Full Name</th>
                        <th>Phone</th>
                        <th>Type</th>
                        <th>kWh</th>
                        <th>Address</th>
                        <th>City</th>
                        <th>State</th>
                        <th>Pincode</th>
                        <th>Google Location</th>
                        <th>Survey Date</th>
                        <th>Survey Time</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

@include('pages.setup.kwh_requirement')
@include('pages.setup.survey')
@stop

@section('scripting')
<script type="text/javascript">
    $(function() {
        let table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            scrollX: true,
            ajax: "{{ url('get_customer_request') }}",
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'full_name',
                    name: 'full_name'
                },
                {
                    data: 'phone',
                    name: 'phone'
                },
                {
                    data: 'type',
                    name: 'type'
                },
                {
                    data: 'kwh_amount',
                    name: 'kwh_amount'
                },
                {
                    data: 'address',
                    name: 'address'
                },
                {
                    data: 'city',
                    name: 'city'
                },
                {
                    data: 'state',
                    name: 'state'
                }, // optional: make sure it's sent as state name
                {
                    data: 'pincode',
                    name: 'pincode'
                },
                {
                    data: 'google_location',
                    name: 'google_location'
                },
                {
                    data: 'survey_date',
                    name: 'survey_date'
                },
                {
                    data: 'survey_time',
                    name: 'survey_time'
                },
                {
                    data: 'status',
                    name: 'status'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                }
            ],
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Search records",
            }

        });

        $('body').on('click', '.editProduct', function() {
            var product_id = $(this).data('id');
            var type = $(this).data('type');

            reset_modal();

            // Determine endpoint and modal by type
            let url = '';
            let modalId = '';
            let modalTitle = '';

            if (type === 'exact_requirement') {
                url = "{{ url('exact_requirement/edit') }}/" + product_id;
                modalId = '#kwhModal';
                modalTitle = 'Edit Exact Requirement';
            } else if (type === 'site_survey') {
                url = "{{ url('site_survey/edit') }}/" + product_id;
                modalId = '#siteSurveyModal';
                modalTitle = 'Edit Site Survey';
            } else {
                alert('Unsupported type: ' + type);
                return;
            }

            $.get(url, function(data) {
                $(modalId + ' #modelHeading').html(modalTitle);
                $(modalId + ' #saveBtn').val("Save Changes");
                $(modalId).modal('show');

                // Populate all fields used in the modal
                $(modalId + ' #id').val(data.id);
                $(modalId + ' #customer_id').val(data.customer_id);
                $(modalId + ' #full_name').val(data.full_name);
                $(modalId + ' #phone').val(data.phone);
                $(modalId + ' #type').val(data.type);
                $(modalId + ' #kwh_amount').val(data.kwh_amount);
                $(modalId + ' #address').val(data.address);
                $(modalId + ' #city').val(data.city);
                $(modalId + ' #state_id').val(data.state_id);
                $(modalId + ' #pincode').val(data.pincode);
                $(modalId + ' #google_location').val(data.google_location);

                // Fix date format for survey_date and survey_time
                if (data.survey_date) {
                    const date = new Date(data.survey_date);
                    const formattedDate = date.toISOString().split('T')[0];
                    $(modalId + ' #survey_date').val(formattedDate);
                } else {
                    $(modalId + ' #survey_date').val('');
                }

                if (data.survey_time) {
                    const time = new Date('1970-01-01T' + data.survey_time + 'Z'); // parse as time only
                    const formattedTime = time.toTimeString().split(':').slice(0, 2).join(':');
                    $(modalId + ' #survey_time').val(formattedTime);
                } else {
                    $(modalId + ' #survey_time').val('');
                }

                $(modalId + ' #description').val(data.description);
                $(modalId + ' #status').val(data.status);

                // Refresh select picker for dropdowns
                $(modalId + ' .standardSelect').selectpicker('refresh');
            });
        });


        $('body').on('click', '#saveBtn', function(e) {
            e.preventDefault();
            var form = $(this).closest('.modal').find('form'); // grabs form inside modal
            var modal = $(this).closest('.modal');

            // Override URL to fixed endpoint
            var url = '/customer-request/store';

            $(this).html('Sending..');

            $.ajax({
                data: form.serialize(),
                url: url,
                type: "POST",
                dataType: 'json',
                success: function(data) {
                    form.trigger("reset");
                    modal.modal('hide');
                    table.draw();
                    swal({
                        title: "Good job!",
                        text: data.msg,
                        icon: "success",
                    });
                },
                error: function(data) {
                    if (data.status === 422) {
                        let errors = data.responseJSON.errors;
                        $.each(errors, function(key, value) {
                            form.find("#" + key).addClass("is-invalid");
                            form.find("#" + key + "-error").html(value[0]);
                        });
                    }
                    $('#saveBtn').html('Save Changes');
                }
            });
        });


        $('body').on('click', '.deleteProduct', function() {

            var customer_id = $(this).data("id");

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

                        $.ajax({
                            type: "GET",
                            url: "{{ url('customer-request/delete') }}" + '/' + customer_id,
                            success: function(data) {
                                table.draw();
                                swal("Great! Request has been deleted!", {
                                    icon: "success",
                                });
                            },
                            error: function(data) {
                                console.log('Error:', data);
                            }
                        });
                    } else {
                        swal("Your can not delete this request!")
                    }

                })


        });
    });

    function reset_modal() {
        // Reset field values
        $("#id").val("");
        $("#type").val("");
        $("#kwh_amount").val("");
        $("#address").val("");
        $("#survey_date").val("");
        $("#survey_time").val("");
        $("#description").val("");
        $("#status").val("");
        $("#full_name").val("");
        $("#phone").val("");
        $("#city").val("");
        $("#state_id").val("");
        $("#pincode").val("");
        $("#google_location").val("");

        // Refresh select pickers
        $('.standardSelect').selectpicker('refresh');

        // Remove validation error classes
        let fields = [
            "type", "kwh_amount", "address", "survey_date", "survey_time",
            "description", "status", "full_name", "phone", "city",
            "state_id", "pincode", "google_location"
        ];

        fields.forEach(function(field) {
            $("#" + field).removeClass("is-invalid");
            $("#" + field + "-error").html("");
        });

        // Reset save button label
        $('#saveBtn').html('Save Changes');
    }
</script>
@stop