@extends('layouts.app')

@section('content')


<div class="container py-5" style="text-align: {{ $setting->form_css ? explode(',', $setting->form_css)[0] : 'left' }}; max-width: {{ $setting->form_css ? explode(',', $setting->form_css)[1] : 100 }}%; margin: 0 auto;">
    <h1 class="mb-4">{{ $form->form_name }}</h1>

    @php

    $autotask_oppr = $form ->includeopportunity;

    @endphp

    <form method="POST" id="myForm" action="{{ route('forms.submission', $form_id) }}" enctype="multipart/form-data">
        @csrf

        @foreach ($fields as $index => $field)
            @php
                $isRequired = !empty($field->required) ? 'required' : '';
                $name = e($field->name);
                $label = e($field->label);
            @endphp

            <div class="mb-3">

                {{-- Checkbox --}}
                @if ($field->field_type === 'checkbox')
                    @foreach (explode(',', $field->options) as $opt)
                        <input 
                            type="checkbox" 
                            {{ $isRequired }} 
                            class="form-check-input" 
                            name="{{ $name }}[]" 
                            value="Yes" 
                            id="{{ $name . '_' . trim($opt) }}">
                    @endforeach
                @endif

                <label class="form-label">
                    {{ $label }}
                    @if ($isRequired === 'required') 
                        <span style="color:red;">*</span> 
                    @endif
                </label>

                {{-- Input fields --}}
                @if (in_array($field->field_type, ['text', 'email', 'password', 'date']))
                    <input type="{{ $field->field_type }}" name="{{ $name }}" class="form-control" {{ $isRequired }}>

                @elseif ($field->field_type === 'textarea')
                    <textarea name="{{ $name }}" class="form-control" {{ $isRequired }}></textarea>

                @elseif ($field->field_type === 'select')
                    <select name="{{ $name }}" class="form-control" {{ $isRequired }}>
                        @foreach (explode(',', $field->options) as $opt)
                            <option value="{{ trim($opt) }}">{{ trim($opt) }}</option>
                        @endforeach
                    </select>

                @elseif ($field->field_type === 'country')
                    <select name="{{ $name }}" id="country" {{ $isRequired }} class="form-control">
                        <option value="">Select Country</option>
                    </select>

                @elseif ($field->field_type === 'state')
                    <select name="{{ $name }}" id="state" {{ $isRequired }} class="form-control">
                        <option value="">Select State/Province</option>
                    </select>

                @elseif ($field->field_type === 'payment')
                <style>
                    /* Stripe card element custom styling */
                    .stripe-card-element {
                        border: 1px solid #ced4da; /* Bootstrap-like border */
                        padding: 12px;
                        border-radius: 8px;
                        background: #fff;
                        box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
                        margin-top: 5px;
                    }

                    /* When user focuses */
                    .stripe-card-element.StripeElement--focus {
                        border-color: #007bff;
                        box-shadow: 0 0 4px rgba(0,123,255,0.5);
                    }

                    /* When invalid input */
                    .stripe-card-element.StripeElement--invalid {
                        border-color: #dc3545;
                    }

                    /* When loading */
                    .stripe-card-element.StripeElement--webkit-autofill {
                        background-color: #fefde5 !important;
                    }
                </style>
                <div id="card-element" class="stripe-card-element"></div>
                <div id="card-errors" class="text-danger mt-2"></div>
                <input type="hidden" name="payment_method" id="payment_method">
                <input type="hidden" name="amount" value="{{$field->options}}">

                    @if ($publishkey=='')
                    <p class="text-danger text-center">Stripe Key Not Setup Yet</p>
                    @endif

                @elseif ($field->field_type === 'divider')
                    <hr>

                @elseif ($field->field_type === 'image')
                <div>
                    <img src="{{$field->options}}" class="img-fluid">
                </div>

                @elseif ($field->field_type === 'multiselect')
                    <select name="{{ $name }}[]" class="form-control" multiple {{ $isRequired }}>
                        @foreach (explode(',', $field->options) as $opt)
                            <option value="{{ trim($opt) }}">{{ trim($opt) }}</option>
                        @endforeach
                    </select>

                @elseif ($field->field_type === 'upload')
                <input type="file" name="{{ $name }}" class="form-control" {{ $isRequired }}>
                @endif
                
                @if ($field->field_type === 'signature')
                    @php
                        $canvasId = "signature-pad-" . $index;
                        $clearId = "clear-" . $index;
                        $inputId = "signature-" . $index;
                    @endphp

                    <div class="signature-container">
                        <p>Draw your signature below:</p>
                        <canvas class="signature-pad" id="{{ $canvasId }}" width="400" height="200"></canvas>
                        <div class="buttons">
                            <button type="button" class="clear-pad" id="{{ $clearId }}">Clear</button>
                        </div>
                    </div>
                    <input type="hidden" name="{{ $field->name }}" id="{{ $inputId }}">
                @endif
                    

                {{-- Company / Contact / Opportunity special fields --}}
                @if ($field->field_type === 'company')
                    <select id="companySelect" name="companyid" class="form-control mb-4" onchange="updateCompanyInfo()" disabled>
                        <option value="">Select a company...</option>
                    </select>

                    <input type="hidden" name="companyname" id="companyname">

                    <select id="contactName" name="contactname" class="form-control mb-4" disabled>
                        <option value="">Select contact name...</option>
                    </select>

                    <select id="contactEmail" name="contactemail" class="form-control mb-4" onchange="updateContactInfo()" disabled>
                        <option value="">Select contact email...</option>
                    </select>

                    @if ($autotask_oppr == '1')
                        <select id="opportunitySelect" name="opportunityid" class="form-control mb-4" disabled>
                            <option value="">Select an Opportunity...</option>
                        </select>
                    @endif

                    <input type="hidden" name="contactid" id="contactid">
                    <input type="hidden" name="contactaddress" id="contactaddress">
                    <input type="hidden" name="contactnumber" id="contactnumber">

                    <div id="companyInfo" style="display:none;" class="status"></div>
                @endif

            </div>
        @endforeach

        <button type="submit" class="btn btn-success">Submit</button>
    </form>


