@extends('layouts.admin.app')
@section('page-title')
    {{ __('Dashboard') }}
@endSection
@section('page-nav-title')
    <div class="app-title">
        <div>
            <h1><i class="fa fa-dashboard"></i>{{ __('alsundos-seo') }}</h1>
            <p>{{ __('create-seo') }}</p>
        </div>
        <ul class="app-breadcrumb breadcrumb">
            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="#">{{ __('Dashboard') }}</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.seo.index') }}">{{ __('seo') }}</a></li>
            <li class="breadcrumb-item"><a href="#">{{ __('Create') }}</a></li>
        </ul>
    </div>
@endsection

@section('css-links')
    <link rel="stylesheet" href="{{ asset('assets/css/utils/week_days.css') }}">
    <link rel="stylesheet" type="text/css"
        href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-10 m-auto">
            <div class="tile">
                <h3 class="tile-title">{{ __('create-seo') }}</h3>
                <form method="post" action="{{ route('admin.seo.store') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-lg-6 form-group">
                            <label for="page" class="required">{{ __('page') }}</label>
                            <select class="form-control" id="page" name="page_id"
                                style="margin-bottom: 24px">
                                <option></option>
                                @foreach ($pages as $page)
                                    @php
                                        $pageName = $page['page_' . App::getLocale()];
                                    @endphp

                                    <option value="{{ $page->id }}" @if (old('page') == $page->id) selected @endif>
                                        {{ $pageName }}{{ ' ' }}({{ rtrim(config('app.website_baseurl'), '/') . $page->pathname }})
                                    </option>
                                @endforeach
                            </select>

                            @error('page_id')
                                <div class="input-error" style="padding-top: 15px">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row">
                        <div id="subpage-container" class="col-lg-12">
                            <div class="form-group">
                                <label class="control-label">{{ __('subpage') }}</label>
                                <select id="subpage" name="subpage_id" class="custom-select form-control-border">
                                </select>
                            </div>

                            @error('subpage_id')
                                <div class="input-error">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="control-label">{{ __('en-title') }}</label>
                                <input class="form-control @if ($errors->has('title_en')) is-invalid @endif"
                                    type="text" name="title_en" placeholder="{{ __('enter-en-title') }}"
                                    value="{{ inputValue('title_en') }}">
                            </div>
                            @error('title_en')
                                <div class="input-error">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="control-label">{{ __('ar-title') }}</label>
                                <input class="form-control @if ($errors->has('title_ar')) is-invalid @endif"
                                    type="text" name="title_ar" placeholder="{{ __('enter-ar-title') }}"
                                    value="{{ inputValue('title_ar') }}">
                            </div>
                            @error('title_ar')
                                <div class="input-error">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="control-label">{{ __('en-description') }}</label>
                                <textarea class="form-control @if ($errors->has('descreption_en')) is-invalid @endif" name="descreption_en"
                                    placeholder="{{ __('enter-en-description') }}" value="{{ inputValue('descreption_en') }}">{{ inputValue('descreption_en') }}</textarea>
                            </div>
                            @error('descreption_en')
                                <div class="input-error">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="control-label">{{ __('ar-description') }}</label>
                                <textarea class="form-control @if ($errors->has('descreption_ar')) is-invalid @endif" name="descreption_ar"
                                    placeholder="{{ __('enter-ar-description') }}" value="{{ inputValue('descreption_ar') }}">{{ inputValue('descreption_ar') }}</textarea>
                            </div>
                            @error('descreption_ar')
                                <div class="input-error">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="control-label">{{ __('en-keywords') }}</label>
                                <textarea class="form-control @if ($errors->has('keywords_en')) is-invalid @endif" name="keywords_en"
                                    placeholder="{{ __('enter-en-keywords') }}" value="{{ inputValue('keywords_en') }}">{{ inputValue('keywords_en') }}</textarea>
                            </div>
                            @error('keywords_en')
                                <div class="input-error">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label class="control-label">{{ __('ar-keywords') }}</label>
                                <textarea class="form-control @if ($errors->has('keywords_ar')) is-invalid @endif" name="keywords_ar"
                                    placeholder="{{ __('enter-ar-keywords') }}" value="{{ inputValue('keywords_ar') }}">{{ inputValue('keywords_ar') }}</textarea>
                            </div>
                            @error('keywords_ar')
                                <div class="input-error">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="tile-footer">
                        <button type="submit" class="btn btn-primary">
                            <i class="fa fa-fw fa-lg fa-check-circle"></i> {{ __('Create') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(function() {
            $('#images').hide();
            $('#videos').hide();
            $('#option').change(function() {
                if ($('#option').val() == 'image') {
                    $('#images').show();
                    $('#videos').hide();
                } else {
                    $('#videos').show();
                    $('#images').hide();

                }
            });
        });

        $('#subpage-container').hide();
        $('#page').change((e) => {
            const pageId = e.target.value;

            $.ajax({
                type: "GET",
                url: '{{ route('seo.subpages', ['page_id' => '__page_id']) }}'.replace('__page_id',
                    pageId),
                dataType: "json",
                success: function(payload) {
                    $('#subpage').empty();

                    if (payload.data.length === 0) {
                        $('#subpage-container').hide();
                        return;
                    }

                    $('#subpage-container').show();
                    $('#subpage').append(
                        '<option selected disabled>{{ __('select-subpage') }}</option>');
                    $.each(payload.data, function(key, opt) {
                        $('#subpage').append('<option value="' + opt.id + '">' + opt.title +
                            '</option>');
                    });
                },
                error: function(xhr, textStatus, errorThrown) {
                    console.error('Error getting subpages:', errorThrown);
                }
            });
        });
    </script>

    <script>
        let showPagesMenu = false

        $('#pages-menu__btn').click((e) => {
            if (e.target === e.currentTarget) {
                toggleMenu()
            }
        });

        function toggleMenu() {
            showPagesMenu = !showPagesMenu
            if (showPagesMenu) {
                $('#pages-menu').css('display', 'block')
            } else {
                $('#pages-menu').css('display', 'none')
            }
        }

        $('.pages-menu__item').click(function(e) {
            const val = $(this).data('value')
            const name = $(this).data('name')
            $('#pages-menu__input').attr('value', val)
            $('#pages-menu__btn').html(name)
            toggleMenu()
        });

        $('pages-menu__input').change((e) => {

        })
    </script>

    <script>
        $('#page').select2({
            placeholder: "{{ __('select-type') }}",
            width: "100%",
        })
    </script>
@endsection