@extends('layouts.master') @section('title') hotspot settings @endsection
@section('css')
<style>
   .file-upload-button {
   display: inline-block;
   padding: 6px 12px;
   background-color: rgba(41,156,219,.1);
   border: none;
   border-radius: 0px;
   color: #299cdb;
   cursor: pointer;
   transition: background-color 0.3s ease;
   text-decoration: none;
   font-weight:400;
   line-height: 1.5;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   }
   .file-upload-button:hover {
   background-color: #6cb5f9;
   color: #ffffff;
   }
   .file-upload-button:active {
   background-color: #004085;
   }
   .file-upload-button input[type="file"] {
   display: none;
   }
</style>
<link rel="stylesheet" href="{{ URL::asset('/assets/css/config.css') }}" />
@endsection
@section('content') 
<div class="page-title-box d-sm-flex align-items-center justify-content-between">
   <h4 class="mb-sm-0 font-size-18">Settings</h4>
   <div class="page-title-right">
      <ol class="breadcrumb m-0">
         <li class="breadcrumb-item"><a href="{{ route('hotspot.index') }}">Hotspot</a></li>
         <li class="breadcrumb-item active"><a href="{{ route('hotspot.settings') }}">Settings</a></li>
      </ol>
   </div>
</div>
@if (session('status'))
<div class="alert alert-success alert-dismissible alert-label-icon label-arrow fade show" role="alert">
   <i class="ri-check-double-line label-icon"></i><strong>Success</strong> - {{session('status')}}
   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif @if (session('error'))
<div class="alert alert-danger alert-dismissible alert-label-icon label-arrow fade show mb-xl-0" role="alert">
   <i class="ri-error-warning-line label-icon"></i><strong>Failed</strong>
   - {{session('error')}}
   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<br />
@endif
<div class="d-flex align-items-center mb-3">
   <div class="flex-grow-1">
   </div>
   <div class="flexshrink-0"> <a href="{{ route('hotspot.generateMikrotikFiles') }}" class="btn btn-info btn-label waves-effect waves-light btn-sm flex-grow-1 flex-md-grow-0">
      <i class="ri-download-2-line label-icon align-middle fs-16 me-2"></i>
      <span class="d-none d-sm-inline">Download Template</span>
      <span class="d-inline d-sm-none">Download Template</span></a>
   </div>
</div>
<div class="settings-container mb-4">
<!-- Sidebar -->
<div class="settings-sidebar">
   <ul class="nav flex-column config-nav">
      <li class="nav-item">
         <a class="nav-link active" href="#general-settings" data-bs-toggle="tab">
         <i class="ri-information-line me-2"></i> General
         </a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#preferences-settings" data-bs-toggle="tab">
         <i class="ri-settings-2-line me-2"></i> Preferences
         </a>
      </li>
      <li class="nav-item">
         <a class="nav-link" href="#banner-settings" data-bs-toggle="tab">
         <i class="ri-image-edit-line me-2"></i> Banner
         </a>
      </li>
   </ul>
