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


<div class="page-header">
    <div>
        <h1>Project <small>Details & 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">

        <a class="btn btn-primary" href="javascript:void(0)" id="changeStatus">
            <i class="fa fa-sync-alt"></i> Change Status
        </a>

        <a class="btn btn-primary float-right" href="{{url('onboarding/'.$project->id)}}"> <i class="fa fa-arrow-left"></i> Onboarding</a>

        <a class="btn btn-primary float-right" href="{{url('projects/'.$details->id)}}"> <i class="fa fa-bars"></i> Projects List</a>
    </div>

</div>



<div class="content mt-3">

    <div class="card shadow mb-4">
        <div class="card-header">
            Lead Request Details
        </div>

        <div class="card-body">


            <div class="row">
                <div class="col-sm-4">
                    <div class="card mt-3">
                        <div class="card-header">Lead Details: </div>
                        <div class="card-body">
                            <table class="table table-hover" width="100%">
                                <tbody>
                                    <tr>
                                        <td>Name</td>
                                        <td class="float-end">{{ $details->name }}</td>
                                    </tr>
                                    <tr>
                                        <td>Email</td>
                                        <td class="float-end">{{ $details->primary_email }}</td>
                                    </tr>
                                    <tr>
                                        <td>Phone</td>
                                        <td class="float-end">{{ $details->primary_phone }}</td>
                                    </tr>
                                    <tr>
                                        <td>Created Date</td>
                                        <td class="float-end">{{ date('d M, Y', strtotime($details->created_at)) }}</td>
                                    </tr>

                                    <tr>
                                        <td>Current Status</td>
                                        <td class="float-end"><span class="badge bg-primary">{{ $statuses['options'][$project->status] ?? 'NA' }} </span></td>
                                    </tr>
                                </tbody>
                            </table>

                        </div>
                    </div>

                    <div class="card mt-3">
                        <div class="card-header">Prospect Details: </div>
                        <div class="card-body">
                            <table class="table table-hover" width="100%">
                                <tbody>
                                    <tr>
                                        <td>Project Type</td>
                                        <td class="float-end">{{ $project->project_type ? $project->project_type->title : 'NA' }}</td>
                                    </tr>
                                    <tr>
                                        <td>Plant Type</td>
                                        <td class="float-end">{{ ucwords(str_replace('_', ' ', $project->plant_type)); }}</td>
                                    </tr>
                                    <tr>
                                        <td>Entity Type</td>
                                        <td class="float-end">{{ ucwords($details->type) }}</td>
                                    </tr>
                                    <tr>
                                        <td>Project Template</td>
                                        <td class="float-end">{{ $project->project_template ? $project->project_template->title : "NA" }}</td>
                                    </tr>

                                    <tr>
                                        <td>Capacity</td>
                                        <td class="float-end">{{ $project->capacity ? $project->capacity : "NA" }}</td>
                                    </tr>

                                    <tr>
                                        <td colspan=2>
                                            Remarks: {{ $project->remarks }}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

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

                <div class="col-sm-8 side-content">

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

                            <div class="d-flex">
                                <div class="flex-grow-1">
                                    <h4 class="card-title">Exact Requirement: </h4>
                                </div>
                                <div class="ml-auto p-2">
                                    @if($exact_requirement)
                                    <span class="badge bg-primary text-end">{{ $exact_requirement->template ? $exact_requirement->template->title : '' }} </span>
                                    <br>
                                    Description: {{$exact_requirement->description}}

                                    @else
                                    <span class="badge bg-danger text-end">NA</span>
                                    @endif
                                </div>
                            </div>

                            <hr>

                            <!-- <h6 class="card-subtitle mb-3 text-muted" id="property">Site Survey Request</h6> -->


                            <div class="d-flex">
                                <div class="flex-grow-1">
                                    <h4 class="card-title">Site Survey Request: </h4>
                                </div>
                                <div class="ml-auto p-2">
                                    @if($survey_details)


                                    Address: {{$survey_details->address}}, {{$survey_details->city}}<br>
                                    Date: {{ date('d M, Y', strtotime($survey_details->survey_date)) }} {{ date('h:i A', strtotime($survey_details->survey_time)) }}<br>

                                    Description: {{$survey_details->description}}

                                    @else
                                    <span class="badge bg-danger text-end">NA</span>
                                    @endif
                                </div>
                            </div>


                            <hr>


                            <div class="d-flex">
                                <div class="flex-grow-1">
                                    <h4 class="card-title">Appliances Load Details: </h4>
                                </div>
                                <div class="ml-auto">
                                    <!-- <span class="badge bg-primary text-end">{{ $project->day_load_based_capacity }} KWH</span> -->


                                    <a class="btn btn-primary float-right" href="{{url('hybrid_calculator/'.$project->id)}}"> <i class="fa fa-arrow-left"></i> Calculations</a>

                                </div>
                            </div>

                            <table class="table table-design table-bordered text-nowrap border-bottom dt-responsive no-footer mt-3" cellspacing="0" width="100%" width="100%" cellspacing="0">
                                <thead>
                                    <tr>
                                        <th>Sr.</th>
                                        <th>Appliance</th>
                                        <th>Fixed Load</th>
                                        <th>Quantity</th>
                                        <th>Day Running Hrs</th>
                                        <th>Night Running Hrs</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    @foreach($loads as $key => $row)
                                    <tr>
                                        <td>{{ $key+1 }}</td>
                                        <td>{{ $row->appliance ? $row->appliance->name : '' }}</td>
                                        <td>{{ $row->appliance ? $row->appliance->fix_load : '' }} KWH</td>
                                        <td>{{ $row->quantity }}</td>
                                        <td>{{ $row->day_running_hours }}</td>
                                        <td>{{ $row->night_running_hours }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>

                            </table>

                            <hr>


                            <div class="d-flex">
                                <div class="flex-grow-1">
                                    <h4 class="card-title">Meter Reading Details: </h4>
                                </div>
                                <div class="ml-auto">
                                    <span class="badge bg-primary text-end">{{ $project->units_based_capacity }} KWH</span>
                                </div>
                            </div>

                            <table class="table table-design table-bordered text-nowrap border-bottom dt-responsive no-footer mt-3" cellspacing="0" width="100%" width="100%" cellspacing="0">
                                <thead>
                                    <tr>
                                        <th>Sr.</th>
                                        <th>Month</th>
                                        <th>Billed Units</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    @foreach($months as $key => $row)
                                    <tr>
                                        <td>{{ $key+1 }}</td>
                                        <td>{{ $row->month }}</td>
                                        <td>{{ $row->billed_unit }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>

                            </table>



                        </div>
                    </div>





                </div>
            </div>


        </div>
    </div>


    @if(!$is_customer)
    <div class="card shadow mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <span>Communication History</span>

            <a class="btn btn-primary btn-sm" href="javascript:void(0)" id="createNewProduct">
                Create Comment
            </a>
        </div>

        <div class="card-body">
            <div class="row">
                <div class="col-sm-12">
                    <table class="table table-bordered table-hover data-table" width="100%">
                        <thead>
                            <tr>
                                <th>Sr.</th>
                                <th>Date</th>
                                <th>Comment</th>
                                <th>Priority</th>
                                <th>User</th>
                                <th width="180px">Comment Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($comments as $key => $obj)
                            <tr>
                                <td>{{ $key+1 }}</td>
                                <td>{{ $obj->act_time ? date('d M, Y, h:i A', strtotime($obj->act_time)) : '-' }}</td>
                                <td>{{ $obj->comment }}</td>
                                <td><span class="badge bg-info">{{ $obj->priority }}</span></td>
                                <td>{{ $obj->user->name }}</td>
                                <td>{{ date('d M, Y, h:i A', strtotime($obj->created_at)) }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>


        </div>
    </div>
    @endif



</div>

@include('view-modals/enquiry_comment_add')
@include('view-modals/enquiry_change_status')

@stop



@section('scripting')

<script>
    $(document).ready(function() {

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

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

        // 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('/home') }}";
                    });
                },

                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('/home') }}";
                    });
                },

                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('/home') }}";
                    });

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

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


        $('#createNewProduct').click(function() {
            $('#saveCommentBtn').val("Create Comment");
            $('#commentForm').trigger("reset");
            $('#modelHeading').html("Create New Comment");
            $('#commentModel').modal('show');
        });

        $('#changeStatus').click(function() {
            $('#saveCommentBtn').val("Save Changes!");
            $('#statusForm').trigger("reset");
            $('#statusModelHeading').html("Change Enquiry Status");
            $('#statusModel').modal('show');
        });


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

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

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

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

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

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

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

                error: function(xhr) {
                    $('#saveCommentBtn').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.');
                    }
                }
            });
        });


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

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

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

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

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

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

                    // Success message

                    swal({
                        // If success is true, title is "Success!", otherwise "Error!"
                        title: response.success ? "Success!" : "Error!",
                        text: response.msg,
                        // If success is true, icon is "success", otherwise "error"
                        icon: response.success ? "success" : "error"
                    }).then(() => {
                        // Optional: Only reload if the operation was actually successful
                        if (response.success) {
                            location.reload();
                        }
                    });
                },

                error: function(xhr) {
                    $('#saveStatusBtn').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.');
                    }
                }
            });
        });


    });
</script>
@endsection