@extends('layouts.app')


@section('content')
<!-- <h1>Shipping Settings</h1> -->

@if(session('success'))
<div style="color: green;">
    {{ session('success') }}
</div>
@endif

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    p {
        margin: 0px;
    }

    /* .main-layout {
  background-color: #fff;
  margin: 60px auto;
  max-width: 1440px;
  padding: 0px 20px;
  border-radius: 10px;
} */
    .main-card {
        padding: 20px;
        border: 1px solid #eaecf0;
        border-radius: 10px;
    }

    /* body {
  font-family: "Inter", serif;
  font-optical-sizing: auto;
  font-style: normal;
} */
    .main-heading h4 {
        border-bottom: 1px solid #eaecf0;
        padding-bottom: 20px;
    }

    .main-heading {
        margin-bottom: 20px;
    }

    .layout-cards {
        /* display: flex; */
        /* gap: 43px; */
        /* justify-content: space-between; */
        /* align-items: center; */
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 20px;
    }

    .econt-card {
        border: 1px solid #eaecf0;
        padding: 14px 16px;
        width: 100%;
        border-radius: 10px;
    }

    .toggle-heading,
    .store-heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eaecf0;
        padding-bottom: 14px;
    }

    .choose-label {
        margin-bottom: 8px;
    }

    .card-input {
        margin-bottom: 20px;
    }

    .card-input input {
        border: 1px solid #eaecf0;
        border-radius: 4px;
        padding: 12px 14px;
        width: 100%;
    }

    .form-select {
        padding: 12px 14px !important;
    }

    .toggle-heading p {
        margin-bottom: 0px;
    }

    .store-toggle {
        border: 1px solid #eaecf0;
        border-radius: 10px;
        width: 500px;
        padding: 18px 16px;
    }

    .save-btn-group {
        margin-top: 20px;
        display: flex;
        gap: 20px;
        justify-content: flex-end;
    }

    .save-btn-group .back-btn {
        padding: 8px 25px;
        color: #ff7f53;
        border: 1px solid #ff7f53;
        border-radius: 4px;
        background-color: #fff;
    }

    .save-btn-group .save-btn {
        padding: 8px 25px;
        color: #ffffff;
        border: 1px solid #ff7f53;
        border-radius: 4px;
        background-color: #ff7f53;
    }

    /* form css */
    .main-input input {
        border: 1px solid #eaecf0;
        border-radius: 4px;
        padding: 12px 14px;
        width: 100%;
        margin-bottom: 14px;
    }

    .main-input select {
        margin-bottom: 14px;
    }

    .new-check {
        width: 0px;
    }

    .main-input .form-check-input {
        width: 0px !important;
        margin-bottom: 0px;
    }

    .check-div {
        display: flex;
        gap: 10px;
        align-items: center;
    }
</style>
<!-- <form action="{{ route('shipping.save-settings') }}" method="POST">
    <meta name="csrf-token" content="{{ csrf_token() }}">
        <input type="hidden" id="actionUrl" value="{{ route('shipping.save-settings') }}">
        
        <label for="shipping_name">Shipping Name:</label>
        <input type="text" id="shipping_name" name="shipping_name" value="{{ old('shipping_name', $shippingSettings->shipping_name ?? '') }}" required>

        <br><br>

        <label for="shipping_price">Shipping Price:</label>
        <input type="text" id="shipping_price" name="shipping_price" value="{{ old('shipping_price', $shippingSettings->shipping_price ?? '') }}" required>

        <br><br>

        <button type="submit">Save Settings</button>
    </form>

    <br>

    <hr>

    <div class="container mt-5">
        <h2>List of custom shippings</h2>
        <table class="table table-bordered" id="users-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Shipping Name</th>
                    <th>Sipping Price</th>
                    <th>Created At</th>
                    <th>Action</th>
                </tr>
            </thead>
        </table>
    </div>
    <hr>

    <h2>Embed scripts form laravel to shopify</h2>
    <button id="injectScriptButton">Inject Script</button>
    <button id="removeScriptButton">Remove Script</button>

    <hr> -->