</div>
<!-- Content -->
<div class="settings-content">
   <form class="form-margin" action="{{ route('settings.general_save') }}" method="POST" enctype="multipart/form-data">
      @csrf
      <div class="tab-content">
         <!-- General Settings -->
         <div class="tab-pane fade show active" id="general-settings">
            <div class="settings-card">
               <div class="settings-card-header">
                  <h4><i class="ri-information-line me-2 text-warning"></i> General</h4>
                  <p class="text-muted">General information about your hotspot</p>
               </div>
               <div class="settings-card-body">
                  <div class="mb-3">
                     <label class="form-label" for="hotspot-name">Hotspot name</label>
                     <input type="text" name="hotspotName" value="{{ setting('hotspotName') }}" class="form-control" id="hotspot-name" placeholder="Enter hotspot name">
                  </div>
                  <div class="mb-3">
                     <label for="hotspotContactLink" class="form-label">Contact us Link</label>
                     <input type="url" name="hotspotContactLink" value="{{ setting('hotspotContactLink') }}" class="form-control" id="hotspotContactLink" placeholder="Enter contact link">
                  </div>
                  <div class="mb-3">
                     <label for="editor" class="form-label">Hotspot Info</label>
                     <textarea class="form-control" name="hotspot_info" id="editor" rows="4" placeholder="Give details how to get vouchers">{{ setting('hotspot_info') }}</textarea>
                  </div>
               </div>
            </div>
         </div>
         <!-- Preferences Settings -->
         <div class="tab-pane fade" id="preferences-settings">
            <div class="settings-card">
               <div class="settings-card-header">
                  <h4><i class="ri-settings-2-line me-2 text-info"></i> Preferences</h4>
                  <p class="text-muted">Payment method and voucher generation rules</p>
               </div>
               <div class="settings-card-body">
                  <div class="mb-3">
                     <label for="payment-method">Payment Method</label>
                     <select name="hotspotPaymentMethod" class="form-select" id="payment-method">
                     <option value="mpesa" {{ setting('hotspotPaymentMethod') == 'mpesa' ? 'selected' : '' }}>M-Pesa Paybill</option>
                     <option value="kopokopo" {{ setting('hotspotPaymentMethod') == 'kopokopo' ? 'selected' : '' }}>Kopokopo</option>
                     </select>
                  </div>
                  <div class="mb-3">
                     <label for="voucher-expiration">Voucher Expiration</label>
                     <select name="voucherExpiration" class="form-select" id="voucher-expiration">
                     <option value="creation" {{ setting('voucherExpiration') == 'creation' ? 'selected' : '' }}>Expire after creation</option>
                     <option value="login" {{ setting('voucherExpiration') == 'login' ? 'selected' : '' }}>Expire after login</option>
                     </select>
                  </div>
                  <div class="mb-3">
                     <label for="voucher-type">Voucher Code Type</label>
                     <select name="voucherType" class="form-select" id="voucher-type">
                     <option value="mixed" {{ setting('voucherType') == 'mixed' ? 'selected' : '' }}>Mixed</option>
                     <option value="numeric" {{ setting('voucherType') == 'numeric' ? 'selected' : '' }}>Numeric</option>
                     <option value="words" {{ setting('voucherType') == 'words' ? 'selected' : '' }}>Words</option>
                     </select>
                  </div>
                  <div class="mb-0">
                     <label for="voucher-length">Number of characters</label>
                     <input type="number" name="voucherLength" value="{{ setting('voucherLength') }}" id="voucher-length" min="1" class="form-control">
                  </div>
               </div>
            </div>
         </div>
         <!-- Banner Settings -->
         <div class="tab-pane fade" id="banner-settings">
            <div class="settings-card">
               <div class="settings-card-header">
                  <h4><i class="ri-image-edit-line me-2 text-success"></i> Banner</h4>
                  <p class="text-muted">Customize the appearance of your hotspot landing page</p>
               </div>
               <div class="settings-card-body">
                  <div class="row g-3 align-items-stretch">
                     <!-- Changed to align-items-stretch -->
                     <!-- Upload Dropzone -->
                     <div class="col-12 col-md-6 d-flex">
                        <!-- Added d-flex -->
                        <div class="dropzone border rounded bg-light bg-opacity-10 p-4 text-center w-100 h-100" 
                           id="bannerDropzone"
                           style="cursor: pointer; border-style: dashed !important;">
                           <div class="dz-message d-flex flex-column align-items-center py-4">
                              <!-- Added flex classes -->
                              <i class="ri-upload-cloud-2-line display-4 text-muted mb-2"></i>
                              <h5 class="text-muted">Click here to select or <br> Drag & drop banner image here<br></h5>
                              <!-- <span class="text-muted text-sm">or click to browse files</span>
                                 <div class="mt-2">
                                    <small class="text-muted">Recommended: 800×450px (JPG, PNG)</small>
                                 </div> -->
                           </div>
                           <input type="file" name="hotspot_cover" id="HotspotCover" accept="image/*" class="d-none">
                        </div>
                     </div>
                     <!-- Preview -->
                     <div class="col-12 col-md-6 d-flex">
                        <!-- Added d-flex -->
                        <div class="preview-container border rounded p-2 bg-light bg-opacity-10 text-center w-100 h-100">
                           <!-- <h6 class="text-muted mb-3">Current Banner</h6> -->
                           <div class="d-flex flex-column justify-content-center h-100">
                              <!-- Wrapper for centering content -->
                              <img 
                                 id="preview-image" 
                                 src="{{ asset('images/' . setting('hotspot_cover')) }}" 
                                 alt="Banner Preview" 
                                 class="img-fluid rounded shadow-sm mx-auto"
                                 style="display: {{ setting('hotspot_cover') ? 'block' : 'none' }};">
                              <div id="no-banner" class="{{ setting('hotspot_cover') ? 'd-none' : '' }}">
                                 <i class="ri-image-line display-5 text-muted"></i>
                                 <p class="text-muted mt-2 mb-0">No banner uploaded</p>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="form-actions text-end mt-3">
         <button type="submit" class="btn btn-primary">
         <i class="ri-save-line me-1"></i> Save Settings
         </button>
      </div>
   </form>
