@extends('layouts.app')

@section('content')
<div class="container app-content pt-3">
    <h1 class="h3 mb-4">Settings</h1>
    <div class="py-3 d-md-flex">
        <form method="post" v-on:submit.prevent="purgingCacheEverything" class="mr-md-2 mb-2 mb-md-0">
            @csrf
            <button class="btn btn-outline-danger btn-sm" type="submit">
                <span v-if="process">
                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                    <span class="sr-only">Loading...</span>
                </span>
                <span v-else>Purging cache everything</span>
            </button>
        </form>
    </div>
    <form action="{{ route('admin.option.store') }}" method="post" enctype="multipart/form-data" class="card">
        @csrf
        <div class="card-header">
            <nav id="pills-tab" role="tablist" class="nav nav-pills flex-column flex-sm-row">
                <a id="pills-general-tab" data-toggle="pill" href="#pills-general" role="tab" aria-controls="pills-general" aria-selected="true" class="flex-sm-fill text-sm-center font-weight-bold nav-link active">General</a>
                <a id="pills-advances-tab" data-toggle="pill" href="#pills-advances" role="tab" aria-controls="pills-advances" aria-selected="false" class="flex-sm-fill text-sm-center font-weight-bold nav-link">Advances</a>
            </nav>
        </div>
        <div class="card-body">
            <div id="pills-tabContent" class="tab-content">
                <div id="pills-general" role="tabpanel" aria-labelledby="pills-general-tab" class="tab-pane fade show active">
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label font-weight-bold text-sm-right">Site Name</label>
                        <div class="col-sm-10">
                            <input type="text" name="site_name" class="form-control" value="{{ $options['site_name'] }}">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label font-weight-bold text-sm-right">TMDB API Key</label>
                        <div class="col-sm-10">
                            <input type="text" name="tmdb_key" class="form-control" value="{{ $options['tmdb_key'] }}">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label font-weight-bold text-sm-right">Logo</label>
                        <div class="col-sm-10">
                            <img src="{{ asset_theme($options['logo']) }}" class="img-fluid img-thumbnail mb-3">
                            <div class="custom-file">
                                <input type="file" accept="image/*" name="logo" class="custom-file-input" value="{{ $options['logo'] }}">
                                <label class="custom-file-label">{{ $options['logo'] }}</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label font-weight-bold text-sm-right">Cache</label>
                        <div class="col-sm-10 d-flex flex-column">
                            <select class="form-control" name="is_cache">
                                <option value="true" {{ $options['is_cache'] === 'true' ? 'selected' : '' }}>Yes</option>
                                <option value="false" {{ $options['is_cache'] === 'false' ? 'selected' : '' }}>No</option>
                            </select>
                            <small class="align-self-baseline d-block form-text text-muted">The cache will be stored in a database to avoid inodes of shared hosting.</small>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label font-weight-bold text-sm-right">Expired Cache</label>
                        <div class="col-sm-10 input-group">
                            <input type="number" min="0" name="cache_expired" value="{{ $options['cache_expired'] }}" class="form-control">
                            <div class="input-group-append">
                                <span class="input-group-text">Seconds</span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label font-weight-bold text-sm-right">Max Limit Page Sitemap</label>
                        <div class="col-sm-10">
                            <a href="{{ mopie_route('sitemap') }}" class="small" target="_blank"><i class="fa fa-external-link-alt mr-1"></i> Sitemap</a>
                            <input type="number" min="0" max="500" name="max_limit_page_sitemap" value="{{ $options['max_limit_page_sitemap'] }}" class="form-control">
                            <small class="align-self-baseline d-block form-text text-muted">The number of pages the sitemap will generate. In one page max there are 20 posts.</small>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label font-weight-bold text-sm-right">Auto Redirect Language</label>
                        <div class="col-sm-10 align-items-center d-flex flex-column">
                            <select class="form-control" name="auto_redirect">
                                <option value="true" {{ $options['auto_redirect'] === 'true' ? 'selected' : '' }}>Yes</option>
                                <option value="false" {{ $options['auto_redirect'] === 'false' ? 'selected' : '' }}>No</option>
                            </select>
                            <small class="align-self-baseline d-block form-text text-muted">Will automatically switch languages based on the country code from the IP address used by the user. If the country code is available on this website.</small>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label font-weight-bold text-sm-right">Themes</label>
                        <div class="col-sm-10 align-items-center d-flex flex-column">
                            <select class="form-control" name="theme" value="{{ $options['theme'] }}">
                                @foreach (Storage::disk('theme')->directories() as $theme)
                                    <option value="{{ $theme }}" {{ $options['theme'] == $theme ? 'selected' : '' }}>{{ $theme }}</option>
                                @endforeach
                            </select>
                            <small class="align-self-baseline d-block form-text text-muted">Choose a theme that is available in the "/themes" directory.</small>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label font-weight-bold text-sm-right">Default Language</label>
                        <div class="col-sm-10">
                            <select class="form-control" name="default_lang" value="{{ $options['default_lang'] }}">
                                @foreach ($languages as $lang)
                                    <option value="{{ $lang->locale }}" {{ $options['default_lang'] == $lang->locale ? 'selected' : '' }}>{{ "{$lang->locale} - {$lang->name}" }}</option>
                                @endforeach
                            </select>
                            <small class="align-self-baseline d-block form-text text-muted">Select the location code for the default language used.</small>
                        </div>
                    </div>
                </div>
                <div id="pills-advances" role="tabpanel" aria-labelledby="pills-advances-tab" class="tab-pane fade">
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label font-weight-bold text-sm-right">Block Id Movie</label>
                        <div class="col-sm-10">
                            <textarea rows="3" class="form-control" name="block_movie">{{ implode(PHP_EOL, $options['block_movie']) }}</textarea>
                            <small id="emailHelp" class="form-text text-muted">Enter by line.</small>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label font-weight-bold text-sm-right">Block Id Tv</label>
                        <div class="col-sm-10">
                            <textarea rows="3" class="form-control" name="block_tv">{{ implode(PHP_EOL, $options['block_tv']) }}</textarea>
                            <small id="emailHelp" class="form-text text-muted">Enter by line.</small>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label font-weight-bold text-sm-right">Tracking / Analytic</label>
                        <div class="col-sm-10">
                            <textarea rows="10" class="form-control" style="font-family: monospace;" name="analytic">{{ $options['analytic'] }}</textarea>
                            <small class="form-text text-muted">Will be put before the tag &lt;/body&gt;.</small></div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-2 col-form-label font-weight-bold text-sm-right">Script Header</label>
                        <div class="col-sm-10">
                            <textarea rows="10" class="form-control" style="font-family: monospace;" name="script_header">{{ $options['script_header'] }}</textarea>
                            <small class="form-text text-muted">Will be put before the tag &lt;/head&gt;.</small></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-footer text-right">
            <button type="submit" class="btn btn-primary"><span>Save Changes</span></button>
        </div>
    </form>
</div>

<script>
    $(".custom-file-input").on("change", function() {
      var fileName = $(this).val().split("\\").pop();
      $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
    });
</script>

@endsection

@section('footer')
<script src="//cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="//cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@9.10.12/dist/sweetalert2.all.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/sweetalert2@9.10.12/dist/sweetalert2.min.css">

<script>
    let app = new Vue({
        el: '#app',
        data: {
            process: false,
        },
        methods: {
            purgingCacheEverything() {
                this.process = true
                axios.post("{{ route('admin.option.purgingcache') }}", {})
                    .then((res) => {
                        if (res.data.status === 'oke') {
                            this.process = false
                            Swal.fire({
                                icon: 'success',
                                title: 'Success purging cache everything',
                                showConfirmButton: false,
                                timer: 1500
                            })
                        }
                    })
            }
        }
    })
</script>

<script>

    $("#is_cache").on('change', function() {
        if ($(this).is(':checked')) {
            $(this).attr('value', 'true');
        } else {
            $(this).attr('value', 'false');
        }
    });
</script>
@endsection