@include('Admin.Includes.header')
@php
    use Carbon\Carbon;
@endphp
<style>
    .pagination_class {
        display: inline-block;
    }

    .pagination_class a {
        color: black;
        float: left;
        padding: 8px 16px;
        text-decoration: none;
        transition: background-color .3s;
        border: 1px solid #ddd;
    }

    .pagination_class a.active {
        background-color: #4CAF50;
        color: white;
        border: 1px solid #4CAF50;
    }

    .pagination_class a:hover:not(.active) {
        background-color: #ddd;
    }

    .search {

        top: 6px;
        left: 10px;
    }

    .form-control {

        border: none;
        padding-left: 32px;
    }

    .form-control:focus {

        border: none;
        box-shadow: none;
    }

    .green {

        color: green;
    }

    .orders-breadcrumb .filter-dropdown {
        font-size: 20px;
    }

    .breadcrumb {
        margin-top: 1rem;
    }

    .filter-dropdown {
        display: none;
        margin-left: 1rem;
    }

    header {
        background-color: #333;
        color: #fff;
        text-align: center;
        padding: 1rem;
    }

    .container {
        display: flex;
        justify-content: space-around;
        padding: 2rem;
    }

    .card {
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        padding: 1rem;
        width: 30%;
    }

    table {
        width: 200%;
        border-collapse: collapse;
        margin-top: 1rem;
    }

    th,
    td {
        padding: 0.5rem;
        border-bottom: 1px solid #ddd;
        text-align: left;
    }

    th {
        background-color: #f2f2f2;
    }

    #filter {}

    #filter button {
        color: grey;
        background-color: white;
        border: none;
        box-shadow: none;
        margin-top: 50px;
        margin-left: 50px;
        display: flex;
        position: relative;
        outline: none;
        right: 30px;

        justify-content: center;
    }

    #filter button .glyphicon {
        font-size: 30px;
        position: relative;
        top: -20px;
        left: 20px;
        outline: none
    }

    #filter button #breadcrumb-text {
        margin-left: 30px
    }

    #col-h1 {
        font-size: 16px;
        color: grey;
    }

    .search-container {
        position: relative;
    }

    .search-input {
        display: none;
        padding: 5px;
    }

    .search-icon,
    .cancel-icon {
        cursor: pointer;
        font-size: 18px;
        margin-left: 5px;
    }

    .cancel-icon {
        display: none;
    }


    .dropdown-arrow {
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid #333;
        display: inline-block;
        vertical-align: middle;
        margin-left: 5px;
        cursor: pointer;
    }

    $gl-ms : "screen and (max-width: 23.5em)"; // up to 360px
    $gl-xs : "screen and (max-width: 35.5em)"; // up to 568px
    $gl-sm : "screen and (max-width: 48em)"; // max 768px
    $gl-md : "screen and (max-width: 64em)"; // max 1024px
    $gl-lg : "screen and (max-width: 80em)"; // max 1280px


    th,
    td {
        border: 1px solid #ccc;
        padding: 8px;
        text-align: left;
    }

    .filter-options {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px;
        color: grey;
    }

    .filter-option {
        padding: 5px 10px;
        color: grey;
        border-radius: 5px;
        cursor: pointer;
    }

    #searchInput {
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
        outline: none;
    }


    table {
        border-collapse: collapse;
        width: 200%;
        border: 2px solid #000;
        border-spacing: 1;
        border-collapse: collapse;
        background: white;
        border-radius: 6px;
        overflow-x: scroll;
        max-width: 800px;
        width: 100%;
        margin: 0 auto;
        position: relative;

        * {
            position: relative
        }

        td,
        th {
            padding-left: 8px
        }

        thead tr {
            height: 60px;
            background: #FFED86;
            font-size: 16px;
        }

        tbody tr {
            height: 48px;
            border-bottom: 1px solid #E3F1D5;

            &:last-child {
                border: 0;
            }
        }

        td,
        th {
            text-align: left;

            &.l {
                text-align: right
            }

            &.c {
                text-align: center
            }

            &.r {
                text-align: center
            }
        }
    }

    .order_status_select {
        padding: 5px;
        border-radius: 10px;
        border: 1px solid #ccc;
    }


    @media #{$gl-xs} {

        table {
            display: block;

            >*,
            tr,
            td,
            th {
                display: block
            }

            thead {
                display: none
            }

            tbody tr {
                height: auto;
                padding: 8px 0;

                td {
                    padding-left: 45%;
                    margin-bottom: 12px;

                    &:last-child {
                        margin-bottom: 0
                    }

                    &:before {
                        position: absolute;
                        font-weight: 700;
                        width: 40%;
                        left: 10px;
                        top: 0
                    }

                    &:nth-child(1):before {
                        content: "Code";
                    }

                    &:nth-child(2):before {
                        content: "Stock";
                    }

                    &:nth-child(3):before {
                        content: "Cap";
                    }

                    &:nth-child(4):before {
                        content: "Inch";
                    }

                    &:nth-child(5):before {
                        content: "Box Type";
                    }
                }
            }
        }
    }

    blockquote {
        color: white;
        text-align: center;
    }
