@extends('layouts.master')
@section('content')
    <section class="common-inner-page-banner" style="background-image: url({{ asset('frontend/assets/images/digital-package-banner.png') }}">
        <div class="custom-container">
            <div class="left-info">
                <figure data-aos="fade-up" data-aos-delay="50" data-aos-duration="500" data-aos-once="true">
                    <div class="icon-container">
                        <span><img src="{{ asset('frontend/assets/images/internet-3-svgrepo-com.svg') }}"></span>
                    </div>
                    <figcaption>My <span>Account</span>
                    </figcaption>
                </figure>
            </div>
            <div class="center-info">
                <ul class="prev-nav-menu" data-aos="fade-up" data-aos-delay="100" data-aos-duration="1000"
                    data-aos-once="true">
                    <li><a href="/">Home</a></li>
                    <li><a>Digital Packages</a></li>
                </ul>
            </div>
            <div class="call-info" data-aos="fade-up" data-aos-delay="150" data-aos-duration="1500" data-aos-once="true">
                <div class="icon-container">
                    <img src="{{ asset('frontend/assets/images/ic_baseline-phone.svg') }}">
                </div>
                <div class="text-box">
                    <p>Free Consultations 24/7</p>
                    <h4><a href="tel:020 3002 0032">020 3002 0032</a></h4>
                </div>
            </div>
        </div>
    </section>

    <section class="sectiongap legal rrr fix-container-width ">
        <div class="container">
            <div class="companies-wrap">
                <div class="row woo-account">
                    @include('layouts.navbar')
                    <div class="col-md-12">
                        <div class="particulars-form-wrap">
                            @php
                            $company_form = App\Models\companyFormStep::where('order',$_GET['order'])->where('section','company_formation')->first();
                            $buisness_ess = App\Models\companyFormStep::where('order',$_GET['order'])->where('section','BusinessEssential')->first();
                            $summary = App\Models\companyFormStep::where('order',$_GET['order'])->where('section','Review')->first();


                        @endphp
            <div class="particulars-form-wrap">
                <div class="particulars-top-step">
                    <div class="top-step-items active">
                        <strong>1.Company Formation</strong>
                        <span>Details about your company</span>
                    </div>
                    @if ($buisness_ess)
                        <div class="top-step-items">
                            <a href="{{ route('business-essential.index', ['order' => $_GET['order'] ?? '', 'section' => 'BusinessEssential', 'step' => 'business-banking']) }}" > <strong>2.Business Essentials</strong>  </a>
                            <span>Products & Services</span>
                        </div>

                    @else
                        <div class="top-step-items">
                            <strong>2.Business Essentials</strong>
                            <span>Products & Services</span>
                        </div>
                    @endif

                    @if ($summary)
                        <div class="top-step-items ">
                           <a href="{{route('review.index', ['order' => $_GET['order'] ?? '', 'section' => 'Review', 'step' => 'review'])}}"> <strong>3.Summary</strong></a>
                            <span>Details about your order</span>
                        </div>
                    @else
                        <div class="top-step-items ">
                            <strong>3.Summary</strong>
                            <span>Details about your order</span>
                        </div>
                    @endif


                    <div class="top-step-items">
                        <strong>4.Delivery & Partner Services</strong>
                        <span>Delivery & Partner Details</span>
                    </div>
                </div>
                            <div class="particulars-bottom-step">
                                @php
                                    $particular_step = App\Models\companyFormStep::where('order',$_GET['order'])->where('section','company_formation')->where('step','particulars')->first();
                                @endphp

                                @if ($particular_step)
                                    <div class="bottom-step-items active">
                                        <img src="{{ asset('frontend/assets/images/active-tick.svg') }}" alt="">
                                        <p>
                                            <a href="{{ route('companie-formation', ['order' => $_GET['order'] ?? '','section' => 'Company_formaction','step' => 'particulars', 'data' => 'previous']) }}" style="color: #ffffff;"> Particulars</a>
                                        </p>
                                    </div>
                                @else
                                    <div class="bottom-step-items">
                                        <img src="{{ asset('frontend/assets/images/inactive-tick.svg') }}" alt="">
                                        <p>
                                             Particulars
                                        </p>
                                    </div>

                                @endif


                                @php
                                    $register_step = App\Models\companyFormStep::where('order',$_GET['order'])->where('section','company_formation')->where('step','register-address')->first();
                                @endphp
                                @if ($register_step)
                                    <div class="bottom-step-items active">
                                        <img src="{{ asset('frontend/assets/images/active-tick.svg') }}" alt="">
                                        <p>
                                            <a href="{{ route('registered-address', ['order' => $_GET['order'] ?? '', 'section' => 'Company_formaction', 'step' => 'register-address']) }}" style="color: #ffffff;"> Registered Address </a>
                                        </p>
                                    </div>
                                @else
                                    <div class="bottom-step-items active">
                                        <img src="{{ asset('frontend/assets/images/active-tick.svg') }}" alt="">
                                        <p>
                                             Registered Address
                                        </p>
                                    </div>

                                @endif

                                @php
                                    $buisness_step = App\Models\companyFormStep::where('order',$_GET['order'])->where('section','company_formation')->where('step','business-address')->first();
                                @endphp

                                @if ($buisness_step)
                                    <div class="bottom-step-items active">
                                        <img src="{{ asset('frontend/assets/images/active-tick.svg') }}" alt="">
                                        <p>
                                            <a href="{{ route('choose-address-business', ['order' => $_GET['order'] ?? '', 'section' => 'Company_formaction', 'step' => 'business-address']) }}" style="color: #ffffff;"> Business Address </a>
                                        </p>
                                    </div>

                                @else
                                    <div class="bottom-step-items active">
                                        <img src="{{ asset('frontend/assets/images/active-tick.svg') }}" alt="">
                                        <p>Business Address</p>
                                    </div>

                                @endif

                                @php
                                    $appointment_step = App\Models\companyFormStep::where('order',$_GET['order'])->where('section','company_formation')->where('step','appointments')->first();
                                @endphp

                                @if ($appointment_step)
                                    <div class="bottom-step-items active">
                                        <img src="{{ asset('frontend/assets/images/active-tick.svg') }}" alt="">
                                        <p>
                                            <a href="{{ route('appointments', ['order' => $_GET['order'] ?? '', 'section' => 'Company_formaction', 'step' => 'appointments']) }}" style="color: #ffffff;">Appointment </a>
                                        </p>
                                    </div>
                                @else
                                    <div class="bottom-step-items active">
                                        <img src="{{ asset('frontend/assets/images/active-tick.svg') }}" alt="">
                                        <p>Appointment</p>
                                    </div>

                                @endif

                                @php
                                    $doc_step = App\Models\companyFormStep::where('order',$_GET['order'])->where('section','company_formation')->where('step','document')->first();
                                @endphp

                                @if ($doc_step)
                                    <div class="bottom-step-items active">
                                        <img src="{{ asset('frontend/assets/images/active-tick.svg') }}" alt="">
                                        <p>
                                            @if( !empty($companyFormationStep->step_name) )
                                                <a href="{{ route('companyname.document', ['order' => $_GET['order'] ?? '', 'section' => 'Company_formaction', 'step' => 'document']) }}" style="color: #ffffff;"> Document </a>
                                            @else
                                                Document
                                            @endif
                                        </p>
                                    </div>
                                @else
                                    <div class="bottom-step-items active">
                                        <img src="{{ asset('frontend/assets/images/active-tick.svg') }}" alt="">
                                        <p>Document</p>
                                    </div>
                                @endif


                            </div>
                            <div class="form-wrap">
                                <div class="form-info-block">
                                    <h4>How would you like to receive your company documents? </h4>
                                    <div class="docu-info">
                                        <p>The paper industry is the 5th biggest consumer of energy in the world. As a Carbon Neutral Business, we provide our customers with a green option and a standard option with regards how they receive their company documents.</p>
                                        <p>Please select your delivery preference below:</p>
                                    </div>
                                    <div class="document-list-wrap">
                                        <div class="document-list">
                                            <div class="box">
                                                <p><strong style="color: green;">GREEN:</strong> Deliver my documents digitally by email only </p>
                                            </div>
                                            <div class="box text-center">
                                                <p><strong>FREE</strong></p>
                                            </div>
                                            <div class="box text-right">
                                                <div class="switch-slider-wrap">
                                                    <label class="toggleSwitch large" onclick="">
                                                        <input type="checkbox" name="green" value="green" id="green" {{ (empty($legalDocument)) ? 'checked' : '' }} {{ (!empty($legalDocument) && $legalDocument == 'generic_article|green') ? 'checked' : '' }} />
                                                        <span>
                                                            <span>Select</span>
                                                            <span>Select</span>
                                                        </span>
                                                        <a></a>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="document-list">
                                            <div class="box">
                                                <p><strong style="color: #0070c0;">STANDARD:</strong> Deliver my documents digitally by email and a printed copy by post </p>
                                            </div>
                                            <div class="box text-center"></div>
                                            <div class="box text-right">
                                                <div class="switch-slider-wrap">
                                                    <label class="toggleSwitch large" onclick="">
                                                        <input type="checkbox" name="standard" value="standard" id="standard" {{ (!empty($legalDocument) && $legalDocument == 'generic_article|standard') ? 'checked' : '' }}  />
                                                        <span>
                                                            <span>Select</span>
                                                            <span>Select</span>
                                                        </span>
                                                        <a></a>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-info-block pt-4">
                                    <h4>Legal Documents</h4>
                                    <div class="docu-info">
                                        <p>
                                            The articles of association is a document which, along with the memorandum of association forms the company’s constitution, defines the responsibilities of the directors, the kind of business to be undertaken, and the means by which the shareholders exert control over the board of directors.
                                        </p>
                                    </div>
                                    <form id="company-document" action="{{ route('companyname.document') }}" method="post">
                                        <div class="document-list-wrap">
                                            <div class="document-list">
                                                <div class="box">
                                                    <p>Generic Limited by Share Articles</p>
                                                </div>
                                                <div class="box text-center">
                                                    <p><strong>FREE</strong></p>
                                                </div>
                                                <div class="box text-right">
                                                    <div class="switch-slider-wrap">
                                                        <label class="toggleSwitch large">
                                                            <input type="checkbox" name="generic_article" value="generic_article" id="toggle1" checked/>
                                                            <span>
                                                                <span>Select</span>
                                                                <span>Select</span>
                                                            </span>
                                                            <a></a>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                            @csrf
                                            <input type="hidden" name="order_id" id="order_id" value="{{ $orderId }}">
                                            <input type="hidden" name="company_id" id="company_id" value="{{ $companyId }}">
                                            <input type="hidden" name="legal_document" id="legal_document" value="{{ (empty($legalDocument) || $legalDocument == 'generic_article|green') ? 'generic_article|green' : 'generic_article|standard' }}">
                                            <input type="hidden" name="section_name" value="company_formation">
                                            <input type="hidden" name="step_name" value="document">

                                            <div class="document-list" hidden>
                                                <div class="box">
                                                    <p>Byspoke article of association</p>
                                                </div>
                                                <div class="box text-center"></div>
                                                <div class="box text-right">
                                                    <div class="switch-slider-wrap">
                                                        <label class="toggleSwitch large">
                                                            <input type="checkbox" name="byspoke_article" value="byspoke_article" id="toggle2" {{ (!empty($legalDocument) && $legalDocument == 'byspoke_article') ? 'checked' : '' }} />
                                                            <span>
                                                                <span>Select</span>
                                                                <span>Select</span>
                                                            </span>
                                                            <a></a>
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                    <div hidden class="byspoke-upload-file" id="file-upload" style="display: {{ (!empty($legalDocument) && $legalDocument == 'byspoke_article') ? 'block' : 'none' }}">
                                        <h3>Byspoke article of association</h3>
                                        <div class="field-wrap">
                                            <input type="file" name="document" id="fileInput" class="fiel">
                                            <button class="btn attach_file">Attach</button>
                                            @if(!empty($mediaDoc['name']))
                                                <a href="{{ $mediaDoc['url'] }}" class="btn view_file" target="_blank">View</a>
                                                <input type="hidden" name="document_type" id="document_type" value="true">
                                            @else
                                                <input type="hidden" name="document_type" id="document_type" value="false">
                                            @endif
                                        </div>
                                    </div>
                                    <div class="step-btn-wrap mt-4" style="justify-content: space-between">
                                        <a href="{{ route('appointments', ['order' => $_GET['order'] ?? '', 'section' => 'Company_formaction', 'step' => 'appointments']) }}">
                                        <button class="btn prev-btn"><img src="{{ asset('frontend/assets/images/btn-left-arrow.png') }}" alt=""> Previous: Appointment</button></a>
                                        <button class="btn save-next">Save &amp; Continue <img src="{{ asset('frontend/assets/images/btn-right-arrow.png') }}" alt=""></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('script')
{{-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function() {
        // When the first toggle is clicked
        $("#toggle1").click(function() {
            $(this).prop("checked",true)
        });

        // When the second toggle is clicked
        $("#toggle2").click(function() {
            // If it's turned on, turn off the first toggle
            if ($(this).prop("checked") == false) {
                $("#toggle1").prop("checked", true);
                $("#legal_document").val('generic_article');
                $("#file-upload").hide();
            } else {
                $("#toggle1").prop("checked", false);
                $("#legal_document").val('byspoke_article');
                $("#file-upload").show();
            }
        });

        $("#green").click(function() {
            // alert($(this).prop("checked"));
            // If it's turned on, turn off the second toggle
            if ($(this).prop("checked") == false) {
                $("#standard").prop("checked", true);
                $("#legal_document").val('generic_article|standard');
            } else {
                $("#standard").prop("checked", false);
                $("#legal_document").val('generic_article|green');
            }
            // console.log($("#legal_document").val());
        });

        // When the second toggle is clicked
        $("#standard").click(function() {
            // If it's turned on, turn off the first toggle
            if ($(this).prop("checked") == false) {
                $("#green").prop("checked", true);
                $("#legal_document").val('generic_article|green');
            } else {
                $("#green").prop("checked", false);
                $("#legal_document").val('generic_article|standard');

            }
            // console.log($("#legal_document").val());

        });

        $(".attach_file").click(function() {
            const fileInput = document.getElementById("fileInput");
            $('.attach_file').prop('disabled', true).text('Attaching...');

            // Validate file type
            const allowedFileTypes = ['pdf', 'doc', 'docx'];

            if(!fileInput.files[0]) {
                $('.attach_file').prop('disabled', false).text('Attach');
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Please select a file'
                })
                return false;
            }
            const fileName = fileInput.files[0]?.name.toLowerCase();
            const fileType = fileName.split('.').pop();

            if (fileInput.files.length > 0 && allowedFileTypes.includes(fileType)) {
                const maxFileSizeMB = 2;
                const maxFileSizeBytes = maxFileSizeMB * 1024 * 1024;
                const fileSizeBytes = fileInput.files[0].size;

                if (fileSizeBytes <= maxFileSizeBytes) {
                    const formData = new FormData();
                    formData.append("document", fileInput.files[0]);
                    formData.append("order_id", $('#order_id').val());
                    formData.append("model_id", $('#company_id').val());
                    formData.append("legal_document", $('#legal_document').val());

                    axios.post("/company-document", formData, {
                        headers: {
                            "Content-Type": "multipart/form-data"
                        }
                    })
                    .then(function(response) {
                        // console.log("File uploaded successfully:", response.data);
                        $('.attach_file').prop('disabled', false).text('Attach');
                        Swal.fire({
                            icon:'success',
                            title: 'File uploaded successfully',
                            showConfirmButton: false,
                            timer: 1500
                        });
                        setTimeout(function() {
                            window.location.reload();
                        }, 1550);
                    })
                    .catch(function(error) {
                        console.error("Error uploading file:", error);
                    })
                    .finally(function () {
                        // Re-enable the button and change the text back to "Attach"
                        $('.attach_file').prop('disabled', false).text('Attach');
                    });
                } else {
                    Swal.fire(
                        'File too large',
                        'File size exceeds 2MB.',
                        'error'
                    );
                    $('.attach_file').prop('disabled', false).text('Attach');
                }
            } else {
                // Show error message for invalid file type
                Swal.fire(
                    'Invalid File Type',
                    'Please select a PDF, DOC, or DOCX file.',
                    'error'
                );
                $('.attach_file').prop('disabled', false).text('Attach');
            }
        });


        $(".save-next").click(function(e) {
            e.preventDefault();
            if($('#legal_document').val() == 'byspoke_article' && $('#document_type').val() == 'false') {
                Swal.fire({
                    icon: 'error',
                    title: 'Oops...',
                    text: 'Please upload document',
                })
                return false;
            } else {
                console.log('success');

                $("#company-document").submit();
            }
        });
    });
</script>
@endsection