<div class="main-layout">
    <div class="main-card">
        <div class="main-heading">
            <h4>Courier Setting</h4>
        </div>
        <div class="layout-cards">
            <div class="econt-card">
                <div class="toggle-heading">
                    <img src="./images/econt.svg" alt="">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                    </div>
                </div>
                <div class="card-input">
                    <label class="choose-label">Choose Couriers</label>
                    <select class="form-select" aria-label="Default select example">
                        <option selected>Econt</option>
                        <option value="1">Speedy</option>
                    </select>
                </div>
                <div class="card-input">
                    <label class="choose-label">Shipping price</label><br>
                    <input type="text" placeholder="Shipping Price">
                </div>
                <div class="card-input">
                    <label class="choose-label">Free Delivery over:</label><br>
                    <input type="text" placeholder="Shipping Price">
                </div>
                <div class="card-input">
                    <label class="choose-label">Position</label><br>
                    <select class="form-select" aria-label="Default select example">
                        <option selected>3</option>
                        <option value="1">2</option>
                    </select>
                </div>

            </div>
            <div class="econt-card">
                <div class="toggle-heading">
                    <img src="./images/speedy-logo 2.svg" alt="">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                    </div>
                </div>
                <div class="card-input">
                    <label class="choose-label">Choose Couriers</label>
                    <select class="form-select" aria-label="Default select example">
                        <option selected>Econt</option>
                        <option value="1">Speedy</option>
                    </select>
                </div>
                <div class="card-input">
                    <label class="choose-label">Shipping price</label><br>
                    <input type="text" placeholder="Shipping Price">
                </div>
                <div class="card-input">
                    <label class="choose-label">Free Delivery over:</label><br>
                    <input type="text" placeholder="Shipping Price">
                </div>
                <div class="card-input">
                    <label class="choose-label">Position</label><br>
                    <select class="form-select" aria-label="Default select example">
                        <option selected>3</option>
                        <option value="1">2</option>
                    </select>
                </div>

            </div>
            <div class="econt-card">
                <div class="toggle-heading">
                    <img src="./images/econt.svg" alt="">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                    </div>
                </div>
                <div class="card-input">
                    <label class="choose-label">Choose Couriers</label>
                    <select class="form-select" aria-label="Default select example">
                        <option selected>Econt</option>
                        <option value="1">Speedy</option>
                    </select>
                </div>
                <div class="card-input">
                    <label class="choose-label">Shipping price</label><br>
                    <input type="text" placeholder="Shipping Price">
                </div>
                <div class="card-input">
                    <label class="choose-label">Free Delivery over:</label><br>
                    <input type="text" placeholder="Shipping Price">
                </div>
                <div class="card-input">
                    <label class="choose-label">Position</label><br>
                    <select class="form-select" aria-label="Default select example">
                        <option selected>3</option>
                        <option value="1">2</option>
                    </select>
                </div>

            </div>

        </div>
        <div class="store-toggle">
            <div class="store-heading d-flex align-items-center justify-content-between">
                <h6>Stores </h6>
                <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                </div>
            </div>
        </div>
    </div>
    <div class="save-btn-group">
        <button class="back-btn">Back</button>
        <button class="save-btn">Save</button>
    </div>


    <!-- form section  -->
    <div class="shipping-form mt-3">
        <div class="form-heading">
            <h4>Shipping Address</h4>
        </div>
        <div class="main-input">
            <div class="row">
                <div class="col-md-6">
                    <input type="text" placeholder="First Name">
                </div>
                <div class="col-md-6">
                    <input type="text" placeholder="Last Name">
                </div>
                <div class="col-12">
                    <input type="text" placeholder="Address">
                </div>
                <div class="col-12">
                    <input type="text" placeholder="Apartmemt,suite, etc. (optional)">
                </div>
                <div class="col-md-6">
                    <input type="text" placeholder="City">
                </div>
                <div class="col-md-6">
                    <input type="text" placeholder="Postal Code">
                </div>
                <div class="col-12">
                    <select class="form-select" aria-label="Default select example" placeholder="Country/Region">
                        <option selected>3</option>
                        <option value="1">2</option>
                    </select>
                </div>

                <div class="check-div">
                    <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
                    <label class="form-check-label" for="flexCheckChecked">
                        Save this information for next time
                    </label>
                </div>

            </div>
        </div>
    </div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        let form = document.querySelector("form");

        // Handle form submission for saving settings
        form.addEventListener("submit", function(event) {
            event.preventDefault();

            let formData = new FormData(form);
            let csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

            fetch(form.action, {
                    method: "POST",
                    body: formData,
                    headers: {
                        "X-CSRF-TOKEN": csrfToken,
                        "X-Requested-With": "XMLHttpRequest"
                    }
                })
                .then(response => response.json())
                .then(data => {
                    alert("Settings saved successfully!");
                    location.reload();
                })
                .catch(error => console.error("Error:", error));
        });

        // Handle Inject Script Button click
        document.getElementById("injectScriptButton").addEventListener("click", function() {

            let csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

            fetch("{{ route('shipping.inject-script') }}", {
                    method: "GET",
                    headers: {
                        "X-CSRF-TOKEN": csrfToken,
                        "X-Requested-With": "XMLHttpRequest"
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert("Script injected successfully!");
                    } else {
                        alert("Failed to inject script.");
                    }
                })
                .catch(error => console.error("Error:", error));
        });

        // Handle Remove Script Button click
        document.getElementById("removeScriptButton").addEventListener("click", function() {
            let csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

            fetch("{{ route('shipping.remove-script') }}", {
                    method: "GET",
                    headers: {
                        "X-CSRF-TOKEN": csrfToken,
                        "X-Requested-With": "XMLHttpRequest"
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert("Script removed successfully!");
                    } else {
                        alert("Failed to remove script.");
                    }
                })
                .catch(error => console.error("Error:", error));
        });
    });

    $(document).ready(function() {
        $('#users-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ url('/shopify/shipping/table') }}",
            columns: [{
                    data: 'id',
                    name: 'id'
                },
                {
                    data: 'shipping_name',
                    name: 'shipping_name'
                },
                {
                    data: 'shipping_price',
                    name: 'shipping_price'
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                }
            ]
        });
    });
</script>

@endsection