</style>
@php
    use Illuminate\Support\Facades\Auth;
    use App\General\DiscountClass;
    use App\General\InvoiceClass;
    $logged_in_user = Auth::user();
@endphp
<!-- Page Inner Start -->
<!--================================-->
<div class="page-inner">
    <!--================================-->
    <!-- Breadcrumb Start -->
    <!--================================-->
    <div class="pageheader pd-t-25 pd-b-35">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-2 col-sm-12 d-flex justify-content-center dropdown"
                    style="border:1px ridge rgb(192, 189, 189);background-color:white;border-radius:10px;">
                    <div id="col"class="col py-2"
                        style="display: flex; flex-direction: column; justify-content: space-between;">
                        <h1 id="col-h1" style=" margin-bottom: 0px !important;">Filter Orders</h1>
                        <br>
                        <select name="filterDays" class="filterDays p-2" style="border:1px ridge rgb(192, 189, 189);">
                            <option value="7" selected>7 Days</option>
                            <option value="14">14 Days</option>
                            <option value="21">21 Days</option>
                            <option value="30">30 Days</option>
                            <option value="">All Orders</option>
                        </select>
                    </div>
                </div>
                <div class="col-lg-10 col-sm-12">
                    <div
                        class="row ordersCount "style="border:1px ridge rgb(192, 189, 189);background-color:white;border-radius:10px;padding:5px 0px 5px 0px">
                        <div class="d-flex border-left col-lg-2 col-sm-6">
                            <div id="col"class="col py-2"
                                style="display: flex; flex-direction: column; justify-content: space-between;">
                                <h1 id="col-h1">Orders</h1>
                                <br>
                                <p class="mb-0" id="col-h1">{{ $totalOrders ?? 0 }}</p>
                            </div>
                        </div>
                        <div class="d-flex border-left col-lg-2 col-sm-6">
                            <div id="col"class="col py-2"
                                style="display: flex; flex-direction: column; justify-content: space-between;">
                                <h1 id="col-h1">Pending Orders</h1>
                                <br>
                                <p class="mb-0" id="col-h1">{{ $pendingOrders ?? '' }}</p>
                            </div>
                        </div>
                        <div class="d-flex border-left col-lg-3 col-sm-6">
                            <div id="col" class="col py-2"
                                style="display: flex; flex-direction: column; justify-content: space-between;">
                                <h1 id="col-h1">In Progress Orders</h1>
                                <br>
                                <p class="mb-0" id="col-h1">{{ $inProcessOrders ?? '' }}</p>
                            </div>
                        </div>
                        <div class="d-flex border-left col-lg-2 col-sm-6">
                            <div id="col"class="col py-2"
                                style="display: flex; flex-direction: column; justify-content: space-between;">
                                <h1 id="col-h1">Completed Orders</h1>
                                <br>
                                <p class="mb-0" id="col-h1">{{ $completedOrders ?? '' }}</p>
                            </div>
                        </div>
                        <div class="d-flex border-left col-lg-2 col-sm-6">
                            <div id="col"class="col py-2"
                                style="display: flex; flex-direction: column; justify-content: space-between;">
                                <h1 id="col-h1">Cancelled Orders</h1>
                                <br>
                                <p class="mb-0" id="col-h1">{{ $cancelledOrders ?? '' }}</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <style>
                .filter-class {
                    display: flex;
                    justify-content: space-between;
                }
            </style>
            <div class="status_msgDiv"></div>
            <div
                class="w-100 row mt-5"style="color:rgb(94, 92, 92);font-size:15px;border:1px ridge rgb(192, 189, 189);border-radius:10px">
                <div class="w-100 d-flex justify-content-between">
                    <div style="background-color:white;colspna:12" class="filter-class filter-options">
                        <div class="dynamic-filter">
                            <span style="background-color: rgb(216, 214, 214);border-radius:5px" class="filter-option"
                                onclick="colorchange(this)">Refunded</span>
                            <span class="ms-5">
                                <a href="#">
                                    <span style="color:rgb(94, 92, 92)" class="glyphicon glyphicon-plus"></span>
                                </a>
                            </span>
                        </div>

                        <div class="search-btn-area">
                            <button
                                style="padding:5px 10px 5px 10px;background-color:rgb(238, 236, 236);border-radius:10px;outline:none;border:none"
                                class="search-icon glyphicon glyphicon-search search-btn"> Search</button>
                        </div>
                        <div class="col-12 search-section d-none">
                            <input onkeyup="filterTableByDate()" placeholder="Search.." id="searchInput"
                                class="search-input"style="width:90%;border-radius:" type="text"><button
                                style="border:1px ridge rgb(99, 99, 99);padding:0px 10px 0px 10px;border-radius:10px"class="ms-5 cancel-search">cancel</button>
                        </div>
                    </div>
                    <div class="d-flex align-items-center mx-3">
                        <button class="btn btn-danger" name="multi_delete" id="multi_delete">
                            Delete All
                        </button>
                    </div>
                </div>
                <div class="order-table-container" style="width: 100% !important;">
                    <table class="col-12 table-responsive" style="outline:none;border:none">
                        <thead>
                            <tr class="col-12"style="background-color: white">
                                <th><input type="checkbox" id="all_checked" name="checkall" value=""></th>
                                <th class="col-1">Order</th>
                                <th class="col-1">Placed On</th>
                                <th class="col-2">Customer Email</th>
                                <th class="col-1">Channel</th>
                                <th class="col-1">Total</th>
                                <th class="col-2">Return Type</th>
                                <th class="col-2">Return Via</th>
                                <th class="col-1">Action</th>
                            </tr>
                        </thead>
                        <tbody class="myTableBody col-12" id="myTable">
                            @if ($orders->isNotEmpty())
                                @foreach ($orders as $order)
                                    @if ($order->returnedOrder)
                                        <tr>
                                            <td><input type="checkbox" data-id="{{ $order->returnedOrder->id }}"
                                                    name="check_it" class="checkbox" value=""></td>
                                            <td>{{ $order->invoice_number }}</td>
                                            <td>
                                                @php
                                                    $carbonDate = Carbon::parse($order->created_at);
                                                @endphp
                                                {{ InvoiceClass::convertDateToDDMMYYYY($carbonDate->toDateString()) }}
                                            </td>
                                            <td>{{ $order->returnedOrder->user_email }}</td>
                                            <td>{{ $order->channel }}</td>
                                            <td>
                                            @if(isset($order) && isset($order->returnedOrder) && isset($order->returnedOrder->grandTotal))
                                            {{ $order->returnedOrder->grandTotal }}
                                            @else
                                            {{ '' }}
                                            @endif
  
                                            </td>
                                            <td>
                                                <span style="background-color: rgb(224, 219, 219);border-radius:10px;padding:5px 10px 5px 10px">
                                                    {{ ucwords($order->returnedOrder->return_type) ?? '' }}
                                                </span>
                                            </td>
                                            <td>
                                                {{ ucwords($order->returnedOrder->return_via) }}
                                            </td>
                                            <td>
                                                <div class="btn-group btn-group-sm" role="group" aria-label="...">
                                                    <button type="button" class="btn badge btn-warning"
                                                        onclick="printInvoice({{ $order->returnedOrder->id }})"><i
                                                            class="fa fa-print"></i></button>
                                                    <button class="btn btn-primary see_return_details"
                                                        data-id="{{ $order->returnedOrder->id }}"
                                                        type="button">Returned</button>
                                                    <button class="btn btn-secondary see_details"
                                                        data-id="{{ $order->id }}"
                                                        type="button">Original</button>
                                                    <button class="btn btn-danger deletetButton" type="submit"
                                                        data-id="{{ $order->returnedOrder->id }}">Delete</button>
                                                </div>
                                            </td>
                                        </tr>
                                    @endif
                                @endforeach
                            @else
                                <td colspan="11" class="text-center">No orders found.</td>
                            @endif
                        </tbody>
                    </table>
                    <div class="w-100 px-5 d-flex justify-content-end p-2">
                        <div class="d-flex">
                            {!! $orders->links('pagination::bootstrap-4') !!}
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade bd-example-modal-lg" id="myLargeModal" tabindex="-1" role="dialog"
                aria-labelledby="myLargeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Order Details</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--/ Page Inner End -->
