@extends('layout.app')
@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
    #modal {
        display: none;
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        justify-content: center;
        align-items: center;
        overflow: hidden;
        z-index: 3;
    }
</style>

<div class="page-heading">
    <div class="page-title">
        <div class="row">
            <div class="col-12 col-md-6 order-md-1 order-last">
                <h3>Edit Sticker</h3>
                <!--<p class="text-subtitle text-muted">Multiple form layouts, you can use.</p>-->
            </div>
            <div class="col-12 col-md-6 order-md-2 order-first">
                <!--<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Form Layout</li>
                    </ol>
                </nav>-->
            </div>
        </div>
    </div>
    <section id="multiple-column-form">
        <div class="row match-height">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Sticker</h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <form class="form" id="uploadForm"  method="POST" enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" class="form-control" name="id" value="{{ $sticker->id }}">
                                <div class="row">
                                
                                      <div class="col-md-6 col-6">
                                    <div class="form-group">
                                        <label  for="categoryId">Category Name</label>
                                        <select name="categoryId" id="categoryId" class="choices form-select">
                                            @foreach($stickerCategory AS $category)
                                            <option value="{{$category->id}}"  selected="selected">{{$category->category_name}}</option>
                                            @endforeach 
                                        </select>
                                    </div>
                                    </div>
                                    
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="sticker">Sticker</label>
                                            <input type="file" id="sticker" class="form-control" accept="image/*" name="sticker">
                                            <span class="error" id="previewImageError" style="color:red;"></span>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="priority">Priority</label>
                                            <input type="number" id="priority" value="{{$sticker->priority}}" class="form-control" name="priority" placeholder="Priority" >
                                            <span class="error" id="priorityError" style="color:red;"></span>
                                        </div>
                                    </div>
                              
                                    <div class="col-md-6 col-12">
                                        <div class="form-group">
                                            <label for="is_paid">Is Paid</label>
                                            <input type="number" id="is_paid" value="{{$sticker->is_paid}}" class="form-control" name="is_paid" placeholder="Is Paid" value="1">
                                            <span class="error" id="numberOfImageError" style="color:red;"></span>
                                        </div>
                                    </div>
                                    <div class="col-12 d-flex pt-4 justify-content-center">
                                        <button type="submit"  class="btn btn-primary me-1 mb-1">Submit</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div id="modal">
<div style="position: relative; width: 135px; height: 135px;">
  <svg width="135" height="135" style="position: absolute; top: 0; left: 0;">
  <rect x="0" y="0" width="135" height="135" rx="20" ry="20" fill="white" />
  <circle cx="67" cy="67" r="50" stroke="#ccc" stroke-width="10" fill="none" />\
  <circle id="progressCircle" cx="67" cy="67" r="50" stroke="#435ebe" stroke-width="10"
    fill="none" stroke-dasharray="314" stroke-dashoffset="314" stroke-linecap="round"
    transform="rotate(-90 67 67)" />
</svg>
  <div id="percentLabel"
       style="position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);
              text-align: center; font-size: 18px; font-weight: bold; color:black;">
    0%
  </div>
</div>
</div>
                </div>
            </div>
        </div>
    </section>
</div>


<script>

$(document).ready(function () {
    $('#uploadForm').on('submit', function (e) {
        $("#modal").css("display", "flex");
        e.preventDefault();
$('.error').text('');
        let formData = new FormData(this);
 
        $.ajax({
            url: "{{ route('editSticker.save') }}",
            type: "POST",
            data: formData,
            contentType: false,
            processData: false,
            
              xhr: function () {
    let xhr = new window.XMLHttpRequest();
    xhr.upload.addEventListener("progress", function (evt) {
        if (evt.lengthComputable) {
            let percent = Math.round((evt.loaded / evt.total) * 100);
            let radius = 50;
            let circumference = 2 * Math.PI * radius;
            let offset = circumference - (percent / 100) * circumference;

            $('#progressCircle').css('stroke-dashoffset', offset);
            $('#percentLabel').text(percent + '%'); // Ensure this exists in DOM
        }
    }, false);
    return xhr;
},

beforeSend: function () {
    let radius = 50;
    let circumference = 2 * Math.PI * radius;
    $('#progressCircle').css('stroke-dashoffset', circumference);
    $('#percentLabel').text('0%');
},

        success: function (response) {
           location.reload();  
                $("#modal").css("display", "none");
        },

        error: function (xhr) {
            $('#message').html('<p style="color:red;">Upload failed</p>');
            $("#modal").css("display", "none");
        }


 
            
        });
    });
   
});
</script>

@endsection