@php
$title = 'Novo Serviço';
@endphp

<div class="container-fluid pt-1" style="margin-top: -32px;">
    <nav aria-label="breadcrumb" class="mb-2" style="margin-top: -18px;">
        <ol class="breadcrumb bg-transparent px-0 py-1 mb-1" style="font-size: 0.98rem;">
            <li class="breadcrumb-item"><a href="/" class="text-decoration-none text-secondary">Início</a></li>
            <li class="breadcrumb-item"><a href="#" onclick="carregarConteudo(`{{ route('cadastro.servicos') }}`)" class="text-decoration-none text-secondary">Serviços</a></li>
            <li class="breadcrumb-item active text-dark" aria-current="page">Novo Serviço</li>
        </ol>
    </nav>
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="fw-bold mb-0" style="font-size:2.1rem; letter-spacing:1px;">
                <i class="bi bi-plus-circle me-2 text-primary"></i>Novo Serviço
            </h1>
            <span class="text-muted small">Cadastre um novo serviço no sistema</span>
        </div>
        <div>
            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="carregarConteudo(`{{ route('cadastro.servicos') }}`)">
                <i class="bi bi-arrow-left me-2"></i>Voltar
            </button>
        </div>
    </div>

    <div class="card shadow border-0 mb-4">
        <div class="card-header bg-white border-0 pb-1">
            <span class="fw-bold">Dados do Serviço</span>
        </div>
        <div class="card-body">
            <form id="formNovoServico" class="needs-validation" novalidate>
                @csrf
                <div class="border rounded p-3 mb-3" style="border-color: #dee2e6 !important;">
                    <div class="row mb-3">
                        <div class="col-md-2">
                            <label for="codigo" class="form-label">Código</label>
                            <input type="text" class="form-control" id="codigo" name="dados[codigo]" value="{{ $codigo }}" disabled>
                        </div>
                        <div class="col-md-6">
                            <label for="nome" class="form-label required-field">Nome do Serviço</label>
                            <input type="text" class="form-control" id="nome" name="dados[nome]" required>
                            <div class="invalid-feedback">
                                Por favor, informe o nome do serviço.
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label for="tipoServico" class="form-label required-field">Tipo de Serviço</label>
                            <select class="form-select" id="tipoServico" name="dados[tipo_servico_id]" required>
                                <option value="">Selecione...</option>
                                @foreach($tiposServico as $tipo)
                                <option value="{{ $tipo->id }}">{{ $tipo->nome }}</option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback">
                                Por favor, selecione o tipo de serviço.
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-4">
                            <label for="unidade" class="form-label required-field">Unidade</label>
                            <select class="form-select" id="unidade" name="dados[unidade]" required>
                                <option value="">Selecione...</option>
                                @foreach($unidades ?? [] as $servico)
                                <option value="{{ $servico->tipo }}">{{ $servico->unidade }}</option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback">
                                Por favor, selecione a unidade.
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label for="valorVenda" class="form-label required-field">Valor de Venda</label>
                            <div class="input-group">
                                <span class="input-group-text">R$</span>
                                <input type="text" class="form-control" id="valorVenda" name="dados[valor_venda]" data-mask="money" required>
                                <div class="invalid-feedback">
                                    Por favor, informe o valor de venda.
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <label for="valorCusto" class="form-label required-field">Valor de Custo</label>
                            <div class="input-group">
                                <span class="input-group-text">R$</span>
                                <input type="text" class="form-control" id="valorCusto" name="dados[valor_custo]" data-mask="money" required>
                                <div class="invalid-feedback">
                                    Por favor, informe o valor de custo.
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-12">
                            <label for="descricao" class="form-label required-field">Descrição</label>
                            <textarea class="form-control" id="descricao" name="dados[descricao]" rows="3" required></textarea>
                            <div class="invalid-feedback">
                                Por favor, informe a descrição do serviço.
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-4">
                            <label for="status" class="form-label required-field">Status</label>
                            <select class="form-select" id="status" name="dados[status]" required>
                                <option value="ativo">Ativo</option>
                                <option value="inativo">Inativo</option>
                            </select>
                            <div class="invalid-feedback">
                                Por favor, selecione o status.
                            </div>
                        </div>
                    </div>

                    <div class="d-grid gap-2 d-md-flex justify-content-md-end mt-4">
                        <button type="button" class="btn btn-sm btn-outline-secondary me-md-2" onclick="carregarConteudo(`{{ route('cadastro.servicos') }}`)">
                            <i class="bi bi-x-circle me-2"></i>Cancelar
                        </button>
                        <button type="button" class="btn btn-sm btn-primary" onclick="salvar(`{{ route('servicos.store') }}`, 'formNovoServico')">
                            <i class="bi bi-check-circle me-2"></i>Salvar
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>