<div id="statusToast"></div>
@include('Admin.Includes.footer')
<script>
    function printInvoice(id) {
        $.ajax({
            url: '/print-return-order-invoice/' + id,
            type: 'GET',
            success: function(response) {
                var printWindow = window.open('', '', 'width=1200,height=720');
                printWindow.document.open();
                printWindow.document.title = 'OS INOICE';
                printWindow.document.write('<html><head><title>Print Invoice - ' +
                    id +
                    '</title><link href="{{ url('/') }}/AdminAssets/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet"></head><body>'
                );
                printWindow.document.write('<div class="invoice_Area">' + response
                    .invoice_review + '</div>');
                printWindow.document.write('</body></html>');
                printWindow.document.close();

                printWindow.print();
            },
            error: function(error) {
                console.log(JSON.stringify(error) + "========== error");
            }
        });
    }

    function colorchange(_this) {
        $('.filter-option').css('background', 'transparent');
        $(_this).css('background', 'rgb(216, 214, 214)');
    }

    function handleCheckAll() {
        var checkAllCheckbox = document.getElementById("all_checked");
        var checkboxes = document.querySelectorAll('.myTableBody input[name="check_it"]');
        checkboxes.forEach(function(checkbox) {
            checkbox.checked = checkAllCheckbox.checked;
        });
    }
    document.getElementById("all_checked").addEventListener("click", handleCheckAll);

    function handleAjaxCheckAll() {
        var checkAllCheckbox = document.getElementById("ajax_all_checked");
        var checkboxes = document.querySelectorAll('.myTableBody input[name="check_it"]');
        checkboxes.forEach(function(checkbox) {
            checkbox.checked = checkAllCheckbox.checked;
        });
    }

    $(document).ready(function() {
        $('#multi_delete').click(function() {
            var selectedIds = [];
            $('.checkbox:checked').each(function() {
                selectedIds.push($(this).data('id'));
            });
            if (selectedIds.length > 0) {
                if (confirm("Are you sure you want to delete this order?")) {
                    $.ajax({
                        url: "{{ route('Admin.return.orders.bulk-delete') }}",
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}",
                            ids: selectedIds
                        },
                        success: function(response) {
                            $('.success-message').html(
                                `<div class="alert alert-success mt-1">${response.message}</div>`
                            );
                            location.reload();
                        },
                        error: function(xhr, status, error) {
                            console.error(error);
                        }
                    });
                }
            } else {
                alert("Please select at least one record to delete.");
            }
        });
    });

    $(document).on('click', '.see_details', function() {
        let id = $(this).data('id');
        $('.modal-body').empty();
        $.ajax({
            url: '/admin/order/detail',
            method: 'GET',
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
            },
            data: {
                id: id
            },
            success: function(response) {
                $("#myLargeModal").modal("show");
                $('.modal-body').append(response);
            },
            error: function(error) {
                console.log(error);
            }
        });
    });

    $(document).on('click', '.see_return_details', function() {
        let id = $(this).data('id');
        $('.modal-body').empty();
        $.ajax({
            url: '/admin/return/order/detail',
            method: 'GET',
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
            },
            data: {
                id: id
            },
            success: function(response) {
                $("#myLargeModal").modal("show");
                $('.modal-body').append(response);
            },
            error: function(error) {
                console.log(error);
            }
        });
    });

    $(function() {
        $('#datePickerArrow').click(function() {
            $('#dateFilter').datepicker('show');
        });

        $('#dateFilter').datepicker({
            dateFormat: 'yy-mm-dd',
            onSelect: function(dateText, inst) {}
        });
    });

    function filterTableByDate(selectedDate) {
        $(document).ready(function() {
            $("#searchInput").on("keyup", function() {
                var value = $(this).val().toLowerCase();
                $("#myTable tr").filter(function() {
                    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
                });
            });
        });
    }

    function toggleFilterDropdown() {
        var filterDropdown = document.getElementById("filter-dropdown");

        if (filterDropdown.style.display === "none") {
            filterDropdown.style.display = "block";
        } else {
            filterDropdown.style.display = "none";
        }
    }

    function applyTimeFilter(selectedValue) {
        var breadcrumbText = document.getElementById("breadcrumb-text");
        breadcrumbText.textContent = selectedValue;
    }

    function setupFilterListeners() {
        var filterOptions = document.querySelectorAll(".filter-option");

        filterOptions.forEach(function(option) {
            option.addEventListener("click", function() {
                var selectedStatus = option.textContent;
                filterTableByFulfillmentStatus(selectedStatus);
            });
        });
    }

    setupFilterListeners();

    function setupSearchToggle() {
    // When the search button is clicked
    $(".search-icon").click(function() {
        $(this).fadeOut(200, function() {
            $(".cancel-search").fadeIn(200); // Show the cancel icon
            $(".search-input").fadeIn(200); // Show the search input
        });
        $(".search-btn-area").fadeOut(200); // Hide the search button area
    });

    // When the cancel button is clicked
    $(".cancel-search").click(function() {
        $(this).fadeOut(200, function() {
            $(".search-icon").fadeIn(200); // Show the search button again
            $(".search-input").fadeOut(200); // Hide the search input
        });
        $(".search-btn-area").fadeIn(200); // Show the search button area again
    });
}

