@extends('dashboard.base')

@section('content')
<div class="container my-4">
    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
    @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <form action="{{ route('product.certification.store') }}" method="POST">
        @csrf
        <div class="card">
            <div class="card-header">
                <h3>Product Certification</h3>
            </div>
            <div class="card-body">
                <!-- Product Certification Section -->
                <div class="row mb-4">
                    <div class="col-auto">
                        <label for="product_type" class="fw-bold">Product certification for?</label>
                    </div>
                    <div class="col-auto"> 
                        <div class="form-check form-check-inline">
                            <input type="radio" class="form-check-input" id="local" name="product_type" value="local" style="accent-color: #ff6c2f;" checked onchange="toggleRequestForm()">
                            <label for="local" class="form-check-label">Local</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input type="radio" class="form-check-input" id="imports" name="product_type" value="imports" style="accent-color: #ff6c2f;" onchange="toggleRequestForm()">
                            <label for="imports" class="form-check-label">Imports</label>
                        </div>
                    </div>
                </div>

                <!-- section one -->
                <div id="section_one">
                    <!-- Navigation Buttons -->
                   <div class="row mb-4">
                    <div class="col-12 d-flex justify-content-between">
                        <button type="button" class="btn btn-outline-secondary w-100" id="btn-section-1" style="background-color: #ff6c2f; color: white;" onclick="showSection(1)">1. Firm Details</button>
                        <button type="button" class="btn btn-outline-secondary w-100 mx-2" id="btn-section-2" onclick="showSection(2)">2. Factory/Premises Address</button>
                        <button type="button" class="btn btn-outline-secondary w-100 mx-2" id="btn-section-3" onclick="showSection(3)">3. Other Details</button>
                        <button type="button" class="btn btn-outline-secondary w-100" id="btn-section-4" onclick="showSection(4)">4. Payment Details</button>
                    </div>
                     </div>

                <!-- Firm Details Section -->
                <div id="section-1" class="form-section" style="display: block;">
                    <div class="row mb-4">
                        <div class="col-md-6">
                            
                               
                            <div class="mb-3">
                                <label for="name_of_firm" class="form-label">Name of Firm</label>
                                <input type="text" class="form-control" id="name_of_firm" name="name_of_firm" placeholder="Name Of Firm">
                            </div>
                            
                            <div class="mb-3">
                                <label for="reg_number" class="form-label">Reg. Number</label>
                                <input type="text" class="form-control" id="reg_number" name="reg_number"  placeholder="Reg Number">
                            </div>
                            <div class="mb-3">
                                <label for="mra" class="form-label">MRA (TPin)</label>
                                <input type="text" class="form-control" id="mra" name="mra"  placeholder="MRA">
                            </div>
                            <div class="mb-3">
                                <label for="street" class="form-label">Street</label>
                                <input type="text" class="form-control" id="street_1" name="street_1"  placeholder="Street">
                            </div>
                            <div class="mb-3">
                                <label for="email" class="form-label">E-mail</label>
                                <input type="email" class="form-control" id="email_1" name="email_1"  placeholder="Email">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="address" class="form-label">Address</label>
                                <textarea class="form-control" id="address_1" name="address_1" rows="2"  placeholder="Address"></textarea>
                            </div>
                            <div class="mb-3">
                                <label for="city" class="form-label">City</label>
                                <input type="text" class="form-control" id="city_1" name="city_1"  placeholder="City">
                            </div>
                            <div class="mb-3">
                                <label for="plot_no" class="form-label">Plot No.</label>
                                <input type="text" class="form-control" id="plot_no_1" name="plot_no_1"  placeholder="Plot Number">
                            </div>
                            <div class="mb-3">
                                <label for="phone" class="form-label">Phone</label>
                                <input type="text" class="form-control" id="phone_1" name="phone_1"  placeholder="Phone">
                            </div>
                        </div>
                        
                    </div>
                    <!-- Location Section -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <label for="location" class="form-label">Location</label>
                            <div id="map" class="rounded" style="height: 300px; border: 1px solid #ddd;"></div>
                        </div>
                    </div>
                    <!-- Footer Buttons -->
                    <div class="card-footer d-flex justify-content-end">
                        <button type="button" id="next-button" class="btn me-2" style="margin-right: 10px; background-color: #ff6c2f; color: white" onclick="goToNextSection()">Next</button>
                        <button type="button" class="btn btn-secondary px-4 ms-2">Cancel</button>
                    </div>
                </div>

                <!-- Factory/Premises Address Section -->
                <div id="section-2" class="row mb-4 form-section" style="display: none;">
                <div class="row mb-4 container">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="name_of_factory" class="form-label">Name of Factory</label>
                                <input type="text" class="form-control" id="name_of_factory" name="name_of_factory"  placeholder="Name Of Factory">
                            </div>
                            <div class="mb-3">
                                <label for="telephone" class="form-label">Telephone</label>
                                <input type="text" class="form-control" id="telephone" name="telephone"  placeholder="Telephone">
                            </div>
                            <div class="mb-3">
                                <label for="address" class="form-label">Address</label>
                                <textarea class="form-control" id="address_2" name="address_2" rows="2"  placeholder="Address"></textarea>
                            </div>
                            
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                    <label for="email" class="form-label">E-mail</label>
                                    <input type="email" class="form-control" id="email_2" name="email_2"  placeholder="Email">
                            </div>    
                               
                            <div class="mb-3">
                                <label for="street" class="form-label">Street</label>
                                <input type="text" class="form-control" id="street_2" name="street_2"  placeholder="Street">
                            </div>
                            <div class="mb-3">
                                <label for="plot_no_2" class="form-label">Plot No.</label>
                                <input type="text" class="form-control" id="plot_no_2" name="plot_no_2"  placeholder="Plot Number">
                            </div> 
                            <div class="mb-3"> 
                                <label for="city" class="form-label">City</label> 
                                <input type="text" class="form-control" id="city_2" name="city_2"  placeholder="City">
                            </div>
                            
                            
                        </div>
                    </div>
                    <!-- Footer Buttons -->
                    <div class="card-footer d-flex justify-content-end">
                        <button type="button" id="next-button" class="btn me-2" style="margin-right: 10px; background-color: #ff6c2f; color: white" onclick="goToNextSection()">Next</button>
                        <button type="button" class="btn btn-secondary px-4 ms-2">Cancel</button>
                    </div>
                </div>

                <!-- Other Details Section -->
                <div id="section-3" class="row mb-4 form-section" style="display: none;">
                    <div class="col-12">
                        <!-- Other Details inputs here -->
                         <div style="border: 1px solid orange; padding: 8px;">
                            <p style="font-weight: bold;">Details of person responsible for hygienic conditions in the applicant's factory or primises</p>
                         </div>
                         <br>
                         <div class="mb-3">
                                <label for="full_name" class="form-label">Name</label>
                                <input type="text" class="form-control" id="full_name" name="full_name"  placeholder="Name">
                        </div>
                        <div class="mb-3">
                                <label for="title" class="form-label">Title</label>
                                <input type="text" class="form-control" id="title" name="title"  placeholder="Title">
                        </div>
                        <div class="mb-3">
                                <label for="description" class="form-label">Brief Description</label>
                                <textarea class="form-control" id="description" name="description" rows="2"  placeholder="Brief description"></textarea>
                        </div>
                        <div class="mb-3">
                                <label for="assessment" class="form-label">Initial Assessment</label>
                                <input type="date" class="form-control" id="assessment" name="assessment"  placeholder="Initial assessment">
                        </div>
                        <div class="mb-3">
                                <label for="marks" class="form-label">Trade Marks</label>
                                <input type="text" class="form-control" id="marks" name="marks"  placeholder="Trade marks">
                        </div>
                    </div>
                    <!-- Footer Buttons -->
                    <div class="card-footer d-flex justify-content-end">
                        <button type="button" id="next-button" class="btn me-2" style="margin-right: 10px; background-color: #ff6c2f; color: white" onclick="goToNextSection()">Next</button>
                        <button type="button" class="btn btn-secondary px-4 ms-2">Cancel</button>
                    </div>
                </div>

                <!-- Payment Details Section -->
                <div id="section-4" class="row mb-4 form-section" style="display: none;">
                    <div class="col-12">
                        <!-- Payment Details inputs here -->
                         <center>
                            <div>
                                <h2 style="font-weight: bold">Payment Options</h2>
                            </div>
                            <div class="row container justify-content-center">
                                <div class="col-md-3 card-border">
                                    <img src="assets/img/logo/airtelMoney.png" />
                                </div>
                                <div class="col-md-3 card-border">
                                    <img src="assets/img/logo/tnmMpamba.png" />
                                </div>
                                <div class="col-md-3 card-border">
                                    <img src="assets/img/logo/visa.png" />
                                </div>

                            </div>


                         </center>
                         
                        
                    </div>
                    <!-- Footer Buttons -->
                    <div class="card-footer d-flex justify-content-end">
                        <button type="submit" id="next-button" class="btn me-2" style="margin-right: 10px; background-color:rgb(12, 153, 47); color: white" >Submit</button>
                        <button type="button" class="btn btn-secondary px-4 ms-2">Cancel</button>
                    </div>
                </div>


                </div>
                

                 <!-- SECTION TWO -->
                <div id="section_two">
                <div class="row mb-4">
                    <div class="col-12 d-flex justify-content-between">
                        <button type="button" class="btn btn-outline-secondary w-100" id="btn-section-1" style="background-color: #ff6c2f; color: white;" onclick="showSection(11)">1</button>
                        <button type="button" class="btn btn-outline-secondary w-100 mx-2" id="btn-section-2" onclick="showSection(2)">2</button>
                        <button type="button" class="btn btn-outline-secondary w-100 mx-2" id="btn-section-3" onclick="showSection(3)">3</button>
                        <button type="button" class="btn btn-outline-secondary w-100" id="btn-section-4" onclick="showSection(4)">4</button>
                    </div>
                     </div>

                <!-- Firm Details Section -->
                <div id="section-11" class="form-section" style="display: block;">
                    <div class="row mb-4">
                        <div class="col-md-6">
                               
                            <div class="mb-3">
                                <label for="name_of_firm" class="form-label">Import Firm</label>
                                <input type="text" class="form-control" id="name_of_firm" name="name_of_firm" placeholder="Name Of Firm">
                            </div>
                            
                            <div class="mb-3">
                                <label for="reg_number" class="form-label">Reg. Number</label>
                                <input type="text" class="form-control" id="reg_number" name="reg_number"  placeholder="Reg Number">
                            </div>
                            <div class="mb-3">
                                <label for="mra" class="form-label">MRA (TPin)</label>
                                <input type="text" class="form-control" id="mra" name="mra"  placeholder="MRA">  
                            </div>
                            <div class="mb-3">
                                <label for="street" class="form-label">Street</label>
                                <input type="text" class="form-control" id="street_1" name="street_1"  placeholder="Street">
                            </div>
                            <div class="mb-3">
                                <label for="email" class="form-label">E-mail</label>
                                <input type="email" class="form-control" id="email_1" name="email_1"  placeholder="Email">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="address" class="form-label">Address</label>
                                <textarea class="form-control" id="address_1" name="address_1" rows="2"  placeholder="Address"></textarea>
                            </div>
                            <div class="mb-3">
                                <label for="city" class="form-label">City</label>
                                <input type="text" class="form-control" id="city_1" name="city_1"  placeholder="City">
                            </div>
                            <div class="mb-3">
                                <label for="plot_no" class="form-label">Plot No.</label>
                                <input type="text" class="form-control" id="plot_no_1" name="plot_no_1"  placeholder="Plot Number">
                            </div>
                            <div class="mb-3">
                                <label for="phone" class="form-label">Phone</label>
                                <input type="text" class="form-control" id="phone_1" name="phone_1"  placeholder="Phone">
                            </div>
                        </div>
                        
                    </div>
                    <!-- Location Section --> 
                    <div class="row mb-4">     
                        <div class="col-12">  
                            <label for="location" class="form-label">Location</label>
                            <div id="map2" class="rounded" style="height: 300px; border: 1px solid #ddd;"></div>   
                        </div>             
                    </div>
                    <!-- Footer Buttons -->
                    <div class="card-footer d-flex justify-content-end">
                        <button type="button" id="next-button" class="btn me-2" style="margin-right: 10px; background-color: #ff6c2f; color: white" onclick="goToNextSection()">Next</button>
                        <button type="button" class="btn btn-secondary px-4 ms-2">Cancel</button>
                    </div>
                </div>

                </div>     

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

