@extends('layouts.app')

@section('content')
    <div class="card-header"><span><a href="{{ route('dashboard') }}">{{ __('Dashboard') }}</a></span> >
        <span>{{ __('Prize') }}</span>
    </div>
    <div class="card-body dashboard-card">
        <div class="row">
            <div class="col-md-8 col-12" style="border-right: 2px solid">
                <div class="row">
                    <div class="col-md-2">
                        <button type="button" class="btn" id="addPrizeBtn">Add</button>
                    </div>
                   
                </div>

                <!------- Prizes table----->
                <div class="row mt-4">
                    <h5 class="ml-4"> Prizes List</h5>
                    <div class="col-12 table-responsive">
                        <table class="table table-bordered datatable">
                            <thead>
                                <tr>
                                    <th class="text-center" width="3%">Sl.No</th>
                                    <th width="28%">Category</th>
                                    <th width="35%">Prize</th>
                                    <th width="20%">Url Slug</th>
                                    <th width="10%">Count</th>
                                    <th width="5%">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($prizes as $prize)
                                    <tr>
                                        <td>{{ $loop->index + 1 }}</td>
                                        <td>{{ $prize->category->name }}</td>
                                        <td>{{ $prize->prize }}</td>
                                        <td>{{ $prize->url_slug }}</td>
                                        <td>{{ $prize->total_count }}</td>
                                        <td>
                                            <p>
                                                <span id="view_prize" onclick="viewPrizeDetails({{ $prize->id }})">
                                                    <i class="fa fa-eye" aria-hidden="true"></i>
                                                </span>
                                                @if ($prize->status == 1)
                                                    <span id="view_prize" onclick="deletePrizeDetails({{ $prize->id }})"
                                                        style="color: rgb(182, 8, 8);">
                                                        <i class="fa fa-trash" aria-hidden="true"></i>
                                                    </span>
                                                @endif
                                            </p>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-12">
                <!------- Prize category table----->
                <div class="row">
                    <div class="col-12">
                        <div class="row">
                            <div class="col-8">
                                <h5> Category List</h5>
                            </div>
                            <div class="col-4">
                                <button type="button" class="btn" id="addPrizeCategoryBtn">Add</button>
                            </div>
                        </div>

                    </div>
                    <div class="col-12 table-responsive mt-4 scroll-n-height">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    {{-- <th class="text-center" width="5%">Sl.No</th> --}}
                                    <th width="5%">Sl.No</th>
                                    <th width="50%">Name</th>
                                    <th width="5%">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($categories as $category)
                                    <tr>
                                        <td>{{ $loop->index + 1 }}</td>
                                        <td>{{ $category->name }}</td>

                                        <td>
                                            <p>
                                                <span id="view_category"
                                                    onclick="viewPrizeCategoryDetails({{ $category->id }})">
                                                    <i class="fa fa-eye" aria-hidden="true"></i>
                                                </span>
                                                @if ($category->status == 1)
                                                    <span id="view_category"
                                                        onclick="deletePrizeCategoryDetails({{ $category->id }})"
                                                        style="color: rgb(182, 8, 8);">
                                                        <i class="fa fa-trash" aria-hidden="true"></i>
                                                    </span>
                                                @endif
                                            </p>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

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


    <!---- Prize Category View modal --->
    <div class="modal" id="viewPrizeCategoryModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Category Details</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <form action="#" id="categoryForm" class="form-horizontal" method="post">
                        @csrf
                        <input type="hidden" name="category_id" id="category_id" value="">
                        <div class="row form-group">
                            <div class="col-md-3 col-12">
                                <label>Name</label>
                            </div>
                            <div class="col-md-9 col-12">
                                <input type="text" name="name" id="name" class="form-control"
                                    value="" required />
                            </div>
                        </div>
                       
                    </form>
                    <div class="alert alert-danger mt-2 error_save_prize" style="display: none;"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="savePrizeCategoryBtn">Save</button>

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

    <!---- Prize View modal --->
    <div class="modal" id="viewPrizeModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Prize Details</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <form action="#" id="prizeForm" class="form-horizontal" method="post">
                        @csrf
                        <input type="hidden" name="prize_id" id="prize_id" value="">
                        <div class="row form-group">
                            <div class="col-md-3 col-12">
                                <label>Category</label>
                            </div>
                            <div class="col-md-9 col-12">
                                <select name="prize_category_id" id="prize_category_id" class="form-control" required >
                                    <option>Select</option>
                                    @foreach ($categories as $category)
                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-md-3 col-12">
                                <label>Prize</label>
                            </div>
                            <div class="col-md-9 col-12">
                                <input type="text" name="prize" id="prize" class="form-control"
                                    value="" required />
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-md-3 col-12">
                                <label>Url</label>
                            </div>
                            <div class="col-md-9 col-12">
                                <input type="text" name="url_slug" id="url_slug" class="form-control"
                                    value="" required />
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-md-3 col-12">
                                <label>Count</label>
                            </div>
                            <div class="col-md-9 col-12">
                                <input type="number" name="total_count" id="total_count" class="form-control"
                                    value="" required />
                            </div>
                        </div>
                    </form>
                    <div class="alert alert-danger mt-2 error_save_prize" style="display: none;"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="savePrizeBtn">Save</button>

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

   
@endsection

