@extends('layouts.main-layout')

@section('title')
    Sow App - Edit Category
@endsection

@section('content')
<x-navigation />


<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">
                    <button type="button" id="deleteCategory" class="btn btn-danger">Delete category</button>
                    <input type="submit" value="Update category" class="btn btn-primary">

                    @if($category->belongingclient->count() > 0)
                        @if($category->is_categorie_active && $category->belongingclient[0]->status != 'hidden')
                            <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
                    @else
                        @if($category->is_categorie_active)
                            <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
                    @endif
                </div>
            </form>
        </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",
                    },
                    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",
                    },
                    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",
                    },
                    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