<script>
    
    function toggleRequestForm() {
        const section_one = document.getElementById('section_one');
        const section_two = document.getElementById('section_two');
        const localButton = document.getElementById('local');

        if (localButton.checked) {
            section_one.style.display = 'block';
            section_two.style.display = 'none';
        } else {
            section_one.style.display = 'none';
            section_two.style.display = 'block';
        }
    }
</script>
<style>
     .card-border {
            border: 2px solid #ddd;
            border-radius: 10px;
            padding: 10px;
            margin: 10px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card-border img {
            width: 50%;
            height: 60%;
            border-radius: 10px;
            transition: transform 0.3s ease, filter 0.3s ease;
        }

        .card-border:hover {
            transform: scale(1.1);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }

        .card-border:hover img {
            transform: scale(1.2);
            filter: brightness(1.2);
        }

        
</style>
@endsection

@section('javascript')
<script>
    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -15.8012, lng: 35.0224}, // Coordinates for Malawi Bureau of Standards
            zoom: 15
        });

        // Add a marker for the Malawi Bureau of Standards
        var marker = new google.maps.Marker({
            position: {lat: -15.8012, lng: 35.0224},
            map: map,
            title: 'Malawi Bureau of Standards'
        });

        // defining the second map
        var map2 = new google.maps.Map(document.getElementById('map2'), {
            center: {lat: -15.8012, lng: 35.0224}, // Coordinates for Malawi Bureau of Standards
            zoom: 15
        });

        // Add a marker for the Malawi Bureau of Standards
        var marker2 = new google.maps.Marker({
            position: {lat: -15.8012, lng: 35.0224},
            map: map2,
            title: 'Malawi Bureau of Standards'
        });
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCSSS8uUEXcu34oaCYtbZB1-n-ObQqvnA8&callback=initMap" async defer></script>