@section('scripts')
    <script type="text/javascript">
        var s_message = "{{ session('success') }}";
        var e_message = "{{ session('error') }}";

        $(function() {

            var from_date = $('#from_date').val();
            var to_date = $('#to_date').val();

            if (s_message)
                Swal.fire({
                    text: s_message,
                    type: 'success',
                    confirmButtonText: 'Ok',
                    confirmButtonColor: "rgb(174,46,184)"

                });
            if (e_message)
                Swal.fire({
                    text: e_message,
                    type: 'error',
                    confirmButtonText: 'Ok',
                    confirmButtonColor: "rgb(174,46,184)"

                });

            var table = $('.datatable').DataTable();
        });

        // -------------------------Prize---------------------------------
        $("#addPrizeBtn").on("click", function() {
            $('#prizeForm').trigger("reset");
            $(".error_save_prize").hide();
            $("#prize_id").val("");
            $("#savePrizeBtn").show();
            $('#viewPrizeModal').modal('show');
        });

        $("#savePrizeBtn").on("click", function(e) {
            e.preventDefault();
            var url = "";
            if ($("#prize_id").val() == "") {
                url = "{{ route('prize.store') }}";
            } else {
                url = "{{ route('prize.update') }}";
            }
            $.ajax({
                type: "POST",
                url: url,
                data: $('#prizeForm').serialize(),
                success: function(data) {
                    console.log(data);
                    if (data.status == "success") {
                        $('#prizeForm').trigger("reset");
                        $(".error_save_prize").text("");
                        $(".error_save_prize").hide();
                        $('#viewPrizeModal').modal('hide');
                        Swal.fire({
                            text: data.message,
                            type: 'success',
                            confirmButtonText: 'Ok',
                            confirmButtonColor: "#F4C202"

                        }).then((result) => {
                            // Reload the Page
                            location.reload();
                        });
                    } else {
                        $(".error_save_prize").text(data.message);
                        $(".error_save_prize").show();
                    }
                },
                error: function(data) {
                    // console.log('Error:', data);
                }
            });
        });

        function viewPrizeDetails(prize_id) {
            $.ajax({
                type: "POST",
                url: "{{ route('prize.show') }}",
                data: {
                    prize_id: prize_id,
                },
                success: function(data) {
                    console.log(data);
                    if (data.status == "success") {
                        $('#prizeForm').trigger("reset");
                        $(".error_save_prize").text("");
                        $(".error_save_prize").hide();
                        $("#prize_id").val(data.data.id);
                        $("#prize").val(data.data.prize);
                        $("#prize_category_id").val(data.data.prize_category_id);
                        $("#total_count").val(data.data.total_count);
                        $("#url_slug").val(data.data.url_slug);
                        if (data.data.status == 1) {
                            $("#savePrizeBtn").show();
                        } else {
                            $("#savePrizeBtn").hide();
                        }
                        $('#viewPrizeModal').modal('show');

                    }
                },
                error: function(data) {
                    // console.log('Error:', data);
                }
            });
        }

        function deletePrizeDetails(prize_id) {
            Swal.fire({
                title: "Are you sure?",
                text: "You will not be able to recover this!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#F4C202",
                confirmButtonText: "Yes, delete it!",
            }).then((result) => {

                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('prize.delete') }}",
                        type: "POST",
                        data: {
                            prize_id: prize_id,
                        },
                        success: function(data) {
                            if (data.status == "success") {
                                Swal.fire({
                                    text: data.message,
                                    type: 'success',
                                    confirmButtonText: 'Ok',
                                    confirmButtonColor: "#F4C202"

                                }).then((result) => {
                                    // Reload the Page
                                    location.reload();
                                });
                            }
                        },
                        error: function(xhr, ajaxOptions, thrownError) {}
                    });
                }
            });
        }

        // -------------------------Prize Category---------------------------------
        $("#addPrizeCategoryBtn").on("click", function() {
            $('#prizeCategoryForm').trigger("reset");
            $(".error_save_prize").hide();
            $("#prize_id").val("");
            $("#savePrizeCategoryBtn").show();
            $('#viewPrizeCategoryModal').modal('show');
        });

        $("#savePrizeCategoryBtn").on("click", function(e) {
            e.preventDefault();
            var url = "";
            if ($("#category_id").val() == "") {
                url = "{{ route('prize-category.store') }}";
            } else {
                url = "{{ route('prize-category.update') }}";
            }
            $.ajax({
                type: "POST",
                url: url,
                data: $('#categoryForm').serialize(),
                success: function(data) {
                    console.log(data);
                    if (data.status == "success") {
                        $('#categoryForm').trigger("reset");
                        $(".error_save_prize").text("");
                        $(".error_save_prize").hide();
                        $('#viewPrizeModal').modal('hide');
                        Swal.fire({
                            text: data.message,
                            type: 'success',
                            confirmButtonText: 'Ok',
                            confirmButtonColor: "#F4C202"

                        }).then((result) => {
                            // Reload the Page
                            location.reload();
                        });
                    } else {
                        $(".error_save_prize").text(data.message);
                        $(".error_save_prize").show();
                    }
                },
                error: function(data) {
                    // console.log('Error:', data);
                }
            });
        });

        function viewPrizeCategoryDetails(category_id) {
            $.ajax({
                type: "POST",
                url: "{{ route('prize-category.show') }}",
                data: {
                    category_id: category_id,
                },
                success: function(data) {
                    console.log(data);
                    if (data.status == "success") {
                        $('#categoryForm').trigger("reset");
                        $(".error_save_prize").text("");
                        $(".error_save_prize").hide();
                        $("#category_id").val(data.data.id);
                        $("#name").val(data.data.name);
                        if (data.data.status == 1) {
                            $("#savePrizeCategoryBtn").show();
                        } else {
                            $("#savePrizeCategoryBtn").hide();
                        }
                        $('#viewPrizeCategoryModal').modal('show');

                    }
                },
                error: function(data) {
                    // console.log('Error:', data);
                }
            });
        }

        function deletePrizeCategoryDetails(category_id) {
            Swal.fire({
                title: "Are you sure?",
                text: "You will not be able to recover this!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#F4C202",
                confirmButtonText: "Yes, delete it!",
            }).then((result) => {

                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('prize-category.delete') }}",
                        type: "POST",
                        data: {
                            category_id: category_id,
                        },
                        success: function(data) {
                            if (data.status == "success") {
                                Swal.fire({
                                    text: data.message,
                                    type: 'success',
                                    confirmButtonText: 'Ok',
                                    confirmButtonColor: "#F4C202"

                                }).then((result) => {
                                    // Reload the Page
                                    location.reload();
                                });
                            }
                        },
                        error: function(xhr, ajaxOptions, thrownError) {}
                    });
                }
            });
        }

        
    </script>
@endsection