@extends('layouts.app')

@section('title', 'Settings')

@push('styles')
<style>
    .form-label { display: block; font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; }
    .form-input { width: 100%; padding: 8px 12px; border: 1px solid var(--card-border); border-radius: 6px; font-size: 14px; outline: none; transition: border-color 0.15s; background: var(--card-bg); color: var(--text-primary); }
    .form-input:focus { border-color: var(--primary-light); }
    .form-select { width: 100%; padding: 8px 12px; border: 1px solid var(--card-border); border-radius: 6px; font-size: 14px; outline: none; transition: border-color 0.15s; background: var(--card-bg); color: var(--text-primary); }
    .form-select:focus { border-color: var(--primary-light); }
    .form-textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--card-border); border-radius: 6px; font-size: 14px; outline: none; transition: border-color 0.15s; background: var(--card-bg); color: var(--text-primary); resize: vertical; min-height: 80px; }
    .form-textarea:focus { border-color: var(--primary-light); }
    .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 500; border: none; cursor: pointer; transition: all 0.15s; text-decoration: none; }
    .btn-primary { background: var(--primary); color: white; }
    .btn-primary:hover { background: var(--primary-dark); }
    .btn-outline { background: transparent; border: 1px solid var(--card-border); color: var(--text-primary); }
    .btn-outline:hover { background: #F5F3F1; }
    .setting-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 24px; }
</style>
@endpush

@section('content')

<div style="max-width: 800px;">
    <div style="margin-bottom: 24px;">
        <h1 style="font-family: 'Fraunces', serif; font-size: 24px; font-weight: 600;">Institute settings</h1>
        <p style="font-size: 13px; color: var(--text-muted);">Configure your school or institute details</p>
    </div>

    @if(session('success'))
        <div style="background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 6px; padding: 12px 16px; margin-bottom: 20px;">
            <p style="font-size: 13px; color: #166534; margin: 0;">{{ session('success') }}</p>
        </div>
    @endif

    <form method="POST" action="{{ route('settings.update') }}" enctype="multipart/form-data">
        @csrf
        <div class="setting-card" style="margin-bottom: 24px;">
            <h3 style="font-size: 16px; font-weight: 600; margin-bottom: 20px; font-family: 'Fraunces', serif;">General information</h3>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                <div style="grid-column: span 2;">
                    <label class="form-label">Institute Name</label>
                    <input type="text" name="institute_name" required class="form-input" value="{{ $settings['institute_name'] ?? '' }}" placeholder="Vidya Institute">
                </div>
                <div style="grid-column: span 2;">
                    <label class="form-label">Institute Address</label>
                    <textarea name="institute_address" class="form-textarea" placeholder="Address...">{{ $settings['institute_address'] ?? '' }}</textarea>
                </div>
                <div>
                    <label class="form-label">Institute Phone</label>
                    <input type="text" name="institute_phone" class="form-input" value="{{ $settings['institute_phone'] ?? '' }}" placeholder="+91 98765 43210">
                </div>
                <div>
                    <label class="form-label">Institute Email</label>
                    <input type="email" name="institute_email" class="form-input" value="{{ $settings['institute_email'] ?? '' }}" placeholder="info@vidya.edu">
                </div>
            </div>
        </div>

        <div class="setting-card" style="margin-bottom: 24px;">
            <h3 style="font-size: 16px; font-weight: 600; margin-bottom: 20px; font-family: 'Fraunces', serif;">Branding</h3>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                <div style="grid-column: span 2;">
                    <label class="form-label">Site Name</label>
                    <input type="text" name="site_name" class="form-input" value="{{ $settings['site_name'] ?? '' }}" placeholder="Vidya">
                </div>
                <div>
                    <label class="form-label">Logo</label>
                    <input type="file" name="logo" accept="image/*" class="form-input" style="padding: 6px 12px;">
                    @if (!empty($settings['logo']))
                        <div style="margin-top: 8px;">
                            <img src="{{ asset('storage/' . $settings['logo']) }}" style="height: 40px; border-radius: 4px;">
                        </div>
                    @endif
                </div>
                <div>
                    <label class="form-label">Favicon</label>
                    <input type="file" name="favicon" accept="image/*" class="form-input" style="padding: 6px 12px;">
                    @if (!empty($settings['favicon']))
                        <div style="margin-top: 8px;">
                            <img src="{{ asset('storage/' . $settings['favicon']) }}" style="height: 32px; width: 32px; border-radius: 4px; object-fit: cover;">
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="setting-card" style="margin-bottom: 24px;">
            <h3 style="font-size: 16px; font-weight: 600; margin-bottom: 20px; font-family: 'Fraunces', serif;">Session configuration</h3>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                <div>
                    <label class="form-label">Session Start</label>
                    <input type="month" name="session_start" class="form-input" value="{{ $settings['session_start'] ?? '' }}">
                </div>
                <div>
                    <label class="form-label">Session End</label>
                    <input type="month" name="session_end" class="form-input" value="{{ $settings['session_end'] ?? '' }}">
                </div>
                <div>
                    <label class="form-label">Working Days</label>
                    <select name="working_days" class="form-select">
                        <option value="5" {{ ($settings['working_days'] ?? '') == '5' ? 'selected' : '' }}>5 days (Mon–Fri)</option>
                        <option value="6" {{ ($settings['working_days'] ?? '') == '6' ? 'selected' : '' }}>6 days (Mon–Sat)</option>
                    </select>
                </div>
            </div>
        </div>

        <div style="display: flex; gap: 8px;">
            <button type="submit" class="btn btn-primary">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
                Save settings
            </button>
        </div>
    </form>
</div>

@endsection