@extends('layouts.layout')
@section('content')
    <style>
        .card .card-header form {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            justify-content: flex-end;
            width: 100%;
        }
    </style>
    <div class="page-body">
        <!-- Container-fluid starts-->
        <div class="container-fluid">
            <div class="page-header">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="page-header-left">
                            <h3>Return Requests
                                <small>Diamond Admin Panel</small>
                            </h3>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <ol class="breadcrumb pull-right">
                            <li class="breadcrumb-item">
                                <a href="{{ route('admin.dashboard') }}">
                                    <i data-feather="home"></i>
                                </a>
                            </li>
                            <li class="breadcrumb-item">Return </li>
                            <li class="breadcrumb-item active">Return List</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <!-- Container-fluid Ends-->

        <!-- Container-fluid starts-->
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <form method="GET">
                                <div class="form-group">
                                    <input type="text" name="search" class="form-control"
                                        placeholder="Search by OrderId , Email , Amount" value="{{ request('search') }}">
                                </div>
                                <div class="form-group">
                                    <select name="status" class="form-control">
                                        <option value="All" {{ request('status') == 'All' ? 'selected' : '' }}>All
                                        </option>
                                        <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>
                                            Approved</option>
                                        <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>
                                            Rejected</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <input type="date" name="from_date" class="form-control"
                                        value="{{ request('from_date') }}">
                                    <small>( From date )</small>
                                </div>
                                <div class="form-group">
                                    <input type="date" name="to_date" class="form-control"
                                        value="{{ request('to_date') }}">
                                    <small>( To date )</small>
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-outline-primary">Search</button>
                                    <a href="{{ route('sale.orders.returnlist') }}"
                                        class="btn btn-outline-secondary">clear</a>
                                </div>
                            </form>
                            </form>
                        </div>

                        <div class="card-body">
                            <div class="table-responsive table-desi">
                                <table class="table trans-table all-package">
                                    <thead>
                                        <tr>
                                            <th>Action</th>
                                            <th>Order Id</th>
                                            <th>Order Date</th>
                                            <th>Return Requested Date</th>
                                            <th>Custome Name</th>
                                            <th>Custome Email</th>
                                            <th>Amount</th>
                                            {{-- <th>Payment Method</th> --}}
                                            <th>Status</th>

                                        </tr>
                                    </thead>

                                    <tbody>
                                        @foreach ($list as $item)
                                            <tr>
                                                <td>
                                                    <strong><a href="javascript:void(0)"
                                                            onclick="actionOnRequest('{{ $item->id }}')">Action</a></strong>
                                                </td>
                                                <td><a href="{{ route('sale.orders.detail', ['id' => $item->order_id]) }}"
                                                        style="color: blue !important; text-decoration:underline">{{ $item->order_id }}</a>
                                                </td>
                                                <td>{{ date('M d, Y', strtotime($item->order_created_at)) }}</td>
                                                <td>{{ date('M d, Y', strtotime($item->created_at)) }}</td>
                                                <td>{{ $item->first_name }} {{ $item->last_name }}</td>
                                                <td>{{ $item->email }}</td>
                                                <td>{{ number_format($item->final_amount, 0, '.', '') }}/-</td>
                                                {{-- <td>Card Payment</td> --}}
                                                <td><span
                                                        class="badge badge-{{ $item->status == 'pending' ? 'warning' : ($item->status == 'rejected' ? 'primary' : 'success') }}">{{ ucfirst($item->status) }}</span>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <div
                                class="dataTables_paginate paging_simple_numbers d-flex justify-content-between align-items-center">
                                <div>
                                    Showing {{ $list->firstItem() }} to {{ $list->lastItem() }} of total
                                    {{ $list->total() }} entries
                                </div>
                                <div class="float-end">
                                    <p>{{ $list->links() }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Container-fluid Ends-->
    </div>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" 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">Return request action</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('sale.orders.returnaction') }}" method="POST" id="requestAction">
                    @csrf
                    <div class="modal-body">
                        <div class="alert alert-danger alert-dismissible fade show d-none" role="alert">
                            <span></span>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                        <div class="form-group">
                            <input type="hidden" name="id" id="id" class="form-control">
                        </div>
                        <div class="form-group">
                            <select name="status" id="status" class="form-control">
                                <option selected disabled>--select--</option>
                                <option value="approved">Approve</option>
                                <option value="rejected">Reject</option>
                            </select>
                            {{-- <span class="error error-msg"></span> --}}
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" id="submitBtn" class="btn btn-primary">Save changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @push('scripts')
        <script>
            function actionOnRequest(requestId) {
                $("#exampleModal").modal('show');
                $("#id").val(requestId);
            }

            $("#requestAction").on("submit", function(event) {
                event.preventDefault();

                let form = $(this)[0];
                let formData = new FormData(form);
                let submitBtn = $("#submitBtn");
                submitBtn.prop("disabled", true).text("Processing...");
                $.ajax({
                    url: $(this).attr("action"),
                    method: $(this).attr("method"),
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        console.log(response);
                        if (response.res == 'success') {
                            iziToast.success({
                                title: 'OK',
                                message: response.msg,
                            });
                            $(".alert-danger span").text('');
                            setTimeout(function() {
                                $('#exampleModal').modal('hide');
                                window.location.reload();
                            }, 900);
                        } else {
                            console.log(response);
                            $(".alert-danger").removeClass('d-none');
                            $(".alert-danger span").text(response.msg);
                            iziToast.error({
                                title: 'Error',
                                message: response.msg,
                            });
                            submitBtn.prop("disabled", false).text("Save changes");
                        }
                    },
                    error: function(response) {
                        console.log(response);
                        iziToast.error({
                            title: 'Error',
                            message: response.msg,
                        });
                    },
                    complete: function() {
                        submitBtn.prop("disabled", false).text("Save changes");
                    }
                });
            });
        </script>
    @endpush
@endsection