@extends('admin_layouts.main')

@section('main-section')
<div class="content">
    <div class="container-fluid pt-4 px-4">
        <div class="row g-4">
            <div class="col-sm-12 col-xl-12">
                <div class="bg-secondary rounded h-100 p-4">
                    <h6 class="mb-4">Add Project</h6>
                    <form name="project-form" action="{{ route('project_add') }}" method="post" id="project-form"   enctype="multipart/form-data">
                        @csrf
                        <div class="row mb-3">
            <div class="col-md-6">
                <label for="project_by" class="form-label">Project By</label>
                <input class="form-control bg-dark" type="text" name="project_by" id="project_by">
            </div>
            <div class="col-md-6">
                <label for="bde_executive" class="form-label">BDE Executive</label>
                <input class="form-control bg-dark" type="text" name="bde_executive" id="bde_executive">
            </div>
        </div>

        <!-- Business Name and Client Name -->
        <div class="row mb-3">
            <div class="col-md-6">
                <label for="business_name" class="form-label">Business Name</label>
                <input class="form-control bg-dark" type="text" name="business_name" id="business_name">
            </div>
            <div class="col-md-6">
                <label for="client_name" class="form-label">Client Name</label>
                <input class="form-control bg-dark" type="text" name="client_name" id="client_name">
            </div>
        </div>

        <!-- Contact No and Address -->
        <div class="row mb-3">
            <div class="col-md-6">
                <label for="contact_no" class="form-label">Contact No</label>
                <input class="form-control bg-dark" type="text" name="contact_no" id="contact_no">
            </div>
            <div class="col-md-6">
                <label for="address" class="form-label">Address</label>
                <input class="form-control bg-dark" type="text" name="address" id="address">
            </div>
        </div>

        <!-- Client Email and Reference By -->
        <div class="row mb-3">
            <div class="col-md-6">
                <label for="client_email" class="form-label">Client Email</label>
                <input class="form-control bg-dark" type="email" name="client_email" id="client_email">
            </div>
            <div class="col-md-6">
                <label for="reference_by" class="form-label">Reference By</label>
                <input class="form-control bg-dark" type="text" name="reference_by" id="reference_by">
            </div>
        </div>

        <!-- Services and Website Type -->
        <div class="row mb-3">
            <div class="col-md-6">
                <label for="services" class="form-label">Services</label>
                <input class="form-control bg-dark" type="text" name="services" id="services">
            </div>
            <div class="col-md-6">
                <label for="website_type" class="form-label">Website Type</label>
                <select class="form-control bg-dark" name="website_type" id="website_type">
                    <option value="">Select Website Type</option>
                    <option value="No-Website">No Website</option>
                    <option value="Static">Static Website</option>
                    <option value="Dynamic">Dynamic Website</option>
                </select>
            </div>
        </div>

        <!-- Promotion and Account Access -->
        <div class="row mb-3">
            <div class="col-md-6">
                <label for="project_type" class="form-label">Project Type</label>
                <input class="form-control bg-dark" type="text" name="project_type" id="services">
            </div>
            <div class="col-md-6">
                <label for="account_access" class="form-label">Account Access</label>
                <input class="form-control bg-dark" type="text" name="account_access" id="account_access">
            </div>
        </div>

        <!-- Others and GST -->
        <div class="row mb-3">
            <div class="col-md-6">
                <label for="others" class="form-label">Others</label>
                <input class="form-control bg-dark" type="text" name="others" id="others">
            </div>
            <div class="col-md-6">
                <label for="gst" class="form-label">GST</label>
                <input class="form-control bg-dark" type="text" name="gst" id="gst">
            </div>
        </div>

        <!-- Total Package and Amount Received -->
        <div class="row mb-3">
            <div class="col-md-6">
                <label for="total_package" class="form-label">Total Package</label>
                <input class="form-control bg-dark" type="number" name="total_package" id="total_package">
            </div>
            <div class="col-md-6">
                <label for="amount_recieve" class="form-label">Amount Receive</label>
                <input class="form-control bg-dark" type="number" name="amount_recieve" id="amount_recieve">
            </div>
        </div>

        <!-- Balance Remaining -->
        <div class="row mb-3">
            <div class="col-md-6">
                <label for="balance_remaing" class="form-label">Balance Remaining</label>
                <input class="form-control bg-dark" type="number" name="balance_remaing" id="balance_remaing">
            </div>
        </div>

        <button type="submit" class="btn btn-primary">ADD</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const scriptURL = 'https://script.google.com/macros/s/AKfycbwB40HaE53GFLBOhtz28K3qiFrxyOekjJOYxhiMqIORqP53WHmCjiMKx4jB7bY3ye1f/exec';
    const form = document.forms['project-form'];

    form.addEventListener('submit', function(e) {
        e.preventDefault();

        // First, handle the Laravel form submission for mailing
        // Create a new FormData object to send the form data to the Laravel route
        const formData = new FormData(form);

        // Use fetch to send data to the Laravel server (email route)
        fetch(form.action, {
            method: 'POST',
            body: formData
        })
        .then(response => {
            // You can process any server response if necessary
            return response.json(); // If your Laravel route returns a JSON response
        })
        .then(data => {
            // Display confirmation message after successful submission (for mailing)
            alert('Thank you! Your form has been submitted successfully.');
        })
        .catch(error => {
            console.error('Error submitting form to Laravel server!', error.message);
        });

        // Now, send the same form data to Google Sheets via Google Apps Script
        fetch(scriptURL, {
            method: 'POST',
            body: formData
        })
        .then(response => {
            // Optional: you can display a success message or handle response
            console.log('Data sent to Google Sheets successfully.');
        })
        .catch(error => {
            console.error('Error sending data to Google Sheets!', error.message);
        })
        .finally(() => {
            // Reload the page after both submissions are complete
            location.reload();
        });
    });
</script>

@endsection