@extends('layouts.admin')
@section('content')
<!--  -->

    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
                <h4 class="mb-sm-0">Create Challenge</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">Home</a></li>
                        <li class="breadcrumb-item"><a href="javascript: void(0);">Challenge</a></li>
                        <li class="breadcrumb-item active">{{ $id?'Update Challenge':'Create Challenge' }}</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <div class="row">
        <div class="col-lg-12"> 
            <div class="card" id="orderList">
                <div class="card-body">
                    <form class="tablelist-form {{ $id!=''?'edit-form':'' }}" autocomplete="off" id="challengeForm" method="post" action="{{ route('admin.challenges') }}">
                        @csrf
                        <input type="hidden" name="id" id="id" value="{{ $id }}">
                        <div class="row">
                            <div class="mb-3 col-lg-4">
                                <label for="customername-field" class="form-label">Challenge Name</label>
                                <input type="text" id="customername-field" class="form-control" placeholder="Enter name" required name="name" value="{{ $name }}"/>
                            </div>

                            <div class="mb-3 col-lg-4">
                                <label for="orderId" class="form-label">Challenge For</label>
                                <select class="form-select js-example-basic-single" data-placeholder="Select Challenge For" onchange="showDiv(this)" name="challenge_type" id="challenge_type">
                                    <option></option>
                                    <option value="1" {{ $challenge_type ==1?'selected':'' }}>All</option>
                                    <option value="2" {{ $challenge_type ==2?'selected':'' }}>Company</option>
                                    <option value="3" {{ $challenge_type ==3?'selected':'' }}>Individuals</option>
                                </select>
                            </div>

                            <div class="mb-3 col-lg-4" id="hidden_div" style="display: {{$challenge_type==2?'block':'none'}};">
                            <label for="orderId" class="form-label">Company</label>
                                <select class="form-select js-example-basic-single"  multiple data-placeholder="Select Company" name="company[]" id="company">
                                    <option></option>
                                    {{--<option value="All">All</option>--}}
                                    @foreach($companies as $company)
                                        <option value="{{ $company->id }}" {{ in_array($company->id, $selectedCompanies)?'selected':'' }}>{{ $company->name }}</option>
                                    @endforeach

                                </select>
                            </div>

                            <div class="mb-3 col-lg-4">
                                <label for="customername-field" class="form-label">Points</label>
                                <input type="text" id="hadify_points" class="form-control" placeholder="Enter name" required name="hadify_points" value="{{ $hadify_points }}"/>
                            </div>

                            <div class="mb-3 col-lg-4">
                                <label for="orderId" class="form-label">Target</label>
                                <div class="d-flex gap-2">
                                    <input type="text" value="{{ $target_value }}" class="form-control number-only" placeholder="Target" name="target_value"/>
                                    <div style="width: 180px;">
                                        <select class="form-select js-example-basic-single" data-placeholder="Target Type" name="target_type">
                                            <option></option>
                                            @foreach($targettypes as $targettype)
                                                <option value="{{ $targettype->id }}" {{ $target_type ==$targettype->id?'selected':'' }}>{{ $targettype->name }}</option>
                                            @endforeach
                                            
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 mb-3">
                                <label for="customername-field" class="form-label">Emirates/State</label>
                                <select class="form-select js-example-basic-single" data-placeholder="Select Emirates?State" name="emirate" id="emirate">
                                    <option></option>
                                    @foreach($emirates as $emirat)
                                    <option value="{{ $emirat->name }}" {{ (!empty($emirate) && $emirate == $emirat->name) ? 'selected' : '' }}>{{ $emirat->name }}</option> 
                                    @endforeach
                                   
                                </select>
                            </div>

                            <div class="col-lg-4 mb-3">
                                <label for="customername-field" class="form-label">Start Date: </label>
                                <input type="text" class="form-control" placeholder="Start Date" data-provider="flatpickr" data-date-format="d-m-Y" name="start_date" id="start_date" />
                            </div>

                            <div class="col-lg-4 mb-3">
                                <label for="customername-field" class="form-label">End Date: </label>
                                <input type="text" class="form-control" placeholder="End Date" data-provider="flatpickr" data-date-format="d-m-Y" name="end_date" id="end_date" />
                            </div>



                            <div class="col-lg-4 mb-3">
                                <label for="customername-field" class="form-label">Status</label> 
                                <select class="form-select js-example-basic-single status-select" data-placeholder="Select Status" name="status">
                                    <option value=""></option>
                                    <option value="1" {{ $status==1?'selected':'' }}>Active</option>
                                    <option value="0" {{ $status==0?'selected':'' }}>Inactive</option>
                                </select>
                            </div>
                            <div class="col-md-12 mb-4">
                                <div class="form-group" value = "{{$address ?? ''}}">
        
                                    <x-elements.map-location  
                                    addressFieldName="address"
                                    :lat="$latitude ?? ''"
                                    :lng="$longitude ?? ''"
                                    :address="$address ?? ''"
                                    
                                    />
                                </div>
                            </div> 
                        </div>

                        <div class="col-12 mb-3 ">
                            <label>Images</label>
                            <div class="dropzone">
                                        <input type="hidden" name="image_files" id="image_files">
        
                                                <div class="fallback">
                                                    <input name="images[]"  type="file"  multiple="multiple">
                                                </div>
                                                <div class="dz-message needsclick">
                                                    <div class="mb-3">
                                                        <i class="display-4 text-muted ri-upload-cloud-2-fill"></i>
                                                    </div>
        
                                                    <h4>Drop files here or click to upload.</h4>
                                                </div>
                                            </div>
                                            <ul class="list-unstyled mb-0" id="dropzone-preview">
                                                <li class="mt-2" id="dropzone-preview-list">
                                                    <div class="border rounded">
                                                        <div class="d-flex p-2">
                                                            <div class="flex-shrink-0 me-3">
                                                                <div class="avatar-sm bg-light rounded">
                                                                    <img data-dz-thumbnail class="img-fluid rounded d-block" src="{{ asset('assets/images/new-document.png') }}" alt="Dropzone-Image" />
                                                                </div>
                                                            </div>
                                                            <div class="flex-grow-1">
                                                                <div class="pt-1">
                                                                    <h5 class="fs-14 mb-1" data-dz-name>&nbsp;</h5>
                                                                    <p class="fs-13 text-muted mb-0" data-dz-size></p>
                                                                    <strong class="error text-danger" data-dz-errormessage></strong>
                                                                </div>
                                                            </div>
                                                            <div class="flex-shrink-0 ms-3">
                                                                <button data-dz-remove class="btn btn-sm btn-danger">Delete</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                            </div>
 
                        <div class="hstack gap-2 justify-content-between">
                        <a href="{{ route('admin.challenges') }}" class="btn btn-back">Back</a>
                            <button type="submit" class="btn btn-success" id="submitBtn">{{ $id?'Update Challenge':'Create Challenge' }}</button>
                            <!-- <button type="button" class="btn btn-success" id="edit-btn">Update</button> -->
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


