@extends('layouts.master')

@section('content')
<div class="container" style="max-width: 900px;">
    <h3 style="font-weight: 800; margin-bottom: 5px;">استيراد وتصدير البيانات</h3>
    <p style="color: #666;">تصدير واستيراد الأغاني والفنانين والطلبات بصيغ Excel/CSV/ODS/JSON</p>
    <hr>

    @include('layouts.errors')

    <div id="flash">
        @if(session('flash_notification'))
            @foreach(session('flash_notification') as $msg)
                <div class="alert alert-{{ $msg->level }}">{{ $msg->message }}</div>
            @endforeach
        @endif
    </div>

    {{-- تصدير --}}
    <div style="background: #bbbbd0; border: 2px solid #9999CC; padding: 1.5rem; margin-bottom: 1.5rem;">
        <h5 style="color: #7777CC; font-weight: 700; margin-bottom: 1rem;">تصدير البيانات</h5>

        <div class="table-responsive">
            <table class="table table-bordered" style="background: #fff;">
                <thead>
                    <tr style="background: #9999CC; color: #fff;">
                        <th>نوع البيانات</th>
                        <th>Excel (.xlsx)</th>
                        <th>CSV (.csv)</th>
                        <th>OpenDocument (.ods)</th>
                        <th>JSON (.json)</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>الأغاني</td>
                        <td><a href="/admin/import-export/export/songs/xlsx" class="btn btn-primary btn-sm">تحميل Excel</a></td>
                        <td><a href="/admin/import-export/export/songs/csv" class="btn btn-secondary btn-sm">تحميل CSV</a></td>
                        <td><a href="/admin/import-export/export/songs/ods" class="btn btn-info btn-sm">تحميل ODS</a></td>
                        <td><a href="/admin/import-export/export/songs/json" class="btn btn-warning btn-sm">تحميل JSON</a></td>
                    </tr>
                    <tr>
                        <td>الفنانين</td>
                        <td><a href="/admin/import-export/export/artists/xlsx" class="btn btn-primary btn-sm">تحميل Excel</a></td>
                        <td><a href="/admin/import-export/export/artists/csv" class="btn btn-secondary btn-sm">تحميل CSV</a></td>
                        <td><a href="/admin/import-export/export/artists/ods" class="btn btn-info btn-sm">تحميل ODS</a></td>
                        <td><a href="/admin/import-export/export/artists/json" class="btn btn-warning btn-sm">تحميل JSON</a></td>
                    </tr>
                    <tr>
                        <td>الطلبات</td>
                        <td><a href="/admin/import-export/export/demands/xlsx" class="btn btn-primary btn-sm">تحميل Excel</a></td>
                        <td><a href="/admin/import-export/export/demands/csv" class="btn btn-secondary btn-sm">تحميل CSV</a></td>
                        <td><a href="/admin/import-export/export/demands/ods" class="btn btn-info btn-sm">تحميل ODS</a></td>
                        <td><a href="/admin/import-export/export/demands/json" class="btn btn-warning btn-sm">تحميل JSON</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    {{-- استيراد --}}
    <div style="background: #bbbbd0; border: 2px solid #9999CC; padding: 1.5rem;">
        <h5 style="color: #7777CC; font-weight: 700; margin-bottom: 1rem;">استيراد البيانات</h5>
        <form method="POST" action="/admin/import-export/import" enctype="multipart/form-data" id="importForm">
            @csrf
            <input type="hidden" name="format" value="excel" id="importFormat">

            <div class="form-group">
                <label>نوع البيانات:</label>
                <select name="type" class="form-control" style="max-width: 300px;">
                    <option value="songs">الأغاني</option>
                    <option value="artists">الفنانين</option>
                </select>
            </div>

            <div class="form-group">
                <label>الملف (Excel/CSV/ODS/JSON):</label>
                <input type="file" name="file" class="form-control-file" accept=".csv,.xlsx,.xls,.ods,.json" required id="importFile">
                <small style="color: #888; display: block; margin-top: 5px;">
                    يجب أن يحتوي الملف على صف عنوان (Header) بالأعمدة الصحيحة.
                    <br>
                    <strong>الأغاني:</strong> title, lyrics, artists (مفصولة بـ & أو , أو +)، views
                    <br>
                    <strong>الفنانين:</strong> name
                    <br>
                    <strong>JSON:</strong>
                    <code style="background: #eee; padding: 2px 4px; direction: ltr;">[{"title":"...","lyrics":"...","artist":"..."}]</code>
                    أو صيغة مجمّعة حسب التصنيف
                </small>
            </div>

            <button type="submit" class="btn btn-success btn-block">استيراد</button>
        </form>
    </div>
</div>

<script>
document.getElementById('importFile').addEventListener('change', function() {
    var form = document.getElementById('importForm');
    var formatInput = document.getElementById('importFormat');
    var fileName = this.value.toLowerCase();
    if (fileName.endsWith('.json')) {
        form.action = '/admin/import-export/import-json';
        formatInput.value = 'json';
        this.name = 'json_file';
    } else {
        form.action = '/admin/import-export/import';
        formatInput.value = 'excel';
        this.name = 'file';
    }
});
</script>
@endsection
