@extends('admin.layout.dashboard_master')

@section('content')
    <main id="main" class="main">

        <div class="pagetitle">
            <h1>Users</h1>
            <nav>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="index.html">American Plastic</a></li>
                    <li class="breadcrumb-item">Dashboard</li>
                    <li class="breadcrumb-item active">User</li>
                </ol>
            </nav>
        </div><!-- End Page Title -->

        <section class="section">

            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                                        <a href="{{ route('users.export') }}" class="btn btn-success">
    <i class="fas fa-file-excel"></i> Export to Excel
</a>
                            <div class="table-responsive text-nowrap ">
                                <table class="table" id="user_table">
                                    <thead>
                                        <tr>
                                            <th>User Id</th>
                                            <th>UserName</th>
                                            <th>Email</th>
                                            <th>Status</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal fade" id="edit_order_details" tabindex="-1" aria-labelledby="exampleModalLabel"
                    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 -<span
                                        id="order_modal_id"></span></h5>
                            </div>
                            <div class="modal-body">
                                {{-- form start   --}}
                                <form id="update_order_form">
                                    @csrf
                                    <input type="hidden" class="form-control clear_input" name="id" id="update_id">
                                    <div class="row mt-3">
                                        <div class="col-12 col-sm-6">
                                            <label>Order id</label>
                                            <input type="text" class="form-control clear_input" name="orderid"
                                                id="edit_orderid" disabled>
                                            <span id="edit_name_error" class="text-danger clear_form_error"></span>
                                        </div>

                                        <div class="col-12 col-sm-6">
                                            <label>User</label>
                                            <input type="text" class="form-control clear_input" name="user"
                                                id="edit_username" disabled>
                                            <span id="edit_name_error" class="text-danger clear_form_error"></span>
                                        </div>

                                    </div>

                                    <div class="row mt-3">
                                        <div class="col-12 col-sm-6">
                                            <label>Product name </label>
                                            <input type="text" class="form-control clear_input" name="product_name"
                                                id="edit_productname" disabled>
                                            <span id="edit_warranty_error" class="text-danger clear_form_error"></span>
                                        </div>
                                        <div class="col-12 col-sm-3">
                                            <label>Quantity</label>
                                            <input type="text" class="form-control clear_input" name="quantity"
                                                id="edit_quantity" disabled>
                                            <span id="edit_return_error" class="text-danger clear_form_error"></span>
                                        </div>
                                        <div class="col-12 col-sm-3">
                                            <label>Product Id </label>
                                            <input type="text" class="form-control clear_input" name="productId"
                                                id="edit_product" disabled>
                                            <span id="edit_return_error" class="text-danger clear_form_error"></span>
                                        </div>
                                    </div>
                                    <div class="row mt-3">

                                        <div class="col-12 col-sm-3">
                                            <label>Service charge</label>
                                            <input type="text" class="form-control clear_input" name="service_fee"
                                                id="edit_service_fee" disabled>
                                            <span id="edit_return_error" class="text-danger clear_form_error"></span>
                                        </div>
                                        <div class="col-12 col-sm-3">
                                            <label>Order Total</label>
                                            <input type="text" class="form-control clear_input" name="order_total"
                                                id="edit_total" disabled>
                                            <span id="edit_return_error" class="text-danger clear_form_error"></span>
                                        </div>
                                        <div class="col-12 col-sm-6">
                                            <label>Tracking number</label>
                                            <input type="text" class="form-control clear_input" name="tracking"
                                                id="edit_tracking">
                                            <span id="edit_return_error" class="text-danger clear_form_error"></span>
                                        </div>
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-12 col-sm-6">
                                            <label>Color</label>
                                            <input type="text" class="form-control clear_input" name="color"
                                                id="edit_color" disabled>

                                        </div>
                                        <div class="col-12 col-sm-6">
                                            <label>Size</label>
                                            <input type="text" class="form-control clear_input" name="size"
                                                id="edit_size" disabled>

                                        </div>
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-12 col-sm-3">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="1"
                                                    name="processing" id="edit_processing_Checkbox">
                                                <label class="form-check-label" for="freeShippingCheckbox">
                                                    Processing
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-3">
                                            <div class="form-check">
                                                <input class="form-check-input" name="shipped" type="checkbox"
                                                    value="1" id="edit_shipped_Checkbox">
                                                <label class="form-check-label" for="edit_shipped_Checkbox">
                                                    Shipped
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-3">
                                            <div class="form-check">
                                                <input class="form-check-input" name="onthe_way" type="checkbox"
                                                    value="1" id="edit_ontheway_Checkbox">
                                                <label class="form-check-label" for="edit_ontheway_Checkbox">
                                                    On the way
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-3">
                                            <div class="form-check">
                                                <input class="form-check-input" name="order_complete" type="checkbox"
                                                    value="1" id="edit_order_Checkbox">
                                                <label class="form-check-label" for="edit_order_Checkbox">
                                                    Completed
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-12 col-sm-6">
                                            <div class="container mt-5">
                                                <div class="card">
                                                    <div class="card-body">
                                                        <h5 class="card-title">Shipping Address</h5>
                                                        <p class="card-text">
                                                            <strong>Name:</strong>&nbsp;<span id="address_name"></span><br>
                                                            <strong>Address:</strong>&nbsp;<span
                                                                id="address_line_one"></span><br>
                                                            <strong>Address line two:</strong>&nbsp;<span
                                                                id="address_line_two"></span><br>
                                                            <strong>Mobile:</strong>&nbsp;<span id="mobile"></span><br>

                                                            <strong>City:</strong>&nbsp;<span id="city"></span><br>
                                                            <strong>Zip Code:</strong>&nbsp;<span
                                                                id="zipcode"></span><br>

                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-6">
                                            <div class="container mt-5">
                                                <div class="card">
                                                    <div class="card-body">
                                                        <h5 class="card-title">Shipping Method</h5>
                                                        <p class="card-text">
                                                            <strong>Name:</strong>&nbsp;<span id="shippingname"></span><br>

                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal"
                                    id="close">Close</button>
                                <button type="button" id="update_order_btn" class="btn btn-primary">Save
                                    changes</button>
                                </form>
                                {{-- form end   --}}

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

            </div>
            <style>
                /* General Styles */

                * {
                    box-sizing: border-box;
                }

                :root {
                    --clr-white: rgb(255, 255, 255);
                    --clr-black: rgb(0, 0, 0);
                    --clr-light: rgb(245, 248, 255);
                    --clr-light-gray: rgb(196, 195, 196);
                    --clr-blue: rgb(63, 134, 255);
                    --clr-light-blue: rgb(171, 202, 255);
                }


                /* End General Styles */

                /* Upload Area */
                .upload-area {
                    width: 100%;
                    max-width: 55rem;
                    background-color: var(--clr-white);
                    box-shadow: 0 10px 60px rgb(218, 229, 255);
                    border: 2px solid var(--clr-light-blue);
                    border-radius: 24px;
                    padding: 2rem 1.875rem 5rem 1.875rem;
                    margin: 0.625rem;

                }

                .upload-area--open {
                    /* Slid Down Animation */
                    animation: slidDown 500ms ease-in-out;
                }

                @keyframes slidDown {
                    from {
                        height: 28.125rem;
                        /* 450px */
                    }

                    to {
                        height: 35rem;
                        /* 560px */
                    }
                }

                /* Header */
                .upload-area__header {}

                .upload-area__title {
                    font-size: 1.8rem;
                    font-weight: 500;
                    margin-bottom: 0.3125rem;
                }

                .upload-area__paragraph {
                    font-size: 0.9375rem;
                    color: var(--clr-light-gray);
                    margin-top: 0;
                }

                .upload-area__tooltip {
                    position: relative;
                    color: var(--clr-light-blue);
                    cursor: pointer;
                    transition: color 300ms ease-in-out;
                }

                .upload-area__tooltip:hover {
                    color: var(--clr-blue);
                }

                .upload-area__tooltip-data {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -125%);
                    min-width: max-content;
                    background-color: var(--clr-white);
                    color: var(--clr-blue);
                    border: 1px solid var(--clr-light-blue);
                    padding: 0.625rem 1.25rem;
                    font-weight: 500;
                    opacity: 0;
                    visibility: hidden;
                    transition: none 300ms ease-in-out;
                    transition-property: opacity, visibility;
                }

                .upload-area__tooltip:hover .upload-area__tooltip-data {
                    opacity: 1;
                    visibility: visible;
                }

                /* Drop Zoon */
                .upload-area__drop-zoon {
                    position: relative;
                    height: 11.25rem;
                    /* 180px */
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    border: 2px dashed var(--clr-light-blue);
                    border-radius: 15px;
                    margin-top: 2.1875rem;
                    cursor: pointer;
                    transition: border-color 300ms ease-in-out;
                }

                .upload-area__drop-zoon:hover {
                    border-color: var(--clr-blue);
                }

                .drop-zoon__icon {
                    display: flex;
                    font-size: 3.75rem;
                    color: var(--clr-blue);
                    transition: opacity 300ms ease-in-out;
                }

                .drop-zoon__paragraph {
                    font-size: 0.9375rem;
                    color: var(--clr-light-gray);
                    margin: 0;
                    margin-top: 0.625rem;
                    transition: opacity 300ms ease-in-out;
                }

                .drop-zoon:hover .drop-zoon__icon,
                .drop-zoon:hover .drop-zoon__paragraph {
                    opacity: 0.7;
                }

                .drop-zoon__loading-text {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    display: none;
                    color: var(--clr-light-blue);
                    z-index: 10;
                }

                .drop-zoon__preview-image {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                    padding: 0.3125rem;
                    border-radius: 10px;
                    display: none;
                    z-index: 1000;
                    transition: opacity 300ms ease-in-out;
                }

                .drop-zoon:hover .drop-zoon__preview-image {
                    opacity: 0.8;
                }

                .drop-zoon__file-input {
                    display: none;
                }

                /* (drop-zoon--over) Modifier Class */
                .drop-zoon--over {
                    border-color: var(--clr-blue);
                }

                .drop-zoon--over .drop-zoon__icon,
                .drop-zoon--over .drop-zoon__paragraph {
                    opacity: 0.7;
                }

                /* (drop-zoon--over) Modifier Class */
                .drop-zoon--Uploaded {}

                .drop-zoon--Uploaded .drop-zoon__icon,
                .drop-zoon--Uploaded .drop-zoon__paragraph {
                    display: none;
                }

                /* File Details Area */
                .upload-area__file-details {
                    height: 0;
                    visibility: hidden;
                    opacity: 0;
                    text-align: left;
                    transition: none 500ms ease-in-out;
                    transition-property: opacity, visibility;
                    transition-delay: 500ms;
                }

                /* (duploaded-file--open) Modifier Class */
                .file-details--open {
                    height: auto;
                    visibility: visible;
                    opacity: 1;
                }

                .file-details__title {
                    font-size: 1.125rem;
                    font-weight: 500;
                    color: var(--clr-light-gray);
                }

                /* Uploaded File */
                .uploaded-file {
                    display: flex;
                    align-items: center;
                    padding: 0.625rem 0;
                    visibility: hidden;
                    opacity: 0;
                    transition: none 500ms ease-in-out;
                    transition-property: visibility, opacity;
                }

                /* (duploaded-file--open) Modifier Class */
                .uploaded-file--open {
                    visibility: visible;
                    opacity: 1;
                }

                .uploaded-file__icon-container {
                    position: relative;
                    margin-right: 0.3125rem;
                }

                .uploaded-file__icon {
                    font-size: 3.4375rem;
                    color: var(--clr-blue);
                }

                .uploaded-file__icon-text {
                    position: absolute;
                    top: 1.5625rem;
                    left: 50%;
                    transform: translateX(-50%);
                    font-size: 0.9375rem;
                    font-weight: 500;
                    color: var(--clr-white);
                }

                .uploaded-file__info {
                    position: relative;
                    top: -0.3125rem;
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                }

                .uploaded-file__info::before,
                .uploaded-file__info::after {
                    content: '';
                    position: absolute;
                    bottom: -0.9375rem;
                    width: 0;
                    height: 0.5rem;
                    background-color: #ebf2ff;
                    border-radius: 0.625rem;
                }

                .uploaded-file__info::before {
                    width: 100%;
                }

                .uploaded-file__info::after {
                    width: 100%;
                    background-color: var(--clr-blue);
                }

                /* Progress Animation */
                .uploaded-file__info--active::after {
                    animation: progressMove 800ms ease-in-out;
                    animation-delay: 300ms;
                }

                @keyframes progressMove {
                    from {
                        width: 0%;
                        background-color: transparent;
                    }

                    to {
                        width: 100%;
                        background-color: var(--clr-blue);
                    }
                }

                .uploaded-file__name {
                    width: 100%;
                    max-width: 6.25rem;
                    /* 100px */
                    display: inline-block;
                    font-size: 1rem;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .uploaded-file__counter {
                    font-size: 1rem;
                    color: var(--clr-light-gray);
                }
            </style>

        </section>

        <script>
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            var table = $('#user_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('american.plastic.admin.users.get.all') }}",
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'email',
                        name: 'email'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });






            $('body').on('click', '.suspend', function() {
                let csrfToken = $('meta[name="csrf-token"]').attr('content');
                var id = $(this).data('id');
                $.ajax({
                    type: "POST", // or "GET" depending on your route configuration
                    url: "{{ route('american.plastic.admin.set.user.suspend') }}",
                    data: {
                        id: id
                    },
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    }, // replace with the actual route URL
                    success: function(response) {
                        // Handle the success response from the server
                        Alert.trash('Suspended! The user account suspended successfully.', 'success', {
                            displayDuration: 3000
                        });
                        table.ajax.reload();
                    },
                    error: function(error) {
                        Alert.error('An unexpected error occurred. Please try again later. ', 'Error', {
                            displayDuration: 3000
                        });
                    }
                });

            });

            $('body').on('click', '.recover', function() {
                let csrfToken = $('meta[name="csrf-token"]').attr('content');
                var id = $(this).data('id');
                $.ajax({
                    type: "POST", // or "GET" depending on your route configuration
                    url: "{{ route('american.plastic.admin.recover.account') }}",
                    data: {
                        id: id
                    },
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    }, // replace with the actual route URL
                    success: function(response) {
                        // Handle the success response from the server
                        Alert.trash('Recovered! The user account reactivated.', 'success', {
                            displayDuration: 3000
                        });
                        table.ajax.reload();
                    },
                    error: function(error) {
                        Alert.error('An unexpected error occurred. Please try again later. ', 'Error', {
                            displayDuration: 3000
                        });
                    }
                });

            });

            $('body').on('click', '.delete', function() {
                let csrfToken = $('meta[name="csrf-token"]').attr('content');
                var id = $(this).data('id');
                $.ajax({
                    type: "POST", // or "GET" depending on your route configuration
                    url: "{{ route('american.plastic.admin.recover.account') }}",
                    data: {
                        id: id
                    },
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    }, // replace with the actual route URL
                    success: function(response) {
                        // Handle the success response from the server
                        Alert.trash('Recovered! The user account reactivated.', 'success', {
                            displayDuration: 3000
                        });
                        table.ajax.reload();
                    },
                    error: function(error) {
                        Alert.error('An unexpected error occurred. Please try again later. ', 'Error', {
                            displayDuration: 3000
                        });
                    }
                });

            });

            $('body').on('click', '#close', function() {
                $('#edit_order_details').modal('hide');

            });

            $('#update_order_btn').click(function() {
                var order_update = $('#update_order_form')[0];
                var order_update_ajax = new FormData(order_update);

                $.ajax({
                        type: 'POST',
                        url: "{{ route('order.update.details') }}",
                        data: order_update_ajax,
                        contentType: false,
                        processData: false,
                        success: (response) => {
                            if (response) {
                                $('#edit_order_details').modal('hide');
                                table.ajax.reload();
                            }
                        },
                        error: function(response) {
                            $('#image-input-error').text(response.responseJSON.message);
                        }
                    })
                    .always(function() {

                    });
                console.log("clickde");
            });
        </script>
    </main><!-- End #main -->
@endsection