@extends('layouts.saas')

@section('title', 'প্যাকেজ এডিট - ' . $package->name)

@section('content')
<div class="container-fluid px-0">
    <div class="card border-0 shadow-sm rounded-4">
        
        <div class="card-header bg-transparent border-0 p-4 pb-0 d-flex justify-content-between align-items-center">
            <div>
                <h4 class="fw-bold mb-1 text-dark">
                    <i class="fa-solid fa-pen-to-square text-primary me-2"></i>প্যাকেজ এডিট করুন
                </h4>
                <p class="text-muted small mb-0"><strong>{{ $package->name }}</strong> প্যাকেজের তথ্য আপডেট করুন</p>
            </div>
            <a href="{{ route('superadmin.packages.index') }}" class="btn btn-outline-secondary rounded-3 px-3">
                <i class="fa-solid fa-arrow-left me-1"></i> প্যাকেজ তালিকা
            </a>
        </div>

        <div class="card-body p-4 p-md-5">
            <form action="{{ route('superadmin.packages.update', $package->id) }}" method="POST">
                @csrf
                @method('PUT')

                <!-- সাধারণ তথ্য -->
                <div class="border-bottom pb-2 mb-4">
                    <h6 class="fw-bold text-primary mb-0"><i class="fa-solid fa-circle-info me-2"></i>সাধারণ তথ্য</h6>
                </div>
                
                <div class="row g-3 mb-4">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">প্যাকেজের নাম <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('name') is-invalid @enderror" id="packageName" name="name" value="{{ old('name', $package->name) }}" required>
                        @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-md-6">
                        <label class="form-label fw-semibold">স্লাগ (URL Slug) <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('slug') is-invalid @enderror bg-light" id="packageSlug" name="slug" value="{{ old('slug', $package->slug) }}" required readonly>
                        @error('slug') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                </div>

                <!-- মূল্য ও বিলিং -->
                <div class="border-bottom pb-2 mb-4">
                    <h6 class="fw-bold text-success mb-0"><i class="fa-solid fa-bangladeshi-taka-sign me-2"></i>মূল্য ও বিলিং</h6>
                </div>

                <div class="row g-3 mb-4">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">মাসিক ফি (টাকা) <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text">৳</span>
                            <input type="number" step="0.01" class="form-control @error('price_monthly') is-invalid @enderror" name="price_monthly" value="{{ old('price_monthly', $package->price_monthly) }}" required>
                        </div>
                        @error('price_monthly') <span class="text-danger small">{{ $message }}</span> @enderror
                    </div>

                    <div class="col-md-6">
                        <label class="form-label fw-semibold">বার্ষিক ফি (টাকা) <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text">৳</span>
                            <input type="number" step="0.01" class="form-control @error('price_yearly') is-invalid @enderror" name="price_yearly" value="{{ old('price_yearly', $package->price_yearly) }}" required>
                        </div>
                        @error('price_yearly') <span class="text-danger small">{{ $message }}</span> @enderror
                    </div>
                </div>

                <!-- সীমা (Limits) -->
                <div class="border-bottom pb-2 mb-4">
                    <h6 class="fw-bold text-warning mb-0"><i class="fa-solid fa-sliders me-2"></i>সীমা (Limits)</h6>
                </div>

                <div class="row g-3 mb-4">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">সর্বোচ্চ শিক্ষার্থী সংখ্যা <span class="text-danger">*</span></label>
                        <input type="number" class="form-control @error('student_limit') is-invalid @enderror" name="student_limit" value="{{ old('student_limit', $package->student_limit) }}" required>
                        @error('student_limit') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-md-6">
                        <label class="form-label fw-semibold">সর্বোচ্চ স্টাফ/শিক্ষক সংখ্যা <span class="text-danger">*</span></label>
                        <input type="number" class="form-control @error('staff_limit') is-invalid @enderror" name="staff_limit" value="{{ old('staff_limit', $package->staff_limit) }}" required>
                        @error('staff_limit') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                </div>

                <!-- অনুমতি ও স্ট্যাটাস -->
                <div class="border-bottom pb-2 mb-4">
                    <h6 class="fw-bold text-info mb-0"><i class="fa-solid fa-toggle-on me-2"></i>অনুমতি ও স্ট্যাটাস</h6>
                </div>

                <div class="row g-3 mb-4">
                    <div class="col-md-4">
                        <div class="card p-3 border rounded-3">
                            <div class="form-check form-switch mb-0">
                                <input class="form-check-input" type="checkbox" id="customDomain" name="custom_domain_allowed" value="1" {{ old('custom_domain_allowed', $package->custom_domain_allowed) ? 'checked' : '' }}>
                                <label class="form-check-label fw-semibold" for="customDomain">কাস্টম ডোমেন সুবিধা</label>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="card p-3 border rounded-3">
                            <div class="form-check form-switch mb-0">
                                <input class="form-check-input" type="checkbox" id="smsFeature" name="sms_feature_allowed" value="1" {{ old('sms_feature_allowed', $package->sms_feature_allowed) ? 'checked' : '' }}>
                                <label class="form-check-label fw-semibold" for="smsFeature">SMS নোটিফিকেশন সুবিধা</label>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="card p-3 border rounded-3">
                            <div class="form-check form-switch mb-0">
                                <input class="form-check-input" type="checkbox" id="isActive" name="is_active" value="1" {{ old('is_active', $package->is_active) ? 'checked' : '' }}>
                                <label class="form-check-label fw-semibold" for="isActive">প্যাকেজটি সক্রিয় (Active)</label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- অতিরিক্ত ফিচারসমূহ (ডাটা লোড সহ) -->
                <div class="border-bottom pb-2 mb-4">
                    <h6 class="fw-bold text-secondary mb-0"><i class="fa-solid fa-list-check me-2"></i>অতিরিক্ত ফিচারসমূহ</h6>
                </div>

                <div class="mb-4">
                    <div id="featureList">
                        @if(!empty($package->features) && count($package->features) > 0)
                            @foreach($package->features as $feature)
                                <div class="input-group mb-2">
                                    <input type="text" name="features[]" class="form-control" value="{{ $feature }}">
                                    <button class="btn btn-outline-danger remove-feature" type="button"><i class="fa-solid fa-trash"></i></button>
                                </div>
                            @endforeach
                        @else
                            <div class="input-group mb-2">
                                <input type="text" name="features[]" class="form-control" placeholder="যেমন: বায়োমেট্রিক উপস্থিতি ব্যবস্থা">
                                <button class="btn btn-outline-danger remove-feature" type="button"><i class="fa-solid fa-trash"></i></button>
                            </div>
                        @endif
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-primary mt-1 rounded-3" id="addFeatureBtn">
                        <i class="fa-solid fa-plus me-1"></i> নতুন ফিচার যোগ করুন
                    </button>
                </div>

                <div class="text-end border-top pt-4">
                    <a href="{{ route('superadmin.packages.index') }}" class="btn btn-light px-4 me-2">বাতিল</a>
                    <button type="submit" class="btn btn-primary px-4 fw-bold">
                        <i class="fa-solid fa-rotate me-2"></i>আপডেট করুন
                    </button>
                </div>

            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function () {
        $('#packageName').on('keyup change', function () {
            let name = $(this).val();
            let slug = name.toLowerCase()
                           .replace(/[^\w\s-]/g, '')
                           .replace(/[\s_-]+/g, '-')
                           .replace(/^-+|-+$/g, '');
            $('#packageSlug').val(slug);
        });

        $('#addFeatureBtn').click(function () {
            let featureHtml = `
                <div class="input-group mb-2">
                    <input type="text" name="features[]" class="form-control" placeholder="নতুন ফিচার লিখুন">
                    <button class="btn btn-outline-danger remove-feature" type="button"><i class="fa-solid fa-trash"></i></button>
                </div>`;
            $('#featureList').append(featureHtml);
        });

        $(document).on('click', '.remove-feature', function () {
            if ($('#featureList .input-group').length > 1) {
                $(this).closest('.input-group').remove();
            } else {
                $(this).closest('.input-group').find('input').val('');
            }
        });
    });
</script>
@endpush