@extends('user.layouts')

@section('title', 'Subscription Master')

@section('header')

<link rel="stylesheet" type="text/css"
    href="{{ asset('/assets') }}/css/datatable/dataTables.bootstrap5.min.css">

<link rel="stylesheet" type="text/css"
    href="{{ asset('/assets') }}/css/datatable/responsive.bootstrap.min.css">

<style>
    .subscription-wrapper {
        padding-top: 25px;
        padding-bottom: 30px;
    }

    .subscription-card {
        border: 1px solid #f0e7ec !important;
        border-radius: 18px !important;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06) !important;
        overflow: hidden;
    }

    .subscription-card .card-body {
        padding: 28px !important;
    }

    .master-title-area {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 5px;
    }

    .master-title-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(254, 93, 186, 0.10);
        color: #fe5dba;
        font-size: 17px;
        flex-shrink: 0;
    }

    .master-title {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
    }

    .master-subtitle {
        margin: 4px 0 0;
        color: #8b8b8b;
        font-size: 13px;
    }

    .form-section {
        margin-top: 25px;
    }

    .form-section .filter-by-p {
        font-size: 13px;
        font-weight: 600;
        color: #4a4a4a;
    }

    .form-section .form-control {
        min-height: 46px;
        border-radius: 10px;
    }

    .form-section .form-control:focus {
        box-shadow: 0 0 0 3px rgba(254, 93, 186, 0.10);
    }

    .input-with-icon {
        position: relative;
    }

    .input-with-icon .form-control {
        padding-left: 42px;
    }

    .input-field-icon {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #fe5dba;
        font-size: 14px;
        z-index: 2;
        pointer-events: none;
    }

    .subscription-submit {
        min-width: 190px;
        min-height: 44px;
        border-radius: 10px;
    }

    .subscription-table-card {
        border: 1px solid #f0e7ec !important;
        border-radius: 18px !important;
        overflow: hidden;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05);
    }

    .table-heading-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
    }

    .table-heading {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
    }

    .percentage-badge {
        display: inline-block;
        min-width: 55px;
        padding: 6px 10px;
        border-radius: 8px;
        text-align: center;
        background: rgba(254, 93, 186, 0.10);
        color: #e949a5;
        font-weight: 600;
        font-size: 12px;
    }

    .amount-text {
        font-weight: 600;
    }

    .validity-text {
        white-space: nowrap;
    }

    @media (max-width: 767px) {
        .subscription-card .card-body {
            padding: 20px !important;
        }
    }
</style>

@endsection


@section('content')

