@extends("website.service-providers.layouts.layout")
@section('title', "Services")
@section("body")
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="{{ asset('css/sp.css') }}">
<!-- banner background image starts -->
<section class="banner-services">
    <img class="banner-background-ellipse" src="./assets/images/banner-bg-img.png" alt="">
</section>

<!--- services section -->
<section class="services-breadcrumb-section dashboard-breadcrumb">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Create Invoice</li>
            </ol>
        </nav>

    </div>
</section>
<style>
    /* General form padding */
.invoice-form {
    padding: 20px; /* Adjust padding as needed */
}

/* Padding for project-block-item */
.form-padding {
    padding: 20px; /* Adjust padding as needed */
}

/* Padding for project-header-items */
.form-header-padding {
    padding-bottom: 10px; /* Adjust padding as needed */
}

/* Padding for project-price-details */
.form-price-padding {
    padding: 10px 0; /* Adjust top and bottom padding */
}

/* Padding for select elements */
.time-select {
    padding: 5px; /* Adjust padding inside select elements */
    margin: 0 5px; /* Add margin between select elements */
}

/* Padding for project-action-btns */
.form-action-padding {
    padding-top: 20px; /* Adjust padding-top for spacing */
}

/* Padding for buttons */
.btn {
    padding: 10px 20px; /* Adjust padding inside the button */
}
.text-link {
    color: #007bff;
    text-decoration: none;
    cursor: pointer;
}

.text-link:hover {
    text-decoration: underline;
}

#expenseForm {
    margin-top: 10px;
}

