180 lines
9.2 KiB
PHP
180 lines
9.2 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'New Content Brief')
|
|
@section('page-title', 'New Content Brief 🎬')
|
|
|
|
@section('content')
|
|
<div class="max-w-2xl mx-auto">
|
|
<div class="cat-card p-4 lg:p-8">
|
|
<form action="{{ route('content.store') }}" method="POST" class="space-y-4"
|
|
x-data="contractCheck('{{ route('contracts.check') }}')"
|
|
@submit.prevent="submitIfClear($el)">
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
<div class="sm:col-span-2">
|
|
<label class="block text-sm font-semibold text-gray-700 mb-1">Title <span class="text-pink-400">*</span></label>
|
|
<input type="text" name="title" value="{{ old('title') }}" class="input-soft" required
|
|
placeholder="e.g. GRWM ft. Brand X Skincare">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-1">Platform <span class="text-pink-400">*</span></label>
|
|
<select name="platform" class="input-soft" required>
|
|
<option value="instagram">📸 Instagram</option>
|
|
<option value="tiktok">🎵 TikTok</option>
|
|
<option value="youtube">▶️ YouTube</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-1">Content Type</label>
|
|
<input type="text" name="content_type" value="{{ old('content_type') }}" class="input-soft"
|
|
placeholder="Reel, Short, GRWM, Story...">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-1">Status</label>
|
|
<select name="status" class="input-soft">
|
|
@foreach($statuses as $s)
|
|
<option value="{{ $s->value }}" {{ old('status', request('status', 'drafting')) === $s->value ? 'selected' : '' }}>
|
|
{{ $s->icon() }} {{ $s->label() }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-1">Client</label>
|
|
<select name="client_id" class="input-soft" x-model="clientId" @change="checkContract()">
|
|
<option value="">— None —</option>
|
|
@foreach($clients as $client)
|
|
<option value="{{ $client->id }}">{{ $client->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-1">Category</label>
|
|
<select name="category_id" class="input-soft" x-model="categoryId" @change="checkContract()">
|
|
<option value="">— None —</option>
|
|
@foreach($categoryTree as $parent)
|
|
<option value="{{ $parent->id }}">{{ $parent->icon }} {{ $parent->name }}</option>
|
|
@foreach($parent->children as $child)
|
|
<option value="{{ $child->id }}"> ↳ {{ $child->name }}</option>
|
|
@endforeach
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-1">Target Date</label>
|
|
<input type="date" name="target_date" value="{{ old('target_date') }}" class="input-soft" @change="checkContract()">
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Contract warning --}}
|
|
<div x-show="contractWarning" x-transition
|
|
class="rounded-2xl bg-amber-50 border border-amber-200 px-4 py-3 text-sm" style="display:none">
|
|
<div class="font-semibold text-amber-700 mb-1">⚠️ Exclusive Contract Active</div>
|
|
<p class="text-amber-600 text-xs" x-text="contractMessage"></p>
|
|
</div>
|
|
|
|
{{-- Storyline Maker --}}
|
|
<div class="bg-pink-50 rounded-2xl p-4 space-y-3">
|
|
<h3 class="font-bold text-gray-700 flex items-center gap-2 text-sm">✍️ Storyline Maker</h3>
|
|
<div>
|
|
<label class="block text-xs font-semibold text-pink-600 mb-1">🎣 HOOK — Open with a bang!</label>
|
|
<textarea name="hook" rows="2" class="input-soft text-sm resize-none bg-white"
|
|
placeholder="e.g. 'POV: you finally found the moisturizer that doesn't break you out...'">{{ old('hook') }}</textarea>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-semibold text-pink-600 mb-1">📖 BODY — Deliver the story</label>
|
|
<textarea name="body" rows="3" class="input-soft text-sm resize-none bg-white"
|
|
placeholder="The main content — what happens, product demo, value...">{{ old('body') }}</textarea>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-semibold text-pink-600 mb-1">📣 CTA — Call to Action</label>
|
|
<textarea name="cta" rows="2" class="input-soft text-sm resize-none bg-white"
|
|
placeholder="e.g. 'Link in bio to shop! Use code KITTY for 15% off'">{{ old('cta') }}</textarea>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-semibold text-gray-500 mb-1">📝 Full Script (optional)</label>
|
|
<textarea name="script" rows="4" class="input-soft text-sm resize-none bg-white"
|
|
placeholder="Complete spoken script, timestamps, shot list...">{{ old('script') }}</textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-1">Caption</label>
|
|
<textarea name="caption" rows="3" class="input-soft resize-none"
|
|
placeholder="Post caption text...">{{ old('caption') }}</textarea>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-1">Hashtags</label>
|
|
<input type="text" name="hashtags" value="{{ old('hashtags') }}" class="input-soft"
|
|
placeholder="#skincare #grwm #fyp">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-semibold text-gray-700 mb-1">Notes</label>
|
|
<textarea name="notes" rows="2" class="input-soft resize-none"
|
|
placeholder="Any extra notes, brand requirements...">{{ old('notes') }}</textarea>
|
|
</div>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-3 pt-1">
|
|
<button type="submit" class="btn-sakura flex-1 py-3"
|
|
:class="{ 'opacity-50 cursor-not-allowed': contractWarning }"
|
|
:disabled="contractWarning">🎬 Create Brief</button>
|
|
<a href="{{ route('content.index') }}"
|
|
class="flex-1 py-3 text-center rounded-full border border-pink-200 text-gray-600 hover:bg-pink-50 font-semibold text-sm">
|
|
Cancel
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@push('scripts')
|
|
<script>
|
|
function contractCheck(checkUrl) {
|
|
return {
|
|
categoryId: '',
|
|
clientId: '',
|
|
contractWarning: false,
|
|
contractMessage: '',
|
|
async checkContract() {
|
|
if (!this.categoryId) { this.contractWarning = false; return; }
|
|
let dateVal = '';
|
|
const targetDateEl = document.querySelector('input[name="target_date"]');
|
|
if (targetDateEl && targetDateEl.value) {
|
|
dateVal = targetDateEl.value;
|
|
}
|
|
if (!dateVal) {
|
|
this.contractWarning = false;
|
|
return;
|
|
}
|
|
const params = new URLSearchParams({
|
|
category_id: this.categoryId,
|
|
client_id: this.clientId || '',
|
|
date: dateVal
|
|
});
|
|
try {
|
|
const res = await fetch(checkUrl + '?' + params);
|
|
if (!res.ok) throw new Error('Network error');
|
|
const data = await res.json();
|
|
if (data && data.title) {
|
|
this.contractWarning = true;
|
|
this.contractMessage = `"${data.title}" — ${data.client_name} holds exclusive rights in the ${data.category} category until ${data.end_date} (${data.days_left} days left).`;
|
|
} else {
|
|
this.contractWarning = false;
|
|
this.contractMessage = '';
|
|
}
|
|
} catch (e) {
|
|
this.contractWarning = false;
|
|
this.contractMessage = '';
|
|
}
|
|
},
|
|
submitIfClear(form) {
|
|
if (this.contractWarning) {
|
|
if (!confirm('⚠️ An exclusive contract is active for this category.\n\nAre you sure you want to proceed?')) return;
|
|
}
|
|
form.submit();
|
|
}
|
|
};
|
|
}
|
|
</script>
|
|
@endpush
|
|
@endsection
|