@extends('admin.layout.dashboard_master')

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

        <div class="pagetitle">
            <h1>Shipping</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">Shipping</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">
                            <h5 class="card-title">Shipping Form</h5>

                            <!-- General Form Elements -->
                            <form id="shipping_form" method="POST" onsubmit="return validateForm()">
                                @csrf
                                <div class="row mb-3">

                                    <div class="col-md-12">
                                        <!-- Upload Area -->
                                        <div id="uploadArea" class="upload-area">
                                            <!-- Header -->
                                            <div class="upload-area__header">
                                                <label for="inputText" class="col-sm-8 col-form-label">Shipping
                                                    Name(Zone)</label>
                                                <input type="text" class="form-control" name="shipping_name"
                                                    id="shippingname">

                                            </div>
                                            <div class="upload-area__header">
                                                <label for="inputText" class="col-sm-8 col-form-label">Service Name</label>
                                                <input type="text" class="form-control" name="service_name"
                                                    id="servicename">

                                            </div>
                                            <!-- End Header -->
                                            <div class="upload-area__header">
                                                <label for="inputText" class="col-sm-8 col-form-label">Price</label>
                                                <input type="number" class="form-control" name="shipping_price"
                                                    id="shippingprice">

                                            </div>
                                        </div>
                                        <!-- End Upload Area -->
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-10">
                                        <button type="button" id="create_admin" class="btn btn-primary"
                                            onclick="validateForm()">Create</button>
                                    </div>
                                </div>
                            </form><!-- End General Form Elements -->
                        </div>
                    </div>
                </div>

                <div class="modal fade" id="shipping_modalform" tabindex="-1" role="dialog"
                    aria-labelledby="assignRoleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Edit Shipping Zone</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <form id="editshipping_form">
                                    <div class="mb-3">
                                        <label for="roleSelect" class="form-label">Shipping name</label>
                                        <input type="text" class="form-control" id="editshipping_name"
                                            name="shippingedit_name">
                                        <input type="hidden" id="update_id" name="updateid">
                                    </div>
                                    <div class="mb-3">
                                        <label for="roleSelect" class="form-label">Service name</label>
                                        <input type="text" class="form-control" id="editservice_name"
                                            name="editshipping_service">
                                    </div>


                                    <div class="mb-3">
                                        <label for="roleSelect" class="form-label">Price</label>
                                        <input type="number" class="form-control" id="edit_shippingprice"
                                            name="shippingedit_price">

                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary" data-id="" id="updatebtn">Update</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="table-responsive text-nowrap p-4">
                                <table class="table" id="shipping_table">
                                    <thead>
                                        <tr>
                                            <th>Shipping Name</th>
                                            <th>Price</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </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>
            <script>
                // Design By
                // - https://dribbble.com/shots/13992184-File-Uploader-Drag-Drop

                // Select Upload-Area
                const uploadArea = document.querySelector('#uploadArea')

                // Select Drop-Zoon Area
                const dropZoon = document.querySelector('#dropZoon');

                // Loading Text
                const loadingText = document.querySelector('#loadingText');

                // Slect File Input 
                const fileInput = document.querySelector('#fileInput');

                // Select Preview Image
                const previewImage = document.querySelector('#previewImage');

                // File-Details Area
                const fileDetails = document.querySelector('#fileDetails');

                // Uploaded File
                const uploadedFile = document.querySelector('#uploadedFile');

                // Uploaded File Info
                const uploadedFileInfo = document.querySelector('#uploadedFileInfo');

                // Uploaded File  Name
                const uploadedFileName = document.querySelector('.uploaded-file__name');

                // Uploaded File Icon
                const uploadedFileIconText = document.querySelector('.uploaded-file__icon-text');

                // Uploaded File Counter
                const uploadedFileCounter = document.querySelector('.uploaded-file__counter');

                // ToolTip Data
                const toolTipData = document.querySelector('.upload-area__tooltip-data');

                // Images Types
                const imagesTypes = [
                    "jpeg",
                    "png",
                    "svg",
                    "gif"
                ];

                // Append Images Types Array Inisde Tooltip Data
                toolTipData.innerHTML = [...imagesTypes].join(', .');

                // When (drop-zoon) has (dragover) Event 
                dropZoon.addEventListener('dragover', function(event) {
                    // Prevent Default Behavior 
                    event.preventDefault();

                    // Add Class (drop-zoon--over) On (drop-zoon)
                    dropZoon.classList.add('drop-zoon--over');
                });

                // When (drop-zoon) has (dragleave) Event 
                dropZoon.addEventListener('dragleave', function(event) {
                    // Remove Class (drop-zoon--over) from (drop-zoon)
                    dropZoon.classList.remove('drop-zoon--over');
                });

                // When (drop-zoon) has (drop) Event 
                dropZoon.addEventListener('drop', function(event) {
                    // Prevent Default Behavior 
                    event.preventDefault();

                    // Remove Class (drop-zoon--over) from (drop-zoon)
                    dropZoon.classList.remove('drop-zoon--over');

                    // Select The Dropped File
                    const file = event.dataTransfer.files[0];

                    // Call Function uploadFile(), And Send To Her The Dropped File :)
                    uploadFile(file);
                });

                // When (drop-zoon) has (click) Event 
                dropZoon.addEventListener('click', function(event) {
                    // Click The (fileInput)
                    fileInput.click();
                });

                // When (fileInput) has (change) Event 
                fileInput.addEventListener('change', function(event) {
                    // Select The Chosen File
                    const file = event.target.files[0];

                    // Call Function uploadFile(), And Send To Her The Chosen File :)
                    uploadFile(file);
                });

                // Upload File Function
                function uploadFile(file) {
                    // FileReader()
                    const fileReader = new FileReader();
                    // File Type 
                    const fileType = file.type;
                    // File Size 
                    const fileSize = file.size;

                    // If File Is Passed from the (File Validation) Function
                    if (fileValidate(fileType, fileSize)) {
                        // Add Class (drop-zoon--Uploaded) on (drop-zoon)
                        dropZoon.classList.add('drop-zoon--Uploaded');

                        // Show Loading-text
                        loadingText.style.display = "block";
                        // Hide Preview Image
                        previewImage.style.display = 'none';

                        // Remove Class (uploaded-file--open) From (uploadedFile)
                        uploadedFile.classList.remove('uploaded-file--open');
                        // Remove Class (uploaded-file__info--active) from (uploadedFileInfo)
                        uploadedFileInfo.classList.remove('uploaded-file__info--active');

                        // After File Reader Loaded 
                        fileReader.addEventListener('load', function() {
                            // After Half Second 
                            setTimeout(function() {
                                // Add Class (upload-area--open) On (uploadArea)
                                uploadArea.classList.add('upload-area--open');

                                // Hide Loading-text (please-wait) Element
                                loadingText.style.display = "none";
                                // Show Preview Image
                                previewImage.style.display = 'block';

                                // Add Class (file-details--open) On (fileDetails)
                                fileDetails.classList.add('file-details--open');
                                // Add Class (uploaded-file--open) On (uploadedFile)
                                uploadedFile.classList.add('uploaded-file--open');
                                // Add Class (uploaded-file__info--active) On (uploadedFileInfo)
                                uploadedFileInfo.classList.add('uploaded-file__info--active');
                            }, 500); // 0.5s

                            // Add The (fileReader) Result Inside (previewImage) Source
                            previewImage.setAttribute('src', fileReader.result);

                            // Add File Name Inside Uploaded File Name
                            uploadedFileName.innerHTML = file.name;

                            // Call Function progressMove();
                            progressMove();
                        });

                        // Read (file) As Data Url 
                        fileReader.readAsDataURL(file);
                    } else { // Else

                        this; // (this) Represent The fileValidate(fileType, fileSize) Function

                    };
                };

                // Progress Counter Increase Function
                function progressMove() {
                    // Counter Start
                    let counter = 0;

                    // After 600ms 
                    setTimeout(() => {
                        // Every 100ms
                        let counterIncrease = setInterval(() => {
                            // If (counter) is equle 100 
                            if (counter === 100) {
                                // Stop (Counter Increase)
                                clearInterval(counterIncrease);
                            } else { // Else
                                // plus 10 on counter
                                counter = counter + 10;
                                // add (counter) vlaue inisde (uploadedFileCounter)
                                uploadedFileCounter.innerHTML = `${counter}%`
                            }
                        }, 100);
                    }, 600);
                };


                // Simple File Validate Function
                function fileValidate(fileType, fileSize) {
                    // File Type Validation
                    let isImage = imagesTypes.filter((type) => fileType.indexOf(`image/${type}`) !== -1);

                    // If The Uploaded File Type Is 'jpeg'
                    if (isImage[0] === 'jpeg') {
                        // Add Inisde (uploadedFileIconText) The (jpg) Value
                        uploadedFileIconText.innerHTML = 'jpg';
                    } else { // else
                        // Add Inisde (uploadedFileIconText) The Uploaded File Type 
                        uploadedFileIconText.innerHTML = isImage[0];
                    };

                    // If The Uploaded File Is An Image
                    if (isImage.length !== 0) {
                        // Check, If File Size Is 2MB or Less
                        if (fileSize <= 2000000) { // 2MB :)
                            return true;
                        } else { // Else File Size
                            return alert('Please Your File Should be 2 Megabytes or Less');
                        };
                    } else { // Else File Type 
                        return alert('Please make sure to upload An Image File Type');
                    };
                };

                // :)
            </script>
        </section>

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

            function validateForm() {
                var name = document.getElementById("shippingname").value.trim();
                var shippingprice = document.getElementById("shippingprice").value.trim();

                // Add more validations as needed
                if (name === "" || shippingprice === "") {
                    Alert.info('Info! All fields are required. Please fill out every field before submitting.', 'Info', {
                        displayDuration: 3000
                    })
                    return false;
                } else {
                    var add_shippingform = $('#shipping_form')[0];
                    var create_shippingform_ajax = new FormData(add_shippingform);
                    $.ajax({
                            type: 'POST',
                            url: "{{ route('admin.create.new.shipping.zone') }}",
                            data: create_shippingform_ajax,
                            contentType: false,
                            processData: false,
                            success: (response) => {
                                if (response) {
                                    resetForm();
                                    Alert.success('Success! The post has been successfully created.', 'Success', {
                                        displayDuration: 3000,
                                        pos: 'top'
                                    });

                                    table.ajax.reload();
                                }
                            },
                            error: function(response) {
                                Alert.error('An unexpected error occurred. Please try again later. ', 'Error', {
                                    displayDuration: 3000
                                });
                            }
                        })
                        .always(function() {});
                }

            }

            function resetForm() {
                document.getElementById('shipping_form').reset();

            }

            var table = $('#shipping_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('admin.shipping.zone.get') }}",
                columns: [{
                        data: 'zone_name',
                        name: 'zone_name'
                    },
                    {
                        data: 'price',
                        name: 'price',
                        render: function(data, type, row) {
                            return 'LKR ' + parseFloat(data).toFixed(2);
                        }
                    },

                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });


            $('body').on('click', '.edit', function() {
                let csrfToken = $('meta[name="csrf-token"]').attr('content');
                let id = $(this).data('id');

                $.ajax({
                    url: '{{ route('admin.shipping.edit', ['id' => 'id']) }}'.replace('id', id),
                    method: 'GET',
                    success: function(response) {

                        $('#shipping_modalform').modal('show');

                        $('#update_id').val(response.id);
                        $('#editshipping_name').val(response.zone_name);
                        $('#edit_shippingprice').val(response.price);
                        $('#editservice_name').val(response.service_name);


                    },
                    error: function(error) {}
                });

            });

            $('body').on('click', '#updatebtn', function() {
                var update_shipping = $('#editshipping_form')[0];
                var update_shipping_ajax = new FormData(update_shipping);
                $.ajax({
                        type: 'POST',
                        url: "{{ route('ajax.update.exsiting.shipping.service') }}",
                        data: update_shipping_ajax,
                        contentType: false,
                        processData: false,
                        success: (response) => {
                            if (response) {
                                Alert.success('Success! The shipping zone has been successfully updated.',
                                    'Success', {
                                        displayDuration: 3000,
                                        pos: 'top'
                                    });
                                $('#shipping_modalform').modal('hide');
                                table.ajax.reload();
                            }
                        },
                        error: function(response) {
                            Alert.error('An unexpected error occurred. Please try again later. ', 'Error', {
                                displayDuration: 3000
                            });
                        }
                    })
                    .always(function() {});
            });


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

            });
        </script>
    </main><!-- End #main -->
@endsection