@extends('layouts.app')

@section('title', __('master::lang.master') . ' | ' . __('master::lang.subscriptions'))

@section('content')
@include('master::layouts.nav')

<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">
        @lang('master::lang.all_subscriptions')
    </h1>
</section>

<section class="content">
    <div class="tw-transition-all lg:tw-col-span-1 tw-duration-200 tw-bg-white tw-shadow-sm tw-rounded-xl tw-ring-1 hover:tw-shadow-md tw-ring-gray-200">
        <div class="tw-p-4 sm:tw-p-5">
            <div class="table-responsive">
                <table class="table table-bordered table-striped" id="subscriptions_table">
                    <thead>
                        <tr>
                            <th>@lang('master::lang.subdomain')</th>
                            <th>@lang('master::lang.client_name')</th>
                            <th>@lang('master::lang.client_email')</th>
                            <th>@lang('master::lang.client_phone')</th>
                            <th>@lang('master::lang.client_city')</th>
                            <th>@lang('master::lang.pricing')</th>
                            <th>@lang('master::lang.users_count')</th>
                            <th>@lang('master::lang.billing_cycle')</th>
                            <th>@lang('master::lang.total_price') ( د.ع )</th>
                            <th>@lang('master::lang.price_after_discount') ( د.ع )</th>
                            <th>@lang('master::lang.coupon')</th>
                            <th>@lang('master::lang.start_date')</th>
                            <th>@lang('master::lang.end_date')</th>
                            <th>@lang('master::lang.created_by')</th>
                            <th>@lang('master::lang.status')</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</section>
@endsection

@section('javascript')
<script type="text/javascript">
$(document).ready(function() {
    var table = $('#subscriptions_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ action([\Modules\Master\Http\Controllers\MasterSubscriptionController::class, 'index']) }}",
            data: function(d) {
                d.subdomain_id = $('#filter_subdomain').val();
                d.pricing_id = $('#filter_pricing').val();
                d.status = $('#filter_status').val();
            }
        },
        columns: [
            { data: 'subdomain', name: 'subdomain.name' },
            { data: 'client_name', name: 'client.name' },
            { data: 'client_email', name: 'client.email' },
            { data: 'client_phone', name: 'client.phone' },
            { data: 'client_city', name: 'client.city.name' },
            { data: 'pricing', name: 'pricing.name' },
            { data: 'users_count', name: 'users_count' },
            { 
                data: 'billing_cycle', 
                name: 'billing_cycle',
                render: function(data) {
                    if(data === 'monthly') return 'شهري';
                    if(data === 'yearly') return 'سنوي';
                    return '-';
                }
            },
            { 
                data: 'total_price', 
                name: 'total_price',
                render: function(data) {
                    return parseFloat(data).toFixed(2);
                }
            },
            { 
                data: 'price_after_discount', 
                name: 'price_after_discount',
                render: function(data) {
                    return parseFloat(data).toFixed(2);
                }
            },
            { data: 'coupon', name: 'coupon.code' },
            { 
                data: 'start_date', 
                name: 'start_date',
                render: function(data) {
                    return data ? moment(data).format('YYYY-MM-DD') : 'N/A';
                }
            },
            { 
                data: 'end_date', 
                name: 'end_date',
                render: function(data) {
                    return data ? moment(data).format('YYYY-MM-DD') : 'N/A';
                }
            },
            { data: 'created_by', name: 'created_by', defaultContent: '-' },
            { data: 'status', name: 'status' }
        ]
    });

    $('#btn_filter').click(function() {
        table.ajax.reload();
    });
});
</script>
@endsection