@extends('master_header')

@section('content')

    @include('includes.header-topbar')

    <!-- ========== App Menu ========== -->
    @include('sales.sidebar-menu')
    <!-- Left Sidebar End -->
    <!-- Vertical Overlay-->
    <div class="vertical-overlay"></div>

    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content">
        <div class="page-content">
            <div class="container-fluid">
                @if(session('success'))
                    <div class="alert alert-success mb-xl-0" role="alert">
                        <strong>Transfer of Funds Submitted Successfully!</strong>
                    </div>
                @endif
                <div class="card" id="contactList">
                    <div class="card-header">
                        <div class="row align-items-center g-3">
                            <div class="col-md-3">
                                <h5 class="card-title mb-0">Transfer of Funds</h5>
                            </div>
                            <!--end col-->

                            <!--end col-->
                        </div>
                        <!--end row-->
                    </div>
                    <!--end card-header-->

                    <section>
                        <form action="{{route('transfer-funds')}}" method="post" enctype="multipart/form-data">
                            @csrf
                            <div class="header_container">
                                <div class="header_wrapper">
                                    <img
                                        src="/assets/images/logo.png"
                                        alt="logo"
                                        class="img-responsive"
                                    />
                                    <p>Serial No: <span class="red">AH0116</span></p>
                                </div>
                            </div>

                            <div class="info-container">
                                <div class="apdc-title">
                                    <p>APDC HOMES</p>
                                    <p>TRANSFER OF FUNDS REFUND FORM</p>
                                </div>
{{--
                                <div class="info">Personal Information</div>--}}
                                <div class="input-group">
                                    <div class="mobile-width">
                                        <div class="placeholder">To</div>
                                        <input type="text" name="to" class="mobile-input" />
                                        <div class="placeholder">Through</div>
                                        <input type="text" name="through" class="mobile-input" />

                                    </div>
                                </div>
                                <div class="input-group">
                                    <div class="mobile-width">
                                        <div class="placeholder">Ref</div>
                                        <input type="text" name="ref" class="mobile-input" />
                                        <div class="placeholder">From</div>
                                        <input type="text" name="from" class="mobile-input" />
                                    </div>
                                </div>
                                <div class="input-group">
                                    <div class="mobile-width">
                                        <div class="placeholder">Date</div>
                                        <input type="text" name="date" />
                                    </div>
                                </div>
                                <div class="input-group">
                                    <div class="mobile-width">
                                        <div class="placeholder">Subject</div>
                                        <input type="text" name="subject" />
                                    </div>
                                </div>
                                <div class="info">refund details</div>
                                <div id="projectFormsContainer">
                                    <div class="projectFormContainer">
                                        <!-- Initial project form -->
                                        <div class="projectForm">
                                            <div class="input-group">
                                                <div style="display: flex; width: 100%; margin-bottom: 20px">
                                                    <div class="placeholder">Former House Type</div>
                                                    <input type="text" name="former_house_type" class="mobile-input">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="input-group">
                                    <div class="mobile-width">
                                        <div class="placeholder">Amount Paid</div>
                                        <!-- Input field for amount_paid in number format with commas -->
                                        <input type="text" name="amount_paid" class="mobile-input" id="amount-paid-input">

                                        <script>
                                            // Wait for the document to be ready
                                            document.addEventListener("DOMContentLoaded", function () {
                                                // Select the input field by its ID
                                                var amountPaidInput = document.getElementById('amount-paid-input');

                                                // Event listener for input event (when the user types)
                                                amountPaidInput.addEventListener('input', function () {
                                                    // Get the input value without commas
                                                    var inputValue = amountPaidInput.value.replace(/,/g, '');

                                                    // Format the input value with commas
                                                    var formattedValue = Number(inputValue).toLocaleString();

                                                    // Update the input field with the formatted value
                                                    amountPaidInput.value = formattedValue;
                                                });
                                            });
                                        </script>
                                      {{--  <div class="placeholder">Payment Date</div>
                                        <!-- Input field for payment_date using Pikaday -->
                                        <input type="text" name="payment_date" class="mobile-input" id="payment-date-input">--}}

                                    </div>

                                </div>

                                <script>
                                    // Wait for the document to be ready
                                    document.addEventListener("DOMContentLoaded", function () {
                                        // Select the input field by its ID and apply Pikaday
                                        var picker = new Pikaday({
                                            field: document.getElementById('payment-date-input'),
                                            format: 'DD/MM/YYYY', // Set your desired date format (month, day, year)
                                            // Add more options or customize the behavior as needed
                                        });
                                    });
                                </script>


                                <div id="projectFormsContainer">
                                    <div class="projectFormContainer">
                                        <!-- Initial project form -->
                                        <div class="projectForm">
                                                <div id="projectFormsContainer">
                                                    <div class="projectFormContainer">
                                                        <!-- Initial project form -->
                                                        <div class="projectForm">
                                                            <div class='input-group'>
                                                                <div class='placeholder'>Project</div>
                                                                <select name="project" style="width: 100%" required>
                                                                    <option value="">Choose Project</option>
                                                                    @php
                                                                        $distinctProjects = [];
                                                                    @endphp
                                                                    @foreach ($projects as $project)
                                                                        @php
                                                                            $displayName = '';
                                                                            switch ($project->detailed_type) {
                                                                                case 'millenium':
                                                                                    $displayName = 'Millenium City Kaduna';
                                                                                    break;
                                                                                case 'consu':
                                                                                    $displayName = 'LIFE CAMP, IDOGWARI';
                                                                                    break;
                                                                                case 'karsana':
                                                                                    $displayName = 'KARSANA';
                                                                                    break;
                                                                                case 'ace_1':
                                                                                    $displayName = 'ACE Phase 1';
                                                                                    break;
                                                                                case 'ace_2':
                                                                                    $displayName = 'ACE Phase 2';
                                                                                    break;
                                                                                case 'ace_3':
                                                                                    $displayName = 'ACE Phase 3';
                                                                                    break;
                                                                                default:
                                                                                    $displayName = 'Unknown Type';
                                                                            }
                                                                            if (!in_array($displayName, $distinctProjects)) {
                                                                                array_push($distinctProjects, $displayName);
                                                                        @endphp
                                                                        <option value="{{ $project->id }}"
                                                                                data-type="{{ $project->detailed_type }}">{{ $displayName }}</option>
                                                                        @php
                                                                            }
                                                                        @endphp
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                            <br>
                                                            <div class="input-group">
                                                                <div style="display: flex; width: 100%; margin-bottom: 20px">
                                                                    <div class="placeholder">New House Type</div>
                                                                    <select name="house_type" style="width: 50%" required>
                                                                        <option value="">Choose House Type</option>
                                                                        <!-- House type options will be added dynamically using AJAX -->
                                                                    </select>
                                                                    <div class="placeholder">Amount</div>
                                                                    <input type="text" name="amount" style="width: 50%" oninput="formatAmountInput(this)"/>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="input-group">
                                    <div class="mobile-width">
                                        <div class="placeholder">Amount to be Transferred to New HouseType</div>
                                        <input type="text" name="amount_to_transfer" />
                                    </div>
                                </div>
                                <div class="input-group">
                                    <div class="mobile-width">
                                        <div class="placeholder">Attachments</div>
                                        <input type="file" name="attachment" />
                                    </div>
                                </div>
                                <div class="input-group">
                                    <div class="mobile-width">

                                        <script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.8.0/pikaday.min.js"></script>
                                        <script>
                                            // Wait for the document to be ready
                                            document.addEventListener("DOMContentLoaded", function () {
                                                // Initialize Pikaday for the first input field
                                                var picker1 = new Pikaday({
                                                    field: document.getElementById('payment-date-input-1'),
                                                    format: 'DD/MM/YYYY', // Set your desired date format
                                                    // Add more options or customize the behavior as needed
                                                });

                                                // Initialize Pikaday for the second input field
                                                var picker2 = new Pikaday({
                                                    field: document.getElementById('payment-date-input-2'),
                                                    format: 'DD/MM/YYYY', // Set your desired date format
                                                    // Add more options or customize the behavior as needed
                                                });
                                            });
                                        </script>
                                    </div>
                                </div>
                            </div>


                            <div class="btn-group">
                                <button type="submit">Submit</button>
                                <button id="shareButton" class="shareButtonModal">Share</button>
                            </div>

                            <div id="myModal" class="modal">
                                <div class="modal-content">
                                    <span class="close">&times;</span>
                                    <p>Share via</p>
                                    <div style="display: flex">
                                        <div style="text-align: center">
                                            <a href="#" onclick="shareViaWhatsApp(event);">
                                                <img src="/assets/images/whatsApp.png" />
                                            </a>
                                            <p>Whatsapp</p>
                                        </div>
                                        <div style="margin-left: 3%; text-align: center">
                                            <a href="#" onclick="shareViaEmail(event);">
                                                <img src="/assets/images/mail.png" />
                                            </a>
                                            <p>Mail</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </form>
                    </section>

                    <br>


                    <br>
                    <br>

                    <style>

                        * {
                            font-family: 'Poppins', sans-serif;
                        }

                        section {
                            padding: 0 10%;
                        }

                        .mobile-width {
                            display: flex;
                            width: 100%;
                        }

                        .mobile-input {
                            width: 50%;
                        }

                        .header_container {
                            margin-top: 2%;
                            width: 100%;
                        }

                        .header_wrapper>img {
                            height: auto;
                        }

                        .img-responsive {
                            width: 200px;
                            height: auto;
                        }

                        .red {
                            color: #F00;
                            font-style: normal;
                            font-weight: 400;
                            line-height: normal;
                        }

                        .header {
                            width: 100%;
                            display: flex;
                            margin: 0 auto;
                        }

                        .logo_header {
                            width: 50%;
                        }

                        .logo_header>img {
                            width: 200px;
                            height: auto;
                        }

                        .apdc-title>p:nth-child(1) {
                            font-size: 28px;
                            color: #489153;
                            line-height: normal;
                            font-weight: 700;
                            font-family: "Inter", sans-serif;
                        }

                        .apdc-title>p:nth-child(2) {
                            color: #212529;
                            font-family: Inter;
                            font-size: 16px;
                            font-style: normal;
                            font-weight: 500;
                            line-height: normal;
                            margin-top: -20px;
                            text-transform: uppercase;
                        }

                        .info-container {
                            margin-top: 5%;
                        }

                        .info {
                            background-color: #489153;
                            padding: 10px 0px 10px 7px;
                            text-transform: uppercase;
                            color: #fff;
                            font-family: Inter;
                            font-weight: 500;
                            margin-top: 30px;
                            width: 100%;
                            text-align: center;
                        }

                        .input-group {
                            margin-top: 20px;
                            display: flex;
                        }

                        .placeholder {
                            padding: 10px 15px;
                            background: rgba(172, 181, 189, 0.15);
                            font-size: 15px;
                            min-width: fit-content;
                        }

                        .placeholder>span {
                            color: #858E96;
                            font-style: normal;
                            font-weight: 400;
                            line-height: normal;
                        }

                        input[type='text'] {
                            border: 1px solid rgba(172, 181, 189, 0.3);
                            padding: 10px 4px;
                            width: 100%;
                        }

                        input[type='file'] {
                            border: 1px solid rgba(172, 181, 189, 0.3);
                            padding: 10px 4px;
                            width: 100%;
                        }

                        select {
                            /* border: none; */
                            border: 1px solid rgba(172, 181, 189, 0.30);
                            width: 100%;
                        }

                        .check-container {
                            display: flex;
                            justify-content: space-between;
                        }

                        .check-size {
                            width: 30px;
                            height: 30px;
                            border: 1px solid rgba(172, 181, 189, 0.30) !important;
                            flex-shrink: 0;

                        }

                        .check-size-max {
                            width: 176px;
                            height: 30px;

                        }

                        .input-group>label {
                            margin-top: 5px;
                        }

                        table {
                            width: 100%;
                            border-collapse: collapse;
                        }

                        th {
                            font-weight: normal;
                        }

                        th,
                        td {
                            text-align: left;
                        }

                        td:nth-child(3) {
                            padding: 0 3%;
                        }

                        th:nth-child(4) {
                            text-align: center;
                        }

                        .btn-group {
                            display: flex;
                            justify-content: center;
                            margin-top: 20px;
                        }

                        .btn-group>button:nth-child(1) {
                            background-color: #489153;
                            padding: 15px 25px;
                            border: none;
                            color: #fff;
                            margin-right: 20px;
                            cursor: pointer;
                        }

                        .btn-group>button:nth-child(2) {
                            background-color: #fff;
                            padding: 15px 25px;
                            border: none;
                            color: #000;
                            border: 1px solid #489153;
                            cursor: pointer;

                        }



                        /* Modal Content */
                        .modal-content {
                            background-color: #fefefe;
                            margin: auto;
                            padding: 20px;
                            border: 2px solid #489153;
                            width: 80%;
                        }

                        /* The Close Button */
                        .close {
                            color: #aaaaaa;
                            float: right;
                            font-size: 28px;
                            font-weight: bold;
                        }

                        .close:hover,
                        .close:focus {
                            color: #000;
                            text-decoration: none;
                            cursor: pointer;
                        }

                        @media(max-width:900px) {
                            .input-group {
                                display: inline-block;
                                width: 100%;
                            }

                            .mobile-width {
                                display: inline-block;
                                margin-top: 10px;
                            }

                            .placeholder {
                                margin-top: 20px;
                            }

                            .mobile-input {
                                width: 100%;
                            }

                            .check-container {
                                display: inline-block;
                            }

                            table {
                                font-size: 12px;
                                /* Reduce font size for smaller screens */
                            }

                            th,
                            td {
                                padding: 4px;
                                /* Reduce padding for smaller screens */
                            }

                        }
                    </style>
                    <!-- end main content-->

                    <script>
                        var modal = document.getElementById("myModal");

                        // Get the button that opens the modal
                        var btn = document.getElementById("shareButton");

                        // Get the <span> element that closes the modal
                        var span = document.getElementsByClassName("close")[0];

                        // When the user clicks the button, open the modal
                        btn.onclick = function() {
                            modal.style.display = "block";
                        }

                        // When the user clicks on <span> (x), close the modal
                        span.onclick = function() {
                            modal.style.display = "none";
                        }

                        // When the user clicks anywhere outside of the modal, close it
                        window.onclick = function(event) {
                            if (event.target == modal) {
                                modal.style.display = "none";
                            }
                        }
                    </script>



                    <!--end card-body-->
                </div>
                <!--end card-->

            </div>
            <!-- container-fluid -->
        </div>
        <!-- End Page-content -->

        @include('includes.footer')
    </div>
    <!-- end main content-->

