@extends('layouts.app')
@section('title', 'Pipelines')

@section('content')
    <x-page-header title="Pipelines" lede="The stages a lead or a deal moves through." />

    <div class="tabs">
        <a href="{{ route('app.settings.index') }}">Organisation</a>
        <a class="active" href="{{ route('app.settings.pipelines') }}">Pipelines</a>
        @can('tags.manage')<a href="{{ route('app.settings.tags') }}">Tags</a>@endcan
    </div>

    @foreach ($pipelines as $pipeline)
        <x-card :title="$pipeline->name" style="margin-bottom:16px">
            <x-slot:head><span class="badge muted plain">{{ ucfirst($pipeline->type) }}</span></x-slot:head>

            <div class="table-wrap">
                <table class="data">
                    <thead><tr><th>Stage</th><th class="num">Probability</th><th class="num">Stale after</th><th>Colour</th><th></th></tr></thead>
                    <tbody>
                        @foreach ($pipeline->stages as $stage)
                            <tr>
                                <td>
                                    <x-badge :stage="$stage->colour_token">{{ $stage->name }}</x-badge>
                                    @if ($stage->is_won)<span class="sub">Closes the record as won</span>@endif
                                    @if ($stage->is_lost)<span class="sub">Closes the record as lost</span>@endif
                                </td>
                                <td class="num">{{ $stage->probability }}%</td>
                                <td class="num">{{ $stage->rotting_days ? $stage->rotting_days.' days' : '—' }}</td>
                                <td><code>{{ $stage->colour_token }}</code></td>
                                <td class="right">
                                    @if (! $stage->is_won && ! $stage->is_lost)
                                        <form method="POST" action="{{ route('app.settings.stages.destroy', $stage) }}"
                                              data-confirm="Remove the {{ $stage->name }} stage?">
                                            @csrf @method('DELETE')
                                            <button class="btn small danger" type="submit">Remove</button>
                                        </form>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <x-slot:foot>
                <form method="POST" action="{{ route('app.settings.stages.store', $pipeline) }}" class="row wrap" style="align-items:flex-end;gap:10px">
                    @csrf
                    <div class="field" style="margin:0;min-width:180px">
                        <label for="name-{{ $pipeline->id }}">New stage</label>
                        <input id="name-{{ $pipeline->id }}" name="name" type="text" required placeholder="Technical review">
                    </div>
                    <div class="field" style="margin:0;width:120px">
                        <label for="prob-{{ $pipeline->id }}">Probability</label>
                        <input id="prob-{{ $pipeline->id }}" name="probability" type="number" min="0" max="100" value="50" required>
                    </div>
                    <div class="field" style="margin:0;width:130px">
                        <label for="rot-{{ $pipeline->id }}">Stale after</label>
                        <input id="rot-{{ $pipeline->id }}" name="rotting_days" type="number" min="1" max="365" placeholder="days">
                    </div>
                    <div class="field" style="margin:0;width:150px">
                        <label for="col-{{ $pipeline->id }}">Colour</label>
                        <select id="col-{{ $pipeline->id }}" name="colour_token">
                            @foreach (['stage-1' => 'Cyan (earliest)', 'stage-2' => 'Blue', 'stage-3' => 'Indigo', 'stage-4' => 'Violet', 'stage-5' => 'Amber (latest)'] as $token => $label)
                                <option value="{{ $token }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <button class="btn primary" type="submit">Add stage</button>
                </form>
            </x-slot:foot>
        </x-card>
    @endforeach

    <div class="alert info">
        Stage colours run cool to warm along the funnel, so a board reads without a legend.
        New stages are inserted before the won and lost columns, which always sit at the end.
    </div>
@endsection