@extends('layouts.app')

@section('content')
    <div class="card-header"><span><a href="{{ route('dashboard') }}">{{ __('Dashboard') }}</a></span> >
        <span>{{ __('Raffle Draw') }}</span>
    </div>
    <div class="card-body dashboard-card">



        <div class="row">
            <div class="col-md-8 col-12" style="border-right: 2px solid">

                <!------- Filter data by Datewise----->
                <div class="row search-form">
                    <div class="col-md-10">

                        <form id="form" action="{{ route('winners.search') }}" method="POST">
                            @csrf
                            <div class="row">

                                {{-- <div class="ml-2">
                                    <select name="prize_week_id" id="prize_week_id" class="form-control">
                                        <option value="">Select Week</option>

                                        @foreach ($prize_weeks as $prize_week)
                                            <option value="{{ $prize_week->id }}"
                                                {{ $prize_week_id ?? '' == $prize_week->id ? 'selected' : '' }}>
                                                {{ $prize_week->prize_week }}</option>
                                        @endforeach
                                    </select>
                                </div> --}}
                                <div class="ml-2">
                                    <select name="prize_id" id="prize_id" class="form-control">
                                        <option value="">Select Prize</option>
                                        @foreach ($prizes as $prize)
                                            <option value="{{ $prize->id }}"
                                                {{ $prize_id ?? '' == $prize->id ? 'selected' : '' }}>
                                                {{ $prize->prize }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="ml-2">
                                    <button type="submit" class="btn">Search</button>
                                </div>
                                <div class="ml-2">
                                    <button type="button" class="btn refresh_btn"><i class="fa fa-refresh"
                                            aria-hidden="true"></i>
                                    </button>
                                </div>
                            </div>
                        </form>

                    </div>
                    <!------- Export data in table----->
                    <div class="col-md-2">
                        <form id="form" action="{{ route('winners.export') }}" method="get">
                            @csrf
                            <input type="hidden" name="prize_week_id" id="export_prize_week_id" class="form-control"
                                value="{{ $prize_week_id ?? '' }}" />
                            <input type="hidden" name="prize_id" id="export_prize_id" class="form-control"
                                value="{{ $prize_id ?? '' }}" />
                            <button type="submit" class="btn" id="export_btn">Export</button>
                        </form>
                    </div>
                </div>

                <!------- Winners table----->
                <div class="row mt-4">
                    <h5 class="ml-4"> Winners 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="5%">Week</th> --}}
                                    <th width="30%">Prize</th>
                                    <th width="20%">Unique ID</th>
                                    <th width="40%">Name</th>
                                    <th width="2%">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($winners as $winner)
                                    <tr>
                                        <td>{{ $loop->index + 1 }}</td>
                                        {{-- <td>{{ $winner->week->prize_week }}</td> --}}
                                        <td>{{ $winner->prize->prize }}</td>
                                        <td>{{ $winner->user->unique_id }}</td>
                                        <td>{{ $winner->user->name }}</td>
                                        <td>
                                            <span id="view_winner" onclick="viewWinnerDetails('{{ $winner->unique_id }}')">
                                                <i class="fa fa-eye" aria-hidden="true"></i>
                                            </span>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <button type="button" onclick="resetData()"
                        style="color:#f8f9fa;background-color:#f8f9fa!important;border:1px #f8f9fa"> Reset</button>
                    {{-- <button type="button" onclick="resetData()" class="btn" style="width:60px;"> Reset</button> --}}
                </div>
            </div>
            <div class="col-md-4 col-12">
                <!------- Prize table----->
                <div class="row">
                    <div class="col-12">
                        <div class="row">
                            <div class="col-8">
                                <h5> Prize List</h5>
                            </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="10%">Sl.No</th>
                                    <th width="65%">Prize</th>
                                    <th width="20%">Total</th>
                                    <th width="20%">Drawn</th>
                                    {{-- <th width="10%" class="text-center">Status</th> --}}
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($prizes as $prize)
                                    <tr>
                                        <td>{{ $loop->index + 1 }}</td>
                                        <td>{{ $prize->prize }}</td>
                                        <td>{{ $prize->total_count }}</td>
                                        <td>{{ $prize->drawn_count }}</td>
                                        {{-- <td class="text-center">
                                            @if ($prize->status == 0)
                                                <i class="fa fa-check" aria-hidden="true"></i>
                                            @else
                                                <i class="fa fa-hourglass-start" aria-hidden="true"></i>
                                            @endif
                                        </td> --}}

                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>

    </div>

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

                <div class="modal-body">
                    <form action="#" name="winnerForm" id="winnerForm">
                        <h5 class="mb-3 text-center" id="winner_prize"> PRIZE </h5>
                        <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="winner_prize_week" id="winner_prize_week"
                                    class="form-control" value="" readonly />
                            </div>
                        </div>

                        <div class="row form-group">
                            <div class="col-md-3 col-12">
                                <label>Unique ID</label>
                            </div>
                            <div class="col-md-9 col-12">
                                <input type="text" name="winner_unique_id" id="winner_unique_id" class="form-control"
                                    value="" readonly />
                            </div>
                        </div>
                        <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="winner_name" id="winner_name" class="form-control"
                                    value="" readonly />
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-md-3 col-12">
                                <label>Phone</label>
                            </div>
                            <div class="col-md-9 col-12">
                                <input type="text" name="winner_phone" id="winner_phone" class="form-control"
                                    value="" readonly />
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-md-3 col-12">
                                <label>Q-ID</label>
                            </div>
                            <div class="col-md-9 col-12">
                                <input type="text" name="winner_q_id" id="winner_q_id" class="form-control"
                                    value="" readonly />
                            </div>
                        </div>
                        <div class="row form-group">
                            <div class="col-md-3 col-12">
                                <label>Email</label>
                            </div>
                            <div class="col-md-9 col-12">
                                <input type="text" name="winner_email" id="winner_email" class="form-control"
                                    value="" readonly />
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</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();
        });

        // ---------------------------Winner-------------------------------------
        function viewWinnerDetails(unique_id) {
            $.ajax({
                type: "POST",
                url: "{{ route('winner.show') }}",
                data: {
                    unique_id: unique_id,
                },
                success: function(data) {
                    console.log(data);
                    if (data.status == "success") {
                        var winner = data.data.winner;
                        var prize = data.data.prize;
                        var week = data.data.week;
                        $('#winnerForm').trigger("reset");
                        $("#winner_prize").text(prize.prize);
                        $("#winner_prize_week").val(week.prize_week);
                        $("#winner_unique_id").val(winner.unique_id);
                        $("#winner_name").val(winner.name);
                        $("#winner_phone").val(winner.phone);
                        $("#winner_q_id").val(winner.q_id);
                        $("#winner_email").val(winner.email);
                        $('#viewWinnerModal').modal('show');

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


        // Reset winners table
        function resetData() {
            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('reset.raffledraw') }}",
                        type: "GET",
                        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) {}
                    });
                }
            });
        }

        // Refresh date range
        $(".refresh_btn").on("click", function() {
            $('#prize_week_id').val("");
            $('#prize_id').val("");
        });
    </script>
@endsection