@extends('admin.master_layout')
@section('title')
    <title>{{ __('Update Page') }}</title>
@endsection
@section('admin-content')
    <div class="main-content">
        <section class="section">
            <x-admin.breadcrumb title="{{ __('Update Page') }}" :list="[
                __('Dashboard') => route('admin.dashboard'),
                __('Customizable Page List') => route('admin.custom-pages.index'),
                __('Update Page') => '#',
            ]" />
            <div class="section-body">
                <div class="mt-4 row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between">
                                <x-admin.form-title :text="__('Update Page')" />
                                <div>
                                    <x-admin.back-button :href="route('admin.custom-pages.index')" />
                                </div>
                            </div>
                            <div class="card-body">
                                <form action="{{ route('admin.custom-pages.update', $page->id) }}" method="POST">
                                    @csrf
                                    @method('PUT')
                                    <div class="row">
                                        <div class="form-group col-md-12">
                                            <x-admin.form-input id="title" name="title" label="{{ __('Title') }}"
                                                placeholder="{{ __('Enter Title') }}"
                                                value="{{ old('title', $page->title) }}" required="true" />
                                        </div>

                                        <div class="form-group col-md-12">
                                            <x-admin.form-editor id="description" name="description"
                                                label="{{ __('Description') }}" value="{!! old('description', $page->description) !!}"
                                                required="true" />
                                        </div>

                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <x-admin.update-button :text="__('Update')" />
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header d-flex justify-content-between">
                                <x-admin.form-title :text="__('Manage Items')" />
                                <div class="text-right">
                                    <form @adminCan('page.component.add') action="{{ route('admin.custom-pages.items.store') }}"
                                        @endadminCan method="post">
                                        @csrf
                                        <input type="hidden" name="page_id" value="{{ $page->id }}">
                                        <div class="row">
                                            <div class="col-md-7">
                                                <x-admin.form-select id="component_name" name="component_name"
                                                    class="form-select">
                                                    <x-admin.select-option value=""
                                                        text="{{ __('Add New Component') }}" />
                                                    @foreach ($components as $component)
                                                        <x-admin.select-option value="{{ $component->file }}"
                                                            text="{{ $component->name }}" />
                                                    @endforeach
                                                </x-admin.form-select>
                                            </div>
                                            <div class="col-md-5">
                                                <x-admin.button type="submit" :text="__('Add Component')" />
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-striped" id="sortable-table">
                                        <thead>
                                            <tr>
                                                <th class="text-center">
                                                    {{ __('Reposition') }}
                                                </th>
                                                <th>{{ __('Title') }}</th>
                                                <th>{{ __('Component') }}</th>
                                                <th>{{ __('Status') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody class="ui-sortable">
                                            @foreach ($page->items as $item)
                                                <tr id="id-{{ $item->id }}">
                                                    <td class="text-center align-middle">
                                                        <div class="sort-handler ui-sortable-handle">
                                                            <i class="fas fa-hand-rock"></i>
                                                        </div>
                                                    </td>

                                                    <td>{{ $item->title ?? '' }}</td>

                                                    <td>
                                                        {{ $item->component_name ?? '' }}
                                                    </td>

                                                    <td>
                                                        <input @adminCan('page.update')
                                                                onchange="changeStatus({{ $item->id }})"
                                                            @endadminCan id="status_toggle" type="checkbox"
                                                            {{ $item->status ? 'checked' : '' }} data-toggle="toggle"
                                                            data-onlabel="{{ __('Active') }}"
                                                            data-offlabel="{{ __('Inactive') }}" data-onstyle="success"
                                                            data-offstyle="danger">
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection

@push('js')
    <script src="{{ asset('backend/js/jquery-ui.min.js') }}"></script>
    <script>
        "use strict";

        function deleteData(id) {
            $("#deleteForm").attr("action", "{{ url('/admin/custom-pages/items/') }}" + "/" + id)
        }
        "use strict";

        function changeStatus(id) {
            var isDemo = "{{ env('APP_MODE') ?? 'LIVE' }}";
            if (isDemo == 'DEMO') {
                toastr.error("{{ __('This Is Demo Version. You Can Not Change Anything') }}");
                return;
            }
            $.ajax({
                type: "put",
                data: {
                    _token: '{{ csrf_token() }}',
                },
                url: "{{ url('/admin/custom-pages/items/status-update') }}" + "/" + id,
                success: function(response) {
                    if (response.success) {
                        toastr.success(response.message);
                    } else {
                        toastr.warning(response.message);
                    }
                },
                error: function(err) {
                    handleFetchError(err);
                }
            });
        }
    </script>
    @adminCan('page.update')
        <script>
            (function($) {
                "use strict";
                $("#sortable-table tbody").sortable({
                    handle: '.sort-handler',
                    update: function(e, u) {
                        var data = $(this).sortable('serialize');
                        $.ajax({
                            url: "{{ route('admin.custom-pages.items.sortPageItems', $page->id) }}",
                            type: 'get',
                            data: data,
                            success: function(response) {
                                if (response.status) {
                                    toastr.success(response.message);
                                } else {
                                    toastr.warning(response.message);
                                }
                            },
                        });
                    }
                });
            })(jQuery);
        </script>
    @endadminCan
@endpush