@php $showSidebar = true; @endphp

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



<div class="page-header">
    <div>
        <h1>Appliances Load <small>List</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">
            Enter Appliance Load Details
        </div>

        <div class="card-body">

            <div class="row">
                <div class="col-md-12">

                    <form action="{{ route('loadEntry.store') }}" method="POST" id="load_used">

                        @csrf
                        {!! Form::hidden('project_id', $project_id) !!}

                        <div class="table-responsive">
                            <table class="table table-bordered align-middle text-center">
                                <thead class="table-light">
                                    <tr>
                                        <th>Appliance</th>
                                        <th>Fixed Load (W)</th>
                                        <th>Quantity</th>
                                        <th>Day Hours</th>
                                        <th>Night Hours</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($appliances as $index => $appliance)

                                    @php

                                    if(array_key_exists($appliance->id, $loads)) {
                                    $load = $loads[$appliance->id];
                                    }
                                    else {
                                    $load = null;
                                    }
                                    @endphp
                                    <tr>
                                        <td>
                                            <input type="hidden" name="appliances[{{ $index }}][id]" value="{{ $appliance->id }}">
                                            {{ $appliance->name }}
                                        </td>
                                        <td>
                                            <input type="number" class="form-control text-center" value="{{ $appliance->fix_load }}" readonly>
                                        </td>
                                        <td>
                                            <input type="number" name="appliances[{{ $index }}][quantity]" class="form-control" min="0" placeholder="0" value="{{ $load ? $load['quantity'] : '' }}">
                                        </td>
                                        <td>
                                            <input type="number" name="appliances[{{ $index }}][day_hours]" class="form-control" min="0" placeholder="0" value="{{ $load ? (int)$load['day_running_hours'] : '' }}">
                                        </td>
                                        <td>
                                            <input type="number" name="appliances[{{ $index }}][night_hours]" class="form-control" min="0" placeholder="0" value="{{ $load ? (int)$load['night_running_hours'] : '' }}">
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div class="mt-3 text-end">
                            <button type="submit" class="btn btn-primary" id="saveBtn">Submit Load</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@stop

@section('scripting')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        console.log("Kwh working ");
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

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

            let form = this;
            let formData = new FormData(form);

            $('#saveBtn').prop('disabled', true).html('Submitting...');

            $.ajax({
                url: $(form).attr('action'),
                method: 'POST',
                data: formData,
                contentType: false,
                processData: false,

                success: function(response) {
                    $(form).trigger('reset');
                    swal({
                        title: "Success!",
                        text: response.msg || "Load Entry submitted successfully.",
                        icon: "success",
                    }).then(() => {
                        window.location.href = "{{ url('/onboarding/'.$project_id) }}";
                    });

                    $('#saveBtn').prop('disabled', false).html('Submit Load');
                },

                error: function(xhr) {
                    $('#saveBtn').prop('disabled', false).html('Submit Load');

                    if (xhr.status === 422) {
                        swal("Validation Error", "Please check your inputs.", "error");
                    } else {
                        swal("Error", "An unexpected error occurred.", "error");
                    }
                }
            });
        });
    });
</script>
@endsection