@endsection
@section('script')
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/additional-methods.min.js"></script>
<script src="{{ asset('assets/libs/%40ckeditor/ckeditor5-build-classic/build/ckeditor.js') }}"></script>

<!-- dropzone min -->
<script src="{{ asset('assets/libs/dropzone/dropzone-min.js') }}"></script>
<!-- filepond js -->
<script src="{{ asset('assets/libs/filepond/filepond.min.js') }}"></script>
<script src="{{ asset('assets/libs/filepond-plugin-image-preview/filepond-plugin-image-preview.min.js') }}"></script>
<script src="{{ asset('assets/libs/filepond-plugin-file-validate-size/filepond-plugin-file-validate-size.min.js') }}"></script>
<script src="{{ asset('assets/libs/filepond-plugin-image-exif-orientation/filepond-plugin-image-exif-orientation.min.js') }}"></script>
<script src="{{ asset('assets/libs/filepond-plugin-file-encode/filepond-plugin-file-encode.min.js') }}"></script>
    <script type="text/javascript" language="javascript">
        function showDiv(select){
            if(select.value==2){
                document.getElementById('hidden_div').style.display = "block";
                $("#company").rules("add", {
                    required: true,
                    messages: {
                        required: "Please select at least one company.",
                    },
                });
            } else{
                document.getElementById('hidden_div').style.display = "none";
                $("#company").rules("remove", "required");
            }
        }
        $(document).ready(function () {

            const startDatePicker = flatpickr("#start_date", {
                enableTime: false, // Set to true if you need a time picker
                dateFormat: "Y-m-d", // Customize the format (e.g., YYYY-MM-DD)
                minDate: "today",
                onChange: function(selectedDates, dateStr) {
                    if (selectedDates.length > 0) {
                        // Set minDate for endDatePicker to the next day after start date
                        const nextDay = new Date(selectedDates[0]);
                        nextDay.setDate(nextDay.getDate() + 1);
                        endDatePicker.set('minDate', nextDay);
                        endDatePicker.setDate(nextDay, true);
                        // Clear any previously selected end date to enforce the new rule
                        //document.getElementById("end_date").value = "";
                    }
                    // Set the minimum date for the End Date picker
                    //endDatePicker.set('minDate', dateStr);
                    //document.getElementById("end_date").value = "";
                },
                defaultDate:"{{ \Carbon\Carbon::parse($start_date)->format('Y-m-d') }}"
            });

            const tomorrow = new Date();
             tomorrow.setDate(tomorrow.getDate() + 1);

            const endDatePicker = flatpickr("#end_date", {
                enableTime: false, // Set to true if you need a time picker
                dateFormat: "Y-m-d", // Customize the format (e.g., YYYY-MM-DD)
                minDate: tomorrow, // Set tomorrow as the minimum selectable date
                defaultDate: tomorrow ,
                defaultDate:"{{ \Carbon\Carbon::parse($end_date)->format('Y-m-d') }}"
            });

            $("#challengeForm").validate({
                rules: {
                    name: {
                        required: true,
                        minlength: 3,
                    },
                    challenge_type :{
                        required:true
                    },
                    'company[]':{
                        required: true,
                        minlength: 1,
                    },
                    target_type: {
                        required: true,
                    },
                    target_value:{
                        required:true
                    },
                    start_date: {
                        required: true,
                        date: true
                    },

                    end_date: {
                        required: true,
                        date: true,
                        greaterThan: "#start_date"
                    },
                    status: {
                        required: true,
                    }
                },
                messages: {
                    name: {
                        required:"Challenge Name is required."
                    },
                    challenge_type: {
                        required:"Challenge Type is required."
                    },
                    'company[]': {
                        required: "Please select atleast one company.",
                    },
                    target_type: {
                        required: "Target Type is required",
                    },
                    target_value: {
                        required: "Target is required.",
                    },
                    start_date: {
                        required: "Please select a start date.",
                        date: "Please enter a valid date."
                    },
                    end_date: {
                        required: "Please select an end date.",
                        date: "Please enter a valid date.",
                        greaterThan: "End date must be after or equal to the start date."
                    },
                    status: {
                        required: "Please select the status.",
                    },
                },
                onkeyup: function (element) {
                    $(element).valid(); // Real-time validation on keyup
                },
                onfocusout: function (element) {
                    $(element).valid(); // Validate when focus is lost
                },
                errorPlacement: function (error, element) {
                    if (element.is("select")) {
                        error.insertAfter(element.next('.select2')); 
                    } else {
                        error.insertAfter(element);
                    }
                },
                submitHandler: function (form) {
                    let formData = new FormData(form);

                    // AJAX submission
                    $.ajax({
                        url: form.action,
                        type: "POST",
                        data: formData,
                        processData: false,
                        contentType: false,
                        headers: {
                            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                        },
                        success: function (response) {
                            if(response.status == "success") {
                              

                                Swal.fire({
                                    iconHtml: `<img src="{{ asset('assets/images/success-circle.svg') }}" class="img-fluid">`,
                                // title: "Success!",
                                    text: response.message,
                                    confirmButtonText: "OK",
                                    customClass: {
                                        confirmButton: 'custom-ok-button-class w-sm' // Add your custom class here
                                    }
                                }).then(() => {
                                    window.location.href = "{{ route('admin.challenges') }}"; // Redirect to company list
                                });
                            } else {
                                Swal.fire({
                                    text: "Something went wrong. Please try later",
                                    iconHtml: `<img src="{{ asset('assets/images/error-circle.svg') }}" class="img-fluid">`,
                                    confirmButtonText: "OK", // Optional: Change the text of the button
                                    customClass: {
                                        confirmButton: 'custom-ok-button-class w-sm' // Add your custom class here
                                    }
                                });
                            }

                        },
                        error: function (xhr) {
                            if (xhr.status === 422) {
                                /*let errors = xhr.responseJSON.errors;

                                // Display validation errors from the server
                                $.each(errors, function (key, value) {
                                    let field = $(`[name="${key}"]`);
                                    field.addClass("error"); // Add error class to the field
                                    field.after(`<label class="error">${value[0]}</label>`); // Add error message
                                });*/

                                let errors = xhr.responseJSON.errors;
                                $.each(errors, function (key, errorMessages) {
                                    $("input[name=" + key + "], select[name=" + key + "]").after('<label class="error">' + errorMessages[0] + '</label>');
                                });
                            } else {
                                Swal.fire({
                                    text: "Something went wrong. Please try again later.",
                                    icon: "error",
                                    confirmButtonText: "OK"
                                });
                            }
                        }
                    });

                    return false; // Prevent default form submission
                },
                invalidHandler: function(event, validator) {
                    var firstInvalidField = $(validator.errorList[0].element);
                    
                    $('html, body').animate({
                        scrollTop: firstInvalidField.offset().top - 100 
                    }, 500); 
                }
            });
        });
    </script>

