@extends('Dashboard/app')

@section('main-content')
    <div class="container mt-5">
        <a href="{{route('dash_create_update')}}" class="btn btn-success">NEW UPDATE</a>
        <hr>     
        <div class="text-end container d-none save-btn" ><input class=" btn btn-warning" type="submit" value="Save" onClick="saveChanges()"></div>


        @foreach ($updates as $item)
            <form class="shadow-sm row p-2 my-5 bg-light show-project-template" method="POST" action="">
                @csrf
                {{method_field('PUT')}}
                <input type="number" class="d-none"  name="update_id" value="{{$item->id}}">
                
                <div class="col-lg-6 col-md-6 col-8 my-2 template-project-name"><span class="lead" style="font-weight: bold">{{$item->title}}</span> 
                 <br>
                 <span class="text-muted" style="font-style: italic">category: <span style="text-transform:uppercase" class="text-warning">{{$item->category}} </span>
                    @if($item->display_start_date) <span class=""> | {{$item->display_start_date}} to {{$item->display_end_date}}</span> @endif
                    @if($item->event_date) <span class=""> | {{$item->event_date}}</span> @endif
                </span>
                </div>
                <div class="col-lg-1 col-md-1 col-2  my-2 "><a href="{{route('dash_edit_update', $item->id)}}" class="fa fa-pencil"></a></div>
                <div class="col-lg-1 col-md-1 col-2  my-2 "><a class="fa fa-trash" onclick="deleteUpdate({{$item->id}})"></a></div>
                {{-- <div class="col-lg-2 col-md-1 col-4  my-2 "><label>Pub <input type="checkbox" onchange="showSaveBtn({{$item->id}})" name="publish" value="publish" @if($item->publish == 'publish') checked  @endif></label></div>
                <div class="col-lg-3 col-md-2 col-5 my-2  row"><span class="fa fa-sort col-3"></span> <input  onchange="showSaveBtn({{$item->id}})"  name="order" class="col-9 text-right border rounded" type="number" value="{{$item->order}}"></div> --}}

            </form>
        @endforeach
    </div>
    <form action="" id="delete_form" class="d-none" method="get"></form>
    {{-- <form action="{{route('additional_category_update')}}" id="update_form" class="d-none" method="POST">
        @csrf
        <input type="text" name="all_categories">       
    </form> --}}
@endsection

@section('footer-scripts')
    <script>
        const deleteUpdate = (id) => {
            var proceed = confirm("Are you sure you wish to delete the item?");
            
            if(proceed){
                $('#delete_form').attr('action', "/admin/delete_update/"+ id);
                $('#delete_form').submit();
                
            }
        }

        const showSaveBtn = (id) => {
            $(".save-btn").removeClass('d-none');
        }
    </script>

    <script>
        const saveChanges = () => {
            var allForms = $('form');
            var formsData = [];

            for(var i = 0; i < (allForms.length - 2); i++) {
                var form = allForms[i];
                var category_id = $(form).find(" input[name='update_id']").val();
                var order =  $(form).find(" input[name='order']").val();
                var publish='';

                if($(form).find(" input[name='publish']").is(':checked')){
                    publish = 'publish'
                }
                

                var tmpArr = {category_id:category_id, order:order, publish:publish};
                formsData.push(tmpArr);
            }
            console.log(JSON.stringify(formsData));
            $('#update_form input:text').val(JSON.stringify(formsData));
            $('#update_form').submit();
        }
    </script>
@endsection