@extends('layouts.admin')
@section('content')
<form method="POST" action="{{ route("admin.cctvs.update", $cctv->id) }}" enctype="multipart/form-data">
@method('PUT')
@csrf
<div class="row">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                {{ trans('global.edit') }} CCTV
            </div>
            <div class="card-body">
                <div class="form-group">
                    <label class="required" for="name">Pick a location</label>
                    <div id="map" style="height: 400px;"></div>
                </div>
                <div class="form-group">
                    <label class="required" for="name">Name</label>
                    <input class="form-control {{ $errors->has('name') ? 'is-invalid' : '' }}" type="text" name="name" id="name" value="{{ $cctv->name }}" required>
                    @if($errors->has('name'))
                        <div class="invalid-feedback">
                            {{ $errors->first('name') }}
                        </div>
                    @endif
                    <span class="help-block">{{ trans('cruds.cctv.fields.name_helper') }}</span>
                </div>
                <div class="form-group">
                    <label class="required" for="location">Location</label>
                    <input class="form-control {{ $errors->has('location') ? 'is-invalid' : '' }}" type="text" name="location" id="location" value="{{ $cctv->location }}" required>
                    @if($errors->has('location'))
                        <div class="invalid-feedback">
                            {{ $errors->first('location') }}
                        </div>
                    @endif
                    <span class="help-block">{{ trans('cruds.cctv.fields.location_helper') }}</span>
                </div>
                <div class="form-group">
                    <label class="required" for="lat">Latitude</label>
                    <input class="form-control {{ $errors->has('lat') ? 'is-invalid' : '' }}" type="text" name="lat" id="lat" value="{{ $cctv->lat }}" required>
                    @if($errors->has('lat'))
                        <div class="invalid-feedback">
                            {{ $errors->first('lat') }}
                        </div>
                    @endif
                    <span class="help-block">{{ trans('cruds.cctv.fields.lat_helper') }}</span>
                </div>
                <div class="form-group">
                    <label class="required" for="long">Longitude</label>
                    <input class="form-control {{ $errors->has('long') ? 'is-invalid' : '' }}" type="text" name="long" id="long" value="{{ $cctv->long }}" required>
                    @if($errors->has('long'))
                        <div class="invalid-feedback">
                            {{ $errors->first('long') }}
                        </div>
                    @endif
                    <span class="help-block">{{ trans('cruds.cctv.fields.long_helper') }}</span>
                </div>                    
                <div class="form-group">
                    <button class="btn btn-danger" type="submit">
                        {{ trans('global.save') }}
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">
                {{ trans('global.edit') }} CCTV
            </div>
            <div class="card-body">
                <div class="form-group">
                    <label for="vendor">{{ trans('cruds.cctv.fields.vendor') }}</label>
                    <select class="form-control select2 {{ $errors->has('vendor') ? 'is-invalid' : '' }}" name="vendor" id="vendor">
                        @foreach(App\Models\Cctv::VENDOR_SELECT as $id => $vendor)
                            <option value="{{ $id }}" {{ $cctv->vendor == $id ? 'selected' : '' }}>{{ $vendor }}</option>
                        @endforeach
                    </select>
                    @if($errors->has('vendor'))
                        <div class="invalid-feedback">
                            {{ $errors->first('vendor') }}
                        </div>
                    @endif
                    <span class="help-block">{{ trans('cruds.cctv.fields.vendor_helper') }}</span>
                </div>                   
                <div class="form-group">
                    <label for="model">Model</label>
                    <input class="form-control {{ $errors->has('model') ? 'is-invalid' : '' }}" type="text" name="model" id="model" value="{{ $cctv->model }}">
                    @if($errors->has('model'))
                        <div class="invalid-feedback">
                            {{ $errors->first('model') }}
                        </div>
                    @endif
                    <span class="help-block">{{ trans('cruds.cctv.fields.model_helper') }}</span>
                </div>
                <div class="form-group">
                    <label for="stream_type">{{ trans('cruds.cctv.fields.stream_type') }}</label>
                    <select class="form-control select2 {{ $errors->has('stream_type') ? 'is-invalid' : '' }}" name="stream_type" id="stream_type">
                        @foreach(App\Models\Cctv::STREAM_TYPE_SELECT as $id => $stream_type)
                            <option value="{{ $id }}" {{ $cctv->stream_type == $id ? 'selected' : '' }}>{{ $stream_type }}</option>
                        @endforeach
                    </select>
                    @if($errors->has('stream_type'))
                        <div class="invalid-feedback">
                            {{ $errors->first('stream_type') }}
                        </div>
                    @endif
                    <span class="help-block">{{ trans('cruds.cctv.fields.stream_type_helper') }}</span>
                </div>                   
                <div class="form-group">
                    <label class="required" for="stream_url">Stream URL</label>
                    <input class="form-control {{ $errors->has('stream_url') ? 'is-invalid' : '' }}" type="text" name="stream_url" id="stream_url" value="{{ $cctv->stream_url }}" required>
                    @if($errors->has('stream_url'))
                        <div class="invalid-feedback">
                            {{ $errors->first('stream_url') }}
                        </div>
                    @endif
                    <span class="help-block">{{ trans('cruds.cctv.fields.stream_url_helper') }}</span>
                </div>
                <div class="form-group">
                    <label for="ip_address">IP Address</label>
                    <input class="form-control {{ $errors->has('ip_address') ? 'is-invalid' : '' }}" type="text" name="ip_address" id="ip_address" value="{{ $cctv->ip_address }}">
                    @if($errors->has('ip_address'))
                        <div class="invalid-feedback">
                            {{ $errors->first('ip_address') }}
                        </div>
                    @endif
                    <span class="help-block">{{ trans('cruds.cctv.fields.ip_address_helper') }}</span>
                </div>
                <div class="form-group">
                    <label for="port">Port</label>
                    <input class="form-control {{ $errors->has('port') ? 'is-invalid' : '' }}" type="text" name="port" id="port" value="{{ $cctv->port }}">
                    @if($errors->has('port'))
                        <div class="invalid-feedback">
                            {{ $errors->first('port') }}
                        </div>
                    @endif
                    <span class="help-block">{{ trans('cruds.cctv.fields.port_helper') }}</span>
                </div>            
                <div class="form-group">
                    <label for="username">Username</label>
                    <input class="form-control {{ $errors->has('username') ? 'is-invalid' : '' }}" type="text" name="username" id="username" value="{{ $cctv->username }}">
                    @if($errors->has('username'))
                        <div class="invalid-feedback">
                            {{ $errors->first('username') }}
                        </div>
                    @endif
                    <span class="help-block">{{ trans('cruds.cctv.fields.username_helper') }}</span>
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input class="form-control {{ $errors->has('password') ? 'is-invalid' : '' }}" type="text" name="password" id="password" value="{{ $cctv->password }}">
                    @if($errors->has('password'))
                        <div class="invalid-feedback">
                            {{ $errors->first('password') }}
                        </div>
                    @endif
                    <span class="help-block">{{ trans('cruds.cctv.fields.password_helper') }}</span>
                </div>            
                {{-- $table->string('firmware_version')->nullable()->comment('Firmware version of the CCTV camera');
                $table->string('hardware_version')->nullable()->comment('Hardware version of the CCTV camera');
                $table->string('mac_address')->nullable()->comment('MAC address of the CCTV camera'); --}}   
                
                <div class="form-group">
                    <label for="detection_types">Detection Types</label>
                    <select class="form-control select2 {{ $errors->has('detection_types') ? 'is-invalid' : '' }}" name="detection_types[]" id="detection_types" multiple>
                        @foreach(App\Models\Cctv::DETECTION_TYPE_SELECT as $id => $detection_type)
                            <option value="{{ $id }}" {{ in_array($id, $cctv->detection_types ? json_decode($cctv->detection_types, true) : []) ? 'selected' : '' }}>{{ $detection_type }}</option>
                        @endforeach
                    </select>
                    @if($errors->has('detection_types'))
                        <div class="invalid-feedback">
                            {{ $errors->first('detection_types') }}
                        </div>
                    @endif
                    {{-- <span class="help-block">{{ trans('cruds.cctv.fields.stream_type_helper') }}</span> --}}
                </div>                   
                
                <div class="form-group">
                    <button class="btn btn-danger" type="submit">
                        {{ trans('global.save') }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
</form>
@endsection

@section('scripts')
<!-- Add Leaflet CSS and JS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<script>
    // Initialize map
    const map = L.map('map').setView([-6.193071059025881, 106.83490894353872], 13);
    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        attribution: '',
        maxZoom: 20,
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        accessToken: 'pk.eyJ1IjoieWFuc3lhZiIsImEiOiJjMzVkYTY5MDVhMWFhOGY3ODBkZjdiNTAyYzZlZjZmMyJ9.SbqZCRXhTUWf3loLAXMFRg'
    }).addTo(map);

    // Check for existing coordinates on load
    const initialLat = parseFloat(document.getElementById('lat').value);
    const initialLng = parseFloat(document.getElementById('long').value);
    let marker = null;

    if (!isNaN(initialLat) && !isNaN(initialLng)) {
        map.setView([initialLat, initialLng], 13);
        marker = L.marker([initialLat, initialLng]).addTo(map)
            .bindPopup(`Location: ${initialLat}, ${initialLng}`);
    }

    // Add click handler
    map.on('click', function(e) {
        const lat = e.latlng.lat.toFixed(6);
        const lng = e.latlng.lng.toFixed(6);
        
        document.getElementById('lat').value = lat;
        document.getElementById('long').value = lng;
        
        // Remove previous marker if exists
        if (marker) {
            map.removeLayer(marker);
        }
        
        // Add new marker
        marker = L.marker([lat, lng]).addTo(map)
            .bindPopup(`Location: ${lat}, ${lng}`).openPopup();
    });
</script>
@endsection