@extends('front.layout.app')

@section('css')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
        .plugin-card {
            position: relative;
            background-color: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            /*text-align: center;*/
            height: 350px;
            transition: transform 0.3s ease;
            border: 2px solid transparent;
        }

        .plugin-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        }

        .plugin-card.selected {
            border: 2px solid #6444ef;
        }

        .plugin-card img {
            width: 192px;
            height: 192px;
            margin-bottom: 10px;
        }

        .plugin-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 10px;
        }

        .plugin-description {
            font-size: 14px;
            color: #666;
            margin-bottom: 10px;
        }

        .price-badge {
            position: absolute;
            top: 33%;
            right: 15px;
            background-color: #000;
            color: #fff;
            font-weight: 600;
            padding: 5px 12px;
            border-radius: 20px;
        }

        .checkbox-container {
            position: absolute;
            top: 15px;
            right: 15px;
        }

        .checkbox-container input {
            display: none;
        }

        .checkbox-container label {
            background-color: #000;
            color: white;
            width: 20px;
            height: 20px;
            display: inline-block;
            border-radius: 4px;
            text-align: center;
            line-height: 18px;
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
        }

        .checkbox-container input:checked + label {
            background-color: #6444ef;
            color: white;
        }

        .buy-btn {
            background-color: #6444ef;
            color: white;
            font-weight: 600;
            border-radius: 25px;
            padding: 8px 20px;
            border: none;
        }

        .buy-btn:hover {
            background-color: #e6c020;
        }




        .pricing-table {
            margin: 50px 0;
        }
        .pricing-table .card {
            border: none;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
            border-radius: 15px;
        }
        .pricing-table .card:hover {
            transform: scale(1.05);
        }
        .pricing-header {
            font-size: 24px;
            font-weight: bold;
        }
        .price {
            font-size: 48px;
            font-weight: bold;
        }
        .price span {
            font-size: 18px;
            color: #6c757d;
        }
        .btn-choose {
            background-color: black;
            color: white;
            padding: 10px 30px;
            border-radius: 25px;
            text-transform: uppercase;
        }
        .btn-choose:hover {
            background-color: #444;
        }
        .card-body {
            padding: 30px;
        }
        .list-unstyled li {
            font-size: 18px;
        }



        .order-summary {
            background-color: #ffffff;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            /*max-width: 600px;*/
            margin: auto;
        }
        .order-header {
            font-size: 1.75rem;
            font-weight: 700;
            text-align: center;
            margin-bottom: 30px;
            color: #333;
        }
        .table-summary {
            width: 100%;
        }
        .table-summary th {
            font-weight: 500;
            color: #555;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.05rem;
        }
        .table-summary td {
            font-size: 1rem;
            color: #333;
        }
        .table-summary .price {
            font-weight: 600;
            color: #007bff;
        }
        .total-row {
            font-weight: 700;
            font-size: 1.5rem;
            color: #222;
        }
        .divider {
            border-top: 1px solid #ddd;
            margin: 15px 0;
        }
    </style>

@endsection

