@extends('layouts.main-layout')

@section('title')
    {{ config('app.name') }} - Edit Category
@endsection

@section('content')

<div class="content-wrap">
    <div class="main">
        <div class="container">
            <div class="row justify-content-center my-5">
                <div class="col-lg-12 my-5">

                    <x-error-success-messages />

                    <h1 class="text-center mb-5">Edit Category - {{ $category->categorie_name }}</h1>
                    
                    <form action="{{ route('updateCategory', ['id' => $category->categorie_id]) }}" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="form-group">
                            <label for="Category name">Category name</label>
                            <input type="text" name="category_name" class="form-control" placeholder="Branding" value="{{ $category->categorie_name }}" required>
                        </div>

                        <div class="form-group d-flex justify-content-between my-5">
                            @if($client_id)
                                <input type="hidden" name="customize_for_client_id" value="{{ $client_id }}">
                            @endif

                            <button type="button" id="deleteCategory" class="btn btn-danger">Delete category</button>

                            @if(!in_array($category->categorie_id, $categoryToHide))
                                <button type="button" id="deactivateCategory" class="btn btn-warning">Deactivate category</button>
                            @else
                                <button type="button" id="activateCategory" class="btn btn-success">Activate category</button>
                            @endif

                            <input type="submit" value="Update category" class="btn btn-primary">
                        
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $("#deactivateCategory").click(function(e){
            e.preventDefault();

            Swal.fire({
                title: "Are you sure you want to hide this category from clients?",
                icon: "warning",
                html: '<div class="d-flex justify-content-between">'+
                        '<p class="text-danger text-decoration-none btn btn-link" id="confirmHideCategory">Confirm</p>'+
                        '<p href="#" class="text-primary text-decoration-none btn btn-link" onclick="Swal.close()">Close</p>'+
                    '</div>',
                showCancelButton: false,
                showConfirmButton: false
            });

            $("#confirmHideCategory").click(function(){
                $.ajax({
                    url: "{{ route('deactivateCategory', ['id' => $category->categorie_id]) }}",
                    method: "PUT",
                    data: {
                        _token: "{{ csrf_token() }}",
                        _method: "PUT",
                        customize_for_client_id: "{{ $client_id }}"
                    },
                    success: function(data){
                    var res = JSON.parse(data);

                    if(res.success){
                        window.location.href = "{{ route('viewAllData') }}";
                    }
                    },
                    error: function(data){
                        console.log("Error occured: ", data);

                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: 'Something went wrong, please try again later!',
                        });
                    }
                });
            });
        });

        $("#activateCategory").click(function(e){
            e.preventDefault();

            Swal.fire({
                title: "Are you sure you want to show this category to clients?",
                icon: "warning",
                html: '<div class="d-flex justify-content-between">'+
                        '<p class="text-danger text-decoration-none btn btn-link" id="confirmShowCategory">Confirm</p>'+
                        '<p href="#" class="text-primary text-decoration-none btn btn-link" onclick="Swal.close()">Close</p>'+
                    '</div>',
                showCancelButton: false,
                showConfirmButton: false
            });

            $("#confirmShowCategory").click(function(){
                $.ajax({
                    url: "{{ route('activateCategory', ['id' => $category->categorie_id]) }}",
                    method: "PUT",
                    data: {
                        _token: "{{ csrf_token() }}",
                        _method: "PUT",
                        customize_for_client_id: "{{ $client_id }}"
                    },
                    success: function(data){
                    var res = JSON.parse(data);

                    if(res.success){
                        window.location.href = "{{ route('viewAllData') }}";
                    }
                    },
                    error: function(data){
                        console.log("Error occured: ", data);

                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: 'Something went wrong, please try again later!',
                        });
                    }
                });
            });
        });

        $("#deleteCategory").click(function(e){
            Swal.fire({
                title: "Are you sure you want to delete this category?",
                icon: "warning",
                html: '<div class="d-flex justify-content-between">'+
                        '<p class="text-danger text-decoration-none btn btn-link" id="confirmDeletionOfCategory">Confirm</p>'+
                        '<p href="#" class="text-primary text-decoration-none btn btn-link" onclick="Swal.close()">Close</p>'+
                    '</div>',
                showCancelButton: false,
                showConfirmButton: false
            });

            $("#confirmDeletionOfCategory").click(function(){
                $.ajax({
                    url: "{{ route('deleteCategory', ['id' => $category->categorie_id]) }}",
                    method: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        _method: "DELETE",
                        customize_for_client_id: "{{ $client_id }}"
                    },
                    success: function(data){
                    var res = JSON.parse(data);

                    if(res.success){
                        window.location.href = "{{ route('viewAllData') }}";
                    }
                    },
                    error: function(data){
                        console.log("Error occured: ", data);

                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: 'Something went wrong, please try again later!',
                        });
                    }
                });
            });
        });
    });
</script>
@endsection