@php
    $header_title = 'Aurobees  | Subscription';
    $header_name = 'lob_subscription_management';
    $page_name = 'lob_subscription';
@endphp
@extends('admin.admin_master')
@section('admin')
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Subscription</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard')}}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Subscription</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
    <!-- /.content-header -->
    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">All Subscription</h3>
                            <div style="float: right"><a href="{{route('lob.subscription.excel')}}" class="btn btn-primary btn-rounded">Download</a></div>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body" style="overflow-x: scroll;">
                            <form style="display:none;" action="{{route('lob.subscription.excel')}}">
                                <div class="row">
                                    <div class="col col-2">
                                        <div class="form-group">
                                            <label>Status</label>
                                            <select name="subscription_status" onchange="changeFilter();" id="subscription_status" class="form-control">
                                                <option value="">All</option>
                                                <option value="Active">Active</option>
                                                <option value="Canceled">Canceled</option>
                                                <option value="Pending">Pending</option>
                                                <option value="Processing">Processing</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col col-2">
                                        <div class="form-group">
                                            <label>LOB</label>
                                            <select name="subscription_lob" onchange="changeFilter();" id="subscription_lob" class="form-control">
                                                <option value="">All</option>
                                                <option value="7">Distribution</option>
                                                <option value="4">E-commerce Fulfillment</option>
                                                <option value="2">Freight Forwarding</option>
                                                <option value="1">Manufacturing</option>
                                                <option value="5">Trading</option>
                                                <option value="3">Transportation</option>
                                                <option value="6">Warehousing</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col col-2">
                                        <div class="form-group">
                                            <label>Plan Name</label>
                                            <select name="subscription_plan_name" onchange="changeFilter();" id="subscription_plan_name" class="form-control">
                                                <option value="">All</option>
                                                <option value="Free-Trial">Free Trial</option>
                                                <option value="Basic">Basic</option>
                                                <option value="Advance">Advance</option>
                                                <option value="Ecommerce">E-commerce</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col col-2">
                                        <div class="form-group">
                                            <label>Plan Duration</label>
                                            <select name="subscription_plan_duration" onchange="changeFilter();" id="subscription_plan_duration" class="form-control">
                                                <option value="">All</option>
                                                <option value="15 days">15 days</option>
                                                <option value="QTR">QTR</option>
                                                <option value="MTH">MTH</option>
                                                <option value="YLY">YLY</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col col-2">
                                        <div class="form-group">
                                            <label>From Date</label>
                                            <input type="date" name="subscription_from_date" onchange="changeFilter();" id="subscription_from_date" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col col-2">
                                        <div class="form-group">
                                            <label>To Date</label>
                                            <input type="date" name="subscription_to_date" onchange="changeFilter();" id="subscription_to_date" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col col-2">
                                        <div class="form-group">
                                            <label>Partner Code</label>
                                            <input type="text" name="subscription_partner_code" onchange="changeFilter();" id="subscription_partner_code" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col col-2">
                                        <div class="form-group">
                                            <label>User Code</label>
                                            <input type="text" name="subscription_user_code" onchange="changeFilter();" id="subscription_user_code" class="form-control">
                                        </div>
                                    </div>
                                    <div class="col col-2">
                                        <div class="form-group">
                                            <button type="submit" class="btn btn-primary btn-rounded">Download</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            
                            <table id="daterange_table" class="table table-striped table-bordered table-sm " cellspacing="0" width="100%">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>User</th>
                                        <th>Partner Code</th>
                                        <th>Lob</th>
                                        <th>Serial Number</th>
                                        <th>Start Date</th>
                                        <th>End Date</th>
                                        <th>Status</th>
                                        <th>Country Code</th>
                                        <th>Plan Name</th>
                                        <th>Plan Duration</th>
                                        <th>Currency Code</th>
                                        <th>Rate</th>
                                        <th>No. of User</th>
                                        <th>Total Rate</th>
                                        <th>Tax</th>
                                        <th>Grand Amount</th>
                                        <th style="min-width: 120px;">Action</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
</div>
{{-- model --}}
<div class="modal fade show" id="modal-lob" aria-modal="true" role="dialog">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Edit Subscription</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
            <input type="hidden" name="model-id" id="model-id">
            <div class="form-group">
                <label>Status</label>
                <select name="model-status" id="status-select" class="form-control">
                    <option value="Active">Active</option>
                    <option value="Canceled">Canceled</option>
                    <option value="Processing">Processing</option>
                    <option value="Pending">Pending</option>
                </select>
            </div>
            <div class="form-group">
                <label>Remarks</label>
                <textarea name="remarks" id="model-remarks" class="form-control"></textarea>
            </div>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" id="lob-model-submit" class="btn btn-primary">Save changes</button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
{{-- new model --}}
<div class="modal fade show" id="modal-lob-new" aria-modal="true" role="dialog">
    <div class="modal-dialog modal-lg modal-dialog-centered" id="modal-lob-new-main-box">
        
    </div>
</div>
@endsection
@section('script')
    {{-- model --}}
    <script>
        // Function to update the modal form fields with the data
        function populateModalFields(id, status, remarks) {
            $('#model-id').val(id);
            $('#model-remarks').val(remarks);
            $('#status-select option[value="' + status + '"]').prop('selected', true);
            $('#modal-lob').modal('show');
        }

        // Event listener for the button click
        $('body').on('click', '.lob-subscription-model-button', function() {
            var id = $(this).data('id');
            var status = $(this).data('status');
            var remarks = $(this).data('remarks');
            populateModalFields(id, status, remarks);
        });

        $(document).on('click', '#lob-model-submit', function() {
            // $('#modal-loader').modal('show');
            let id = $('#model-id').val(); // Corrected selector
            let status = $('#status-select').val(); // Corrected selector
            let remarks = $('#model-remarks').val(); // Corrected selector
            $.ajax({
                type: "POST",
                url: "{{ route('lob.subscription.edit.ajax') }}",
                data: {
                    _token: "