@section('content')

    <section class="white-bg pt-5 pt-md-150 pb-100 pb-md-250">
        <div class="checkout-hreder">
            <div class="container">
                <div class="checkout-hreder-template-details pb-5 mb-lg-5">
                    <div class="row">
                        <div class="col-md-9 m-auto">
                            <div class="row">
                                <div class="col-lg-5 pb-4 pb-lg-0">
                                    <div class="checkout-hreder-template-details-img">
                                        <img src="{{$template->getFirstMediaUrl('main_image')}}" alt="{{$template->name}}">
                                    </div>
                                </div>
                                <div class="col-lg-7 checkout-hreder-template-details-text">
                                    <h1 class="h4">{{$template->name}}</h1>
                                    <p>{{$template->short_description}}</p>
                                    <a class="btn btn-fill btn-black btn-arrow" href="{{$template->demo_link}}" target="_blank">View Preview</a>
                                    <br>
                                    <br>
                                    <h3 class="h5">Templates Feature</h3>
                                    {!! $template->full_description !!}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="checkout-hreder-innr">
                    <ul class="nav nav-checkout">
                        <li data-label="Hosting" class="active" id="pluginStep">
                            <span class="d-none d-lg-block">Step 1 - Choose your Plugins</span>
                        </li>
                        <li data-label="Domain"  id="hostingStep">
                            <span class="d-none d-lg-block">Step 2 - Choose Hosting Plans</span>
                        </li>
                        <li data-label="Payment" id="paymentStep">
                            <span class="d-none d-lg-block">Step 3 - Payment</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="pricing">
            <div class="container mt-5" id="plugins">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div>
                        <h5>Selected plugins (<span id="selectedPlugins">0</span>)</h5>
                    </div>
                    <div>
                        <button type="button" id="pluginBuyBtn" class="buy-btn">Buy <i class="fas fa-arrow-right"></i></button>
                    </div>
                </div>
                <div class="row">
                    @foreach($plugins as $plugin)
                        <!-- Card 1 -->
                        <div class="col-md-3 mb-4">
                            <div class="plugin-card" id="plugin-card-1">
                                <img src="{{url('storage/'.$plugin->image)}}" alt="{{$plugin->name}}">
                                <div class="plugin-title">{{$plugin->name}}</div>
                                <div class="plugin-description">{{$plugin->description}}</div>
                                <div class="price-badge">£{{$plugin->price}}</div>
                                <div class="checkbox-container">
                                    <input type="checkbox" id="checkbox-{{$plugin->id}}" class="plugin-checkbox" value="{{$plugin->id}}">
                                    <label for="checkbox-{{$plugin->id}}"><i class="fas fa-check"></i></label>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="container d-none" id="hostingPlans">
                <div class="pricing-table">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <div>
                            <button type="button" id="backToPlugins" class="buy-btn"><i class="fas fa-arrow-left"></i> Back to plugins </button>
                        </div>
                    </div>
                    <div class="row">
                        @foreach($packages as $package)
                            <div class="col-lg-4 col-md-6 mb-4">
                                <div class="card">
                                    <div class="card-body">
                                        <h3>{{$package->name}}</h3>
                                        <div class="price">£ {{number_format($package->price,2)}}</div>
                                        @if($package->features->isNotEmpty())
                                            <ul class="list-unstyled mt-3 mb-4 text-left">
                                                @foreach($package->features as $feature)
                                                    <li>✔ {{$feature->feature_name}}</li>
                                                @endforeach
                                            </ul>
                                        @endif
                                        @if(Auth::guard('front')->check())
                                            <button class="btn btn-fill btn-black btn-arrow btnProceedPurchase" type="button" data-id="{{$package->id}}">Choose plan</button>
                                        @else
                                            <button class="btn btn-fill btn-black btn-arrow btnLoginPurchase" type="button" data-id="{{$package->id}}">Login To Proceed</button>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        <!-- Basic Plan -->
                    </div>
                </div>
            </div>
            <div class="container mt-5" id="orderSummary">
            </div>
        </div>
    </section>
@endsection

@section('script')
    <script>
        // localStorage.setItem('selectedPlugins', JSON.stringify([]));
        document.querySelectorAll('.plugin-checkbox').forEach(function(checkbox) {
            checkbox.addEventListener('change', function() {
                const card = this.closest('.plugin-card');
                if (this.checked) {
                    card.classList.add('selected');
                } else {
                    card.classList.remove('selected');
                }
                $("#selectedPlugins").text($(".plugin-card.selected").length);



            });
        });

        $(document).ready(function() {
            if (localStorage.getItem('selectedPlugins')) {
                let checkedValues = JSON.parse(localStorage.getItem('selectedPlugins'));

                if (checkedValues.length > 0) {
                    for (var i in checkedValues) {
                        $("#checkbox-"+checkedValues[i]).click();
                    }
                }

                if(localStorage.getItem('hostingPluginId')) {
                    $("#pluginBuyBtn").click();
                    $(".btnProceedPurchase[data-id='"+localStorage.getItem('hostingPluginId')+"']").click();
                }

                localStorage.removeItem('selectedPlugins');
                localStorage.removeItem('hostingPluginId');

            }
        });

        $(document).on('click','#pluginBuyBtn', function (event) {
            event.preventDefault();
            $("#plugins").addClass("d-none");
            $("#hostingPlans").removeClass("d-none");
            $("#hostingStep").addClass("active");
        });

        $(document).on('click','#backToPlugins', function (event) {
            event.preventDefault();
            $("#plugins").removeClass("d-none");
            $("#hostingPlans").addClass("d-none");
            $("#hostingStep").removeClass("active");
        });

        $(document).on('click','.btnProceedPurchase', function (event) {
            event.preventDefault();

            var hostingId = $(this).data('id');

            var checkedValues = $('.plugin-checkbox:checked').map(function() {
                return $(this).val();
            }).get();


            $.ajax({
                url: '{{ route("getOrderSummary") }}',  // Laravel route
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',  // CSRF token for security
                    plugins: checkedValues,
                    hostingId: hostingId,
                    templateId: {{$template->id}}
                },
                success: function(response) {
                    console.log(response);

                    $("#hostingPlans").addClass("d-none");
                    $("#paymentStep").addClass("active");
                    $("#orderSummary").removeClass("d-none");
                    $("#orderSummary").html(response.html);

                },
                error: function(xhr) {
                    console.log(xhr.responseText);  // Log error response for debugging
                }
            });

        });


        $(document).on('click','.btnLoginPurchase', function (event) {
            event.preventDefault();
            var checkedValues = $('.plugin-checkbox:checked').map(function() {
                return $(this).val();
            }).get();
            localStorage.setItem('selectedPlugins', JSON.stringify(checkedValues));
            localStorage.setItem('hostingPluginId', $(this).data('id'));
            localStorage.setItem('currentPageURL', window.location.href);
            window.location.href = '{{route('login')}}';
        });
    </script>
@endsection