</style>
<section class="dashboard-main">
    <div class="container">
        <div class="row">
            @include("website.service-providers.includes.sidebar")
            @include("website.layouts.modal")
            <div class="main-content client">
                <div class="main-content-wrapper scheduled-project">
                    <div class="project-block provider-current">
                        <div class="project-block-item form-padding">
                            <div class="project-linking">
                                <h3 class="font-size-24 text-center mb-4">Create Invoice</h3>
                                <form class="invoice-form" id="invoice_form" method="POST" enctype="multipart/form-data" action="#">
                                    @csrf
                                    <div class="project-header-items form-header-padding d-flex justify-content-between">
                                        <h4 class="form-label">Client</h4>
                                        Wranga L

                                    </div>
                                    @if($task_data['pricing_type'] == 'hourly')
                                        <div class="project-price-details form-price-padding d-flex justify-content-between">
                                            <h4 class="paragraph font-size-14">Total Hours Worked</h4>
                                            <select id="hoursSelect" name="hours" class="time-select" required>
                                                <option value="">Select Hour</option>
                                                <option value="1" selected>01</option>
                                                @for ($i = 2; $i < 101; $i++)
                                                    <option value="{{ $i }}">{{ $i < 10 ? '0' : '' }}{{ $i }}</option>
                                                @endfor
                                            </select>
                                            <select id="minutesSelect" name="minutes" class="time-select" required>
                                                <option value="">Select Minute</option>
                                                <option value="0" selected>00</option>
                                                @for ($i = 15; $i < 60; $i += 15)
                                                    <option value="{{ $i }}">{{ $i < 10 ? '0' : '' }}{{ $i }}</option>
                                                @endfor
                                            </select>
                                        </div>
                                    @else
                                        <div class="project-price-details form-price-padding d-flex justify-content-between">
                                            <h4 class="paragraph font-size-14">Fixed Rate Job</h4>
                                            <p class="cost font-size-16">${{$hourly_rate}}/fr</p>
                                        </div>
                                    @endif

                                    <div class="project-price-details form-price-padding d-flex justify-content-between">
                                        <h4 class="paragraph font-size-14">Your Rate</h4>
                                        <p class="cost font-size-16">${{$hourly_rate}}/{{$task_data['pricing_type'] == 'hourly'?'hr':'fr'}}</p>
                                    </div>
                                    <div class="project-price-details form-price-padding d-flex justify-content-between">
                                        <h4 class="paragraph font-size-14">Expenses</h4>
                                        <h3 class="cost font-size-16">
                                        <a href="#" id="toggleExpenseForm" class="text-link">Add Expense</a>
                                        </h3>
                                    </div>

                                    <!-- Hidden expense form -->
                                    <div id="expenseForm" style="display: none;">
                                        <div class="form-group form-price-padding d-flex justify-content-between">
                                            <label for="expenses_rate">Expense Rate</label>
                                            <input class="form-control" style="width:80px" type="text" name="expenses_rate" id="expenses_rate" value="0">
                                        </div>
                                        <div class="form-group">
                                            <label for="expense_detail">Expense Detail</label>
                                            <input class="form-control" type="text" name="expense_detail" id="expense_detail">
                                        </div>
                                        <div class="form-group">
                                            <label for="expense_detail">Upload Receipt</label>
                                            <input class="form-control" type="file" name="upload_doc" id="upload_doc">
                                        </div>
                                    </div>

                                    <div class="project-price-details form-price-padding d-flex justify-content-between">
                                        <h4 class="paragraph font-size-14">Total</h4>
                                        <h3 class="cost font-size-16">
                                            <input type="hidden" name="total_amount" id="total_amount" value="{{$hourly_rate}}">
                                            $<span id="total_amount_text">{{$hourly_rate}}</span>
                                        </h3>
                                    </div>
                                    @if($task_data['pricing_type'] == 'hourly')
                                        <div class="project-price-details form-price-padding d-flex justify-content-between">
                                            <h4 class="paragraph font-size-14">Is this ongoing job?</h4>
                                            <div class="authentication-switch ">
                                                <label class="switch">
                                                    <input type="checkbox" name="ongoing_job" id="ongoing_job">
                                                    <span class="slider round"></span>
                                                </label>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="project-price-details form-price-padding d-flex  justify-content-between">
                                        <h4 class="paragraph font-size-14">Closing statement</h4>
                                        
                                    </div>
                                    <div class="project-price-details form-price-padding justify-content-between">
                                        <h3 class="cost font-size-16"><textarea class="form-control" name="comment" id="exampleFormControlTextarea1" rows="3" placeholder="Enter Here">{{$closing_message}}</textarea></h3>
                                    </div>
                                    <input type="hidden" id="job_id" value="{{$task_id}}" name="job_id">
                                    <input type="hidden" id="payment_method_id" value="{{$payment_method_id}}" name="payment_method_id">
                                    <input type="hidden" id="pricing_type" value="{{$task_data['pricing_type']}}" name="pricing_type">
                                    <input type="hidden" id="rate" value="{{$hourly_rate}}" name="rate">
                                    <div class="project-action-btns form-action-padding justify-content-between" id="invoice_button_div">
                                        <button type="submit" id="submit_invoice_btn" class="btn btn-primary w-100">Submit Invoice</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</section>
@endsection



<!-- Modals -->

<!-- Edit Modal -->

<div class="modal fade" id="editSchedule" tabindex="-1" aria-labelledby="editScheduleLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="body-heading">
                    <h6>Cleaning With Jenny Wilson</h6>
                </div>
                <hr>
                <div class="schedule-body-items mt-3">
                    <form action="">
                        <label for="scheduleDate">Please select the Date</label>
                        <input type="date" class="form-control" id="scheduleDate">
                        <div class="row mt-3">
                            <div class="col-md-6">
                                <label for="startTime">Start Time</label>
                                <input type="time" class="form-control" id="scheduleStartTime">
                            </div>
                            <div class="col-md-6">
                                <label for="EndTime">End Time</label>
                                <input type="time" class="form-control" id="scheduleEndTime">
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="modal-footer mt-4">
                <button type="button" class="btn btn-primary w-100" data-bs-toggle="modal"
                    data-bs-target="#successfulCompletion">Next</button>
            </div>
        </div>
    </div>
</div>


<!-- Successfull Completion modal -->

<div class="modal fade" id="successfulCompletion" tabindex="-1" aria-labelledby="successfulCompletionLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content d-flex flex-column gap-3">
            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body d-flex flex-column gap-2">
                <div class="successful-img d-flex justify-content-center">
                    <img class="send-icon" src="{{ url('webAssets/assets/images/tick-mark_blue.svg') }}" />
                </div>
                <div class="body-text-col text-center">
                    <h6>Your Project has Rescheduled on May 05 at 10:00 am </h6>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary w-100">Thanks</button>
            </div>
        </div>
    </div>
