{extends file="layout.tpl"}

{block name="content"}
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <!-- Header -->
            <div class="d-flex align-items-center mb-4">
                <a href="{$baseUrl}/playlists{if $data.device_id|default:0}?device_id={$data.device_id}{/if}" class="btn btn-outline-secondary me-3">
                    <i class="bi bi-arrow-left"></i>
                </a>
                <div>
                    <h4 class="mb-1">{$pageTitle}</h4>
                    <p class="text-muted mb-0">
                        {if $isEdit}Edytuj konfigurację playlisty{else}Dodaj nową playlistę do urządzenia{/if}
                    </p>
                </div>
            </div>

            <!-- Form Card -->
            <div class="card">
                <div class="card-body">
                    {if $error|default:false}
                    <div class="alert alert-danger">
                        <i class="bi bi-exclamation-circle me-2"></i>{$error}
                    </div>
                    {/if}

                    <form method="post" id="playlistForm">
                        <input type="hidden" name="csrf_token" value="{$csrfToken}">
                        
                        <!-- Basic Info -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label class="form-label">Urządzenie <span class="text-danger">*</span></label>
                                <select name="device_id" class="form-select" required {if $isEdit}disabled{/if}>
                                    <option value="">Wybierz urządzenie...</option>
                                    {foreach $devices as $device}
                                    <option value="{$device.id}" {if ($data.device_id|default:0) == $device.id}selected{/if}>
                                        {$device.name|default:$device.mac} ({$device.mac})
                                        {if $isAdmin} - {$device.username}{/if}
                                    </option>
                                    {/foreach}
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Nazwa playlisty <span class="text-danger">*</span></label>
                                <input type="text" name="name" class="form-control" value="{$data.name|default:''}" required>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label class="form-label">Typ playlisty <span class="text-danger">*</span></label>
                                <select name="type" id="playlistType" class="form-select" required>
                                    <option value="xtream" {if ($data.type|default:'xtream') == 'xtream'}selected{/if}>Xtream Codes</option>
                                    <option value="m3u" {if ($data.type|default:'') == 'm3u'}selected{/if}>M3U Link</option>
                                    <option value="stalker" {if ($data.type|default:'') == 'stalker'}selected{/if}>Stalker Portal</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Kolejność</label>
                                <input type="number" name="sort_order" class="form-control" value="{$data.sort_order|default:0}" min="0">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Status</label>
                                <div class="form-check form-switch mt-2">
                                    <input type="checkbox" name="is_active" id="is_active" class="form-check-input" value="1" {if $data.is_active|default:1}checked{/if}>
                                    <label class="form-check-label" for="is_active">Aktywna</label>
                                </div>
                            </div>
                        </div>

                        <!-- Xtream Fields -->
                        <div id="xtreamFields" class="type-fields">
                            <h6 class="border-bottom pb-2 mb-3"><i class="bi bi-broadcast me-2"></i>Konfiguracja Xtream</h6>
                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <label class="form-label">Host <span class="text-danger">*</span></label>
                                    <input type="url" name="host" class="form-control" value="{$data.host|default:''}" placeholder="http://example.com:8080">
                                    <small class="text-muted">Adres serwera Xtream (z portem)</small>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label class="form-label">Username <span class="text-danger">*</span></label>
                                    <input type="text" name="username" class="form-control" value="{$data.username|default:''}">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Password <span class="text-danger">*</span></label>
                                    <input type="text" name="password" class="form-control" value="{$data.password|default:''}">
                                </div>
                            </div>
                        </div>

                        <!-- M3U Fields -->
                        <div id="m3uFields" class="type-fields" style="display:none;">
                            <h6 class="border-bottom pb-2 mb-3"><i class="bi bi-link-45deg me-2"></i>Konfiguracja M3U</h6>
                            <div class="mb-3">
                                <label class="form-label">URL playlisty <span class="text-danger">*</span></label>
                                <input type="url" name="url" class="form-control" value="{$data.url|default:''}" placeholder="http://example.com/playlist.m3u">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">EPG Link</label>
                                <input type="url" name="m3u_epg_link" class="form-control" value="{$data.epg_link|default:''}" placeholder="http://example.com/epg.xml">
                                <small class="text-muted">Opcjonalny link do programu TV</small>
                            </div>
                        </div>

                        <!-- Stalker Fields -->
                        <div id="stalkerFields" class="type-fields" style="display:none;">
                            <h6 class="border-bottom pb-2 mb-3"><i class="bi bi-hdd-network me-2"></i>Konfiguracja Stalker</h6>
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label class="form-label">Server URL <span class="text-danger">*</span></label>
                                    <input type="url" name="server_url" class="form-control" value="{$data.server_url|default:''}" placeholder="http://example.com:80/c">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Referrer URL</label>
                                    <input type="url" name="referrer_url" class="form-control" value="{$data.referrer_url|default:''}" placeholder="http://example.com/c">
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label class="form-label">MAC Address <span class="text-danger">*</span></label>
                                    <input type="text" name="mac_address" class="form-control" value="{$data.mac_address|default:''}" placeholder="00:1A:79:XX:XX:XX">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Serial Number</label>
                                    <input type="text" name="serial_number" class="form-control" value="{$data.serial_number|default:''}">
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label class="form-label">Device ID</label>
                                    <input type="text" name="stalker_device_id" class="form-control" value="{$data.device_id|default:''}">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Device ID 2</label>
                                    <input type="text" name="device_id2" class="form-control" value="{$data.device_id2|default:''}">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Signature</label>
                                    <input type="text" name="signature" class="form-control" value="{$data.signature|default:''}">
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">EPG Link</label>
                                <input type="url" name="stalker_epg_link" class="form-control" value="{$data.epg_link|default:''}" placeholder="http://example.com/epg.xml">
                            </div>
                        </div>

                        {if $isEdit}
                        <div class="mb-4">
                            <div class="form-check">
                                <input type="checkbox" name="update_timestamp" id="update_timestamp" class="form-check-input" value="1">
                                <label class="form-check-label" for="update_timestamp">
                                    Aktualizuj update_date na aktualny czas
                                </label>
                            </div>
                            <small class="text-muted">Obecna wartość: {$data.update_date|date_format:"%d.%m.%Y %H:%M:%S"}</small>
                        </div>
                        {else}
                        <div class="mb-4">
                            <label class="form-label">Uwagi <span class="text-muted">(opcjonalne)</span></label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-sticky"></i></span>
                                <textarea name="initial_note" 
                                          class="form-control" 
                                          rows="2" 
                                          placeholder="Notatka dodana przy tworzeniu playlisty...">{$data.initial_note|default:''}</textarea>
                            </div>
                            <small class="text-muted">Zostanie zapisana jako notatka do tej playlisty</small>
                        </div>
                        {/if}

                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-lg me-1"></i>
                                {if $isEdit}Zapisz zmiany{else}Dodaj playlistę{/if}
                            </button>
                            <a href="{$baseUrl}/playlists{if $data.device_id|default:0}?device_id={$data.device_id}{/if}" class="btn btn-secondary">Anuluj</a>
                        </div>
                    </form>
                </div>
            </div>

            {if $isEdit}
            <!-- Info Card -->
            <div class="card mt-4">
                <div class="card-header">
                    <h6 class="mb-0"><i class="bi bi-info-circle me-2"></i>Informacje</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-6">
                            <small class="text-muted d-block">Utworzona</small>
                            <span>{$data.created_at|date_format:"%d.%m.%Y %H:%M"}</span>
                        </div>
                        <div class="col-6">
                            <small class="text-muted d-block">Ostatnia aktualizacja</small>
                            <span>{$data.updated_at|date_format:"%d.%m.%Y %H:%M"}</span>
                        </div>
                        <div class="col-6 mt-3">
                            <small class="text-muted d-block">Update Date (timestamp)</small>
                            <span>{$data.update_date}</span>
                        </div>
                        <div class="col-6 mt-3">
                            <small class="text-muted d-block">Urządzenie</small>
                            <span>{$data.device_name|default:$data.mac}</span>
                        </div>
                    </div>
                </div>
            </div>
            
            {* Notatki *}
            <div class="mt-4">
                {include file="partials/entity_notes.tpl" entityType="playlist" entityId=$data.id}
            </div>
            {/if}
        </div>
    </div>
