@extends('layouts.main-layout')

@section('title')
    {{ config('app.name') }} - Edit Subcategory
@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 Subcategory - {{ $subcategoire->sub_categorie_name }}</h1>
                    
                    <form action="{{ route('updateSubCategorie', ['id' => $subcategoire->sub_categorie_id]) }}" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="form-group">
                            <label for="Subcategorie name">Subcategorie name</label>
                            <input type="text" name="subcategorie_name" class="form-control" placeholder="Branding" value="{{ $subcategoire->sub_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="deleteSubcategorie" class="btn btn-danger">Delete subcategory</button>

                            @if(!in_array($subcategoire->sub_categorie_id,$subcategoryToHide->toArray()))
                                <button type="button" id="deactivateSubcategorie" class="btn btn-warning">Deactivate subcategory</button>
                            @else
                                <button type="button" id="activateSubcategorie" class="btn btn-success">Activate subcategory</button>
                            @endif

                            <input type="submit" value="Update subcategory" class="btn btn-primary">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $("#deactivateSubcategorie").click(function(e){
            e.preventDefault();

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

            $("#confirmHideSubcategorie").click(function(){
                $.ajax({
                    url: "{{ route('deactivateSubcategorie', ['id' => $subcategoire->sub_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!',
                        });
                    }
                });
            });
        });

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

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

            $("#confirmShowSubCategorie").click(function(){
                $.ajax({
                    url: "{{ route('activateSubCategorie', ['id' => $subcategoire->sub_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!',
                        });
                    }
                });
            });
        });

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

            $("#confirmDeletionOfSubcategorie").click(function(){
                $.ajax({
                    url: "{{ route('deleteSubCategorie', ['id' => $subcategoire->sub_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