<div id="loader" style="display:none; text-align:center; margin-top:20px;">
    <div class="spinner-border text-success" role="status" style="width: 3rem; height: 3rem;">
        {{-- <span class="visually-hidden">Loading...</span> --}}
    </div>
    <p class="mt-2">Submitting, please wait...</p>
</div>
<script>
document.getElementById('myForm').addEventListener('submit', function () {
    document.getElementById('loader').style.display = 'block';
    document.getElementById('submitBtn').disabled = true;
});
</script>
   
     @foreach ($fields as $index => $field)

        @if ($field->field_type === 'payment' && $publishkey!='')
        <script src="https://js.stripe.com/v3/"></script>
        <script>
            const stripe = Stripe("{{ $publishkey }}");
            const elements = stripe.elements();
            const cardElement = elements.create('card');
            cardElement.mount('#card-element');

            const form = document.getElementById('myForm');
            const submitBtn = document.getElementById('submitBtn');

            form.addEventListener('submit', async (e) => {
                e.preventDefault();

                // Step 1: Create payment method
                const { paymentMethod, error: pmError } = await stripe.createPaymentMethod({
                    type: 'card',
                    card: cardElement,
                    billing_details: {
                        name: 'Formbuilder',
                    },
                });

                if (pmError) {
                    document.getElementById('card-errors').textContent = pmError.message;
                    document.getElementById('loader').style.display = 'none';
                    return;
                }

                // Step 2: Send to backend to create PaymentIntent
                const response = await fetch("{{ route('forms.payment', $form_id) }}", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"
                    },
                    body: JSON.stringify({
                        amount: 5, // pass your amount here
                        payment_method: paymentMethod.id
                    }),
                });

                const data = await response.json();

                if (data.error) {
                    document.getElementById('card-errors').textContent = data.error;
                    document.getElementById('loader').style.display = 'none';
                    return;
                }

                // Step 3: Confirm payment with client_secret
                const { paymentIntent, error: piError } = await stripe.confirmCardPayment(
                    data.clientSecret,
                    {
                        payment_method: paymentMethod.id
                    }
                );

                if (piError) {
                    document.getElementById('card-errors').textContent = piError.message;
                    document.getElementById('loader').style.display = 'none';
                } else if (paymentIntent.status === 'succeeded') {
                    alert("✅ Payment successful!");
                    form.submit(); // now submit the form
                }
            });
        </script>
        @endif

    @endforeach


    <style>
        .signature-container {
        border: 2px solid #ccc;
        border-radius: 8px;
        padding: 10px;
        width: 420px;
        margin-bottom: 10px;
        }
        .signature-pad {
        border: 1px solid #000;
        border-radius: 4px;
        width: 400px;
        height: 200px;
        cursor: crosshair;
        }
        .buttons {
        margin-top: 5px;
        }
        .clear-pad{
        background: #444;
        color: #fff;
        border-radius: 50px;
        font-size: 12px;
        padding: 5px 20px;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            const form = document.getElementById("myForm");

            @foreach ($fields as $index => $field)
                @if ($field->field_type === 'signature')
                    (function() {
                        const canvas = document.getElementById("signature-pad-{{ $index }}");
                        const ctx = canvas.getContext("2d");
                        const clearBtn = document.getElementById("clear-{{ $index }}");
                        const signatureInput = document.getElementById("signature-{{ $index }}");
                        let drawing = false;

                        function startDraw(e) {
                            drawing = true;
                            ctx.beginPath();
                            ctx.moveTo(getX(e), getY(e));
                        }

                        function draw(e) {
                            if (!drawing) return;
                            ctx.lineWidth = 2;
                            ctx.lineCap = "round";
                            ctx.strokeStyle = "#000";
                            ctx.lineTo(getX(e), getY(e));
                            ctx.stroke();
                        }

                        function stopDraw() {
                            drawing = false;
                            ctx.beginPath();
                        }

                        function getX(e) {
                            return e.clientX - canvas.getBoundingClientRect().left;
                        }

                        function getY(e) {
                            return e.clientY - canvas.getBoundingClientRect().top;
                        }

                        // Mouse events
                        canvas.addEventListener("mousedown", startDraw);
                        canvas.addEventListener("mousemove", draw);
                        canvas.addEventListener("mouseup", stopDraw);
                        canvas.addEventListener("mouseout", stopDraw);

                        // Touch events
                        canvas.addEventListener("touchstart", e => {
                            e.preventDefault();
                            startDraw(e.touches[0]);
                        });
                        canvas.addEventListener("touchmove", e => {
                            e.preventDefault();
                            draw(e.touches[0]);
                        });
                        canvas.addEventListener("touchend", stopDraw);

                        // Clear button
                        clearBtn.addEventListener("click", () => {
                            ctx.clearRect(0, 0, canvas.width, canvas.height);
                        });

                        // On form submit, save signature
                        form.addEventListener("submit", () => {
                            signatureInput.value = canvas.toDataURL("image/png");
                        });
                    })();
                @endif
            @endforeach
        });
    </script>


    <script>
    // Fetch all countries + states from the API
    const countrySelect = document.getElementById("country");
    if(countrySelect!=null){
        fetch("https://countriesnow.space/api/v0.1/countries/states")
        .then(res => res.json())
        .then(result => {

            const countries = result.data;

                // Populate countries
                countries.forEach(c => {
                let option = document.createElement("option");
                option.value = c.name;
                option.textContent = c.name;
                countrySelect.appendChild(option);
                });

                // When country changes, load its states
                countrySelect.addEventListener("change", function() {
                    const selected = this.value;
                    const stateSelect = document.getElementById("state");
                    if(stateSelect!=null){
                        stateSelect.innerHTML = "<option value=''>Select State/Province</option>";

                        if (!selected) {
                            stateSelect.disabled = true;
                            return;
                        }

                        const countryData = countries.find(c => c.name === selected);
                        if (countryData && countryData.states.length > 0) {
                            countryData.states.forEach(s => {
                            let opt = document.createElement("option");
                            opt.value = s.name;
                            opt.textContent = s.name;
                            stateSelect.appendChild(opt);
                            });
                            stateSelect.disabled = false;
                        } else {
                            stateSelect.disabled = true;
                        }
                    }
                });

                
            })
        .catch(err => console.error("Error fetching countries:", err));
    }
    </script>


   


<script>
    document.addEventListener('DOMContentLoaded', function () {
        const form = document.querySelector('form');

        const buttons = form.querySelectorAll('button[type="submit"], input[type="submit"]');
        buttons.forEach(button => {
            button.addEventListener('click', () => {
                const checkboxGroups = {};

                form.querySelectorAll('input[type="checkbox"]').forEach(cb => {
                    const name = cb.name;
                    if (!checkboxGroups[name]) checkboxGroups[name] = [];
                    checkboxGroups[name].push(cb);
                });

                for (const name in checkboxGroups) {
                    const checkboxes = checkboxGroups[name];
                    const anyChecked = checkboxes.some(cb => cb.checked);

                    if (!anyChecked) {
                        const hasRequired = checkboxes.some(cb => cb.required);
                        if (hasRequired) continue;

                        if (!form.querySelector(`input[type="hidden"][name="${name}"]`)) {
                            const hidden = document.createElement('input');
                            hidden.type = 'hidden';
                            hidden.name = name;
                            hidden.value = 'No';
                            form.appendChild(hidden);
                        }
                    }
                }
            });
        });
    });
</script>

<script>
    let companies = [];
    let contacts = [];
    let opportunities = [];

    // Fetch companies from Laravel route
    function fetchCompanies() {
        fetch("{{ route('forms.action',$form->id) }}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            },
            body: JSON.stringify({
                action_type: "fetch_companies"
            })
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                companies = data.companies;
                const select = document.getElementById('companySelect');
                select.innerHTML = '<option value="">Select a company...</option>';

                companies.forEach(c => {
                    const option = document.createElement('option');
                    option.value = c.id;
                    option.textContent = `${c.companyName || c.name} (${c.createDateUS})`;
                    select.appendChild(option);
                });
                select.disabled = false;
            }
        });
    }
    if(document.getElementById('companySelect')!=null){
        fetchCompanies();
    }

    // When a company is selected → load contacts
    function updateCompanyInfo() {
        const idx = document.getElementById('companySelect').value;
        if (idx === '') return;

        const company = companies.find(c => c.id == idx);

        document.getElementById('companyInfo').textContent = 
            `Selected: ${company.companyName || company.name}\nCreated: ${company.createDateUS}`;
        document.getElementById('companyname').value = company.companyName;

        fetch("{{ route('forms.action',$form->id) }}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            },
            body: JSON.stringify({
                action_type: "get_contacts",
                company_id: company.id })
        })
        .then(res => res.json())
        .then(data => {
            const contactName = document.getElementById('contactName');
            const contactEmail = document.getElementById('contactEmail');
            contactName.innerHTML = '<option value="">Select contact name...</option>';
            contactEmail.innerHTML = '<option value="">Select contact email...</option>';

            contacts = data.contacts;

            data.contacts.forEach(c => {
                const fullAddress = `${c.addressLine ?? ''} ${c.addressLine1 ?? ''} ${c.city ?? ''} ${c.zipCode ?? ''} ${c.state ?? ''}`;
                document.getElementById('contactaddress').value = fullAddress;
                document.getElementById('contactnumber').value = c.phone ?? '';

                contactName.innerHTML += `<option value="${c.name}">${c.name}</option>`;
                contactEmail.innerHTML += `<option value="${c.email}">${c.email}</option>`;
            });
            contactName.disabled = false;
            contactEmail.disabled = false;
        });
    }

    function updateContactInfo(){
        const idx = document.getElementById('contactEmail').value;
        const cont = contacts.find(c => c.email == idx);
        if (cont) {
            document.getElementById('contactid').value = cont.id;
        }
    }
</script>

@if($autotask_oppr == '1')
<script>
    function fetchOpportunities() {
        fetch("{{ route('forms.action',$form->id) }}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            },
            body: JSON.stringify({
                action_type: "fetch_opportunities",
            })
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                opportunities = data.opportunities;
                const select = document.getElementById('opportunitySelect');
                select.innerHTML = '<option value="">Select an opportunity...</option>';
                opportunities.forEach(o => {
                    const option = document.createElement('option');
                    option.value = o.id;
                    option.textContent = `${o.title || 'Untitled'} - ${o.createDateUS}`;
                    select.appendChild(option);
                });
                select.disabled = false;
            }
        });
    }
    fetchOpportunities();
</script>
@endif
@endsection