</div>
{/block}

{block name="scripts"}
<script>
const typeSelect = document.getElementById('playlistType');
const typeFields = document.querySelectorAll('.type-fields');

function showTypeFields(type) {
    typeFields.forEach(f => f.style.display = 'none');
    const target = document.getElementById(type + 'Fields');
    if (target) target.style.display = 'block';
    
    // Clear required from hidden fields, add to visible
    document.querySelectorAll('.type-fields input[data-required]').forEach(input => {
        input.required = false;
    });
    if (target) {
        target.querySelectorAll('input[data-required]').forEach(input => {
            input.required = true;
        });
    }
}

typeSelect.addEventListener('change', function() {
    showTypeFields(this.value);
});

// Mark required fields
document.querySelectorAll('#xtreamFields input').forEach(input => {
    if (input.name === 'host' || input.name === 'username' || input.name === 'password') {
        input.dataset.required = 'true';
    }
});
document.querySelectorAll('#m3uFields input').forEach(input => {
    if (input.name === 'url') {
        input.dataset.required = 'true';
    }
});
document.querySelectorAll('#stalkerFields input').forEach(input => {
    if (input.name === 'server_url' || input.name === 'mac_address') {
        input.dataset.required = 'true';
    }
});

// Init
showTypeFields(typeSelect.value);
</script>
{/block}
