@extends('layouts.app')
@section('content')
    <div class="container prices-container">
        <div style="text-align: center; padding-bottom: 6px;">
            Select category to view prices.
        </div>
        <div>
            {{-- <select id="price_services" name="price_services" class="form-control"
                style="max-width: fit-content; appearance: auto">

                <option value="{{null}}"> All </option>
                @foreach ($provider_svcs as $svc) 
                
                    <option value="{{ $svc->id }}">{{ $svc->service }}</option>
                @endforeach
            </select> --}}
        </div>
        <div id="filter_toggle_buttons" style="text-align: center">
        @foreach ($provider_svcs as $svc)
            <button id="{{$svc->service}}-button" value="{{$svc->id}}" type="button" class="btn knowmad_btn knowmad_btn_blue_border filterBtn" data-bs-toggle="button">
                {{$svc->service}}
            </button>
        @endforeach
        {{-- We are setting the value through the filterTables function set to the selected provider svc id
             so we can get the relevant service options --}}
        <input type="hidden" id="price_services" > 
        </div>

        <hr />
        <div class="row margin-top-10">
            <div class="d-none d-lg-block col-7" style="margin-inline: auto;">
                
                    <div class="featured-box featured-box-secundary" style="height: auto; margin-top: unset">
                        <div class="box-content" style="padding-top: 10px; min-height: 582px;">
                            <h4 class="text-bold" style="margin-top: 25px;">Prices</h4>
                            <div id="prices">
                                @foreach($services as $sp)
                                    <div class="service-rows row hide" data-provider_svc_id="{{ $sp->provider_svc_id }}">
                                        <div class="form-group price">
                                            <div class="col-sm-12 col-md-8">
                                                <label class="font-normal" style="font-size: 21px !important">
                                                    {{ $sp->service }}
                                                </label>
                                            </div>
                                            <div class="col-sm-12 col-md-4">
                                                <label class="font-normal" style="font-size: 21px!important">
                                                    {{ "$" . $sp->price . ' per word' }}
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                
            </div>
            {{-- <div id="calc-wrapper" style="">
                <button class="calculator-button" style="">
                    <div class="icon">
                        <i class="fa fa-solid fa-calculator">Icon</i>
                    </div>
                </button>
                <div class="pricingCal" id="pricingCal" style="display:hide; right: 0; max-width: 500px; margin: unset;">

                    @include('partials.pricingcalculator', ['currency' => $currency])
                </div>
            </div> --}}
            <div class="col-lg-5 mb-2 pricingCal" id="pricingCal"
                style="max-width: 500px; margin-inline: auto;">

                @include('partials.pricingcalculator', ['currency' => $currency])
            </div>
        </div>
        <div class="d-lg-none">
                
            <div class="featured-box featured-box-secundary" style="height: auto; margin-top: unset">
                <div class="box-content" style="padding-top: 10px;">
                    <h4 class="text-bold" style="margin-top: 25px;">Prices</h4>

                    <div id="pricesMob">
                        @foreach($services as $sp)
                        
                            <div class="service-rows row" data-provider_svc_id="{{ $sp->provider_svc_id }}">
                                <div class="form-group price">
                                    <div class="col-sm-12 col-md-8">
                                        <label class="font-normal" style="font-size: 21px !important">
                                            {{$sp->service}}
                                        </label>
                                    </div>
                                    <div class="col-sm-12 col-md-4">
                                        <label class="font-normal" style="font-size: 21px!important">
                                            {{ "$" . $sp->price . ' per word' }}
                                        </label>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        
    </div>
        <div class="row">
            <hr class="tall" />
        </div>
        <div style="margin-bottom: 50px;">
            @foreach ($page_specials as $special) 
        
                <div class="row">
                                    </div>

                <div class="col-md-offset-2">
                    <h3 class="specials-box col-xs-12 col-sm-12">{{ $special->page_content_name}}</h3>
                    <div class="col-md-7">
                        {{-- <div class="feature-box">
                        <div class="feature-box-icon">
                            <i class="icon icon-money"></i>
                        </div>
                    </div> --}}
                        <p>
                            {{ strip_tags($special->page_content_description) }}
                        </p>
                    </div>
                    <div class="col-md-3">
                        <div class="get-started">
                            <a class="btn knowmad_btn_yellow_border knowmad_btn" href="/editors">Choose an Editor</a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
       
    </div>

@stop

@push('footer_js')
    <script>
        // for later addition of dropdown calculator
        ////////////
        /* const btnToggle = document.querySelector('.calculator-button');
        const priceCalc = document.querySelector('#pricingCal');

        btnToggle.addEventListener('click', () => {
            if (priceCalc.style.display === 'none') {
                priceCalc.style.display = 'block';
            } else {
                priceCalc.style.display = 'none';
            }
            
            //priceCalc.classList.toggle("calc-hide");
        }) */
        ////////////
        
        ////////////
        // Graham - table filter
        // 

        let provider_svc_select = document.querySelector("#price_services");
        let priceList = document.querySelector("#prices");
        let priceListMobile = document.querySelector("#pricesMob")
        let filterToggleButtons = document.querySelector("#filter_toggle_buttons");


        const priceServicesSelect = document.getElementById('price_services');