$(document).ready(function() {
    setupSearchToggle();
});

    $(document).ready(function() {
        $('.pagination').find('li:first').addClass('active');
        setupSearchToggle();

        $('.search-btn').click(function() {
            $('.search-btn-area, .dynamic-filter').hide();
            $('.search-section').removeClass('d-none');
        });
        $('.cancel-search').click(function() {
            $('.search-btn-area, .dynamic-filter').fadeIn();
            $('.search-section').addClass('d-none');
        });

    });

    $(document).ready(function() {
        let filterDaysSelectValue = 7;
        let currentPage = '1';

        $('.filterDays').on('change', function() {
            let days = $(this).val();
            filterDaysSelectValue = days;
            filterData();
        });

        // Handle pagination links clicks
        $(document).on('click', '.pagination a.page-link', function(e) {
            e.preventDefault();
            let pageType = 'Returned';
            let days = $('.filterDays').val();
            let page = $(this).attr('href').split('page=')[1];
            $('.pagination .page-item.active').removeClass('active');
            currentPage = page;
            let clickedPageNumber = page;
            $.ajax({
                url: "/admin/filter/orders",
                type: 'GET',
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                },
                data: {
                    'page': page,
                    'filterDays': days,
                    'pageType': pageType
                },
                success: function(response) {
                    $("#all_checked").prop("checked", false);
                    $('.order-table-container').empty();
                    $('.order-table-container').append(response.orders);
                    $('.ordersCount').html(response.counts);
                    $('#currentPage').val(page);
                },
                error: function(xhr, status, error) {
                    console.log(error);
                }
            }).done(function() {
                document.getElementById("ajax_all_checked").addEventListener("click",
                    handleAjaxCheckAll);
                let clickedButton = $(
                    `.pagination a.page-link[href*="page=${clickedPageNumber}"]`).parent(
                    '.page-item');
                clickedButton.addClass('active');
            });
        });

        function filterData() {
            let days = $('#filterDays').val();
            let page = 1;
            let pageType = "Returned";
            $.ajax({
                url: '/admin/filter/orders',
                method: 'GET',
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                },
                data: {
                    'filterDays': filterDaysSelectValue,
                    'page': 1,
                    'pageType': pageType
                },
                success: function(response) {
                    console.log(response);
                    $('.order-table-container').empty();
                    $('.order-table-container').append(response.orders);

                    $('.ordersCount').html(response.counts);
                    $('.pagination').html(response.pagination);
                    $('.pagination .page-item.active').removeClass('active');
                    $('.pagination .page-item:nth-child(1)').addClass('active');
                },
                error: function(error) {
                    console.log(JSON.stringify(error) + "========== error");
                }
            }).done(function() {
                document.getElementById("ajax_all_checked").addEventListener("click",
                    handleAjaxCheckAll);
            });
        }
        $(document).on('click', '.deletetButton', function(e) {
            e.preventDefault();
            let id = $(this).attr('data-id');
            if (confirm("Are you sure you want to delete this order?")) {
                $.ajax({
                    url: '/admin/return/order/delete',
                    method: 'post',
                    data: {
                        id: id,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(res) {
                        location.reload();
                        getallCategory();
                    }
                });
            }
        });
    });
</script>