@extends('essential.main', [
    'breadcum' => 'Subscription Log',
    'route' => 'subscription_log',
])

@push('datepicker')
    <div class="flex items-center pr-2">
        <div class="relative pb-2">

            <input name="start" type="date" autocomplete="off" id="start" value=""
                class="bg-white border border-gray-200 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2"
                placeholder="Select start date ">
        </div>
        <span class="mx-2 text-gray-500">to</span>
        <div class="relative pb-2">
            <input name="end" type="date" autocomplete="off" id="end" value=""
                class="bg-white border border-gray-200 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2"
                placeholder="Select end date ">
        </div>


    </div>
@endpush


@push('download')
    <div class="w-auto ml-2">
        <select id="SubscriptionId" name="subscription_id"
            class="appearance-none bg-white border border-gray-300 text-black text-sm placeholder-placeholdercolor rounded-lg focus:ring-blue-500 focus:border-blue-500  w-full p-2">
            <option value="" disabled selected> All Subscriptions</option>
            @foreach ($subscriptions as $data)
                <option class="bg-red-500" value="{{ $data->id }}"> {{ $data->customer_name }}</option>
            @endforeach
        </select>
    </div>
    <div id="downloadexcel" data-tooltip-target="{{ 'tooltip-download' }}" data-tooltip-placement="bottom">
        <div class="flex items-center px-5 py-2  rounded-sm hover:bg-gray-100  cursor-pointer">
            <svg class="w-6 h-6 fill-slate-600" stroke-width="1" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"
                aria-hidden="true">
                <path
                    d="M48 448V64c0-8.8 7.2-16 16-16H224v80c0 17.7 14.3 32 32 32h80V448c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16zM64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V154.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0H64zm90.9 233.3c-8.1-10.5-23.2-12.3-33.7-4.2s-12.3 23.2-4.2 33.7L161.6 320l-44.5 57.3c-8.1 10.5-6.3 25.5 4.2 33.7s25.5 6.3 33.7-4.2L192 359.1l37.1 47.6c8.1 10.5 23.2 12.3 33.7 4.2s12.3-23.2 4.2-33.7L222.4 320l44.5-57.3c8.1-10.5 6.3-25.5-4.2-33.7s-25.5-6.3-33.7 4.2L192 280.9l-37.1-47.6z">
                </path>
            </svg>

        </div>
        <div id="{{ 'tooltip-download' }}" role="tooltip"
            class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-primary transition-opacity duration-300 bg-white rounded-lg shadow-sm opacity-0 tooltip">
            Excel Download
            <div class="tooltip-arrow" data-popper-arrow></div>
        </div>
    </div>
@endpush

@section('content')
    <div class=" mt-2">
        @include('essential.refresh_filter')
        <div class="flex flex-col w-full" id="subscribe_log"></div>
    </div>
@endsection

@push('scripts')
    <script type='text/javascript'>
        $(document).ready(function() {
            $('#refresh').click(function(e) {
                e.preventDefault();
                var now = new Date();
                var day = ("0" + now.getDate()).slice(-2);
                var month = ("0" + (now.getMonth() + 1)).slice(-2);
                var today = (day) + "-" + (month) + "-" + now.getFullYear();
                $('#start').val('');
                $('#end').val('');
                $('#SubscriptionId').val('');
                $search = $('#search').val("");
                getDataTable();
                toastr.success("Data Refreshed...");
            });

        });


        function getDataTable(page) {
            $('#refresh_btn').hide();
            $('#load').show();
            $("#check").attr("disabled", true);
            $("#checkid").hide();
            $("#sgv").show();
            $search = $('#search').val();
            $start = $('#start').val();
            $end = $('#end').val();
            $sub = $('#SubscriptionId').val(); // Updated variable name
            $page_count = $('#page_count').val();
            $.ajax({
                type: "GET",
                url: "subscription_logs" + "?page=" + page,
                data: {
                    search: $search,
                    start: $start,
                    end: $end,
                    subscription_id: $sub, // Added subscription_id to the data
                    page_count: $page_count,
                    _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    $('#subscribe_log').html(response);
                    $("#check").attr("disabled", false);
                    $("#sgv").hide();
                    $("#checkid").show();
                    $('#refresh_btn').show();
                    $('#load').hide();
                }
            });
        }
        $('#start').change(function(e) {
            e.preventDefault();
            getDataTable();
        });
        $('#end').change(function(e) {
            e.preventDefault();
            getDataTable();
        });
        $('#SubscriptionId').change(function(e) {
            e.preventDefault();
            getDataTable();
        });
        $('#downloadexcel').click(function(e) {
            e.preventDefault();
            $start = $('#start').val();
            $end = $('#end').val();
            $subscription = $('#SubscriptionId').val();

            return window.location.href = "subscription_log_excel?start=" + $start + '&end=' + $end +
                '&subscription_id=' + $subscription;
        });
    </script>
@endpush