@extends('layouts.app')

@section('title', 'Agendar Novo Post')

@push('styles')
<link href="{{ asset('vendors/flatpickr/flatpickr.min.css') }}" rel="stylesheet">
@endpush

@section('content')
<div class="row g-3 mb-4">
    <div class="col-auto">
        <h2 class="mb-0">Agendar Novo Post</h2>
    </div>
</div>

<form action="{{ route('posts.store') }}" method="POST">
    @csrf

    <div class="row g-3">
        <div class="col-lg-8">
            <div class="card mb-3">
                <div class="card-header">
                    <h5 class="mb-0">Informações do Post</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label" for="title">Título *</label>
                        <input type="text"
                               class="form-control @error('title') is-invalid @enderror"
                               id="title"
                               name="title"
                               value="{{ old('title') }}"
                               required>
                        @error('title')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="content">Conteúdo</label>
                        <textarea class="form-control @error('content') is-invalid @enderror"
                                  id="content"
                                  name="content"
                                  rows="5">{{ old('content') }}</textarea>
                        @error('content')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="hashtags">Hashtags</label>
                        <input type="text"
                               class="form-control @error('hashtags') is-invalid @enderror"
                               id="hashtags"
                               name="hashtags"
                               value="{{ old('hashtags') }}"
                               placeholder="#marketing #socialmedia">
                        @error('hashtags')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="scheduled_at">Data e Hora de Publicação *</label>
                        <input type="text"
                               class="form-control datetimepicker @error('scheduled_at') is-invalid @enderror"
                               id="scheduled_at"
                               name="scheduled_at"
                               value="{{ old('scheduled_at') }}"
                               placeholder="Selecione a data e hora"
                               required>
                        @error('scheduled_at')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="notes">Observações</label>
                        <textarea class="form-control @error('notes') is-invalid @enderror"
                                  id="notes"
                                  name="notes"
                                  rows="3">{{ old('notes') }}</textarea>
                        @error('notes')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Redes Sociais e Responsáveis</h5>
                    <button type="button" class="btn btn-sm btn-phoenix-primary" id="addNetwork">
                        <i class="fas fa-plus me-1"></i>Adicionar Rede
                    </button>
                </div>
                <div class="card-body">
                    <div id="networks-container">
                        <div class="network-item border rounded p-3 mb-3">
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <label class="form-label">Rede Social *</label>
                                    <select class="form-select" name="tasks[0][social_network_id]" required>
                                        <option value="">Selecione...</option>
                                        @foreach($socialNetworks as $network)
                                        <option value="{{ $network->id }}">{{ $network->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Redator</label>
                                    <select class="form-select" name="tasks[0][copywriter_id]">
                                        <option value="">Selecione...</option>
                                        @foreach($users as $user)
                                        <option value="{{ $user->id }}">{{ $user->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Designer</label>
                                    <select class="form-select" name="tasks[0][designer_id]">
                                        <option value="">Selecione...</option>
                                        @foreach($users as $user)
                                        <option value="{{ $user->id }}">{{ $user->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Publicador</label>
                                    <select class="form-select" name="tasks[0][publisher_id]">
                                        <option value="">Selecione...</option>
                                        @foreach($users as $user)
                                        <option value="{{ $user->id }}">{{ $user->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <button type="submit" class="btn btn-primary w-100 mb-2">
                        <i class="fas fa-save me-2"></i>Agendar Post
                    </button>
                    <a href="{{ route('posts.index') }}" class="btn btn-outline-secondary w-100">
                        Cancelar
                    </a>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script src="{{ asset('vendors/flatpickr/flatpickr.min.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Inicializar datetime picker
    flatpickr('.datetimepicker', {
        enableTime: true,
        dateFormat: 'Y-m-d H:i',
        minDate: 'today',
        time_24hr: true,
        locale: {
            firstDayOfWeek: 0
        }
    });

    // Adicionar nova rede social
    let networkIndex = 1;
    document.getElementById('addNetwork').addEventListener('click', function() {
        const container = document.getElementById('networks-container');
        const template = container.querySelector('.network-item').cloneNode(true);

        // Atualizar índices dos campos
        template.querySelectorAll('select').forEach(select => {
            const name = select.getAttribute('name');
            select.setAttribute('name', name.replace(/\[\d+\]/, `[${networkIndex}]`));
            select.value = '';
        });

        // Adicionar botão de remover
        const removeBtn = document.createElement('button');
        removeBtn.type = 'button';
        removeBtn.className = 'btn btn-sm btn-phoenix-danger position-absolute top-0 end-0 m-2';
        removeBtn.innerHTML = '<i class="fas fa-times"></i>';
        removeBtn.onclick = function() {
            template.remove();
        };
        template.style.position = 'relative';
        template.appendChild(removeBtn);

        container.appendChild(template);
        networkIndex++;
    });
});
</script>
@endpush