@extends('layouts.main')
@section('content')
    <style>
        .custom-btn {
            border: none;
            padding: 8px 16px;
            border-radius: 5px;
            font-size: 14px;
            transition: 0.3s;
        }

        /* Cancel */
        .btn-cancel {
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
        }

        .btn-cancel:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        /* Update */
        .btn-update {
            background: var(--primary);
            color: #fff;
        }

        .btn-update:hover {
            background: var(--primary-light);
        }

        /* BACK LINK */
        .back-link {
            color: #818CF8;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
            font-weight: 500;
            transition: 0.3s;
        }

        .back-link:hover {
            color: #6366f1;
            transform: translateX(-4px);
        }

        .form-section {
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
    <a href="{{ route('admin.sessions.index') }}" class="back-link">
        <i class="bi bi-arrow-left"></i> Back to Sessions
    </a>
    <div class="form-section">
        <h2>✏️ Edit Session Type</h2>
        <form method="POST" action="{{ route('superadmin.session.type.update', $type->id) }}">
            @csrf
            @method('PUT')

            <div class="row g-4">

                <!-- SESSION TYPE -->
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Session Type</label>
                    <input type="text" name="name" class="form-control form-control-lg"
                        value="{{ old('name', $type->name) }}" required>
                </div>

                <!-- SESSION TIME -->
                <div class="col-md-2">
                    <label class="form-label fw-semibold">Session Time</label>
                    <input type="text" name="session_time" class="form-control form-control-lg"
                        value="{{ old('session_time', $type->session_time) }}" required>
                </div>

                <!-- TIME SLOT -->
                <div class="col-md-2">
                    <label class="form-label fw-semibold">Time Slot</label>
                    <input type="text" name="time_slot" class="form-control form-control-lg"
                        value="{{ old('time_slot', $type->time_slot) }}" required>
                </div>

                <!-- FEES -->
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Fees (₹)</label>
                    <input type="number" name="fees" id="fees" class="form-control form-control-lg"
                        value="{{ old('fees', $type->fees) }}" required>
                </div>

                <!-- 3 SESSION -->
                <div class="col-md-4">
                    <label class="form-label fw-semibold">3 Session Discount Type</label>
                    <select name="3_ssn_discount_type" id="three_type" class="form-select form-select-lg" required>

                        <option value="per" {{ $type->{'3_ssn_discount_type'} == 'per' ? 'selected' : '' }}>
                            Percentage (%)
                        </option>

                        <option value="amount" {{ $type->{'3_ssn_discount_type'} == 'amount' ? 'selected' : '' }}>
                            Amount (₹)
                        </option>

                    </select>
                </div>

                <div class="col-md-4">
                    <label class="form-label fw-semibold">3 Session Discount Value</label>
                    <input type="number" name="3_ssn_value" id="three_value" class="form-control form-control-lg"
                        value="{{ old('3_ssn_value', $type->{'3_ssn_value'}) }}" required>
                </div>

                <div class="col-md-4">
                    <label class="form-label fw-semibold">3 Session Total</label>
                    <input type="number" name="3_ssn_total" id="three_total" class="form-control form-control-lg"
                        value="{{ old('3_ssn_total', $type->{'3_ssn_total'}) }}" readonly>
                </div>

                <!-- 6 SESSION -->
                <div class="col-md-4">
                    <label class="form-label fw-semibold">6 Session Discount Type</label>
                    <select name="6_ssn_discount_type" id="six_type" class="form-select form-select-lg" required>

                        <option value="per" {{ $type->{'6_ssn_discount_type'} == 'per' ? 'selected' : '' }}>
                            Percentage (%)
                        </option>

                        <option value="amount" {{ $type->{'6_ssn_discount_type'} == 'amount' ? 'selected' : '' }}>
                            Amount (₹)
                        </option>

                    </select>
                </div>

                <div class="col-md-4">
                    <label class="form-label fw-semibold">6 Session Discount Value</label>
                    <input type="number" name="6_ssn_value" id="six_value" class="form-control form-control-lg"
                        value="{{ old('6_ssn_value', $type->{'6_ssn_value'}) }}" required>
                </div>

                <div class="col-md-4">
                    <label class="form-label fw-semibold">6 Session Total</label>
                    <input type="number" name="6_ssn_total" id="six_total" class="form-control form-control-lg"
                        value="{{ old('6_ssn_total', $type->{'6_ssn_total'}) }}" readonly>
                </div>

                <!-- STATUS -->
                <div class="col-md-4">
                    <label class="form-label fw-semibold">Status</label>

                    <select name="status" class="form-select form-select-lg">
                        <option value="1" {{ $type->status == 1 ? 'selected' : '' }}>
                            Active
                        </option>

                        <option value="0" {{ $type->status == 0 ? 'selected' : '' }}>
                            Inactive
                        </option>
                    </select>
                </div>

            </div>

            <div class="text-end mt-4">
                <button type="submit" class="custom-btn btn-update btn-primary btn-lg">
                    Update Session
                </button>
            </div>

        </form>

        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
        <script>
            $(document).ready(function () {

                function calculateThreeSession() {
                    let fee = parseFloat($('#fees').val()) || 0;
                    let original = fee * 3;

                    let discount = 0;

                    if ($('#three_type').val() === 'per') {
                        discount = (original * (parseFloat($('#three_value').val()) || 0)) / 100;
                    } else if ($('#three_type').val() === 'amount') {
                        discount = parseFloat($('#three_value').val()) || 0;
                    }

                    $('#three_total').val(Math.max(0, original - discount).toFixed(2));
                }

                function calculateSixSession() {
                    let fee = parseFloat($('#fees').val()) || 0;
                    let original = fee * 6;

                    let discount = 0;

                    if ($('#six_type').val() === 'per') {
                        discount = (original * (parseFloat($('#six_value').val()) || 0)) / 100;
                    } else if ($('#six_type').val() === 'amount') {
                        discount = parseFloat($('#six_value').val()) || 0;
                    }

                    $('#six_total').val(Math.max(0, original - discount).toFixed(2));
                }

                $('#fees, #three_type, #three_value, #six_type, #six_value').on('keyup change', function () {
                    calculateThreeSession();
                    calculateSixSession();
                });

                // Initial Calculation
                calculateThreeSession();
                calculateSixSession();
            });
        </script>

@endsection