<script>
    var previewTemplate, dropzone;
    var dropzonePreviewNode = document.querySelector("#dropzone-preview-list");
    
    if (dropzonePreviewNode) {
      // Get the template for preview and remove the preview element from the DOM
      previewTemplate = dropzonePreviewNode.parentNode.innerHTML;
      dropzonePreviewNode.parentNode.removeChild(dropzonePreviewNode);
      
      // Initialize Dropzone
      var csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
      dropzone = new Dropzone(".dropzone", {
        url: "{{ route('admin.challenge.uploadImages') }}",  // Replace with your actual upload URL
        method: "post",
        previewTemplate: previewTemplate,
        previewsContainer: "#dropzone-preview",
        addRemoveLinks: true,  // Add links to remove files
        headers: {
          'X-CSRF-TOKEN': csrfToken // Add CSRF token to the request headers
        },
        success: function (file, response) {
          var currentFilePaths = document.getElementById("image_files").value.split(',');  // Get existing file paths
  
          // Check if there are no file paths, initialize an empty array
          if (currentFilePaths[0] === "") {
          currentFilePaths = [];
          }
  
          // Push the new image path to the array
          currentFilePaths.push(response.imagePath);
  
          // Update the hidden input field with the new list of file paths (comma separated)
          document.getElementById("image_files").value = currentFilePaths.join(',');
          var submitButton = document.getElementById('submitBtn');
          if (submitButton.disabled) {
              submitButton.disabled = false;  
          }
          
        },
        
        error: function (file, response) {
          console.log("Error during upload", response);
        }
      });
  
      @if(!empty($images) && $images)  
          let existingImages = @json($images); // The existing image paths from the database (as JSON array)
          
          existingImages = JSON.parse(existingImages);
          let currentFilePaths = document.getElementById("image_files").value.split(',');
          if (currentFilePaths[0] === "") {
            currentFilePaths = [];
          }
          existingImages.forEach(function(image) {
              currentFilePaths.push(image);
              // Create a mock file object to simulate the preview
              var mockFile = { 
                  name: image, 
                  size: 12345,  // Arbitrary size, can be any value
                  accepted: true
              };
              
              // Add the mock file to the Dropzone instance
              dropzone.emit("addedfile", mockFile); // Adds the file to the Dropzone preview container
              dropzone.emit("complete", mockFile); // Complete the file process (show file)
              
              // Optionally, set the image source for the preview if the file already exists on the server
              mockFile.previewElement.querySelector('img').src = "{{ asset('storage/company/chellanges') }}/" + image; 
          });
          document.getElementById("image_files").value = currentFilePaths.join(',');
      @endif
      dropzone.on("removedfile", function(file) {
          // Get the current list of file paths
          let currentFilePaths = document.getElementById("image_files").value.split(',');
  
          // Remove the file's name from the current list
          currentFilePaths = currentFilePaths.filter(function(path) {
              return path !== file.name;
          });
  
          // Update the hidden input field with the new list of file paths
          document.getElementById("image_files").value = currentFilePaths.join(',');
      });
    }
  </script>
@endsection