PrestamosTecmm/resources/js/components/dashboard/NewMaintenanceForm.jsx

import React, { useState } from 'react';
import { Modal, Form, Button } from 'react-bootstrap';

const NewMaintenanceForm = ({ show, handleClose, onSubmit, vehicles }) => {
    const [formData, setFormData] = useState({
        vehicle_id: '',
        maintenance_type: '',
        date: '',
        description: '',
        cost: '',
        status: 'Pendiente',
        next_maintenance_date: ''
    });

    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData(prev => ({
            ...prev,
            [name]: value
        }));
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        onSubmit(formData);
        // Resetear el formulario
        setFormData({
            vehicle_id: '',
            maintenance_type: '',
            date: '',
            description: '',
            cost: '',
            status: 'Pendiente',
            next_maintenance_date: ''
        });
    };

    return (
        <Modal show={show} onHide={handleClose}>
            <Modal.Header closeButton>
                <Modal.Title>Nuevo Registro de Mantenimiento</Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <Form onSubmit={handleSubmit}>
                    <Form.Group className="mb-3">
                        <Form.Label>Vehículo</Form.Label>
                        <Form.Select
                            name="vehicle_id"
                            value={formData.vehicle_id}
                            onChange={handleChange}
                            required
                        >
                            <option value="">Seleccione un vehículo</option>
                            {vehicles.map(vehicle => (
                                <option key={vehicle.id} value={vehicle.id}>
                                    {vehicle.plate} - {vehicle.model}
                                </option>
                            ))}
                        </Form.Select>
                    </Form.Group>

                    <Form.Group className="mb-3">
                        <Form.Label>Tipo de Mantenimiento</Form.Label>
                        <Form.Select
                            name="maintenance_type"
                            value={formData.maintenance_type}
                            onChange={handleChange}
                            required
                        >
                            <option value="">Seleccione un tipo</option>
                            <option value="Preventivo">Preventivo</option>
                            <option value="Correctivo">Correctivo</option>
                            <option value="Cambio de Aceite">Cambio de Aceite</option>
                            <option value="Revisión General">Revisión General</option>
                        </Form.Select>
                    </Form.Group>

                    <Form.Group className="mb-3">
                        <Form.Label>Fecha</Form.Label>
                        <Form.Control
                            type="date"
                            name="date"
                            value={formData.date}
                            onChange={handleChange}
                            required
                        />
                    </Form.Group>

                    <Form.Group className="mb-3">
                        <Form.Label>Descripción</Form.Label>
                        <Form.Control
                            as="textarea"
                            rows={3}
                            name="description"
                            value={formData.description}
                            onChange={handleChange}
                            required
                        />
                    </Form.Group>

                    <Form.Group className="mb-3">
                        <Form.Label>Costo</Form.Label>
                        <Form.Control
                            type="number"
                            step="0.01"
                            name="cost"
                            value={formData.cost}
                            onChange={handleChange}
                            required
                        />
                    </Form.Group>

                    <Form.Group className="mb-3">
                        <Form.Label>Estado</Form.Label>
                        <Form.Select
                            name="status"
                            value={formData.status}
                            onChange={handleChange}
                            required
                        >
                            <option value="Pendiente">Pendiente</option>
                            <option value="En Proceso">En Proceso</option>
                            <option value="Completado">Completado</option>
                        </Form.Select>
                    </Form.Group>

                    <Form.Group className="mb-3">
                        <Form.Label>Próxima Fecha de Mantenimiento</Form.Label>
                        <Form.Control
                            type="date"
                            name="next_maintenance_date"
                            value={formData.next_maintenance_date}
                            onChange={handleChange}
                        />
                    </Form.Group>

                    <div className="d-flex justify-content-end gap-2">
                        <Button variant="secondary" onClick={handleClose}>
                            Cancelar
                        </Button>
                        <Button variant="primary" type="submit">
                            Guardar
                        </Button>
                    </div>
                </Form>
            </Modal.Body>
        </Modal>
    );
};

export default NewMaintenanceForm;