@extends('layouts.app')

@section('title', 'App Maintenance Mode')
@section('breadcrumb', 'Application Setting')
@section('sub-breadcrumb')
    <a class="kt-subheader__breadcrumbs-link">
        List App Maintenance Mode Setting
    </a>
@endsection
@section('app-maintenance-mode', 'kt-menu__item--active')
@section('custom-style')
    <style type="text/css">
        .hidden{
            display: none;
        }
        .value img,
        #input img{
            width: 100px;
        }
        #input img{
            margin-bottom: 15px;
        }
        .color-pallete{
            min-width: 25px;
            max-width: 70px;
            height: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
@stop

@section('content')
    <div class="col-md-12">
        <div class="kt-portlet">
            <div class="kt-portlet__head">
                <div class="kt-portlet__head-label">
                    <h3 class="kt-portlet__head-title">
                        <i class="fa fa-cog"></i> &nbsp; App Maintenance Mode Setting List
                    </h3>
                </div>
            </div>
            <div class="kt-portlet__body">
                @include('layouts.notification')
               {{-- begin: datatable --}}
                <table id="datatable" class="table table-hover" style="width:100%">
                    <thead>
                        <tr>
                            <th style="width=40%;">Key</th>
                            <th>Value</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($settings as $key => $setting)
                            @php
                                $value = $setting['value'];
                                $value_text = $value;

                                // define input type
                                if ($setting['key'] == "maintenance_bg_color") {
                                    $key_text = "Maintenance background color";
                                    $input = "color";
                                    $value = '<div class="color-pallete" style="background-color: '.$value_text.'">'.$value_text.'</div>';
                                }
                                elseif ($setting['key'] == "maintenance_bg_image") {
                                    $key_text = "Maintenance background image";
                                    $input = "image";
                                    if ($value) {
                                        $value_text = env('AWS_URL') . $value;
                                        $value = '<img src="'.$value_text.'" alt="" />';
                                    }
                                }
                                else {
                                    // convert snake case to sentence text
                                    $key_text = ucfirst(str_replace('_', ' ', $setting['key']));
                                    if (strpos($setting['key'], 'date') !== false) {
                                        $input = "date";
                                        // convert date format
                                        if ($value) {
                                            $value_text = date('d/m/Y', strtotime($value));
                                            $value = date('d F Y', strtotime($value));
                                        }
                                    }
                                    else if (strpos($setting['key'], 'image') !== false) {
                                        $input = "image";
                                        if ($value) {
                                            $value_text = env('AWS_URL') . $value;
                                            $value = '<img src="'.$value_text.'" alt="" />';
                                        }
                                    }
                                    else if (strpos($setting['key'], 'content') !== false) {
                                        $input = "textarea";
                                    }
                                    else {
                                        $input = "text";
                                    }
                                }
                            @endphp
                            <tr>
                                <td>
                                    {{ $key_text }}
                                </td>
                                <td class="value">{!! $value !!}</td>
                                <td>
                                    <a class="btn-edit" href="#"
                                        data-toggle="modal" data-target="#modal-edit"
                                        data-key="{{ base64_encode($setting['key']) }}"
                                        data-key-text="{{ $key_text }}"
                                        data-input="{{ $input }}"
                                        data-value="{{ $value_text }}">
                                        <i class='fa fa-edit text-warning'></i>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
               {{-- begin: datatable --}}
                <div class="kt-separator kt-separator--dashed"></div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-edit" tabindex="-1" role="dialog" aria-labelledby="Modal Edit" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Edit App Maintenance Mode</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="{{route('setting.app.maintenance.mode.update')}}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input id="id" type="hidden" name="id">
                    <input id="key" type="hidden" name="key">

                    <div class="modal-body">
                        <div class="form-group">
                            <label>Key</label>
                            <input id="key-text" type="text" name="key_text" class="form-control" disabled>
                        </div>
                        <div class="form-group m-form__group">
                            <label>Value</label>
                            <div id="input">
                                {{-- input will generate by js --}}
                            </div>

                            <div id="input-file" class="custom-file hidden">
                                <input type="file" class="custom-file-input" name="image" id="customFile" accept="image/*">
                                <label class="custom-file-label selected" for="customFile">Choose file</label>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-warning text-white"><i class="flaticon-edit"></i>Edit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection
@section('custom-script')
    <script>
        $('body').on('click', '.btn-edit', function () {
            // get data
            var input = $(this).data('input');
            var key = $(this).data('key');
            var key_text = $(this).data('key-text');
            var value = $(this).data('value');

            var input_elm = '<input id="value" type="text" name="value" class="form-control" value="'+value+'">';
            if (input === "color") {
                input_elm = '<input id="value" type="color" name="value" class="form-control" value="'+value+'">'
            }
            else if (input === "image") {
                input_elm = '<img src="'+value+'" alt=""/>'
                $('#input-file').removeClass('hidden');
            }
            else if (input === "date") {
                input_elm = '<input type="text" name="value" class="form-control"  data-date-format="dd/mm/yyyy"  id="datepicker" autocomplete="off" value="'+value+'">'
            }
            else if (input === "textarea") {
                input_elm = '<textarea name="value" class="form-control" rows="3">'+value+'</textarea>'
            }

            // set input type to modal edit form
            $('#modal-edit #input').html(input_elm);

            // hide input file
            if (input !== "image") {
                $('#input-file').addClass('hidden');
            }

            // set data to modal edit form
            $('#modal-edit #key').val(key);
            $('#modal-edit #key-text').val(key_text);

            if (input === "date") {
                $("#datepicker").datepicker();
            }
        });
    </script>
@endsection