@extends('back_office.layouts.app')

@section('content')
    <div>
        <div class="container-fluid">
            <div class="p-4 bg-white row">
                <h5>Create Breakdown Service Provider</h5>

                {{-- Display general error message --}}
                @if (session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('error') }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endif

                {{-- Display validation errors --}}
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form class="form-horizontal" action="{{ route('breakdown-service-providers.store') }}"
                    enctype="multipart/form-data" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Role</label>
                                <input type="text" value="Breakdown Service Provider" class="form-control" disabled>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Name <span class="text-danger">*</span></label>
                                <input type="text" placeholder="Enter name" name="name" id="name"
                                    class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}"
                                    required />
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label id="mail">Email</label>
                                <input type="email" placeholder="Enter email" name="email" id="email"
                                    class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}" />
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Phone Number <span class="text-danger">*</span></label>
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text bg-info text-white">+974</span>
                                    </div>
                                    <input type="text" placeholder="Enter phone number" name="phone_number"
                                        id="phone_number" class="form-control @error('phone_number') is-invalid @enderror"
                                        value="{{ old('phone_number') }}" required />
                                    @error('phone_number')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Password <span class="text-danger">*</span></label>
                                <div class="input-group mb-3">
                                    <input type="password" placeholder="Enter password" name="password" id="password"
                                        class="form-control @error('password') is-invalid @enderror" required />
                                    <div class="input-group-append">
                                        <span class="input-group-text bg-info" id="basic-addon1">
                                            <a onclick="viewPassword()" style="cursor: pointer;">
                                                <i id="open" class="fas fa-eye mt-1 mb-1 mr-1 text-white"></i>
                                                <i id="close" class="fas fa-eye-slash mt-1 mb-1 mr-1 text-white"
                                                    hidden></i>
                                            </a>
                                        </span>
                                    </div>
                                </div>
                                @error('password')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Title <span class="text-danger">*</span></label>
                                <input type="text" placeholder="Enter title" name="title" id="title"
                                    class="form-control @error('title') is-invalid @enderror" value="{{ old('title') }}"
                                    required />
                                @error('title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Description <span class="text-danger">*</span></label>
                                <textarea placeholder="Enter description" name="description" id="description"
                                    class="form-control @error('description') is-invalid @enderror" rows="4" required>{{ old('description') }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Service Address</label>
                                <input type="text" placeholder="Enter service address" name="address" id="address"
                                    class="form-control @error('address') is-invalid @enderror"
                                    value="{{ old('address') }}" />
                                <small class="form-text text-muted">This will be auto-filled when you select a location on
                                    the map</small>
                                @error('address')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        {{-- Location Selection Section --}}
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Service Location <span class="text-danger">*</span></label>
                                <div class="card">
                                    <div class="card-header">
                                        <h6 class="mb-0">Choose Location Method</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row mb-3">
                                            <div class="col-md-4">
                                                <button type="button" class="btn btn-primary btn-sm btn-block"
                                                    onclick="getCurrentLocation()">
                                                    <i class="fas fa-map-marker-alt"></i> Use Current Location
                                                </button>
                                            </div>
                                            <div class="col-md-4">
                                                <button type="button" class="btn btn-info btn-sm btn-block"
                                                    onclick="enableMapSelection()">
                                                    <i class="fas fa-map"></i> Select on Map
                                                </button>
                                            </div>
                                            <div class="col-md-4">
                                                <button type="button" class="btn btn-success btn-sm btn-block"
                                                    onclick="toggleAddressSearch()">
                                                    <i class="fas fa-search"></i> Search Address
                                                </button>
                                            </div>
                                        </div>

                                        {{-- Address Search Section --}}
                                        <div class="row mb-3" id="searchSection" style="display: none;">
                                            <div class="col-md-8">
                                                <input type="text" id="addressSearch" class="form-control"
                                                    placeholder="Enter address to search in Qatar...">
                                            </div>
                                            <div class="col-md-4">
                                                <button type="button" class="btn btn-secondary btn-block"
                                                    onclick="performAddressSearch()">
                                                    <i class="fas fa-search"></i> Search
                                                </button>
                                            </div>
                                        </div>

                                        {{-- Map Container --}}
                                        <div id="map"
                                            style="height: 400px; width: 100%; border: 1px solid #ddd; border-radius: 5px;">
                                        </div>

                                        {{-- Location Info Display --}}
                                        <div class="mt-3 p-3 bg-light border rounded">
                                            <h6>Selected Location Information:</h6>
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <small><strong>Latitude:</strong></small><br>
                                                    <span id="displayLat" class="text-muted">Not selected</span>
                                                </div>
                                                <div class="col-md-4">
                                                    <small><strong>Longitude:</strong></small><br>
                                                    <span id="displayLng" class="text-muted">Not selected</span>
                                                </div>
                                                <div class="col-md-4">
                                                    <small><strong>Coverage Radius:</strong></small><br>
                                                    <span id="displayRadius" class="text-muted">10 km</span>
                                                </div>
                                            </div>
                                            <div class="row mt-2">
                                                <div class="col-md-12">
                                                    <small><strong>Full Address:</strong></small><br>
                                                    <span id="displayAddress" class="text-muted">Not selected</span>
                                                </div>
                                            </div>
                                        </div>

                                        {{-- Hidden Location Fields --}}
                                        <input type="hidden" name="latitude" id="latitude"
                                            value="{{ old('latitude') }}" required>
                                        <input type="hidden" name="longitude" id="longitude"
                                            value="{{ old('longitude') }}" required>

                                        @error('latitude')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                        @error('longitude')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Coverage Radius --}}
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Coverage Radius (km) <span class="text-danger">*</span></label>
                                <input type="number" name="coverage_radius" id="coverage_radius"
                                    class="form-control @error('coverage_radius') is-invalid @enderror"
                                    value="{{ old('coverage_radius', 10) }}" min="1" max="100"
                                    step="0.5" required onchange="updateCoverageRadius()" />
                                <small class="form-text text-muted">Service coverage area in kilometers (1-100 km)</small>
                                @error('coverage_radius')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Upload Logo</label>
                                <input type="file" name="logo" id="logo" accept="image/*"
                                    class="form-control @error('logo') is-invalid @enderror">
                                <small class="form-text text-muted">Accepted formats: JPG, JPEG, PNG, GIF. Max size:
                                    2MB</small>
                                @error('logo')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        {{-- Operating Hours Section --}}
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Operating Hours</label>
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" name="is_24_hours" id="is_24_hours"
                                        value="1" {{ old('is_24_hours') ? 'checked' : '' }}
                                        onchange="toggleOperatingHours()">
                                    <label class="form-check-label" for="is_24_hours">
                                        Open 24 Hours
                                    </label>
                                </div>

                                <div id="operating_hours_section"
                                    style="{{ old('is_24_hours') ? 'display: none;' : '' }}">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Opening Time</label>
                                                <input type="time" name="opening_time" id="opening_time"
                                                    class="form-control @error('opening_time') is-invalid @enderror"
                                                    value="{{ old('opening_time') }}" />
                                                @error('opening_time')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label>Closing Time</label>
                                                <input type="time" name="closing_time" id="closing_time"
                                                    class="form-control @error('closing_time') is-invalid @enderror"
                                                    value="{{ old('closing_time') }}" />
                                                @error('closing_time')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Commission Type <span class="text-danger">*</span></label>
                                <select name="commission_type" id="commission_type"
                                    class="form-control @error('commission_type') is-invalid @enderror" required>
                                    <option value="">Select Commission Type</option>
                                    <option value="fixed" {{ old('commission_type') == 'fixed' ? 'selected' : '' }}>Fixed
                                        Amount</option>
                                    <option value="percentage"
                                        {{ old('commission_type') == 'percentage' ? 'selected' : '' }}>Percentage</option>
                                </select>
                                @error('commission_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Commission Value <span class="text-danger">*</span></label>
                                <input type="number" step="0.01" min="0" placeholder="Enter commission value"
                                    name="commission_value" id="commission_value"
                                    class="form-control @error('commission_value') is-invalid @enderror"
                                    value="{{ old('commission_value') }}" required />
                                <small class="form-text text-muted">For percentage, enter value between 0-100</small>
                                @error('commission_value')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Active Status <span class="text-danger">*</span></label>
                                <select name="is_active" id="is_active"
                                    class="form-control @error('is_active') is-invalid @enderror" required>
                                    <option value="">Select Status</option>
                                    <option value="1" {{ old('is_active') == '1' ? 'selected' : '' }}>Active</option>
                                    <option value="0" {{ old('is_active') == '0' ? 'selected' : '' }}>Inactive
                                    </option>
                                </select>
                                @error('is_active')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <div class="col-lg-12 text-right">
                                    <button type="button" class="btn btn-secondary mr-2"
                                        onclick="history.back()">Cancel</button>
                                    <button type="submit" class="btn btn-info">Save Breakdown Service Provider</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <style>
        .leaflet-container {
            font-family: inherit;
        }

        #map {
            z-index: 1;
        }

        .map-instruction {
            position: absolute;
            top: 10px;
            left: 10px;
            background: white;
            padding: 8px 12px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            font-size: 12px;
            display: none;
        }

        .btn-block {
            display: block;
            width: 100%;
        }

        .btn-sm {
            padding: 0.375rem 0.75rem;
            font-size: 0.875rem;
        }
    </style>