</div>
</div
<!-- Modal for errors -->
<div class="modal fade" id="error-modal" tabindex="-1" role="dialog" aria-labelledby="error-modal-title" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="error-modal-title">Error</h5>
         </div>
         <div class="modal-body">
            <p class="text-danger" id="error-modal-message"></p>
         </div>
         <div class="modal-footer">
            <button class="btn btn-link link-success fw-medium text-decoration-none" data-bs-dismiss="modal"><i class="ri-close-line me-1 align-middle"></i>
            Close</button>
         </div>
      </div>
   </div>
</div>
@php
$latitude = setting('latitude') ?? 0;
$longitude = setting('longitude') ?? 0;
@endphp
@endsection
@section('script')
<script src="{{ URL::asset('/assets/js/jquery-3.6.1.js')}}"></script>
<script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/36.0.1/classic/ckeditor.js"></script>
<script src="https://unpkg.com/compressorjs@1.1.0/dist/compressor.min.js"></script>
<script>
   ClassicEditor
   .create(document.querySelector('#editor'), {
      removePlugins: ['CKFinderUploadAdapter', 'CKFinder', 'EasyImage', 'Image', 'ImageCaption', 'ImageStyle', 'ImageToolbar', 'ImageUpload', 'MediaEmbed'],
      toolbar: {
         items: [
            // list the toolbar items you want to keep here
            'heading', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote'
         ]
      }
   })
   .catch( error => {
       console.error( error );
   } );
   
