@extends('layouts.admin')

@section('content')
    <div class="container-fluid">
        <!-- Start: Breadcrumb -->
        <nav class="breadcrumb-nav" aria-label="breadcrumb">
            <h4 class="breadcrumb-heading mb-0">{{ $navigation->title }}</h4>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('navigations.index') }}">Navigations</a></li>
                <li class="breadcrumb-item active" aria-current="page">Edit</li>
            </ol>
        </nav>
        <!-- End: Breadcrumb -->
        
        <form method="POST" action="{{ route('navigations.update', encrypt($navigation->id)) }}">
            @method('PUT')
            @csrf
            <div class="row g-4">
                <div class="col-xl-9 col-lg-8">
                    <div class="row row-cols-1 g-4">
                        <div class="col">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row g-4">
                                        <div class="col-xl-12">
                                            <div class="form-group">
                                                <label for="title" class="form-label">Navigation Title *</label>
                                                <input type="text" name="title" class="form-control @error('title') is-invalid @enderror" placeholder="Write some title here..." value="{{ old('title', $navigation->title) }}" required>
        
                                                @error('title')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="card">
                                <div class="card-body">
                                    <div class="title-header">{{ __('Menu items') }}</div>
                                    <div class="row g-4">
                                        <div class="col-xl-12">
                                            <ul class="list-group">
                                                @forelse ($navigation->menus as $menu)
                                                    <li class="list-group-item">
                                                        <div class="d-flex align-items-center">
                                                            <div class="flex-shrink-0">
                                                                <i class="bi bi-grip-vertical fs-5"></i>
                                                            </div>
                                                            <div class="flex-grow-1 ms-3">
                                                                {{ $menu->name }}
                                                            </div>
                                                            <div class="flex-grow-0 ms-3 float-end">
                                                                <button type="button" class="button light text-dark sm border edit-menu" data-id="{{ encrypt($menu->id) }}" data-name="{{ $menu->name }}" data-page_id="{{ $menu->page_id }}">Edit</button>
                                                                <button type="button" class="button light text-danger sm border delete" data-id="{{ encrypt($menu->id) }}">Delete</button>
                                                            </div>
                                                        </div>
                                                    </li>
                                                @empty
                                                    <li class="list-group-item">
                                                        <span>No data</span>
                                                    </li>
                                                @endforelse
                                            </ul>
                                        </div>
                                        <div class="col-xl-12">
                                            <button type="button" class="button dark sm float-end" data-bs-toggle="modal" data-bs-target="#createMenuItem">Add new menu</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-3">
                    <div class="row row-cols-1 g-4">
                        <div class="col">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row g-4">
                                        <div class="col-xl-12">
                                            <div class="form-group">
                                                <label for="icon" class="form-label">Icon</label>
                                                <input type="text" name="icon" class="form-control @error('icon') is-invalid @enderror" placeholder="e.g. Icon (optional)" value="{{ old('icon', $navigation->icon) }}">
        
                                                @error('icon')
                                                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-12">
                    <div class="card position-fb">
                        <div class="card-body">
                            <div class="d-flex justify-content-end gap-3">
                                <a href="{{ route('navigations.index') }}" class="button text-dark">Back</a>
                                <button type="submit" class="button success"><i class="bi bi-send mx-2"></i> Save Changes</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('modals')
    <div class="modal fade" id="createMenuItem" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Add Menu item</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="POST" action="{{ route('menus.store') }}">
                    @csrf
                    <input type="hidden" name="navigation_id" value="{{ encrypt($navigation->id) }}">
                    <div class="modal-body">
                        <div class="row row-cols-1 g-4">
                            <div class="col">
                                <div class="form-group">
                                    <label for="name" class="form-label">Name *</label>
                                    <input type="text" name="name" class="form-control" placeholder="e.g. About Us" required>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <label for="link" class="form-label">Link</label>
                                    <select name="page_id" class="form-control form-select">
                                        @forelse ($pages as $page)
                                            <option value="{{ $page->id }}">{{ $page->name }}</option>
                                        @empty
                                            <option selected disabled>No Data</option>
                                        @endforelse
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="button dark" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="button success">Add</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="editMenuItemModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Edit Menu items</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="POST" action="{{ route('menus.update') }}">
                    @method('PUT')
                    @csrf
                    <input type="hidden" name="id" id="up_id">
                    <input type="hidden" name="navigation_id" value="{{ encrypt($navigation->id) }}">
                    <div class="modal-body">
                        <div class="row row-cols-1 g-4">
                            <div class="col">
                                <div class="form-group">
                                    <label for="name" class="form-label">Name *</label>
                                    <input type="text" name="name" id="name" class="form-control" placeholder="e.g. About Us" required>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <label for="link" class="form-label">Link</label>
                                    <select name="page_id" id="page_id" class="form-control form-select">
                                        @forelse ($pages as $page)
                                            <option value="{{ $page->id }}">{{ $page->name }}</option>
                                        @empty
                                            <option selected disabled>No Data</option>
                                        @endforelse
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="button dark" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="button success">Save changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Confirmation</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="POST" action="{{ route('menus.delete') }}">
                    @method('DELETE')
                    @csrf
                    <input type="hidden" class="form-control" name="id" id="id">
                    <div class="modal-body">
                        <p>This will remove this post from your blog. You will no longer be able to view or edit it once deleted.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="button dark" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="button danger">Delete</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endpush

@push('scripts')
    <script type="text/javascript">
        $(document).on('click', '.edit-menu', function() {
            $('#up_id').val($(this).data('id'));
            $('#name').val($(this).data('name'));
            $('#page_id').val($(this).data('page_id'));
            $('#editMenuItemModal').modal('show');
        });

        $(document).on('click', '.delete', function() {
            $('#id').val($(this).data('id'));
            $('#deleteModal').modal('show');
        });
    </script>
@endpush