@extends('layouts.master') @section('title') general settings @endsection
@section('css')
<!-- Leaflet CSS and JavaScript -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
<link rel="stylesheet" href="{{ URL::asset('/assets/css/config.css') }}" />
<style>
   .leaflet-control-geocoder-form input {
   color: #495057 !important;
   }
</style>
@endsection
@section('content') 
<div class="row">
   <div class="col-lg-12">
      <div class="card mt-n4 mx-n4">
         <div class="bg-soft-light">
            @include('settings.general.header')
            <!-- end card body -->
         </div>
      </div>
      <!-- end card -->
   </div>
   <!-- end col -->
</div>
<!-- Status Messages -->
<div class="status-messages">
   @if (session('status'))
   <div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
      <i class="ri-checkbox-circle-line me-2"></i>
      {{ 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 fade show mb-4" role="alert">
      <i class="ri-error-warning-line me-2"></i>
      {{ session('error') }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
   </div>
   @endif
</div>
<div class="settings-container mb-4">
   <!-- Settings Sidebar -->
   <div class="settings-sidebar">
      <!-- <div class="sidebar-header">
         <h5><i class="ri-settings-3-line me-2"></i> General</h5>
         </div> -->
      <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-building-2-line me-2"></i> General
            </a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#logo-settings" data-bs-toggle="tab">
            <i class="ri-image-line me-2"></i> Branding
            </a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#location-settings" data-bs-toggle="tab">
            <i class="ri-map-pin-2-line me-2"></i> Location
            </a>
         </li>
      </ul>
   </div>
   <!-- Settings Content -->
   <div class="settings-content">
      <form action="{{ route('settings.general_save') }}" method="POST" enctype="multipart/form-data">
         @csrf
         <div class="tab-content">
            <!-- General Settings Tab -->
            <div class="tab-pane fade show active" id="general-settings">
               <div class="settings-card">
                  <div class="settings-card-header">
                     <h4><i class="ri-building-2-line me-2"></i> Company Information</h4>
                     <p class="text-muted">Update your basic company details</p>
                  </div>
                  <div class="settings-card-body">
                     <div class="mb-3">
                        <label for="companyname" class="form-label">Company Name</label>
                        <input type="text" name="company" value="{{ Setting::get('company') }}" 
                           class="form-control" id="companyname" 
                           placeholder="Enter company name" required>
                     </div>
                     <div class="row g-3">
                        <div class="col-md-6">
                           <label for="companyphone" class="form-label">Phone Number</label>
                           <div class="input-group">
                              <span class="input-group-text"><i class="ri-phone-line"></i></span>
                              <input type="text" name="company_phone" value="{{ Setting::get('company_phone') }}" 
                                 class="form-control" id="companyphone" placeholder="+1 (123) 456-7890">
                           </div>
                        </div>
                        <div class="col-md-6">
                           <label for="companyemail" class="form-label">Email Address</label>
                           <div class="input-group">
                              <span class="input-group-text"><i class="ri-mail-line"></i></span>
                              <input type="email" name="company_email" value="{{ Setting::get('company_email') }}" 
                                 class="form-control" id="companyemail" placeholder="contact@company.com" required>
                           </div>
                        </div>
                     </div>
                     <div class="mb-0 mt-3">
                        <label for="editor" class="form-label">About Company</label>
                        <textarea class="form-control" name="about" id="editor" 
                           rows="4" placeholder="Brief description about your company">{{ Setting::get('about') }}</textarea>
                        <div class="form-text">This will be displayed on your public pages</div>
                     </div>
                  </div>
               </div>
            </div>
            <!-- Logo Settings Tab -->
            <div class="tab-pane fade" id="logo-settings">
               <div class="settings-card">
                  <!-- <div class="settings-card-header">
                     <h4><i class="ri-image-line me-2"></i> Brand Identity</h4>
                     <p class="text-muted">Upload your company logo and branding assets</p>
                     </div> -->
                  <div class="settings-card-body">
                     <div class="logo-upload-area">
                        @if(!empty(setting('logo')) && file_exists(setting('logo')))
                        <div class="current-logo mb-4 text-center">
                           <p class="text-muted mb-2">Current Logo</p>
                           <img class="logo-preview img-fluid rounded" src="{{ asset(setting('logo')) }}" alt="Current logo">
                           <!-- <div class="mt-3">
                              <button type="button" class="btn btn-sm btn-outline-danger" id="remove-logo">
                                <i class="ri-delete-bin-line me-1"></i> Remove Logo
                              </button>
                              </div> -->
                        </div>
                        @endif
                        <div class="upload-box">
                           <label for="logo" class="form-label">Upload New Logo</label>
                           <div class="dropzone">
                              <input type="file" name="logo" class="form-control" id="logo" accept="image/*">
                              <div class="dropzone-message">
                                 <i class="ri-upload-cloud-2-line display-4 text-muted"></i>
                                 <p>Drag & drop your logo here or click to browse</p>
                                 <small class="text-muted">Recommended size: 300x100px • Formats: JPG, PNG, SVG</small>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <!-- Location Settings Tab -->
            <div class="tab-pane fade" id="location-settings">
               <div class="settings-card">
                  <div class="settings-card-header">
                     <h4><i class="ri-map-pin-2-line me-2"></i> Business Location</h4>
                     <p class="text-muted">Set your physical location for maps and directions</p>
                  </div>
                  <div class="settings-card-body">
                     <div class="mb-4">
                        <label for="location" class="form-label">Search Location</label>
                        <div class="input-group">
                           <input type="text" name="city" value="{{ Setting::get('city') }}" 
                              class="form-control" id="location" placeholder="Enter your business address">
                           <!-- <button class="btn btn-primary" type="button" id="find-location">
                              <i class="ri-search-line me-1"></i> Search
                              </button> -->
                        </div>
                     </div>
                     <div class="row g-3 mb-4">
                        <div class="col-md-6">
                           <label for="location-lat" class="form-label">Latitude</label>
                           <input type="text" name="latitude" value="{{ Setting::get('latitude') }}" 
                              class="form-control" id="location-lat" readonly>
                        </div>
                        <div class="col-md-6">
                           <label for="location-lng" class="form-label">Longitude</label>
                           <input type="text" name="longitude" value="{{ Setting::get('longitude') }}" 
                              class="form-control" id="location-lng" readonly>
                        </div>
                     </div>
                     <div class="map-container">
                        <div id="map" style="height: 300px; border-radius: 8px;"></div>
                        <div class="map-instructions mt-2 text-muted small">
                           <i class="ri-information-line me-1"></i> Click on the map to set your exact location
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
         <!-- Form Actions -->
         <div class="form-actions">
            <!-- <button type="reset" class="btn btn-light">
               <i class="ri-eraser-line me-1"></i> Reset
               </button> -->
            <button type="submit" class="btn btn-primary">
            <i class="ri-save-line me-1"></i> Save Changes
            </button>
         </div>
         <!-- Hidden input for logo removal -->
         <input type="hidden" name="remove_logo" id="remove-logo-flag" value="0">
      </form>
   </div>
</div>
<script>
   // Logo removal functionality
   document.getElementById('remove-logo')?.addEventListener('click', function() {
     document.getElementById('remove-logo-flag').value = "1";
     this.closest('.current-logo').remove();
   });
   
   // Initialize file input preview
   document.getElementById('logo')?.addEventListener('change', function(e) {
     const file = e.target.files[0];
     if (file) {
       const reader = new FileReader();
       reader.onload = function(event) {
         const preview = document.querySelector('.logo-preview') || 
                        document.createElement('img');
         preview.src = event.target.result;
         preview.classList.add('logo-preview', 'img-fluid', 'rounded');
         
         const currentLogo = document.querySelector('.current-logo');
         if (!currentLogo) {
           const logoContainer = document.createElement('div');
           logoContainer.className = 'current-logo mb-4 text-center';
           logoContainer.innerHTML = `
             <p class="text-muted mb-2">New Logo Preview</p>
             <div class="mt-3">
               <button type="button" class="btn btn-sm btn-outline-danger" id="remove-logo">
                 <i class="ri-delete-bin-line me-1"></i> Remove Logo
               </button>
             </div>
           `;
           logoContainer.prepend(preview);
           document.querySelector('.logo-upload-area').prepend(logoContainer);
           
           // Rebind event listener for the new remove button
           document.getElementById('remove-logo').addEventListener('click', function() {
             document.getElementById('remove-logo-flag').value = "1";
             this.closest('.current-logo').remove();
           });
         } else {
           currentLogo.querySelector('img').src = event.target.result;
         }
       };
       reader.readAsDataURL(file);
     }
   });
   
   // 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>
@php
$latitude = setting('latitude') ?? 0;
$longitude = setting('longitude') ?? 0;
@endphp
@endsection
@section('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>
@if(setting('map') == 'google')
<!-- Google Maps JavaScript -->
<script src="https://maps.googleapis.com/maps/api/js?key={{ setting('google_map_api_key') }}&libraries=places"></script>
<script src="{{ asset('assets/js/google_map.js') }}" data-latitude="{{ $latitude }}" data-longitude="{{ $longitude }}"></script>
@else
<!-- Leaflet Control Geocoder -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<!-- Leaflet Draggable JavaScript -->
<script src="{{ asset('assets/js/openStreet.js') }}" data-latitude="{{ $latitude }}" data-longitude="{{ $longitude }}"></script>
@endif
<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>
@endsection