@extends('layouts.app')

@section('page_title', 'Add Station')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">{{ isset($station) ? 'Edit Station' : 'Add New Station' }}</h3>
                </div>
                <div class="card-body">
                    @include('components.alerts')

                    <form id="stationForm" 
                          action="{{ isset($station) ? route('stations.update', $station['id']) : route('stations.store') }}"
                          method="POST"
                          enctype="multipart/form-data"
                          class="needs-validation"
                          novalidate>
                        @csrf
                        @if(isset($station))
                            @method('PUT')
                        @endif

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="name">Station Name <span class="text-danger">*</span></label>
                                    <input type="text" 
                                           class="form-control" 
                                           id="name" 
                                           name="name" 
                                           value="{{ old('name', $station['name'] ?? '') }}"
                                           required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="code">Station Code <span class="text-danger">*</span></label>
                                    <input type="text" 
                                           class="form-control" 
                                           id="code" 
                                           name="code" 
                                           value="{{ old('code', $station['code'] ?? '') }}"
                                           required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="address">Address <span class="text-danger">*</span></label>
                                    <textarea class="form-control" 
                                              id="address" 
                                              name="address" 
                                              rows="3" 
                                              required>{{ old('address', $station['address'] ?? '') }}</textarea>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="region">Region <span class="text-danger">*</span></label>
                                    <select class="form-control" 
                                            id="region" 
                                            name="region" 
                                            required>
                                        <option value="">Select Region</option>
                                        @foreach($regions ?? [] as $region)
                                            <option value="{{ $region['id'] }}" 
                                                    {{ old('region', $station['region_id'] ?? '') == $region['id'] ? 'selected' : '' }}>
                                                {{ $region['name'] }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="latitude">Latitude <span class="text-danger">*</span></label>
                                    <input type="number" 
                                           class="form-control" 
                                           id="latitude" 
                                           name="latitude" 
                                           step="any"
                                           value="{{ old('latitude', $station['latitude'] ?? '') }}"
                                           required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="longitude">Longitude <span class="text-danger">*</span></label>
                                    <input type="number" 
                                           class="form-control" 
                                           id="longitude" 
                                           name="longitude" 
                                           step="any"
                                           value="{{ old('longitude', $station['longitude'] ?? '') }}"
                                           required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="status">Status <span class="text-danger">*</span></label>
                                    <select class="form-control" 
                                            id="status" 
                                            name="status" 
                                            required>
                                        <option value="active" {{ old('status', $station['status'] ?? '') == 'active' ? 'selected' : '' }}>Active</option>
                                        <option value="inactive" {{ old('status', $station['status'] ?? '') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="image">Station Image</label>
                                    <input type="file" 
                                           class="form-control-file" 
                                           id="image" 
                                           name="image" 
                                           accept="image/*">
                                    @if(isset($station) && $station['image'])
                                        <div class="mt-2">
                                            <img src="{{ $station['image'] }}" 
                                                 alt="Station Image" 
                                                 class="img-thumbnail" 
                                                 style="max-height: 100px;">
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">
                                    {{ isset($station) ? 'Update Station' : 'Add Station' }}
                                </button>
                                <a href="{{ route('stations.index') }}" class="btn btn-secondary">Cancel</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Form validation
    $('#stationForm').validate({
        rules: {
            name: {
                required: true,
                minlength: 3
            },
            code: {
                required: true,
                minlength: 2
            },
            address: {
                required: true,
                minlength: 10
            },
            region: {
                required: true
            },
            latitude: {
                required: true,
                number: true
            },
            longitude: {
                required: true,
                number: true
            },
            status: {
                required: true
            }
        },
        messages: {
            name: {
                required: "Please enter station name",
                minlength: "Station name must be at least 3 characters"
            },
            code: {
                required: "Please enter station code",
                minlength: "Station code must be at least 2 characters"
            },
            address: {
                required: "Please enter station address",
                minlength: "Address must be at least 10 characters"
            },
            region: {
                required: "Please select a region"
            },
            latitude: {
                required: "Please enter latitude",
                number: "Please enter a valid number"
            },
            longitude: {
                required: "Please enter longitude",
                number: "Please enter a valid number"
            },
            status: {
                required: "Please select status"
            }
        },
        errorElement: 'span',
        errorPlacement: function(error, element) {
            error.addClass('invalid-feedback');
            element.closest('.form-group').append(error);
        },
        highlight: function(element, errorClass, validClass) {
            $(element).addClass('is-invalid');
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).removeClass('is-invalid');
        },
        submitHandler: function(form) {
            // Show loading indicator
            const submitBtn = $(form).find('button[type="submit"]');
            const originalText = submitBtn.text();
            submitBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...');

            // Submit form
            $.ajax({
                url: form.action,
                type: form.method,
                data: new FormData(form),
                processData: false,
                contentType: false,
                success: function(response) {
                    // Show success message
                    toastr.success(response.message);
                    
                    // Redirect to stations list
                    setTimeout(function() {
                        window.location.href = '{{ route("stations.index") }}';
                    }, 1500);
                },
                error: function(xhr) {
                    // Show error message
                    const errors = xhr.responseJSON.errors;
                    Object.keys(errors).forEach(function(key) {
                        toastr.error(errors[key][0]);
                    });
                    
                    // Reset button
                    submitBtn.prop('disabled', false).text(originalText);
                }
            });
        }
    });

    // Image preview
    $('#image').change(function() {
        const file = this.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const img = $('<img>')
                    .attr('src', e.target.result)
                    .addClass('img-thumbnail')
                    .css('max-height', '100px');
                
                const imgContainer = $('#image').siblings('div');
                if (imgContainer.length) {
                    imgContainer.html(img);
                } else {
                    $('#image').after($('<div class="mt-2">').append(img));
                }
            }
            reader.readAsDataURL(file);
        }
    });
});
</script>
@endpush