@extends('layouts.app')
@section('title', __('users_locations_purchase.users_locations_in_system'))

@section('content')

    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">@lang('users_locations_purchase.users_locations_in_system')

        </h1>

    </section>


    <section>
        @component('components.widget')

            @slot('tool')
                <div class="box-tools">

                    <button class="tw-dw-btn tw-font-bold tw-text-white tw-border-none tw-rounded-2xl pull-right tw-mb-2 btn-modal"
                        style="background-color: @if (!empty(session('business.theme_color'))) {{ session('business.theme_color') }} @else{{ '#3498db' }} @endif;"
                        data-href="{{ action([\App\Http\Controllers\UsersLocationsPurchaseController::class, 'purchase_users']) }}"
                        data-container=".purchase_users_modal">
                        <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.purchase_users')
                    </button>
                </div>
                @if ($IsGbs == true)
                    <div class="box-tools">

                        <button
                            class="tw-dw-btn tw-font-bold tw-text-white tw-border-none tw-rounded-2xl pull-right tw-mb-2 btn-modal"
                            style="background-color: @if (!empty(session('business.theme_color'))) {{ session('business.theme_color') }} @else{{ '#3498db' }} @endif;"
                            data-href="{{ action([\App\Http\Controllers\UsersLocationsPurchaseController::class, 'purchase_users_with_gbs']) }}"
                            data-container=".purchase_users_with_gbs_modal">
                            <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('users_locations_purchase.purchase_users_with_gbs')
                        </button>
                    </div>
                @endif

                <div class="box-tools">

                    <button class="tw-dw-btn tw-font-bold tw-text-white tw-border-none tw-rounded-2xl pull-right tw-mb-2 btn-modal"
                        style="background-color: @if (!empty(session('business.theme_color'))) {{ session('business.theme_color') }} @else{{ '#3498db' }} @endif;"
                        data-href="{{ action([\App\Http\Controllers\UsersLocationsPurchaseController::class, 'purchase_locations']) }}"
                        data-container=".purchase_locations_modal">
                        <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('users_locations_purchase.purchase_locations')
                    </button>
                </div>
                @php
                    $Subscribe_Status = \App\System::where('key', 'Subscribe_Status')->value('value');
                @endphp
                @if ($Subscribe_Status == 0)
                    <div class="box-tools">
                        <button
                            class="tw-dw-btn tw-font-bold tw-text-white tw-border-none tw-rounded-2xl pull-right tw-mb-2 btn-modal"
                            style="background-color: @if (!empty(session('business.theme_color'))) {{ session('business.theme_color') }} @else{{ '#3498db' }} @endif;"
                            data-href="{{ action([\App\Http\Controllers\UsersLocationsPurchaseController::class, 'payYearlySubscribeModal']) }}"
                            data-container=".pay_yearly_subscribe_modal"
                            class="tw-dw-btn tw-dw-btn-outline tw-dw-btn-xs tw-dw-btn-success payment-button">
                            <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('users_locations_purchase.pay_yearly_subscibe')
                        </button>

                    </div>
                @endif
            @endslot
        @endcomponent

    </section>

    <!-- System Information Cards -->
    <section>

        <div class="row">
            <div class="col-md-4">
                <div class="info-box bg-gradient-info">
                    <span class="info-box-icon"><i class="fas fa-users"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">@lang('users_locations_purchase.users_in_system')</span>
                        <span class="info-box-number">{{ $totalUsersCount ?? 0}}</span>
                        <div class="progress">
                            <div class="progress-bar" style="width: 100%"></div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="info-box bg-gradient-success">
                    <span class="info-box-icon"><i class="fas fa-map-marker-alt"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">@lang('users_locations_purchase.locations_in_system')</span>
                        <span class="info-box-number">{{ $totalLocationsCount ?? 0 }}</span>
                        <div class="progress">
                            <div class="progress-bar" style="width: 100%"></div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="info-box bg-gradient-success">
                    <span class="info-box-icon"><i class="fas fa-map-marker-alt"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">@lang('users_locations_purchase.users_count_system_with_gbs')</span>
                        <span class="info-box-number">{{ $totalUsersWithGbsCount ?? 0}}</span>
                        <div class="progress">
                            <div class="progress-bar" style="width: 100%"></div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="info-box bg-gradient-warning">
                    <span class="info-box-icon"><i class="fas fa-calendar-alt"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">@lang('users_locations_purchase.yearly_amount')</span>
                        <span class="info-box-number">
                            {{ number_format($contactInfo->yearly_subscribe, 2) }}
                        </span>
                        <div class="progress">
                            <div class="progress-bar" style="width: 100%"></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </section>

    <!-- Main content -->
    <section class="content">
        @component('components.widget', [
            'class' => 'box-primary',
            'title' => __('users_locations_purchase.all_users_purchase'),
        ])
            <div class="table-responsive">
                <table class="table table-bordered table-striped" id="users_purchase_table">
                    <thead>
                        <tr>

                            <th>@lang('users_locations_purchase.users_counts_view')</th>
                            <th>@lang('users_locations_purchase.total_amount')</th>
                            <th>@lang('users_locations_purchase.status')</th>
                            <th>@lang('users_locations_purchase.action')</th>

                        </tr>
                    </thead>
                </table>
            </div>
        @endcomponent

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    </section>

    <section class="content">
        @component('components.widget', [
            'class' => 'box-primary',
            'title' => __('users_locations_purchase.all_users_with_gbs_purchase'),
        ])
            <div class="table-responsive">
                <table class="table table-bordered table-striped" id="users_with_gbs_purchase_table">
                    <thead>
                        <tr>

                            <th>@lang('users_locations_purchase.users_with_gbs_counts_view')</th>
                            <th>@lang('users_locations_purchase.total_amount')</th>
                            <th>@lang('users_locations_purchase.status')</th>
                            <th>@lang('users_locations_purchase.action')</th>

                        </tr>
                    </thead>
                </table>
            </div>
        @endcomponent

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    </section>


    <!-- Main content -->
    <section class="content">
        @component('components.widget', [
            'class' => 'box-primary',
            'title' => __('users_locations_purchase.all_locations_purchase'),
        ])
            <div class="table-responsive">
                <table class="table table-bordered table-striped" id="business_location_table2">
                    <thead>
                        <tr>
                            <th>@lang('users_locations_purchase.locations_counts_view')</th>
                            <th>@lang('users_locations_purchase.total_amount')</th>
                            <th>@lang('users_locations_purchase.status')</th>
                            <th>@lang('users_locations_purchase.action')</th>

                        </tr>
                    </thead>
                </table>
            </div>
        @endcomponent

        <div class="modal fade purchase_users_modal" tabindex="-1" role="dialog"
            aria-labelledby="gridSystemModalLabel">
        </div>
        <div class="modal fade purchase_users_with_gbs_modal" tabindex="-1" role="dialog"
            aria-labelledby="gridSystemModalLabel">
        </div>
        <div class="modal fade purchase_locations_modal" tabindex="-1" role="dialog"
            aria-labelledby="gridSystemModalLabel">
        </div>
        <div class="modal fade pay_yearly_subscribe_modal" tabindex="-1" role="dialog"
            aria-labelledby="gridSystemModalLabel">
        </div>


    </section>
    <!-- /.content -->
