@extends('layouts.app')

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

@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_pricings')</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="tw-flex tw-justify-end tw-gap-2.5">
                <a class="tw-dw-btn tw-font-bold tw-text-white tw-border-none tw-rounded-2xl pull-right"
                   style="background-color: {{ session('business.theme_color') ?? '#3498db' }};"
                   href="{{ action([\Modules\Master\Http\Controllers\PricingController::class, 'create']) }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                         class="icon icon-tabler icons-tabler-outline icon-tabler-plus">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                        <path d="M12 5l0 14"/>
                        <path d="M5 12l14 0"/>
                    </svg> @lang('messages.add')
                </a>
            </div>

            <div class="tw-flow-root tw-mt-5 tw-border-b tw-border-gray-200">
                <div class="tw-mx-4 tw--my-2 tw-overflow-x-auto sm:tw--mx-5">
                    <div class="tw-inline-block tw-min-w-full tw-py-2 tw-align-middle sm:tw-px-5">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped" id="pricings_table">
                                <thead>
                                    <tr>
                                        <th>@lang('master::lang.pricing_name')</th>
                                        <th>@lang('master::lang.monthly_price_per_user') ( د.ع )</th>
                                        <th>@lang('master::lang.yearly_price_per_user') ( د.ع )</th>
                                        <th>@lang('master::lang.description')</th>
                                        <th>@lang('master::lang.grace_period_days') (أيام)</th>
                                        <th>@lang('master::lang.status')</th>
                                        <th>@lang('master::lang.action')</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>
@endsection

@section('javascript')
<script type="text/javascript">
$(document).ready(function() {
    var pricings_table = $('#pricings_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ action([\Modules\Master\Http\Controllers\PricingController::class, 'index']) }}",
        aaSorting: [[0, 'asc']],
        columns: [
            { data: 'name', name: 'name' },
            { 
                data: 'monthly_price_per_user', 
                name: 'monthly_price_per_user',
                render: function(data) {
                    return parseFloat(data).toFixed(2);
                }
            },
            { 
                data: 'yearly_price_per_user', 
                name: 'yearly_price_per_user',
                render: function(data) {
                    return parseFloat(data).toFixed(2);
                }
            },
            { data: 'description', name: 'description' },
            { data: 'grace_period_days', name: 'grace_period_days' }, // ✅ العمود الجديد
            { data: 'status', name: 'status', orderable: false, searchable: false },
            { data: 'action', name: 'action', orderable: false, searchable: false },
        ]
    });

    $(document).on('submit', 'form.delete_pricing_form', function(e) {
        e.preventDefault();
        swal({
            title: LANG.sure,
            text: "Once deleted, you will not be able to recover this Pricing Plan!",
            icon: "warning",
            buttons: true,
            dangerMode: true,
        }).then((confirmed) => {
            if (confirmed) {
                this.submit();
            }
        });
    });
});
</script>
@endsection