</div>

<!-- Successfull Job invoice Completion modal -->
<div class="modal fade" id="submitInvoiceModal" tabindex="-1" aria-labelledby="submitInvoiceModalLabel"
    aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content d-flex flex-column gap-3">
            <div class="modal-header">
                <button type="button" class="btn-close" onclick="successRedirect()"></button>
            </div>
            <div class="modal-body d-flex flex-column gap-2">
                <div class="successful-img d-flex justify-content-center">
                    <img class="send-icon" src="{{ url('webAssets/assets/images/tick-mark_blue.svg') }}" />
                </div>
                <div class="body-text-col text-center">
                    <h6>Job invoice and payment submitted successfully !</h6>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary w-100" onclick="successRedirect()">Thanks</button>
            </div>
        </div>
    </div>
</div>
<script src="{{asset('webAssets/js/jquery.min.js')}}"></script>

<script>
$(document).ready(function() {
    var closingMessage = '{{ $closing_message }}';
    var ongoingClosingMessage = '{{ $ongoing_closing_message }}';
    
    if ($('#ongoing_job').is(':checked')) {
        $('#exampleFormControlTextarea1').val(ongoingClosingMessage);
    } else {
        $('#exampleFormControlTextarea1').val(closingMessage);
    }
    $('#ongoing_job').on('change', function() {
        if ($(this).is(':checked')) {
            $('#exampleFormControlTextarea1').val(ongoingClosingMessage);
        } else {
            $('#exampleFormControlTextarea1').val(closingMessage);
        }
    });
});

 document.addEventListener('DOMContentLoaded', () => {
    const toggleLink = document.getElementById('toggleExpenseForm');
    const expenseForm = document.getElementById('expenseForm');
    const expensesInput = document.getElementById('expenses_rate');
    const expenseDetailInput = document.getElementById('expense_detail');
    const totalAmountText = document.getElementById('total_amount_text');
    const totalAmountInput = document.getElementById('total_amount');
    const hoursSelect = document.getElementById('hoursSelect');
    const minutesSelect = document.getElementById('minutesSelect');
    const rate = parseFloat(document.getElementById('rate').value) || 0;
    const pricingType = document.getElementById('pricing_type').value;
    
    const initialTotal = parseFloat(totalAmountInput.value) || 0;

    // Function to update the total amount
    function updateTotal() {
        if (pricingType === 'hourly') {
            // Get hours and minutes from the select elements
            let hours = parseFloat(hoursSelect.value) || 0;
            let minutes = parseFloat(minutesSelect.value) || 0;

            // Convert minutes to hours
            let totalHours = hours + (minutes / 60);

            // Calculate hourly total
            let hourlyTotal = totalHours * initialTotal;

            // If totalHours is 0, set total amount to 0
            if (totalHours === 0) {
                totalAmountText.textContent = '0.00';
                totalAmountInput.value = '0.00';
                return; // Exit early since total is 0
            }

            // Get expense value
            let expensesValue = parseFloat(expensesInput.value) || 0;
            if (expensesValue < 0) {
                expensesValue = 0; // Correct negative value to 0
                expensesInput.value = expensesValue;
            }
            // console.log( initialTotal, hourlyTotal , expensesValue);
            // Calculate grand total
            const grandTotal = hourlyTotal + expensesValue;

            // Update the total amount text and input
            totalAmountText.textContent = grandTotal.toFixed(2);
            totalAmountInput.value = grandTotal.toFixed(2);
        } else {
            // Fixed rate job scenario
            let expensesValue = parseFloat(expensesInput.value) || 0;

            if (expensesValue < 0) {
                expensesValue = 0; // Correct negative value to 0
                expensesInput.value = expensesValue;
            }

            const grandTotal = initialTotal + expensesValue;

            // Update the total amount text and input
            totalAmountText.textContent = grandTotal.toFixed(2);
            totalAmountInput.value = grandTotal.toFixed(2);
        }
    }

    // Function to remove initial zero if value is '0'
    function removeInitialZero() {
        if (expensesInput.value === '0') {
            expensesInput.value = ''; // Clear value if it's only '0'
        }
    }
    function handleExpenseFormToggle(event) {
        event.preventDefault(); // Prevent default link behavior
        if (pricingType === 'hourly' ){
            let hours = parseFloat(hoursSelect.value) || 0;
            let minutes = parseFloat(minutesSelect.value) || 0;
            let totalHours = hours + (minutes / 60);

            if (pricingType === 'hourly' && totalHours === 0) {
                toastr.error('Please enter hours worked before adding expenses.');
                return;
            }
        }

        if (expenseForm.style.display === 'none') {
            expenseForm.style.display = 'block';
            toggleLink.textContent = 'Cancel';
        } else {
            expenseForm.style.display = 'none';
            toggleLink.textContent = 'Add Expense';
            expensesInput.value = ''; // Clear expense input
            expenseDetailInput.value = ''; // Clear expense detail input
            updateTotal(); // Update total when canceled
        }
    }

    // Toggle form visibility and update link text
    if (toggleLink) {
        toggleLink.addEventListener('click', handleExpenseFormToggle);
    }

    // Update total on input change
    if (expensesInput) {
        expensesInput.addEventListener('input', () => {
            removeInitialZero();
            updateTotal();
        });
    }

    // Update total on hours or minutes change
    if (hoursSelect) {
        hoursSelect.addEventListener('change', updateTotal);
    }

    if (minutesSelect) {
        minutesSelect.addEventListener('change', updateTotal);
    }

    // Initial update based on pre-set values
    updateTotal();
});

