@extends('layouts.app')
@section('content')
    @include('partials.gift-head')

    <section class="py-sm-5 py-4 gift-sec ">
        <div class="container">

            <div class="row align-items-center">
                <div class="col-md-6 col-9">
                    <div class="top-text">
                        <h1>For Individual</h1>
                        <h6><span>Project:</span> King County Parks</h6>
                    </div>
                </div>
                <div class="col-md-6 col-3">
                    <div class="border-tab">
                        <div class="active"></div>
                        <div class="active"></div>
                    </div>
                    <p class="pages-number">02/02</p>
                </div>
            </div>

            <div class="row mt-4 align-items-center">

                <div class="col-md-10">
                    <div class="d-flex">
                        <div class="radio-select mr-3">
                            <select name="sort" class="donate-select" id="sort" onchange="applyFilter()">
                                <option value="" {{ Request::get('sort') == '' ? 'selected' : '' }}>Sort
                                </option>
                                <option value="low_to_high" {{ Request::get('sort') == 'low_to_high' ? 'selected' : '' }}>
                                    Price: Low to high</option>
                                <option value="high_to_low" {{ Request::get('sort') == 'high_to_low' ? 'selected' : '' }}>
                                    Price: high to low</option>
                                <option value="less_co2" {{ Request::get('sort') == 'less_co2' ? 'selected' : '' }}>Less CO2
                                    absorbed</option>
                                <option value="more_co2" {{ Request::get('sort') == 'more_co2' ? 'selected' : '' }}>More CO2
                                    absorbed</option>
                            </select>
                        </div>
                        <select name="specie" class="donate-select" id="specie" onchange="applyFilter()">
                            <option value="" {{ Request::get('specie') == '' ? 'selected' : '' }}>All</option>
                            @foreach ($species as $key => $specie)
                                <option value="{{ $specie }}"
                                    {{ Request::get('specie') == $specie ? 'selected' : '' }}>{{ $specie }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="col-md-2 text-right">
                    <h6 class="cal-text" data-toggle="modal" data-target="#exampleModal"><a href="##">CO2 Calculator
                        </a></h6>
                </div>
            </div>


            <div class="row mt-3">
                <div class="col-md-8 mb-3 mb-sm-0">
                    @forelse ($project->species as $specie)
                        <div class="box-yellow-border">
                            <div class="plan-treebox new-plantreebox mt-3">
                                <div class="row">
                                    <div class="col-md-6 mb-3 mb-sm-0">
                                        <div class="row align-items-center">
                                            <div class="col-md-3 col-4 pr-0">
                                                <div class="img-boxplant">
                                                    @if ($specie->tree_image)
                                                        <img src="{{ $specie->tree_image }}" alt="">
                                                    @else
                                                        <img src="{{ asset('app-assets/images/new-tree.png') }}"
                                                            alt="">
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="col-md-9 col-8">
                                                <div class="content-boxplant">
                                                    <p>{{ $specie->name }}</p>
                                                    <h6>{{ $specie->pivot->basic_price }}﷼/ <span>Tree</span> </h6>
                                                    <h5> <span> CO2:</span> {{ $specie->pivot->carbon_value }} (Ton)</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-md-6 col-7">
                                                <div class="input-group  increment-box ">
                                                    <div class="input-group-prepend">
                                                        <button class="input-group-text"
                                                            onclick="quantity('dec',{{ $specie->pivot->id }}, '0')"> -
                                                        </button>
                                                    </div>

                                                    <input type="text" class="form-control incmtbox-inpt"
                                                        id="quantity-{{ $specie->pivot->id }}" value="0" readonly>

                                                    <div class="input-group-append">
                                                        <button class="input-group-text"
                                                            onclick="quantity('inc',{{ $specie->pivot->id }}, {{ $specie->pivot->total_quantity }})">
                                                            + </button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-5 pl-3 pl-sm-5">
                                                <h2 id="amount-{{ $specie->pivot->id }}">0﷼</h2>
                                                <h1>450.00﷼</h1>
                                                <h3>20% Off</h3>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <hr class="mb-2">
                                <div class="row align-items-center">
                                    <div class="col-md-9 mb-sm-0 mb-3">
                                        <h6>Enter maintenance time in year(s)</h6>
                                        <h4>By default maintenance will be applicable for 01 year. You can extend the
                                            <br class="d-sm-block d-none"> no. of maintenance
                                            years and charges will vary accordingly.
                                        </h4>
                                    </div>
                                    <div class="col-md-3 col-8 ">
                                        <div class="input-group  increment-box ">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"
                                                    onclick="year('dec',{{ $specie->pivot->id }})">
                                                    - </span>
                                            </div>
                                            <input type="text" class="form-control incmtbox-inpt"
                                                id="year-{{ $specie->pivot->id }}" value="1" readonly>
                                            <div class="input-group-append">
                                                <span class="input-group-text"
                                                    onclick="year('inc',{{ $specie->pivot->id }})">
                                                    + </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    @empty
                    @endforelse
                </div>

                <div class="col-md-4">
                    <div class="plant-overviewbox">
                        <div class="plant-overboximg">
                            @if ($project->name)
                                <img src="{{ $project->thumbnail_image }}" alt="">
                            @else
                                <img src="{{ asset('app-assets/images/new-tree.png') }}" alt="">
                            @endif
                        </div>

                        <div class="row mt-2">
                            <div class="col-md-6 col-6">
                                <p>Project name</p>
                            </div>
                            <div class="col-md-6 col-6">
                                <p>{{ $project->name ? $project->name : '' }}</p>
                            </div>
                        </div>

                        <h5>Description</h5>
                        <h3 class="mb-3">{!! $project->description ? $project->description : '' !!}</h3>
                    </div>

                    <div class="plant-overviewbox mt-3">
                        <div class="form-group checkout-box new-checkbox mt-3">
                            <input class="filled-in" type="checkbox" value="" id="Check1">
                            <label class="checkFrom-label" for="Check1">
                                <span class="dark-lable">Carbon
                                    Quantification Certification -</span> <span class="notify">*</span><span
                                    class="mute-lable">you have to plant a
                                    minimum of 1000 trees.</span> </label>
                        </div>
                        <div class="form-group checkout-box new-checkbox  mt-3">
                            <input class="filled-in" type="checkbox" value="" id="Check2">
                            <label class="checkFrom-label" for="Check2"><span class="dark-lable">Carbon
                                    Quantification Certification -</span> <span class="notify">*</span><span
                                    class="mute-lable">you have to plant a
                                    minimum of 1000 trees.</span> </label>
                        </div>
                    </div>

                    <div class="plant-overviewbox mt-3">
                        <h1>Order Value</h1>
                        <h2>You have selected <span id="total-quantity">0</span> trees </h2>
                        <div class="mt-2" id="cart-detail">
                            @include('projects.render-cart', ['cartArr' => $cart])
                        </div>
                        <hr>
                        <div class="row mb-3">
                            <div class="col-md-6 col-6">
                                <h1>Grand Total</h1>
                            </div>
                            <div class="col-md-6 col-6 text-right">
                                <h1 id="grand-total"> 0 ﷼</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row justify-content-center mt-4 mt-sm-5">
                <div class="col-md-4 col-5">
                    <a href="{{ url('carts') }}">
                        <button type="button" class="btn more-btn btn-block" id="continue-btn" style="display: none;">
                            Continue </button>
                    </a>
                </div>
            </div>

        </div>
    </section>
@endsection
@section('scripts')
    <script>
        var selectedItems = [];
        $(document).ready(function() {
            let cart = {!! json_encode($cart) !!};
            renderCart(cart);
            if (cart) {
                $('#continue-btn').show();
            } else {
                $('#continue-btn').hide();
            }
        });

        function quantity(type, id, limit) {
            let quantity = parseInt($('#quantity-' + id).val());
            let year = parseInt($('#year-' + id).val());
            if (type == 'dec' && quantity > 0) {
                quantity--;
                $('#quantity-' + id).val(quantity);
            } else if (type == 'inc' && quantity < limit) {
                quantity++;
                $('#quantity-' + id).val(quantity);
            }
            addToCart(id, quantity, year);
        }

        function year(type, id) {
            let year = parseInt($('#year-' + id).val());
            let quantity = parseInt($('#quantity-' + id).val());
            if (type == 'dec' && year > 1) {
                year = year - 1;
                $('#year-' + id).val(year);
            } else if (type == 'inc' && year < 10) {
                year = year + 1;
                $('#year-' + id).val(year);
            }
            addToCart(id, quantity, year);
        }

        function addToCart(id, quantity, year) {
            var existingIndex = selectedItems.findIndex(item => item.id === id);
            if (existingIndex !== -1) {
                selectedItems[existingIndex].quantity = quantity;
                selectedItems[existingIndex].year = year;
            } else {
                selectedItems.push({
                    id: id,
                    quantity: quantity,
                    year: year,
                });
            }
            $.ajax({
                url: "{{ url('api/projects/render-cart') }}",
                type: 'POST',
                cache: false,
                data: JSON.stringify(selectedItems),
                contentType: 'application/json',
                datatype: 'html',
                success: function(data) {
                    console.log(data);
                    renderCart(data.cart);
                    $('#cart-detail').html(data.data);
                    if (data.data) {
                        $('#continue-btn').show();
                    } else {
                        $('#continue-btn').hide();
                    }
                }
            });
        }

        function renderCart(cart) {
            let grandTotal = 0;
            let totalQuantity = 0;
            for (let key in cart) {
                if (cart.hasOwnProperty(key)) {
                    let cartItem = cart[key];
                    let totalAmount = cartItem.total_amount;

                    $('#amount-' + key).text(totalAmount);
                    $('#quantity-' + key).val(cartItem.quantity);
                    $('#year-' + key).text(cartItem.maintenance_year);
                    grandTotal += totalAmount;
                    totalQuantity += cartItem.quantity;
                }
            }
            $('#grand-total').text(Math.round(grandTotal * 100) / 100);
            $('#total-quantity').text(totalQuantity);
        }

        function applyFilter() {
            let url = new URL(window.location.href);
            let specie = $('#specie').find(':selected').val();
            let sort = $('#sort').find(':selected').val();

            // Update the URL parameters
            url.searchParams.set('specie', specie);
            url.searchParams.set('sort', sort);

            // Update the URL without reloading the page
            window.history.pushState({}, '', url);

            // Optional: You can also update the URL in the address bar
            window.location.href = url;
        }
    </script>
@endsection