@stop
@section('javascript')
    <script type="text/javascript">
        $(document).ready(function() {
            var users_table = $('#users_purchase_table').DataTable({
                processing: true,
                serverSide: true,
                fixedHeader: false,
                ajax: '/users_purchase',
                columnDefs: [{
                    "targets": [0, 3],
                    "orderable": false,
                    "searchable": false
                }],
                "columns": [

                    {
                        "data": "users_count"
                    },
                    {
                        "data": "total_amount"
                    },
                    {
                        "data": "status"
                    },
                    {
                        "data": "action"
                    },

                ]

            });
            var users_table = $('#users_with_gbs_purchase_table').DataTable({
                processing: true,
                serverSide: true,
                fixedHeader: false,
                ajax: '/users_with_gbs_purchase',
                columnDefs: [{
                    "targets": [0, 3],
                    "orderable": false,
                    "searchable": false
                }],
                "columns": [

                    {
                        "data": "users_with_gbs_count"
                    },
                    {
                        "data": "total_amount"
                    },
                    {
                        "data": "status"
                    },
                    {
                        "data": "action"
                    },

                ]

            });
            var business_locations = $('#business_location_table2').DataTable({
                processing: true,
                serverSide: true,
                bPaginate: false,
                fixedHeader: false,
                buttons: [],
                ajax: '/locations_purchase',
                columnDefs: [{
                    "targets": [0, 3],
                    "orderable": false,
                    "searchable": false
                }],
                columns: [

                    {
                        "data": "locations_count"
                    },
                    {
                        "data": "total_amount"
                    },
                    {
                        "data": "status"
                    },
                    {
                        "data": "action"
                    },
                ]
            });




            $('#users_table tbody').on('click', 'input.row_checkbox', function(e) {
                e.stopPropagation();
            });
            $(document).on('click', '.payment-button', function(e) {
                e.preventDefault();
                var paymentUrl = $(this).data('href');

                // Option 1: Redirect directly to payment URL
                window.location.href = paymentUrl;

            });

            function initializeFlatpickr() {
                flatpickr("#timePicker", {
                    enableTime: true,
                    noCalendar: true,
                    dateFormat: "h:i K",
                    allowInput: true,
                    time_24hr: false,
                });
            }

            $(document).on('click', '.btn-modal', function(e) {
                e.preventDefault();
                var container = $(this).data('container');
                var href = $(this).data('href');

                $(container).empty().load(href, function() {
                    $(this).find('.modal').modal('show');
                });
            });

            // Clean up when modal is closed
            $(document).on('hidden.bs.modal', '.purchase_users_modal', function() {
                $(this).empty();
            });
            $(document).on('hidden.bs.modal', '.purchase_users_with_gbs_modal', function() {
                $(this).empty();
            });
            $(document).on('hidden.bs.modal', '.purchase_locations_modal', function() {
                $(this).empty();
            });
            $(document).on('hidden.bs.modal', '.pay_yearly_subscribe_modal', function() {
                $(this).empty();
            });



        });
    </script>
    <!-- Include Flatpickr JS -->
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

    <style>
        #shiftModal .modal-dialog {
            max-width: 95%;
            margin: 1.75rem auto;
            direction: rtl;
        }

        #shiftModal .modal-body table {
            margin-bottom: 20px;
        }

        #shiftModal .modal-body th,
        #shiftModal .modal-body td {
            vertical-align: middle;
            text-align: center;
        }

        #shiftModal .inner-shift-table th,
        #shiftModal .inner-shift-table td {
            font-size: 0.875rem;
            padding: 0.4rem;
        }

        @media (max-width: 768px) {
            #shiftModal .modal-body {
                padding: 1rem;
            }

            #shiftModal .inner-shift-table th,
            #shiftModal .inner-shift-table td {
                font-size: 0.75rem;
            }

            #shiftModal .toggle-shift,
            #shiftModal .delete-shift {
                font-size: 0.75rem;
                padding: 0.25rem 0.5rem;
            }
        }
    </style>



@endsection