@extends('layouts.app')

@section('content')
    <style>
        <style>.switch {
            position: relative;
            display: inline-block;
            width: 42px;
            height: 22px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            inset: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 22px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        input:checked+.slider {
            background-color: #28a745;
        }

        input:checked+.slider:before {
            transform: translateX(20px);
        }
    </style>

    </style>
    <div class="page-wrapper">
        <div class="row page-titles">

            <div class="col-md-5 align-self-center">
                <h3 class="text-themecolor">{{ trans('lang.craving_category_plural') }}</h3>
            </div>
            <div class="col-md-7 align-self-center">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ url('/dashboard') }}">{{ trans('lang.dashboard') }}</a></li>
                    <li class="breadcrumb-item"><a href="{!! route('craving-category.index') !!}">{{ trans('lang.craving_category_plural') }}</a></li>
                    <li class="breadcrumb-item active">{{ trans('lang.category_edit') }}</li>
                </ol>
            </div>
        </div>

        <div class="container-fluid">
            <div class="cat-edite-page max-width-box">
                <form action="{{ route('craving-category.update', $category->id) }}" method="POST"
                    enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="card  pb-4">

                        <div class="card-header">
                            <ul class="nav nav-tabs align-items-end card-header-tabs w-100">
                                <li role="presentation" class="nav-item">
                                    <a href="#category_information" aria-controls="description" role="tab"
                                        data-toggle="tab"
                                        class="nav-link active">{{ trans('lang.category_information') }}</a>
                                </li>
                                {{-- <li role="presentation" class="nav-item">
                                <a href="#review_attributes" aria-controls="review_attributes" role="tab"
                                   data-toggle="tab"
                                   class="nav-link">{{trans('lang.reviewattribute_plural')}}</a>
                            </li> --}}
                            </ul>
                        </div>
                        <div class="card-body">

                            <div id="data-table_processing" class="dataTables_processing panel panel-default"
                                style="display: none;">{{ trans('lang.processing') }}</div>
                            <div class="error_top" style="display:none"></div>
                            @include('alerts.error_messages')
                            <div class="row restaurant_payout_create" role="tabpanel">

                                <div class="restaurant_payout_create-inner tab-content">
                                    <div role="tabpanel" class="tab-pane active" id="category_information">
                                        <fieldset>
                                            <legend>{{ trans('lang.category_edit') }}</legend>
                                            <div class="form-group row width-100">
                                                <label class="col-3 control-label">{{ trans('lang.category_name') }}</label>
                                                <div class="col-7">
                                                    <input type="text" class="form-control cat-name" name="name"
                                                        value="{{ old('name', $category->name) }}">
                                                    <div class="form-text text-muted">
                                                        {{ trans('lang.category_name_help') }} </div>
                                                </div>
                                            </div>

                                            <div class="form-group row width-100">
                                                <label
                                                    class="col-3 control-label ">{{ trans('lang.category_description') }}</label>
                                                <div class="col-7">
                                                    <textarea rows="7" class="category_description form-control" id="category_description" name="description">{{ $category->description }}</textarea>
                                                    <div class="form-text text-muted">
                                                        {{ trans('lang.category_description_help') }}</div>
                                                </div>
                                            </div>

                                            <div class="form-group row width-100">
                                                <label
                                                    class="col-3 control-label ">{{ trans('lang.parent_category') }}</label>
                                                <div class="col-7">
                                                    <select rows="7" class="parent_category form-control"
                                                        id="parent_category" name="parent_id">
                                                        <option value="">{{ trans('lang.select_parent_category') }}
                                                        </option>
                                                        @foreach ($categories as $_category)
                                                            @php
                                                                $selected = '';
                                                                if (
                                                                    old('parent_id', $category->parent_id) ==
                                                                    $_category->id
                                                                ) {
                                                                    $selected = 'selected';
                                                                }
                                                            @endphp
                                                            <option value="{{ $_category->id }}" {{ $selected }}>
                                                                {{ $_category->full_name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    {{-- <div class="form-text text-muted">
                                                        {{ trans('lang.parent_category_help') }}
                                                    </div> --}}
                                                </div>
                                            </div>

                                            <div class="form-group row width-100">
                                                <label
                                                    class="col-3 control-label">{{ trans('lang.display_order') }}</label>
                                                <div class="col-7">
                                                    <input type="number" value="{{ $category->display_order }}" min=0
                                                        class="form-control cat-name" name="display_order">
                                                    <div class="form-text text-muted">
                                                        {{ trans('lang.display_order_help') }}
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- Category Image -->
                                            <div class="form-group row width-100">
                                                <label
                                                    class="col-3 control-label">{{ trans('lang.category_image') }}</label>
                                                <div class="col-7">
                                                    <input type="file" id="category_image" name="image">
                                                    <div id="uploding_image"></div>
                                                    <div class="form-text text-muted w-50">
                                                        {{ trans('lang.category_image_help') }}</div>
                                                </div>
                                            </div>
                                            @if ($category->getMedia('images')->count())
                                                <table class="table mt-3">
                                                    <thead>
                                                        <tr>
                                                            <th>{{ trans('lang.image') }}</th>
                                                            <th>{{ trans('lang.actions') }}</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($category->getMedia('images') as $media)
                                                            <tr>
                                                                <td>
                                                                    <img src="{{ $media->getUrl() }}" alt="category_image"
                                                                        class="img-thumbnail" style="width: 150px;">
                                                                </td>
                                                                <td>
                                                                    <button type="button" class="btn btn-danger btn-sm"
                                                                        onclick="deleteMedia('{{ route('craving-category.media.destroy', [$category->id, $media->id]) }}')">
                                                                        ✕ Delete
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            @endif


                                            <div class="form-check row width-100">
                                                <input type="checkbox" class="is_active" id="is_active" name="is_active"
                                                    value="1" {{ $category->is_active == 1 ? 'checked' : '' }}>
                                                <label class="col-3 control-label"
                                                    for="is_active">{{ trans('lang.is_active') }}</label>
                                            </div>
                                            <input type="hidden" class="is_consumable" name="is_consumable"
                                                value="1" />


                                        </fieldset>
                                    </div>

                                    {{-- <div role="tabpanel" class="tab-pane" id="review_attributes">

                                </div> --}}
                                </div>

                            </div>

                        </div>
                        <div class="form-group col-12 text-center btm-btn">
                            <button type="submit" class="btn btn-primary save_category_btn"><i class="fa fa-save"></i>
                                {{ trans('lang.save') }}</button>
                            <a href="{!! route('craving-category.index') !!}" class="btn btn-default"><i
                                    class="fa fa-undo"></i>{{ trans('lang.cancel') }}</a>
                        </div>

                    </div>
                </form>
            </div>
        </div>
    </div>



@endsection

@section('scripts')
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>




    <script>
        var id = "";



            jQuery("#data-table_processing").show();



            jQuery("#data-table_processing").hide();





        var storageRef = firebase.storage().ref('images');


        function deleteMedia(deleteUrl) {
            if (confirm('Are you sure you want to delete this image?')) {
                fetch(deleteUrl, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                }).then(response => {
                    if (response.ok) {
                        location.reload(); // Reload to update the UI
                    } else {
                        alert('Failed to delete image.');
                    }
                });
            }
        }
    </script>
@endsection