@extends('layouts.app', ['title' => __('FAQ')])
@section('admin_title')
    {{__('FAQ')}}
@endsection
@section('content')
    <div class="header bg-gradient-primary pb-8 pt-5 pt-md-5">
    </div>
    <div class="container-fluid mt--7">
        <div class="row">
            <div class="col">
                <div class="card shadow">
                    <div class="card-header border-0">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <h3 class="mb-0">{{ __('Add New FAQ') }}</h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        @include('partials.flash')
                    </div>

                    <div class="col-xl-12 order-xl-1">
                        <div class="pl-lg-4">
                            <form method="post" action="{{ route('admin.faq.store') }}" enctype="multipart/form-data">
                                @csrf
                                <div class="row mt-3">
                                    <div class="col-sm-6">
                                        <div class="form-group{{ $errors->has('category') ? ' has-danger' : '' }}">
                                            <label class="form-control-label">{{ __('Category') }}</label>
                                            <input type="text" name="category" class="form-control form-control-alternative" value="Top Level" required>
                                        </div>
                                        <div class="form-group{{ $errors->has('main_title') ? ' has-danger' : '' }}">
                                            <label class="form-control-label">{{ __('Main Title') }}</label>
                                            <input type="text" name="main_title" class="form-control form-control-alternative" placeholder="{{ __('Question / heading') }}" required>
                                        </div>
                                        <div class="form-group">
                                            <label class="form-control-label">{{ __('Sub Title') }}</label>
                                            <input type="text" name="sub_title" class="form-control form-control-alternative" placeholder="{{ __('Optional short slug or note') }}">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-control-label">{{ __('Display Order') }}</label>
                                            <input type="number" name="display_order" class="form-control form-control-alternative" value="0">
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label class="form-control-label">{{ __('Type') }}</label>
                                            <select name="type" id="type_select" class="form-control" onchange="faq_type_change(this.value)">
                                                <option value="text">{{ __('Text') }}</option>
                                                <option value="file">{{ __('File') }}</option>
                                            </select>
                                        </div>
                                        <div class="form-group" id="content_field">
                                            <label class="form-control-label">{{ __('Answer / Content') }}</label>
                                            <textarea name="content" rows="5" class="form-control form-control-alternative" placeholder="{{ __('Answer shown to visitors on the FAQ page') }}"></textarea>
                                        </div>
                                        <div class="form-group" id="file_field" style="display:none">
                                            <label class="form-control-label">{{ __('File') }}</label>
                                            <div class="custom-file">
                                                <input type="file" name="file" id="customFileEg1" class="custom-file-input">
                                                <label class="custom-file-label" for="customFileEg1">{{ __('Choose file') }}</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <button type="submit" class="btn btn-success mt-4">{{ __('Save') }}</button>
                                </div><br><br>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col">
                <div class="card shadow">
                    <div class="card-header border-0">
                        <div class="row align-items-center">
                            <div class="col-8">
                                <h3 class="mb-0">{{ __('FAQ List') }}</h3>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table align-items-center table-flush">
                            <thead class="thead-light">
                                <tr>
                                    <th scope="col">{{ __('SL') }}</th>
                                    <th scope="col">{{ __('Category') }}</th>
                                    <th scope="col">{{ __('Main Title') }}</th>
                                    <th scope="col">{{ __('Sub Title') }}</th>
                                    <th scope="col">{{ __('Type') }}</th>
                                    <th scope="col">{{ __('Display Order') }}</th>
                                    <th scope="col">{{ __('Status') }}</th>
                                    <th scope="col">{{ __('Action') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($faqs as $faq)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ $faq->category }}</td>
                                    <td>{{ Str::limit($faq->main_title, 35, '...') }}</td>
                                    <td>{{ $faq->sub_title }}</td>
                                    <td>{{ ucfirst($faq->type) }}</td>
                                    <td>{{ $faq->display_order }}</td>
                                    <td>
                                        <label class="toggle-switch" for="statusCheckbox{{$faq->id}}">
                                            <input type="checkbox" onclick="location.href='{{route('admin.faq.status',[$faq->id,$faq->status?0:1])}}'" class="toggle-switch-input" id="statusCheckbox{{$faq->id}}" {{$faq->status?'checked':''}}>
                                            <span class="toggle-switch-label">
                                                <span class="toggle-switch-indicator"></span>
                                            </span>
                                        </label>
                                    </td>
                                    <td>
                                        <a href="{{route('admin.faq.edit',[$faq->id])}}" class="btn btn-primary btn-sm">{{ __('crud.edit') }}</a>
                                        <a onclick="return confirm('{{ __('Are you sure you want to delete this FAQ? This is irreversible.') }}')" href="{{ route('admin.faq.remove',$faq->id)}}" class="btn btn-danger btn-sm">{{ __('crud.delete') }}</a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="card-footer py-4">
                        <nav class="d-flex justify-content-end" aria-label="...">
                            {{ $faqs->links() }}
                        </nav>
                    </div>
                </div>
            </div>
        </div>
        @include('layouts.footers.auth')
    </div>
@endsection
@section('js')
<script>
$("#customFileEg1").change(function () {
    $(this).next('.custom-file-label').html(this.files[0] ? this.files[0].name : '{{ __("Choose file") }}');
});
function faq_type_change(type) {
    if (type === 'file') {
        $('#content_field').hide();
        $('#file_field').show();
    } else {
        $('#content_field').show();
        $('#file_field').hide();
    }
}
faq_type_change($('#type_select').val());
</script>
@endsection