@extends('layouts.app')

@php
$title = isset($purchaseSubscription) ? 'Edit Vendor Purchase Subscription' : 'Create Vendor Purchase Subscription';
@endphp

@section('title', $title)

@section('content')

<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Subscription Management</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item active">{{ $title }}</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">{{ $title }}</h3>
                    </div>

                    <form id="vendorPurchaseSubscriptionForm" action="{{ route('vendorpurchasesubscription.store') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="create_new_purchase_subscription" value="{{ $isCreateNewSubscription ? 1 : 0 }}">
                        <div class="card-body">
                            <div class="form-group">
                                <label class="mb-3">Select Subscription Plan <span class="text-danger">*</span></label>
                                @foreach($subscriptions as $index => $subscription)
                                    <div class="col-md-6">
                                        <div class="card border-primary subscription-box">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center justify-content-between mb-3">
                                                    <div class="plan-name">
                                                        <h5 class="card-title font-weight-bold mb-0">{{ $subscription->plan_name }}</h5>
                                                    </div>
                                                    <div class="radio-button">
                                                        <div class="form-check">
                                                            <input class="form-check-input mt-0 subscription-radio"
                                                                type="radio"
                                                                name="subscription_id"
                                                                id="subscription{{ $subscription->subscription_id }}"
                                                                value="{{ $subscription->subscription_id }}"
                                                                required
                                                                {{ old('subscription_id') == $subscription->subscription_id ? 'checked' : '' }}
                                                                {{ isset($purchaseSubscription) && $purchaseSubscription->subscription_id == $subscription->subscription_id ? 'checked' : '' }}
                                                                {{ !old('subscription_id') && !isset($purchaseSubscription) && $index === 0 ? 'checked' : '' }}
                                                                {{ $currentSubscription != null && $subscription->subscription_id == $currentSubscription->subscription_id ? 'checked' : '' }}>
                                                        </div>
                                                    </div>
                                                </div>
                                                <p class="card-text mb-2"><strong>Price:</strong> {{ $subscription->price }} QAR</p>
                                                <p class="card-text mb-2"><strong>Duration:</strong> {{ $subscription->duration }} Days</p>
                                                <div class="subscription-description">
                                                    <strong>Description:</strong> {!! $subscription->description !!}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                                <span id="subscription-error" class="text-danger d-block mt-2"></span> <!-- Error message -->
                            </div>
                        </div>

                        <div class="card-footer">
                            <a href="{{ route('vendorpurchasesubscription.list') }}" class="btn btn-secondary">Cancel</a>
                            <button type="button" id="storeVendorPurchaseSubscription" class="btn btn-primary">{{ isset($purchaseSubscription) ? 'Update' : 'Submit' }}</button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@section('scripts')
<script src="{{ asset('js/jquery.validate.min.js') }}"></script>
<script src="{{ asset('js/additional-methods.min.js') }}"></script>
<script>
    $(document).ready(function() {
        $("#vendorPurchaseSubscriptionForm").validate({
            rules: {
                subscription_id: {
                    required: true
                }
            },
            messages: {
                subscription_id: {
                    required: "Please select a subscription plan."
                }
            },
            errorElement: 'span',
            errorPlacement: function(error, element) {
                if (element.attr("name") == "subscription_id") {
                    error.appendTo("#subscription-error");
                } else {
                    error.addClass('invalid-feedback');
                    element.closest('.form-group').append(error);
                }
            },
            highlight: function(element) {
                $(".subscription-box").removeClass("border-primary").addClass("border-danger");
            },
            unhighlight: function(element) {
                $(".subscription-box").removeClass("border-danger").addClass("border-primary");
            }
        });

        $("#storeVendorPurchaseSubscription").click(function() {
            let selectedPlan = $("input[name='subscription_id']:checked").val();

            if (!selectedPlan) {
                $("#subscription-error").text("Please select a subscription plan.");
                $(".subscription-box").addClass("border-danger");
                return false;
            } else {
                $("#subscription-error").text("");
                $(".subscription-box").removeClass("border-danger");
            }

            if ($("#vendorPurchaseSubscriptionForm").valid()) {
                $("#vendorPurchaseSubscriptionForm").submit();
            }
        });

        $(".subscription-radio").change(function() {
            $(".subscription-box").removeClass("border-danger").addClass("border-primary");
            $("#subscription-error").text("");
        });
    });
</script>
@endsection