@extends("website.layouts.layout")

@section("title")
    Services
@endsection

@section("body")
    @include('partials.event')

    <h1 class="font-semibold text-2xl uppercase mb-10 flex justify-center">Our Services</h1>

    @if ($services->count() > 0)
        <div class="flex flex-wrap justify-center gap-x-5">
            @foreach ($services as $service)
                <div class="mb-10">
                    <div
                        class="w-64 shadow-lg p-3 rounded-md cursor-pointer transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 hover:text-amber-400">
                        @if ($service->icon)
                            <img src="/storage/{{ $service->icon }}" alt="Image of {{ $service->name }}"
                                 class="h-12 mb-3 mx-auto">
                        @else
                            <i class="fa-solid fa-cube flex justify-center mb-3 text-black"></i>
                        @endif

                        <p class="flex justify-center font-semibold mb-2">{{ $service->name }}</p>
                        <p class="flex justify-center break-all text-black">{{ $service->description }}</p>
                    </div>
                </div>
            @endforeach
        </div>
    @endif

    <div class="flex justify-center mb-10">
        <button type="button" id="quote-btn" class="btn btn-outline-primary">Quote Calculation</button>
    </div>

    @include('website.partials.quote-form')
@endsection

@section('js')
    <script type="text/javascript">
        document.getElementById('quote-btn').onclick = function () {
            document.getElementById('service-selection').classList.remove('hidden');
        }

        document.getElementById('calculate-btn').onclick = function () {
            var checked = false;
            var serviceProvided = '';
            var selectedServicesArray = [];
            var price = 0;
            var city = document.getElementById('city');
            // var projectType = document.getElementById('project_type');
            var projectBuiltupArea = document.getElementById('project_builtup_area');
            var services = document.getElementsByName('service');
            // && projectType.value !== ''
            if (city.value !== '' && projectBuiltupArea.value !== '') {
                for (var i in services) {
                    var service = services[i];
                    if (service.checked) {
                        checked = true;
                        var template = '<label class="block">';
                        template += '<input type="checkbox" checked="true" disabled> ';
                        template += service.value;
                        template += '</label>';
                        serviceProvided += template;
                        selectedServicesArray.push(service.value);
                        price += parseFloat(service.getAttribute('data-price')) * parseFloat(service.getAttribute('data-weightage'));
                    }
                }

                if (checked) {
                    price *= parseInt(projectBuiltupArea.value);
                    price += parseFloat('{{ $settings->monthly_subscription ?? 0.00 }}');
                    price = price.toFixed(2);
                    var selectedServices = selectedServicesArray.join(', ');

                    document.getElementById('services').value = selectedServices;
                    document.getElementById('estimated_price').value = price;

                    // document.getElementById('project-name').innerHTML = '"' + projectType.value + '"';
                    document.getElementById('sq-meter').innerHTML = '"' + projectBuiltupArea.value + '"';
                    document.getElementById('city-name').innerHTML = '"' + city.value + '"';
                    document.getElementById('city-name-form').innerHTML = city.value;
                    document.getElementById('service-provided').innerHTML = serviceProvided;
                    document.getElementById('price').innerHTML = price;
                    document.getElementById('cost-breakdown').classList.remove('hidden');
                    document.getElementById('contact-form').classList.remove('hidden');

                    axios.post(
                        '{{ route("api.quote-calculate") }}', {
                            city: city.value,
                            project_buildup_area: projectBuiltupArea.value,
                            estimated_cost: price,
                            services: selectedServices
                        }
                    ).then(function (res) {
                    });
                } else {
                    alert('Please fill up the form.');
                }
            } else {
                alert('Please fill up the form.');
            }
        }

        function showTooltip($this) {
            $this.nextElementSibling.classList.toggle('hidden');
        }
    </script>
@endsection