</div>
<!-- END layout-wrapper -->



<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>


<script>
    $(document).ready(function() {
        $("#myForm").validate({
            errorContainer: ".error-messages",
            errorLabelContainer: ".error-messages ul",
            wrapper: "li",
            submitHandler: function(form) {
                form.submit();
            },
            errorPlacement: function(error, element) {
                error.appendTo(element.closest('.form-group').find('.error-container'));
            }
        });
    });
</script>

<script>
    var modal = document.getElementById("myModal");

    // Get the button that opens the modal
    var btn = document.getElementById("shareButton");

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks the button, open the modal
    btn.onclick = function() {
        modal.style.display = "block";
    }

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
</script>
<script defer>
    // Function to format the amount as a number with the appropriate locale
    function formatAmount(amount) {
        const formatter = new Intl.NumberFormat('en-US', {
            style: 'currency',
            currency: 'NGN', // Change this to the appropriate currency code if needed
            minimumFractionDigits: 2,
        });
        return formatter.format(amount);
    }

    function formatAmountInput(input) {
        const value = parseFloat(input.value.replace(/[^0-9.-]+/g, ""));
        input.value = formatAmount(value);
    }

    function updateHouseTypeOptionsAndAmount(projectSelect, houseTypeSelect, amountInput) {
        if (!projectSelect) return; // Check if projectSelect is null before proceeding

        const selectedProjectType = projectSelect.options[projectSelect.selectedIndex].getAttribute('data-type');

        // Make an AJAX request to fetch house types and amounts
        fetch('/get-house-types-and-amounts', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            },
            body: JSON.stringify({ selected_project_type: selectedProjectType }),
        })
            .then(response => response.json())
            .then(data => {
                houseTypeSelect.innerHTML = '<option value="">Choose House Type</option>';
                if (data && data.length > 0) {
                    data.forEach(item => {
                        const option = document.createElement('option');
                        option.value = item.id;
                        option.textContent = item.name;
                        houseTypeSelect.appendChild(option);
                    });

                    // Update amount input when a house type is selected
                    houseTypeSelect.addEventListener('change', function () {
                        const selectedHouseTypeId = houseTypeSelect.value;
                        const selectedHouseType = data.find(item => item.id == selectedHouseTypeId);
                        if (selectedHouseType) {
                            amountInput.value = formatAmount(selectedHouseType.list_price);
                        } else {
                            amountInput.value = '';
                        }
                    });

                } else {
                    amountInput.value = '';
                }
            })
            .catch(error => {
                console.error('Error fetching house types and amounts:', error);
                amountInput.value = '';
            });
    }

    function addNewProjectForm() {
        const projectFormsContainer = document.getElementById('projectFormsContainer');
        const firstProjectFormContainer = document.querySelector('.projectFormContainer');
        const newProjectFormContainer = firstProjectFormContainer.cloneNode(true);

        // Clear selected project and house type values in the cloned form
        const projectSelect = newProjectFormContainer.querySelector('select[name="project"]');
        const houseTypeSelect = newProjectFormContainer.querySelector('select[name="house_type"]');
        const amountInput = newProjectFormContainer.querySelector('input[name="amount"]');
        projectSelect.selectedIndex = 0;
        houseTypeSelect.innerHTML = '<option value="">Choose House Type</option>';
        amountInput.value = '';

        // Add event listener to update house types and amounts in the cloned form
        projectSelect.addEventListener('change', function () {
            updateHouseTypeOptionsAndAmount(projectSelect, houseTypeSelect, amountInput);
        });

        projectFormsContainer.appendChild(newProjectFormContainer);
    }

    document.addEventListener('DOMContentLoaded', function() {
        // Initial project form setup
        const projectSelect = document.querySelector('select[name="project"]');
        const houseTypeSelect = document.querySelector('select[name="house_type"]');
        const amountInput = document.querySelector('input[name="amount"]');
        projectSelect.addEventListener('change', function () {
            updateHouseTypeOptionsAndAmount(projectSelect, houseTypeSelect, amountInput);
        });

        if (projectSelect) {
            updateHouseTypeOptionsAndAmount(projectSelect, houseTypeSelect, amountInput);
        }

        // Add event listener to format amount input as number
        amountInput.addEventListener('input', function () {
            formatAmountInput(this);
        });
    });
</script>
<script>
    function shareViaWhatsApp(event) {
        // Prevent form submission
        event.preventDefault();

        // Implementation for sharing via WhatsApp
        var formUrl = window.location.href;
        var message = encodeURIComponent(formUrl);
        var whatsappLink = "https://api.whatsapp.com/send?text=" + message;
        window.open(whatsappLink);
    }

    function shareViaEmail(event) {
        // Prevent form submission
        event.preventDefault();

        // Implementation for sharing via Email
        var formUrl = window.location.href;
        var subject = encodeURIComponent("Check out this form");
        var body = encodeURIComponent("Here is the link to the form: " + formUrl);
        var emailLink = "mailto:?subject=" + subject + "&body=" + body;
        window.location.href = emailLink;
    }
</script>

<script src="/assets/script.js"></script>
@endsection