<div class="container-fluid page-wrapper subscription-wrapper">

    <div class="container">

        <div class="row justify-content-center">

            <div class="col-xl-9 col-lg-10 col-md-11 col-12">

                <div class="card subscription-card border-0">

                    <div class="card-body">

                        <div class="master-title-area">

                            <div class="master-title-icon">
                                <i class="fa-solid fa-sliders"></i>
                            </div>

                            <div>
                                <h3 class="master-title">
                                    Subscription Master
                                </h3>

                                <p class="master-subtitle">
                                    Manage subscription, commission and validity details
                                </p>
                            </div>

                        </div>


                        <form action="{{ route('subscriptionmaster_store') }}"
                            method="POST"
                            id="subscriptionForm">

                            @csrf

                            <div class="row form-section">


                                {{-- SUBSCRIPTION AMOUNT --}}

                                <div class="col-lg-6 col-md-6 mb-3">

                                    <label class="mb-2 filter-by-p">
                                        Subscription Amount
                                    </label>

                                    <div class="input-with-icon">

                                        <i class="fa-solid fa-indian-rupee-sign input-field-icon"></i>

                                        <input type="number"
                                            step="0.01"
                                            min="0"
                                            class="form-control filter-input"
                                            name="subscription_amount"
                                            value="{{ old('subscription_amount') }}"
                                            placeholder="Enter Subscription Amount">

                                    </div>

                                    @error('subscription_amount')
                                    <span class="text-danger">
                                        {{ $message }}
                                    </span>
                                    @enderror

                                </div>



                                {{-- REFERRAL COMMISSION --}}

                                <div class="col-lg-6 col-md-6 mb-3">

                                    <label class="mb-2 filter-by-p">
                                        Referral Commission
                                    </label>

                                    <div class="input-with-icon">

                                        <i class="fa-solid fa-indian-rupee-sign input-field-icon"></i>

                                        <input type="number"
                                            step="0.01"
                                            min="0"
                                            class="form-control filter-input"
                                            name="referral_amount"
                                            value="{{ old('referral_amount') }}"
                                            placeholder="Enter Referral Commission">

                                    </div>

                                    @error('referral_amount')
                                    <span class="text-danger">
                                        {{ $message }}
                                    </span>
                                    @enderror

                                </div>



                                {{-- AGENT COMMISSION --}}

                                <div class="col-lg-6 col-md-6 mb-3">

                                    <label class="mb-2 filter-by-p">
                                        Agent Commission %
                                    </label>

                                    <div class="input-with-icon">

                                        <i class="fa-solid fa-percent input-field-icon"></i>

                                        <input type="number"
                                            step="0.01"
                                            min="0"
                                            max="100"
                                            class="form-control filter-input"
                                            name="agent_commission_percentage"
                                            value="{{ old('agent_commission_percentage') }}"
                                            placeholder="Enter Agent Commission Percentage">

                                    </div>

                                    @error('agent_commission_percentage')
                                    <span class="text-danger">
                                        {{ $message }}
                                    </span>
                                    @enderror

                                </div>



                                {{-- SPONSOR PERCENTAGE --}}

                                <div class="col-lg-6 col-md-6 mb-3">

                                    <label class="mb-2 filter-by-p">
                                        Sponsor Percentage %
                                    </label>

                                    <div class="input-with-icon">

                                        <i class="fa-solid fa-percent input-field-icon"></i>

                                        <input type="number"
                                            step="0.01"
                                            min="0"
                                            max="100"
                                            class="form-control filter-input"
                                            name="sponsor_percentage"
                                            value="{{ old('sponsor_percentage') }}"
                                            placeholder="Enter Sponsor Percentage">

                                    </div>

                                    @error('sponsor_percentage')
                                    <span class="text-danger">
                                        {{ $message }}
                                    </span>
                                    @enderror

                                </div>



                                {{-- TAX PERCENTAGE --}}

                                <div class="col-lg-6 col-md-6 mb-3">

                                    <label class="mb-2 filter-by-p">
                                        Withdraw Tax Percentage %
                                    </label>

                                    <div class="input-with-icon">

                                        <i class="fa-solid fa-percent input-field-icon"></i>

                                        <input type="number"
                                            step="0.01"
                                            min="0"
                                            max="100"
                                            class="form-control filter-input"
                                            name="tax_percentage"
                                            value="{{ old('tax_percentage') }}"
                                            placeholder="Enter Tax Percentage">

                                    </div>

                                    @error('tax_percentage')
                                    <span class="text-danger">
                                        {{ $message }}
                                    </span>
                                    @enderror

                                </div>



                                {{-- VALIDITY TYPE --}}

                                <div class="col-lg-6 col-md-6 mb-3">

                                    <label class="mb-2 filter-by-p">
                                        Validity Type
                                    </label>

                                    <select name="validity_type"
                                        class="form-control filter-input">

                                        <option value="">
                                            Select Type
                                        </option>

                                        <option value="month"
                                            {{ old('validity_type') == 'month' ? 'selected' : '' }}>
                                            Month
                                        </option>

                                        <option value="year"
                                            {{ old('validity_type') == 'year' ? 'selected' : '' }}>
                                            Year
                                        </option>

                                    </select>

                                    @error('validity_type')
                                    <span class="text-danger">
                                        {{ $message }}
                                    </span>
                                    @enderror

                                </div>



                                {{-- VALIDITY PERIOD --}}

                                <div class="col-lg-6 col-md-6 mb-3">

                                    <label class="mb-2 filter-by-p">
                                        Validity Period
                                    </label>

                                    <div class="input-with-icon">

                                        <i class="fa-regular fa-calendar input-field-icon"></i>

                                        <input type="number"
                                            min="1"
                                            class="form-control filter-input"
                                            name="validity_period"
                                            value="{{ old('validity_period') }}"
                                            placeholder="Enter Validity Period">

                                    </div>

                                    @error('validity_period')
                                    <span class="text-danger">
                                        {{ $message }}
                                    </span>
                                    @enderror

                                </div>


                                {{-- SUBMIT --}}

                                <div class="col-12 text-center mt-3">

                                    <button type="button"
                                        id="submitBtn"
                                        class="btn btn-primary feature-btn subscription-submit"
                                        onclick="submitSubscriptionForm()">

                                        <i class="fa-solid fa-plus me-2"></i>

                                        Add Subscription

                                    </button>

                                </div>

                            </div>

                        </form>

                    </div>

                </div>

            </div>

        </div>

    </div>



    {{-- ============================================================
         TABLE
    ============================================================ --}}

    <div class="row mt-4">

        <div class="col-lg-12">

            <div class="card datatable-card subscription-table-card">

                <div class="card-body">

                    <div class="table-heading-wrapper">

                        <h4 class="table-heading">
                            Subscription History
                        </h4>

                    </div>


                    <div class="table-responsive">

                        <table id="data-table"
                            class="table nowrap align-middle"
                            style="width:100%">

                            <thead>

                                <tr>

                                    <th>SN</th>

                                    <th>Subscription Amount</th>

                                    <th>Referral Amount</th>

                                    <th>Agent Commission %</th>

                                    <th>Sponsor Percentage %</th>

                                    <th>Tax %</th>

                                    <th>Validity</th>

                                    <th>Status</th>

                                    <th>Created Date</th>

                                    <th>Action</th>

                                </tr>

                            </thead>


                            <tbody>

                                @foreach($subscriptions as $item)

                                <tr>

                                    <td>
                                        {{ $loop->iteration }}
                                    </td>


                                    <td>
                                        <span class="amount-text">
                                            ₹{{ number_format($item->subscription_amount, 2) }}
                                        </span>
                                    </td>


                                    <td>
                                        <span class="amount-text">
                                            ₹{{ number_format($item->referral_amount, 2) }}
                                        </span>
                                    </td>


                                    <td>

                                        <span class="percentage-badge">
                                            {{ number_format($item->agent_commission_percentage, 2) }}%
                                        </span>

                                    </td>


                                    {{-- SPONSOR PERCENTAGE --}}

                                    <td>

                                        <span class="percentage-badge">
                                            {{ number_format($item->sponsor_percentage ?? 0, 2) }}%
                                        </span>

                                    </td>


                                    <td>

                                        <span class="percentage-badge">
                                            {{ number_format($item->tax_percentage, 2) }}%
                                        </span>

                                    </td>


                                    <td class="validity-text">

                                        {{ $item->validity_period }}

                                        {{ ucfirst($item->validity_type) }}

                                    </td>


                                    <td>

                                        @if($item->is_active == 1)

                                        <span class="badge bg-success">
                                            Active
                                        </span>

                                        @else

                                        <span class="badge bg-danger">
                                            Inactive
                                        </span>

                                        @endif

                                    </td>


                                    <td>

                                        {{ $item->created_at->format('Y-m-d') }}

                                    </td>


                                    <td>

                                        <a href="{{ route('edit_subscription_master', $item->id) }}"
                                            class="btn transparent-btn">

                                            <i class="fa-regular fa-pen-to-square edit-icon"></i>

                                        </a>

                                    </td>

                                </tr>

                                @endforeach

                            </tbody>

                        </table>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