/*         const editingBtn = document.getElementById('Editing-button');
        const writingBtn = document.getElementById('Writing-button');
        const rewritingBtn = document.getElementById('-button'); */

        let filterBtns = filterToggleButtons.querySelectorAll(".btn");
        for (let btn of filterBtns) {
            btn.addEventListener("click", filterTable);
        }

        // Set initial filter to the first (editing) prices
        window.onload = function() {
            filterBtns[0].click();
        }

        /** @type HTMLSelectElement */
        let service_options_select = document.querySelector("#pricing_calculator");

        
        // Toggleable filter buttons for price list
/*         editingBtn.addEventListener("click", filterTable );
        writingBtn.addEventListener("click", filterTable );
        rewritingBtn.addEventListener("click", filterTable ); */


        // When numOfWords changes, filter the results again
        let wordCountInput = document.getElementById('numOfWords');
        

/* 
        editingBtn.addEventListener("click", function() {
            let filterBtns = filterToggleButtons.querySelectorAll(".btn");
            for (let el of filterBtns) {
                el.classList.remove('knowmad_btn_blue');
                el.classList.add('knowmad_btn_blue_border');
            }
            if (!editingBtn.classList.contains('knowmad_btn_blue')) {
                editingBtn.classList.remove('knowmad_btn_blue_border');
                editingBtn.classList.add('knowmad_btn_blue');
            }
        });

        writingBtn.addEventListener("click", function() {
            let filterBtns = filterToggleButtons.querySelectorAll(".btn");
            for (let el of filterBtns) {
                el.classList.remove('knowmad_btn_blue');
                el.classList.add('knowmad_btn_blue_border');
            }
            if (!writingBtn.classList.contains('knowmad_btn_blue')) {
                writingBtn.classList.remove('knowmad_btn_blue_border');
                writingBtn.classList.add('knowmad_btn_blue');
            }
        });

        rewritingBtn.addEventListener("click", function() {
            let filterBtns = filterToggleButtons.querySelectorAll(".btn");
            for (let el of filterBtns) {
                el.classList.remove('knowmad_btn_blue');
                el.classList.add('knowmad_btn_blue_border');
            }
            if (!rewritingBtn.classList.contains('knowmad_btn_blue')) {
                rewritingBtn.classList.remove('knowmad_btn_blue_border');
                rewritingBtn.classList.add('knowmad_btn_blue');
            }
        }); 
*/

        function filterTable() {
            // Filter desktop
            let tableElements = priceList.querySelectorAll(".service-rows");
            let selectElements = service_options_select;
            let selectedProviderSvc_id = this.value;
            for (let el of filterBtns ) {
                if (el.classList.contains('knowmad_btn_blue')) {
                    el.classList.remove('knowmad_btn_blue');
                    el.classList.add('knowmad_btn_blue_border');
                }
                if ( el.value == selectedProviderSvc_id ) {
                    el.classList.add('knowmad_btn_blue');
                    el.classList.remove('knowmad_btn_blue_border');
                }
            }

            $("#price_services").val(selectedProviderSvc_id);
            for (let el of tableElements) {
                
                if (!selectedProviderSvc_id || el.dataset.provider_svc_id.toString() === selectedProviderSvc_id.toString()) {
                    // if so and class list has hide then remove hide class, so that option becomes visible
                    if (el.classList.contains('hide')) {
                        el.classList.remove('hide');
                    }
                } else {
                    // if not then hide option
                    if (!el.classList.contains('hide')) {
                        el.classList.add('hide');
                    }
                }
            }

            // Filters service select options on price calculator
            for (let el of selectElements) {
                if (el.dataset['provider_svc_id'] == selectedProviderSvc_id) {
                    // if so and class list has hide then remove hide class, so that option becomes visible
                    el.classList.remove('hide');
                } else {
                    // if not then hide option
                    el.classList.add('hide');
                }
            }

            // Filter mobile
            let tableElementsMob = priceListMobile.querySelectorAll(".service-rows");
            for (let el of tableElementsMob) {
                
                if (!selectedProviderSvc_id || el.dataset.provider_svc_id.toString() === selectedProviderSvc_id.toString()) {
                    // if so and class list has hide then remove hide class, so that option becomes visible
                    if (el.classList.contains('hide')) {
                        el.classList.remove('hide');
                    }
                } else {
                    // if not then hide option
                    if (!el.classList.contains('hide')) {
                        el.classList.add('hide');
                    }
                }
            }

            
            PricingCalculator.getServices(null);
        }

        /* 
        provider_svc_select.addEventListener("change", function() {
          
            let tableElements = priceList.querySelectorAll(".service-rows");

            // get the id of the provider svc
            let selectedProviderSvc_id = this.value;
            
            console.log({selectedProviderSvc_id, tableElements});
            // go through each element and check if the class has the provider service id
            for (let el of tableElements) {
                
                if (!selectedProviderSvc_id || el.dataset.provider_svc_id.toString() === selectedProviderSvc_id.toString()) {
                    // if so and class list has hide then remove hide class, so that option becomes visible
                    if (el.classList.contains('hide')) {
                        el.classList.remove('hide');
                    }
                } else {
                    // if not then hide option
                    if (!el.classList.contains('hide')) {
                        el.classList.add('hide');
                    }
                }
            }

        }); 
        */

    </script>
@endpush