@endpush

@push('scripts')
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script type="text/javascript">
        // Global variables
        let map;
        let marker;
        let coverageCircle;
        let mapClickEnabled = false;

        // Default location (Doha, Qatar)
        const defaultLat = 25.2854;
        const defaultLng = 51.5310;

        // Initialize map
        function initMap() {
            map = L.map('map').setView([defaultLat, defaultLng], 11);

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '© OpenStreetMap contributors'
            }).addTo(map);

            // Add click event to map
            map.on('click', function(e) {
                if (mapClickEnabled) {
                    setLocation(e.latlng.lat, e.latlng.lng);
                    showNotification('Location selected successfully!', 'success');
                }
            });

            // Load existing location if available (for edit mode)
            const existingLat = document.getElementById('latitude').value;
            const existingLng = document.getElementById('longitude').value;
            if (existingLat && existingLng) {
                setLocation(parseFloat(existingLat), parseFloat(existingLng));
                map.setView([existingLat, existingLng], 15);
            }
        }

        // Set location and update display
        function setLocation(lat, lng) {
            // Remove existing marker and circle
            if (marker) map.removeLayer(marker);
            if (coverageCircle) map.removeLayer(coverageCircle);

            // Add new marker
            marker = L.marker([lat, lng]).addTo(map);

            // Add coverage circle
            const radius = document.getElementById('coverage_radius').value * 1000; // Convert to meters
            coverageCircle = L.circle([lat, lng], {
                radius: radius,
                color: '#007bff',
                fillColor: '#007bff',
                fillOpacity: 0.1,
                weight: 2
            }).addTo(map);

            // Update form fields
            document.getElementById('latitude').value = lat.toFixed(8);
            document.getElementById('longitude').value = lng.toFixed(8);
            document.getElementById('displayLat').textContent = lat.toFixed(6);
            document.getElementById('displayLng').textContent = lng.toFixed(6);

            // Reverse geocode to get address
            reverseGeocode(lat, lng);

            // Disable map click after selection
            mapClickEnabled = false;
            hideMapInstruction();
        }

        // Get current location
        function getCurrentLocation() {
            if (navigator.geolocation) {
                showNotification('Detecting your location...', 'info');
                navigator.geolocation.getCurrentPosition(function(position) {
                    const lat = position.coords.latitude;
                    const lng = position.coords.longitude;

                    map.setView([lat, lng], 15);
                    setLocation(lat, lng);

                    showNotification('Current location detected successfully!', 'success');
                }, function(error) {
                    let errorMessage = 'Unable to get current location.';
                    switch (error.code) {
                        case error.PERMISSION_DENIED:
                            errorMessage = 'Location access denied. Please allow location access and try again.';
                            break;
                        case error.POSITION_UNAVAILABLE:
                            errorMessage = 'Location information is unavailable.';
                            break;
                        case error.TIMEOUT:
                            errorMessage = 'Location request timed out.';
                            break;
                    }
                    showNotification(errorMessage, 'danger');
                }, {
                    enableHighAccuracy: true,
                    timeout: 10000,
                    maximumAge: 0
                });
            } else {
                showNotification('Geolocation is not supported by this browser.', 'danger');
            }
        }

        // Enable map selection
        function enableMapSelection() {
            mapClickEnabled = true;
            document.getElementById('searchSection').style.display = 'none';
            showMapInstruction();
            showNotification('Click on the map to select your service location', 'info');
        }

        // Toggle address search
        function toggleAddressSearch() {
            const searchSection = document.getElementById('searchSection');
            if (searchSection.style.display === 'none') {
                searchSection.style.display = 'flex';
                mapClickEnabled = false;
                hideMapInstruction();
                document.getElementById('addressSearch').focus();
            } else {
                searchSection.style.display = 'none';
            }
        }

        // Perform address search
        function performAddressSearch() {
            const address = document.getElementById('addressSearch').value.trim();
            if (!address) {
                showNotification('Please enter an address to search', 'warning');
                return;
            }

            showNotification('Searching for address...', 'info');

            // Use Nominatim API for geocoding
            const url =
                `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(address + ', Qatar')}&limit=5&countrycodes=qa`;

            fetch(url)
                .then(response => response.json())
                .then(data => {
                    if (data.length > 0) {
                        const result = data[0];
                        const lat = parseFloat(result.lat);
                        const lng = parseFloat(result.lon);

                        map.setView([lat, lng], 16);
                        setLocation(lat, lng);

                        showNotification('Address found and location set successfully!', 'success');
                        document.getElementById('searchSection').style.display = 'none';
                        document.getElementById('addressSearch').value = '';
                    } else {
                        showNotification(
                            'Address not found in Qatar. Please try a different search term or use map selection.',
                            'warning');
                    }
                })
                .catch(error => {
                    console.error('Geocoding error:', error);
                    showNotification('Error searching for address. Please try again or use map selection.', 'danger');
                });
        }

        // Reverse geocode to get address from coordinates
        function reverseGeocode(lat, lng) {
            const url = `https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}&addressdetails=1`;

            fetch(url)
                .then(response => response.json())
                .then(data => {
                    let address = 'Address not found';
                    if (data && data.display_name) {
                        address = data.display_name;
                        // If address field is empty, populate it
                        const addressField = document.getElementById('address');
                        if (!addressField.value.trim()) {
                            addressField.value = address;
                        }
                    }
                    document.getElementById('displayAddress').textContent = address;
                })
                .catch(error => {
                    console.error('Reverse geocoding error:', error);
                    document.getElementById('displayAddress').textContent = 'Address lookup failed';
                });
        }

        // Update coverage radius circle
        function updateCoverageRadius() {
            const lat = document.getElementById('latitude').value;
            const lng = document.getElementById('longitude').value;
            const radius = document.getElementById('coverage_radius').value;

            if (lat && lng && coverageCircle) {
                map.removeLayer(coverageCircle);
                coverageCircle = L.circle([lat, lng], {
                    radius: radius * 1000, // Convert to meters
                    color: '#007bff',
                    fillColor: '#007bff',
                    fillOpacity: 0.1,
                    weight: 2
                }).addTo(map);
            }

            document.getElementById('displayRadius').textContent = radius + ' km';
        }

        // Show/hide map instruction
        function showMapInstruction() {
            let instruction = document.querySelector('.map-instruction');
            if (!instruction) {
                instruction = document.createElement('div');
                instruction.className = 'map-instruction';
                instruction.innerHTML = '📍 Click anywhere on the map to set location';
                document.getElementById('map').appendChild(instruction);
            }
            instruction.style.display = 'block';
        }

        function hideMapInstruction() {
            const instruction = document.querySelector('.map-instruction');
            if (instruction) {
                instruction.style.display = 'none';
            }
        }

        // Utility function for notifications
        function showNotification(message, type) {
            // Remove existing notifications
            const existingAlerts = document.querySelectorAll('.notification-alert');
            existingAlerts.forEach(alert => alert.remove());

            const alertDiv = document.createElement('div');
            alertDiv.className = `alert alert-${type} alert-dismissible fade show notification-alert`;
            alertDiv.style.cssText = 'position: fixed; top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
            alertDiv.innerHTML = `
                ${message}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            `;

            document.body.appendChild(alertDiv);

            // Auto remove after 5 seconds
            setTimeout(() => {
                if (alertDiv.parentNode) {
                    alertDiv.remove();
                }
            }, 5000);
        }

        // Password visibility toggle
        function viewPassword() {
            var password = document.getElementById('password');
            var open = document.getElementById('open');
            var close = document.getElementById('close');

            if (password.type === 'password') {
                password.type = 'text';
                open.hidden = true;
                close.hidden = false;
            } else {
                password.type = 'password';
                open.hidden = false;
                close.hidden = true;
            }
        }

        // Toggle operating hours
        function toggleOperatingHours() {
            var checkbox = document.getElementById('is_24_hours');
            var operatingHoursSection = document.getElementById('operating_hours_section');
            var openingTime = document.getElementById('opening_time');
            var closingTime = document.getElementById('closing_time');

            if (checkbox.checked) {
                operatingHoursSection.style.display = 'none';
                openingTime.required = false;
                closingTime.required = false;
                openingTime.value = '';
                closingTime.value = '';
            } else {
                operatingHoursSection.style.display = 'block';
                openingTime.required = false;
                closingTime.required = false;
            }
        }

        // Form validation on submit
        document.addEventListener('DOMContentLoaded', function() {
            // Initialize map
            initMap();

            // Initialize operating hours visibility
            toggleOperatingHours();

            const form = document.querySelector('form');

            // Add Enter key handler for address search
            document.getElementById('addressSearch').addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    performAddressSearch();
                }
            });

            form.addEventListener('submit', function(e) {
                // Validate location selection
                const latitude = document.getElementById('latitude').value;
                const longitude = document.getElementById('longitude').value;

                if (!latitude || !longitude) {
                    e.preventDefault();
                    showNotification(
                        'Please select a service location using one of the location selection methods above.',
                        'danger');
                    document.getElementById('map').scrollIntoView({
                        behavior: 'smooth'
                    });
                    return false;
                }

                // Validate commission value based on type
                const commissionType = document.getElementById('commission_type').value;
                const commissionValue = parseFloat(document.getElementById('commission_value').value);

                if (commissionType === 'percentage' && commissionValue > 100) {
                    e.preventDefault();
                    showNotification('Percentage commission cannot exceed 100%.', 'danger');
                    return false;
                }

                // Validate operating hours if not 24 hours
                const is24Hours = document.getElementById('is_24_hours').checked;
                if (!is24Hours) {
                    const openingTime = document.getElementById('opening_time').value;
                    const closingTime = document.getElementById('closing_time').value;

                    if (openingTime && closingTime && openingTime >= closingTime) {
                        e.preventDefault();
                        showNotification('Opening time must be before closing time.', 'danger');
                        return false;
                    }
                }

                // Show loading state
                const submitBtn = form.querySelector('button[type="submit"]');
                const originalText = submitBtn.innerHTML;
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Saving...';
                submitBtn.disabled = true;

                // Re-enable button after 30 seconds (fallback)
                setTimeout(() => {
                    submitBtn.innerHTML = originalText;
                    submitBtn.disabled = false;
                }, 30000);
            });

            // Update coverage radius display when value changes
            document.getElementById('coverage_radius').addEventListener('input', function() {
                updateCoverageRadius();
            });
        });
    </script>
@endpush