@endsection


@section('footer')

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script type="text/javascript"
    src="{{ asset('/assets') }}/js/datatable/dataTables.bootstrap5.min.js"></script>

<script type="text/javascript"
    src="{{ asset('/assets') }}/js/datatable/datatables.init.js"></script>

<script type="text/javascript"
    src="{{ asset('/assets') }}/js/datatable/dataTables.responsive.min.js"></script>

<script type="text/javascript"
    src="{{ asset('/assets') }}/js/datatable/jquery.dataTables.min.js"></script>


<script>

    let subscriptionSubmitting = false;

    function submitSubscriptionForm() {

        if (subscriptionSubmitting) {
            return;
        }

        const form =
            document.getElementById('subscriptionForm');

        const btn =
            document.getElementById('submitBtn');


        if (!form.checkValidity()) {

            form.reportValidity();

            return;
        }


        subscriptionSubmitting = true;

        btn.disabled = true;

        btn.innerHTML =
            '<i class="fa fa-spinner fa-spin me-2"></i> Processing...';


        form.submit();
    }


    window.addEventListener('pageshow', function(event) {

        if (event.persisted) {

            subscriptionSubmitting = false;

            const btn =
                document.getElementById('submitBtn');

            btn.disabled = false;

            btn.innerHTML =
                '<i class="fa-solid fa-plus me-2"></i> Add Subscription';
        }

    });

</script>

@endsection