@extends('layouts.master')

@section('title')
    @isset($data)
        @lang('translation.Edit_Subscription_Plan')
    @else
        @lang('translation.Add_Subscription_Plan')
    @endisset
@endsection

@section('css')
    <style>
        .feature-input-wrapper {
            position: relative;
            margin-bottom: 10px;
        }
        .feature-input-wrapper .btn-remove-feature {
            position: absolute;
            right: 10px;
            top: 5px;
            z-index: 10;
        }
        .price-display-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 8px;
            padding: 20px;
        }
        .price-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-size: 18px;
        }
        .price-row.total {
            border-top: 2px solid rgba(255,255,255,0.3);
            padding-top: 10px;
            font-weight: bold;
            font-size: 20px;
        }
    </style>
@endsection

@section('content')
    <div class="row">
        <div class="col-12">
            <form action="{{ isset($data) ? route('admin.subscription-plans.update', $data->id) : route('admin.subscription-plans.store') }}" method="POST">
                @csrf
                @if(isset($data))
                    @method('PUT')
                @endif

                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title py-3 mb-4">
                            <i class="bx bx-package me-2"></i>
                            @isset($data)
                                @lang('translation.Edit_Subscription_Plan')
                            @else
                                @lang('translation.Add_Subscription_Plan')
                            @endisset
                        </h4>

                        {{-- Success Message --}}
                        @if(session('success'))
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                <i class="mdi mdi-check-all me-2"></i>
                                {{ session('success') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        @endif

                        {{-- Error Message --}}
                        @if(session('error'))
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                <i class="mdi mdi-block-helper me-2"></i>
                                {{ session('error') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        @endif

                        {{-- Display All Validation Errors --}}
                        @if ($errors->any())
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                <i class="mdi mdi-alert-outline me-2"></i>
                                <strong>Whoops! There were some problems with your input:</strong>
                                <ul class="mb-0 mt-2">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        @endif

                        <div class="row">
                            {{-- Plan Name --}}
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="name" class="form-label">@lang('translation.Plan_Name') <span class="text-danger">*</span></label>
                                    <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                                        value="{{ isset($data) ? $data->name : old('name') }}"
                                        id="name" placeholder="e.g., Restaurant Basic"
                                        required>
                                    @error('name')
                                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            {{-- Tenant Type --}}
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="tenant_type" class="form-label">@lang('translation.Tenant_Type') <span class="text-danger">*</span></label>
                                    <select name="tenant_type" class="form-select @error('tenant_type') is-invalid @enderror" id="tenant_type" required>
                                        <option value="">-- @lang('translation.Select_Type') --</option>
                                        @foreach($tenantTypes as $type)
                                            <option value="{{ $type }}" @if((isset($data) && $data->tenant_type == $type) || old('tenant_type') == $type) selected @endif>
                                                {{ $type }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('tenant_type')
                                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            {{-- Base Price --}}
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="price" class="form-label">@lang('translation.Base_Price') (₹) <span class="text-danger">*</span></label>
                                    <input type="number" name="price" class="form-control @error('price') is-invalid @enderror"
                                        value="{{ isset($data) ? $data->price : old('price') }}"
                                        id="price" placeholder="0.00" step="0.01" min="0"
                                        required>
                                    @error('price')
                                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="tax" class="form-label">@lang('translation.tax') (₹) <span class="text-danger">*</span></label>
                                    <input type="number" name="tax" class="form-control @error('tax') is-invalid @enderror"
                                        value="{{ isset($data) ? $data->tax : old('tax') }}"
                                        id="tax" placeholder="0.00" step="1.00" min="0"
                                        required>
                                    @error('tax')
                                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            {{-- Duration Days --}}
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="duration_days" class="form-label">@lang('translation.Duration') (Days) <span class="text-danger">*</span></label>
                                    <input type="number" name="duration_days" class="form-control @error('duration_days') is-invalid @enderror"
                                        value="{{ isset($data) ? $data->duration_days : old('duration_days', 30) }}"
                                        id="duration_days" placeholder="30" min="1" max="365"
                                        required>
                                    @error('duration_days')
                                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            {{-- Max Branches --}}
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="max_branches" class="form-label">@lang('translation.Max_Branches')</label>
                                    <div class="input-group">
                                        <input type="number" name="max_branches" class="form-control @error('max_branches') is-invalid @enderror"
                                            value="{{ isset($data) ? $data->max_branches : old('max_branches') }}"
                                            id="max_branches" placeholder="Leave empty for unlimited" min="1">
                                        <span class="input-group-text" title="Leave empty for unlimited branches">
                                            <i class="bx bx-info-circle"></i>
                                        </span>
                                    </div>
                                    @error('max_branches')
                                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            {{-- Max Outlets --}}
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="max_outlets" class="form-label">@lang('translation.Max_Outlets')</label>
                                    <div class="input-group">
                                        <input type="number" name="max_outlets" class="form-control @error('max_outlets') is-invalid @enderror"
                                            value="{{ isset($data) ? $data->max_outlets : old('max_outlets') }}"
                                            id="max_outlets" placeholder="Leave empty for unlimited" min="1">
                                        <span class="input-group-text" title="Leave empty for unlimited outlets">
                                            <i class="bx bx-info-circle"></i>
                                        </span>
                                    </div>
                                    @error('max_outlets')
                                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            {{-- Features --}}
                            <div class="col-12">
                                <div class="mb-3">
                                    <label class="form-label">@lang('translation.Features') <span class="text-danger">*</span></label>
                                    <div id="features-container">
                                        @php
                                            $features = isset($data) && $data->features ? $data->features : (old('features') ?? []);
                                        @endphp
                                        @if(count($features) > 0)
                                            @foreach($features as $index => $feature)
                                                <div class="feature-input-wrapper">
                                                    <input type="text" name="features[]" class="form-control"
                                                        value="{{ $feature }}" placeholder="Add feature"
                                                        required>
                                                    <button type="button" class="btn btn-sm btn-danger btn-remove-feature">
                                                        <i class="bx bx-x"></i>
                                                    </button>
                                                </div>
                                            @endforeach
                                        @else
                                            <div class="feature-input-wrapper">
                                                <input type="text" name="features[]" class="form-control"
                                                    placeholder="Add feature" required>
                                                <button type="button" class="btn btn-sm btn-danger btn-remove-feature">
                                                    <i class="bx bx-x"></i>
                                                </button>
                                            </div>
                                        @endif
                                    </div>
                                    @error('features')
                                        <span class="invalid-feedback d-block" role="alert">{{ $message }}</span>
                                    @enderror
                                    <button type="button" class="btn btn-sm btn-outline-primary mt-2" id="add-feature">
                                        <i class="bx bx-plus me-1"></i>Add Feature
                                    </button>
                                </div>
                            </div>

                            {{-- Description --}}
                            <div class="col-12">
                                <div class="mb-3">
                                    <label for="description" class="form-label">@lang('translation.Description')</label>
                                    <textarea name="description" class="form-control @error('description') is-invalid @enderror"
                                        id="description" rows="3" placeholder="Brief description of this plan"
                                        maxlength="1000">{{ isset($data) ? $data->description : old('description') }}</textarea>
                                    <small class="form-text text-muted">Max 1000 characters</small>
                                    @error('description')
                                        <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            {{-- Status --}}
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label">@lang('translation.Status')</label>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" name="is_active" id="is_active" value="1"
                                            @if((isset($data) && $data->is_active) || (!isset($data) && !old('is_active'))) checked @endif>
                                        <label class="form-check-label" for="is_active">
                                            @lang('translation.Active')
                                        </label>
                                    </div>
                                </div>
                            </div>

                            {{-- Price Display --}}
                            {{-- <div class="col-md-6">
                                <div class="price-display-card">
                                    <div class="price-row">
                                        <span>Base Price:</span>
                                        <span id="display-base-price">₹0.00</span>
                                    </div>
                                    <div class="price-row">
                                        <span>GST (18%):</span>
                                        <span id="display-tax">₹0.00</span>
                                    </div>
                                    <div class="price-row total">
                                        <span>Total Price:</span>
                                        <span id="display-total">₹0.00</span>
                                    </div>
                                </div>
                            </div> --}}
                        </div>

                        {{-- Submit Button --}}
                        <div class="col-md-12 d-flex align-items-center justify-content-end py-3 mt-4">
                            <a href="{{ route('admin.subscription-plans.index') }}" class="btn btn-secondary me-2">
                                <i class="bx bx-x me-1"></i> @lang('translation.Cancel')
                            </a>
                            <button class='btn px-4 btn-info' type='submit'>
                                <i class="bx bx-save me-1"></i>
                                @isset($data)
                                    @lang('translation.Update')
                                @else
                                    @lang('translation.Submit')
                                @endisset
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const priceInput = document.getElementById('price');
            const addFeatureBtn = document.getElementById('add-feature');
            const featuresContainer = document.getElementById('features-container');

            // Update price display on load and change
            function updatePriceDisplay() {
                const price = parseFloat(priceInput.value) || 0;
                const tax = price * 0.18;
                const total = price + tax;

                document.getElementById('display-base-price').textContent = '₹' + price.toFixed(2);
                document.getElementById('display-tax').textContent = '₹' + tax.toFixed(2);
                document.getElementById('display-total').textContent = '₹' + total.toFixed(2);
            }

            priceInput.addEventListener('change', updatePriceDisplay);
            priceInput.addEventListener('input', updatePriceDisplay);

            // Add feature input
            addFeatureBtn.addEventListener('click', function() {
                const wrapper = document.createElement('div');
                wrapper.className = 'feature-input-wrapper';
                wrapper.innerHTML = `
                    <input type="text" name="features[]" class="form-control" placeholder="Add feature" required>
                    <button type="button" class="btn btn-sm btn-danger btn-remove-feature">
                        <i class="bx bx-x"></i>
                    </button>
                `;
                featuresContainer.appendChild(wrapper);

                // Add remove listener to new button
                wrapper.querySelector('.btn-remove-feature').addEventListener('click', function() {
                    wrapper.remove();
                });
            });

            // Remove feature input
            document.addEventListener('click', function(e) {
                if (e.target.closest('.btn-remove-feature')) {
                    e.target.closest('.feature-input-wrapper').remove();
                }
            });

            // Initialize on page load
            updatePriceDisplay();
        });
    </script>
@endsection