</script>
<script>
   $(document).ready(function() {
     $('#HotspotCover').change(function() {
       var fileInput = $('#HotspotCover')[0];
       var file = fileInput.files[0];
   
       // Check if file is an image
       if (!file.type.startsWith('image/')) {
         $('#error-modal-message').text('Please select an image file');
         $('#error-modal').modal('show');
         return;
       }
   
       // Check if image has minimum dimensions of 800x400
       var img = new Image();
       img.onload = function() {
         if (this.width < 800 || this.height < 450) {
           $('#error-modal-message').text('Please select an image with minimum dimensions of 800x450');
           $('#error-modal').modal('show');
           return;
         }
   
         // Create a canvas element and draw the image on it
         var canvas = document.createElement('canvas');
         canvas.width = 800;
         canvas.height = 450;
         var ctx = canvas.getContext('2d');
         ctx.drawImage(img, 0, 0, 800, 450);
   
         // Compress canvas using Compressor.js
         canvas.toBlob(function(blob) {
           new Compressor(blob, {
             quality: 0.6,
             success: function(result) {
               // Convert compressed Blob to File object and append to FormData
               var compressedFile = new File([result], file.name, { type: result.type });
               var formData = new FormData();
               formData.append('hotspot_cover', compressedFile);
   
               // Send FormData using AJAX
               $.ajax({
                 url: "{{ route('hotspotcover.upload') }}",
                 type: 'POST',
                 headers: {
                   'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                 },
                 data: formData,
                 processData: false,
                 contentType: false,
                 success: function (response) {
                   $('#preview-image').attr('src', response.url);
                 },
                 error: function (xhr) {
                   $('#error-modal-message').text(xhr.responseText);
                   $('#error-modal').modal('show');
                 }
               });
             },
             error: function(err) {
               $('#error-modal-message').text(err.message);
               $('#error-modal').modal('show');
             }
           });
         }, file.type);
       };
   
       img.src = URL.createObjectURL(file);
     });
   });
</script>
<script>
   document.addEventListener('DOMContentLoaded', function() {
     const dropzone = document.getElementById('bannerDropzone');
     const fileInput = document.getElementById('HotspotCover');
     const preview = document.getElementById('preview-image');
     const noBanner = document.getElementById('no-banner');
     
     // Click handler for dropzone
     dropzone.addEventListener('click', () => fileInput.click());
     
     // Handle file selection
     fileInput.addEventListener('change', function(e) {
       if (this.files && this.files[0]) {
         const reader = new FileReader();
         reader.onload = function(event) {
           preview.src = event.target.result;
           preview.style.display = 'inline-block';
           noBanner.classList.add('d-none');
         }
         reader.readAsDataURL(this.files[0]);
       }
     });
     
     // Drag and drop functionality
     ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
       dropzone.addEventListener(eventName, preventDefaults, false);
     });
     
     function preventDefaults(e) {
       e.preventDefault();
       e.stopPropagation();
     }
     
     ['dragenter', 'dragover'].forEach(eventName => {
       dropzone.addEventListener(eventName, highlight, false);
     });
     
     ['dragleave', 'drop'].forEach(eventName => {
       dropzone.addEventListener(eventName, unhighlight, false);
     });
     
     function highlight() {
       dropzone.classList.add('border-primary');
       dropzone.classList.add('bg-opacity-25');
     }
     
     function unhighlight() {
       dropzone.classList.remove('border-primary');
       dropzone.classList.remove('bg-opacity-25');
     }
     
     // Handle dropped files
     dropzone.addEventListener('drop', function(e) {
       const dt = e.dataTransfer;
       const files = dt.files;
       fileInput.files = files;
       
       if (files.length) {
         const event = new Event('change');
         fileInput.dispatchEvent(event);
       }
     });
   });
</script>
<script type="text/javascript">
   $(document).ready(function() {
       var voucherType = $('#voucher-type').val();
       if (voucherType === 'mixed' || voucherType === 'numeric') {
           $('#custom-length').show();
       } else {
           $('#custom-length').hide();
       }
   
       $('#voucher-type').change(function() {
           if ($(this).val() === 'mixed' || $(this).val() === 'numeric') {
               $('#custom-length').slideDown();
           } else {
               $('#custom-length').slideUp();
           }
       });
   });
</script>
<script>
   // Tab persistence
   document.addEventListener('DOMContentLoaded', function() {
   const tabs = document.querySelectorAll('.nav-link[data-bs-toggle="tab"]');
   tabs.forEach(tab => {
    tab.addEventListener('click', function() {
      localStorage.setItem('lastSettingsTab', this.getAttribute('href'));
    });
   });
   
   const lastTab = localStorage.getItem('lastSettingsTab');
   if (lastTab) {
    const tab = new bootstrap.Tab(document.querySelector(`.nav-link[href="${lastTab}"]`));
    tab.show();
   }
   });
</script>
@endsection