<script>
    var currentSection = 1;

    // Function to show selected section
    function showSection(sectionNumber) {
        // Hide all sections
        const sections = document.querySelectorAll('.form-section');
        sections.forEach(section => {
            section.style.display = 'none';
        });

        // Show the selected section
        const sectionToShow = document.getElementById('section-' + sectionNumber);
        if (sectionToShow) {
            sectionToShow.style.display = 'block'; // Show the current section
            currentSection = sectionNumber; // Update the current section number
        }

        // Update navigation button styles
        updateNavigationButtons();
    }

    // Function to go to the next section
    function goToNextSection() {
        if (currentSection < 4) {
            currentSection++;
            showSection(currentSection);
        }
    }

    // Update the navigation button styles based on the current section
    function updateNavigationButtons() {
        for (let i = 1; i <= 4; i++) {
            const button = document.getElementById('btn-section-' + i);
            if (i === currentSection) {
                button.style.backgroundColor = '#ff6c2f';
                button.style.color = 'white';
            } else {
                button.style.backgroundColor = '';
                button.style.color = '';
            }
        }
    }

    // Ensure the first section is visible by default
    document.addEventListener("DOMContentLoaded", function() {
        showSection(1); // Ensure Firm Details is shown when the page loads
    });

    document.addEventListener("DOMContentLoaded", function() {
        showSection(11); // Ensure Firm Details is shown when the page loads
    });
</script>



@endsection