@extends('layouts.app')

@section('title', __('settings.website.sections.programs'))

@push('styles')
<link href="{{ asset('css/stage-academy.css') }}" rel="stylesheet">
@endpush

@section('content')
@php
    $showAddForm = $errors->any();
@endphp
<div class="container-fluid">
    <div class="d-flex align-items-center justify-content-between gap-3 mb-4">
        <div class="flex-grow-1">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">{{ __('dashboard') }}</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('settings') }}">{{ __('settings') }}</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('settings.website') }}">{{ __('settings.website.title') }}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ __('settings.website.sections.programs') }}</li>
                </ol>
            </nav>
            <h4 class="fw-bold mb-0">{{ __('settings.website.sections.programs') }}</h4>
            <div class="text-muted small">{{ __('settings.website.programs.subtitle') }}</div>
        </div>
        <a href="{{ route('settings.website') }}" class="btn btn-outline-secondary app-back-end">
            <i class="bi bi-arrow-{{ app()->getLocale() == 'ar' ? 'right' : 'left' }}"></i> {{ __('common.back') }}
        </a>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="card sa-card border-0 mb-4">
        <div class="card-body">
            <div class="d-flex align-items-center justify-content-between mb-3">
                <h6 class="mb-0 fw-bold">{{ __('settings.website.programs.add_button') }}</h6>
                <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#addWebsiteProgramForm" aria-expanded="{{ $showAddForm ? 'true' : 'false' }}" aria-controls="addWebsiteProgramForm">
                    <i class="bi bi-plus-lg me-1"></i> {{ __('settings.website.programs.add_button') }}
                </button>
            </div>

            <div class="collapse {{ $showAddForm ? 'show' : '' }}" id="addWebsiteProgramForm">
                <form method="POST" action="{{ route('settings.website.programs.store') }}" enctype="multipart/form-data" class="mt-3">
                    @csrf
                    <div class="row g-3">
                        <div class="col-12 col-md-4">
                            <label class="form-label">{{ __('settings.website.programs.fields.name_ar') }}</label>
                            <input type="text" name="name_ar" class="form-control" value="{{ old('name_ar') }}" required>
                        </div>
                        <div class="col-12 col-md-4">
                            <label class="form-label">{{ __('settings.website.programs.fields.name_en') }}</label>
                            <input type="text" name="name_en" class="form-control" value="{{ old('name_en') }}" required>
                        </div>
                        <div class="col-12 col-md-4">
                            <label class="form-label">{{ __('settings.website.programs.fields.name_ku') }}</label>
                            <input type="text" name="name_ku" class="form-control" value="{{ old('name_ku') }}" required>
                        </div>

                        <div class="col-12 col-md-4">
                            <label class="form-label">{{ __('settings.website.programs.fields.details_ar') }}</label>
                            <textarea name="details_ar" class="form-control" rows="3" required>{{ old('details_ar') }}</textarea>
                        </div>
                        <div class="col-12 col-md-4">
                            <label class="form-label">{{ __('settings.website.programs.fields.details_en') }}</label>
                            <textarea name="details_en" class="form-control" rows="3" required>{{ old('details_en') }}</textarea>
                        </div>
                        <div class="col-12 col-md-4">
                            <label class="form-label">{{ __('settings.website.programs.fields.details_ku') }}</label>
                            <textarea name="details_ku" class="form-control" rows="3" required>{{ old('details_ku') }}</textarea>
                        </div>

                        <div class="col-12 col-md-6">
                            <label class="form-label">{{ __('settings.website.programs.fields.url') }}</label>
                            <input type="url" name="url" class="form-control" value="{{ old('url') }}" required dir="ltr">
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label">{{ __('settings.website.programs.fields.logo') }}</label>
                            <input type="file" name="logo" class="form-control" required>
                        </div>

                        <div class="col-12 d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-save me-1"></i> {{ __('common.save') }}
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="card sa-card border-0">
        <div class="card-body">
            <h6 class="fw-bold mb-3">{{ __('settings.website.programs.list_title') }}</h6>
            @if($programs->isEmpty())
                <div class="text-muted">{{ __('settings.website.programs.empty') }}</div>
            @else
                <div class="table-responsive">
                    <table class="table table-hover align-middle">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>{{ __('settings.website.programs.table.logo') }}</th>
                                <th>{{ __('settings.website.programs.table.name') }}</th>
                                <th>{{ __('settings.website.programs.table.url') }}</th>
                                <th>{{ __('settings.website.programs.table.created_at') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($programs as $program)
                                <tr>
                                    <td>{{ $program->id }}</td>
                                    <td>
                                        <img src="{{ asset('storage/'.$program->logo) }}" alt="{{ $program->name_ar }}" style="width:48px;height:48px;object-fit:cover;border-radius:10px;">
                                    </td>
                                    <td>
                                        <div class="fw-semibold">{{ $program->name_ar }}</div>
                                        <div class="small text-muted">{{ $program->name_en }} | {{ $program->name_ku }}</div>
                                    </td>
                                    <td><a href="{{ $program->url }}" target="_blank" rel="noopener" dir="ltr">{{ $program->url }}</a></td>
                                    <td>{{ $program->created_at?->translatedFormat('Y-m-d h:i A') }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection
