@extends('admin.layout.main')
@section('content')
    <div class="page-content">
        <!--breadcrumb-->
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">Subscriptions</div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}"><i class="bx bx-home-alt"></i></a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">Subscriptions</li>
                    </ol>
                </nav>
            </div>
            <div class="ms-auto">
                {{-- <div class="btn-group">
                    <button data-bs-toggle="modal" data-bs-target="#add_court_modal" type="button"
                        class="d-flex align-items-center btn btn-primary font-18"><span>
                            Create Subscription </span><i class="bx bx-plus ms-1"></i></button>

                </div> --}}
            </div>
        </div>
        <!--end breadcrumb-->
        <hr />
        <div class="card user-table">
            <div class="card-body">

                <div class="tab-content py-3">
                    <div class="tab-pane fade show active" id="primaryhome" role="tabpanel">
                        <div class="table-responsive">
                            <table id="subscription_table" class="table table-bordered table-striped" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Player Image</th>
                                        <th>Player Name</th>
                                        <th>Subscription Type</th>
                                        <th>Start Date</th>
                                        <th>End Date</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>

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

    {{-- modals --}}
    <div class="modal fade" id="edit_event_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Edit Menu</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="profile_modal_wrap">
                        <div class="main-body">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="d-flex flex-column align-items-center text-center">
                                                <div class="">
                                                    <h4>Edit Subscription Offer</h4>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row mb-3 align-items-center">
                                                <div class="col-sm-3">
                                                    <h6 class="mb-0">Offer Title</h6>
                                                </div>
                                                <div class="col-sm-9 text-secondary">
                                                    <input type="text" class="form-control" value="Summer Special Offer">
                                                </div>
                                            </div>
                                            <div class="row mb-3 align-items-center">
                                                <div class="col-sm-3">
                                                    <h6 class="mb-0">Discount (%)</h6>
                                                </div>
                                                <div class="col-sm-9 text-secondary">
                                                    <input type="text" class="form-control" value="20">
                                                </div>
                                            </div>
                                            <div class="row mb-3 align-items-center">
                                                <div class="col-sm-3">
                                                    <h6 class="mb-0">Valid Until</h6>
                                                </div>
                                                <div class="col-sm-9 text-secondary">
                                                    <input type="date" class="form-control" value="2025-08-31">
                                                </div>
                                            </div>
                                            <div class="row mb-3 align-items-center">
                                                <div class="col-sm-3">
                                                    <h6 class="mb-0">Apply To</h6>
                                                </div>
                                                <div class="col-sm-9 text-secondary">
                                                    <select class="form-control">
                                                        <option value="all">All Users</option>
                                                        <option value="paid" selected>Paid Users</option>
                                                        <option value="free">Free Users</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="row mb-3 align-items-center">
                                                <div class="col-sm-3">
                                                    <h6 class="mb-0">Features Included</h6>
                                                </div>
                                                <div class="col-sm-9 text-secondary">
                                                    <div class="multi-select">
                                                        <div class="select-box">
                                                            <span class="select-placeholder">Select features...</span>
                                                            <span class="select-arrow">&#9662;</span>
                                                        </div>
                                                        <div class="options">
                                                            <div data-value="Create Post">Create Post</div>
                                                            <div data-value="Like Post">Like Post</div>
                                                            <div data-value="Share Post">Share Post</div>
                                                            <div data-value="Comment on Post">Comment on Post</div>
                                                            <div data-value="Access to Ads Centre">Access to Ads Centre
                                                            </div>
                                                            <div data-value="Access to Quality Clubs">Access to Quality
                                                                Clubs</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary"
                                                    data-bs-dismiss="modal">Create Offer</button>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function() {
            var table = $('#subscription_table').DataTable({
                lengthChange: false,
                dom: '<"top"lf>rt<"bottom"B><"d-flex justify-content-between align-items-center"ip>',
                buttons: ['copy', 'excel', 'pdf', 'print'],
                processing: true,
                serverSide: true,
                scrollX: true,
                responsive: false,
                order: [],
                ajax: '{{ route('subscriptions.index') }}',
                columns: [{
                        data: 'picture',
                        name: 'picture',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'player_name',
                        name: 'player_name'
                    },
                    {
                        data: 'type',
                        name: 'type'
                    },
                    {
                        data: 'start_date',
                        name: 'start_date'
                    },
                    {
                        data: 'end_date',
                        name: 'end_date'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    }
                ],
            });

            table.buttons().container()
                .appendTo('#subscription_table_wrapper .col-md-6:eq(0)');
        });
    </script>
@endpush