@extends('layouts.admin')

@section('title', 'Create Tenant')

@section('content')
<h1 class="text-2xl font-bold mb-4">Add Clinic</h1>

<form action="{{ route('admin.tenants.store') }}" method="POST" class="bg-white p-6 shadow rounded w-full md:w-2/3">
    @csrf

    <div class="row">
        <div class="form-group col-md-4">
            <label class="block mb-1">Clinic Name</label>
            <input type="text" name="name" value="{{ old('name') }}" class="form-control">
            @error('name') <p class="text-red-500">{{ $message }}</p> @enderror
        </div>

        <div  class="form-group col-md-4">
            <label class="block mb-1">Domain</label>
            <input type="text" name="domain" placeholder="only put subdomain like shmc" value="{{ old('domain') }}" class="form-control">
            @error('domain') <p class="text-red-500">{{ $message }}</p> @enderror
        </div>

        {{-- <div  class="form-group col-md-4">
            <label class="block mb-1">Database Name</label>
            <input type="text" name="db_name" value="{{ old('db_name') }}" class="form-control">
            @error('db_name') <p class="text-red-500">{{ $message }}</p> @enderror
        </div>

        <div  class="form-group col-md-4">
            <label class="block mb-1">DB User</label>
            <input type="text" name="db_user" value="{{ old('db_user') }}" class="form-control">
            @error('db_user') <p class="text-red-500">{{ $message }}</p> @enderror
        </div>

        <div  class="form-group col-md-4">
            <label class="block mb-1">DB Password</label>
            <input type="password" name="db_pass" class="form-control">
            @error('db_pass') <p class="text-red-500">{{ $message }}</p> @enderror
        </div> --}}

        <!-- Plan selection -->
        <div  class="form-group col-md-4">
            <label class="block mb-1">Select Plan</label>
            <select name="plan_id" id="plan_id" class="form-control">
                @foreach($plans as $plan)
                    <option value="{{ $plan->id }}" data-yearly="{{ $plan->price }}" data-monthly="{{ $plan->price /12 }}" data-price="{{ $plan->price }}">{{ $plan->name }} - {{ $plan->price }} QAR</option>
                @endforeach
            </select>
        </div>
           <div class="form-group col-md-4">
    <label class="block mb-1">Plan Type</label>
    <select name="subscription_type" id="subscription_type" class="form-control">
        <option value="monthly">Monthly</option>
        <option value="yearly">Yearly</option>
    </select>
</div>
<div class="form-group col-md-4">
            <label class="block mb-1">Duration (Months/Years)</label>
            <input type="number" name="duration" id="durationInput" value="1" class="form-control">
        </div>
        <!-- Discount -->
        <div  class="form-group col-md-4">
            <label class="block mb-1">Discount (QAR)</label>
            <input type="number" name="discount" id="discount" value="0" class="form-control">
        </div>

        <!-- Final Amount -->
        <div  class="form-group col-md-4">
            <label class="block mb-1">Final Amount</label>
            <input type="text" name="final_amount" id="final_amount" class="form-control" readonly>
        </div>

     
        
    </div>

    <div class="row">

<div class="form-group col-md-4">
    <label class="block mb-1">Subscription Start Date</label>
    <input type="date" name="start_date" id="start_date" class="form-control">
</div>

<div class="form-group col-md-4">
    <label class="block mb-1">Subscription End Date</label>
    <input type="date" name="end_date" id="end_date" class="form-control" readonly  >
</div>
    </div>
    

    <button type="submit" class="btn btn-info btn-sm mt-4">Create Tenant</button>
</form>

<script>
    const planSelect = document.getElementById('plan_id');
     const discountInput = document.getElementById('discount');
    const finalAmountInput = document.getElementById('final_amount');

    // function updateFinalAmount() {
    //     const selectedPlan = planSelect.selectedOptions[0];
    //     const price = parseFloat(selectedPlan.dataset.price);
    //     const discount = parseFloat(discountInput.value) || 0;
    //     finalAmountInput.value = (price - discount).toFixed(2);
    // }

    // planSelect.addEventListener('change', updateFinalAmount);
    // discountInput.addEventListener('input', updateFinalAmount);
    // updateFinalAmount(); // initial


    const subscriptionType = document.getElementById('subscription_type');

function updateFinalAmount() {
    const selectedPlan = planSelect.selectedOptions[0];
    const type = subscriptionType.value;
    const duration = parseInt(durationInput.value) || 1; // <-- number of months/years
    let basePrice = 0;

    if (type === 'monthly') {
        basePrice = parseFloat(selectedPlan.dataset.monthly);
    } else {
        basePrice = parseFloat(selectedPlan.dataset.yearly);
    }

    let price = basePrice * duration; // total for selected duration

    const discount = parseFloat(discountInput.value) || 0;
    finalAmountInput.value = (price - discount).toFixed(2);

    // Automatically set end date
    const start = new Date(start_date.value);
    let end = new Date(start);

    if (type === 'monthly') {
        end.setMonth(end.getMonth() + duration);
    } else {
        end.setFullYear(end.getFullYear() + duration);
    }

    end_date.value = end.toISOString().split('T')[0];
}

// Events
planSelect.addEventListener('change', updateFinalAmount);
discountInput.addEventListener('input', updateFinalAmount);
subscriptionType.addEventListener('change', updateFinalAmount);
start_date.addEventListener('change', updateFinalAmount);
durationInput.addEventListener('input', updateFinalAmount); // <-- new input for duration

updateFinalAmount(); // initialize

</script>
@endsection