document.addEventListener('DOMContentLoaded', function () {
    const expensesRateInput = document.getElementById('expenses_rate');

    expensesRateInput.addEventListener('input', function () {
        let value = this.value;
        value = value.replace(/[^0-9.]/g, '');

        if (value.indexOf('.') !== -1) {
            // Allow only two decimal places
            let parts = value.split('.');
            parts[1] = parts[1].substring(0, 2); // Limit to two decimal places
            value = parts.join('.');
        }
        if (parseFloat(value) < 0) {
            value = '';
        }
        this.value = value;
    });
});
</script>

<script>
$(document).ready(function() {
    $('#submit_invoice_btn').on('click', function(event) {
        event.preventDefault();
        let submitbtn = this;
        let taskId = $('#job_id').val(); 
        var form = $('#invoice_form');
        var formData = form.serialize();
        // console.log(formData);
        // return;
        submitbtn.innerHTML = ' <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>Processing ...';
        submitbtn.setAttribute('disabled', 'disabled');
        $.ajax({
            url: "{{ route('sp.submitInvoice') }}",
            method: 'POST',
            data: formData,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                // console.log(response);
                if (response.success) {
                    toastr.success(response.success.message);
                    $("#submitInvoiceModal").modal("show");
                } else if (response.status == 401) {
                    toastr.error(response.message);
                    submitbtn.innerHTML = 'Submit Invoice';
                    submitbtn.removeAttribute('disabled');
                } else if (response.status == 404) {
                    toastr.error(response.error);
                    submitbtn.innerHTML = 'Submit Invoice';
                    submitbtn.removeAttribute('disabled');
                } else if (response.error.message) {
                    toastr.error(response.error.message);
                    submitbtn.innerHTML = 'Submit Invoice';
                    submitbtn.removeAttribute('disabled');
                }else if (response.error) {
                    toastr.error(response.error.error);
                    submitbtn.innerHTML = 'Submit Invoice';
                    submitbtn.removeAttribute('disabled');
                }
            },
            error: function(xhr, status, error) {
                // console.log(error,status);
                toastr.error("Please fill valid card details!");
                    submitbtn.innerHTML = 'Submit Invoice';
                    submitbtn.removeAttribute('disabled');
            }
        });
    });

});

function successRedirect() {
        let taskId = $('#job_id').val(); 
        window.location.href = '/service-provider-complete-project-details/' + taskId;
    }

</script>