@php $showSidebar = true; @endphp


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

<style>
    .card-hover {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        position: relative;
    }

    .card-hover:hover {
        transform: translateY(-5px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }

    .select-kwh-btn {
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    .card-hover:hover .select-kwh-btn {
        opacity: 1;
    }

    .enter-load-link {
        text-decoration: none !important;
    }
</style>

<div class="page-header">
    <div>
        <h1>Customer Onboarding <small>Manage Requirements</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">
        <a class="btn btn-primary float-right" href="{{ url('requirements/details/'.$current_project->id) }}"> <i class="fa fa-arrow-right"></i> Project Details</a>
    </div>

</div>



<div class="content mt-3">


    @if (session('success'))
    <div class="alert alert-success  alert-dismissible fade show">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @php $msg = session('success'); @endphp
    @endif


    @if($is_customer)
    <div class="card shadow mb-4">
        <div class="card-header">
            Please Select
        </div>

        <div class="card-body">

            <div class="row">
                <div class="col-md-3 col-sm-6 col-12 mb-4">
                    <a href="{{ url('projects') }}">
                        <div class="card h-100 shadow-sm card-hover position-relative group">
                            <div class="card-body text-center">
                                <div class="mb-3">
                                    <i class="bi bi-lightbulb-fill text-primary" style="font-size: 2rem;"></i>
                                </div>
                                <h5 class="card-title">My Projects</h5>
                            </div>
                        </div>
                    </a>
                </div>


                <div class="col-md-3 col-sm-6 col-12 mb-4">
                    <a href="{{ url('srequests') }}">
                        <div class="card h-100 shadow-sm card-hover position-relative group">
                            <div class="card-body text-center">
                                <div class="mb-3">
                                    <i class="bi bi-speedometer2 text-success" style="font-size: 2rem;"></i>
                                </div>
                                <h5 class="card-title">Service Requests</h5>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-md-3 col-sm-6 col-12 mb-4">
                    <a href="{{ url('products') }}">
                        <div class="card h-100 shadow-sm card-hover position-relative group load-card">
                            <div class="card-body text-center">
                                <div class="mb-3">
                                    <i class="bi bi-cart text-warning" style="font-size: 2rem;"></i>
                                </div>
                                <h5 class="card-title">Shop Now</h5>
                            </div>
                        </div>
                    </a>
                </div>


                <div class="col-md-3 col-sm-6 col-12 mb-4">
                    <a href="{{ url('project_templates') }}">
                        <div class="card h-100 shadow-sm card-hover position-relative group site-survey-card">
                            <div class="card-body text-center">
                                <div class="mb-3">
                                    <i class="bi bi-cup text-danger" style="font-size: 2rem;"></i>
                                </div>
                                <h5 class="card-title">Fixed Cost Projects</h5>

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

            </div>

        </div>
    </div>
    @endif




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




        <div class="card-body">


            <div class="row">
                <div class="col-md-12 my-2">
                    <div class="float-start">
                        <h5 class="">
                            Start Your New Enquiry
                        </h5>
                    </div>

                </div>
                <hr>
            </div>


            <div class="row">
                <div class="col-md-3 col-sm-6 col-12 mb-4">
                    <div class="card h-100 shadow-sm card-hover position-relative group">
                        <div class="card-body text-center">
                            <div class="mb-3">
                                <i class="bi bi-lightbulb-fill text-primary" style="font-size: 2rem;"></i>
                            </div>
                            <h5 class="card-title">I Know What I Want</h5>
                            <p class="card-text">Choose your desired energy usage (in kWh):</p>

                            <button class="btn btn-primary mt-2 select-kwh-btn"
                                data-bs-toggle="modal" data-bs-target="#kwhModal">
                                Select kWh
                            </button>
                        </div>
                    </div>
                </div>


                <div class="col-md-3 col-sm-6 col-12 mb-4">
                    <div class="card h-100 shadow-sm card-hover position-relative group">
                        <div class="card-body text-center">
                            <div class="mb-3">
                                <i class="bi bi-speedometer2 text-success" style="font-size: 2rem;"></i>
                            </div>
                            <h5 class="card-title">Meter Units</h5>
                            <p class="card-text">Enter your previous 12 months’ metering data.</p>

                            <button class="btn btn-success mt-2 select-kwh-btn"
                                data-bs-toggle="modal" data-bs-target="#meterUnitsModal">
                                Enter Units
                            </button>
                        </div>
                    </div>
                </div>

                <div class="col-md-3 col-sm-6 col-12 mb-4">
                    <div class="card h-100 shadow-sm card-hover position-relative group load-card">
                        <div class="card-body text-center">
                            <div class="mb-3">
                                <i class="bi bi-lightning-charge-fill text-warning" style="font-size: 2rem;"></i>
                            </div>
                            <h5 class="card-title">Load</h5>
                            <p class="card-text">Specify the power load you expect to use.</p>

                            <a href="{{ url('load_using/'.$current_project->id) }}" class="btn btn-warning mt-2 enter-load-link select-kwh-btn">
                                Enter Load
                            </a>
                        </div>
                    </div>
                </div>


                <div class="col-md-3 col-sm-6 col-12 mb-4">
                    <div class="card h-100 shadow-sm card-hover position-relative group site-survey-card">
                        <div class="card-body text-center">
                            <div class="mb-3">
                                <i class="bi bi-map-fill text-danger" style="font-size: 2rem;"></i>
                            </div>
                            <h5 class="card-title">Site Survey</h5>
                            <p class="card-text">Request a site survey with our team.</p>

                            <button type="button" class="btn btn-danger mt-2 site-survey-btn select-kwh-btn"
                                data-bs-toggle="modal" data-bs-target="#siteSurveyModal">
                                Request Survey
                            </button>
                        </div>
                    </div>
                </div>

            </div>


            @if($current_project)


            <div class="row">

                <div class="col-md-12">
                    <h5 class="">
                        Project Details:
                    </h5>
                    <div class="table-responsivehh">
                        <table class="table dt-responsive table-bordered" style="width: 100%;">
                            <thead>
                                <th>Title</th>
                                <th>BU</th>
                                <th>Capacity (KWH)</th>
                                <th>Created At</th>
                                <th>View Request</th>
                            </thead>

                            <tbody>
                                <tr>
                                    <td>{{ $current_project->title }}</td>
                                    <td>{{ $current_project->business_unit ? $current_project->business_unit->title : 'NA' }}</td>
                                    <td>{{ $current_project->capacity }}</td>
                                    <td>{{ date('d M, Y', strtotime($current_project->created_at)) }}</td>
                                    <td>
                                        <a href="{{ url('requirements/details/'.$current_project->id) }}" class="btn btn-sm btn-primary"><i class="fa fa-eye"></i> View Details</a>

                                        @if($current_project->project_template_id)
                                        <a href="{{ url('requirements/proposal/'.$current_project->id) }}" class="btn btn-sm btn-success"> <i class="fa fa-file-signature"></i> View Quote</a>
                                        @endif

                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>


            {{-- @if(empty($current_project->capacity)) --}}
            <div class="row mt-3">
                <div class="col-md-12">
                    <h5>Based on your data, please select any of the below:</h5>
                    <div class="table-responsivehh">
                        <table class="table dt-responsive table-bordered" style="width: 100%;">
                            <thead>
                                <th>Title</th>
                                <th>Capacity (KWH)</th>
                                <th>Action</th>
                            </thead>

                            <tbody>
                                @foreach($templates as $key => $template)
                                <tr>
                                    <td>{{ $template->title }}</td>
                                    <td>{{ $template->capacity }} KWH</td>
                                    <td>
                                        <a href="{{ url('requirements/select_template/'.$current_project->id.'/'.$template->id) }}" class="btn btn-sm btn-primary"> <i class="fa fa-check"></i> Select </a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            {{-- @endif --}}



            @else

            <div class="row">
                <div class="col-md-12" style="text-align: center">
                    <p class="lead"><em>You do not have raise any project request.</em></p>

                    <a href="javascript:void(0)" class="btn btn-primary" id="createProject">Create New Project Request</a>

                </div>
            </div>

            @endif


        </div>
    </div>


</div>



@include('pages/setup/kwh_requirement')
@include('pages/setup/monthly_units')
@include('pages/setup/survey')

@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')
            }
        });


        $('#createProject').on('click', function(e) {
            e.preventDefault();



            $.ajax({
                url: "{{ route('customerRequest.create_new_request') }}",
                method: "POST",
                data: {
                    'bu_id': 1
                },

                success: function(response) {

                    // Success message
                    swal({
                        title: "Success!",
                        text: response.msg,
                        icon: "success"
                    }).then(() => {
                        window.location.href = "{{ url('/onboarding') }}";
                    });
                },

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

                    if (xhr.status === 422) {
                        const errors = xhr.responseJSON.errors;
                        $('.text-danger').html(''); // Clear previous errors
                        $.each(errors, function(key, value) {
                            $('#' + key + '-error').text(value[0]);
                            $('#' + key).addClass('is-invalid');
                        });
                    } else {
                        alert('An unexpected error occurred.');
                    }
                }
            });
        });


        // Submit form using AJAX
        $('#kwhForm').on('submit', function(e) {
            e.preventDefault();

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

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

            $.ajax({
                url: "{{ route('customerRequest.store') }}",
                method: "POST",
                data: formData,
                contentType: false,
                processData: false,

                success: function(response) {
                    // Reset form and close modal
                    $(form).trigger("reset");
                    $('#kwhModal').modal('hide');
                    $('#saveBtn').prop('disabled', false).text('Submit');

                    // Success message
                    swal({
                        title: "Success!",
                        text: response.msg,
                        icon: "success"
                    }).then(() => {
                        window.location.href = "{{ url('/onboarding') }}";
                    });
                },

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

                    if (xhr.status === 422) {
                        const errors = xhr.responseJSON.errors;
                        $('.text-danger').html(''); // Clear previous errors
                        $.each(errors, function(key, value) {
                            $('#' + key + '-error').text(value[0]);
                            $('#' + key).addClass('is-invalid');
                        });
                    } else {
                        alert('An unexpected error occurred.');
                    }
                }
            });
        });


        // Submit form using AJAX
        $('#surveyForm').on('submit', function(e) {
            e.preventDefault();

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

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

            $.ajax({
                url: "{{ route('customerRequest.store') }}",
                method: "POST",
                data: formData,
                contentType: false,
                processData: false,

                success: function(response) {
                    // Reset form and close modal
                    $(form).trigger("reset");
                    $('#siteSurveyModal').modal('hide');

                    $('#saveBtn').prop('disabled', false).text('Submit');

                    // Success message
                    swal({
                        title: "Success!",
                        text: response.msg,
                        icon: "success"
                    }).then(() => {
                        window.location.href = "{{ url('/onboarding') }}";
                    });
                },

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

                    if (xhr.status === 422) {
                        const errors = xhr.responseJSON.errors;
                        $('.text-danger').html(''); // Clear previous errors
                        $.each(errors, function(key, value) {
                            $('#' + key + '-error').text(value[0]);
                            $('#' + key).addClass('is-invalid');
                        });
                    } else {
                        alert('An unexpected error occurred.');
                    }
                }
            });
        });



        $('#meterForm').submit(function(e) {
            e.preventDefault();

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

            // Optional: disable submit button to prevent multiple submits
            $('#saveBtn').prop('disabled', true).html('Submitting...');

            $.ajax({
                url: "{{ url('meter-unit/store') }}",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,

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

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

                error: function(xhr) {
                    if (xhr.status === 422) {
                        var errors = xhr.responseJSON.errors;
                        $('.form-control').removeClass('is-invalid');
                        $('.text-danger').html('');

                        $.each(errors, function(field, messages) {
                            var id = field.replace(/\./g, '_');
                            $('#' + id).addClass('is-invalid');
                            $('#' + id + '-error').html(messages[0]);
                        });
                    } else {
                        swal("Error!", "Something went wrong. Please try again.", "error");
                    }
                    $('#saveBtn').prop('disabled', false).html('Submit');
                }
            });
        });



        $('#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') }}";
                    });

                    $('#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