@extends('layouts.master')
@section('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
    <!-- Toastify CSS -->
    <link rel="stylesheet" href="{{ asset('build/assets/libs/toastify-js/src/toastify.css') }}">
@endsection
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <!-- Page Header -->
    @php
        $breadcrumbs = [
            ['label' => 'Dashboard', 'url' => route('admin.dashboard')],
            ['label' => 'Refer Contest', 'url' => route('admin.refercontest.index'), 'active' => false],
            ['label' => 'Completed Product Contest', 'url' => '#', 'active' => true],
        ];
    @endphp
    <x-ui.breadcrumb :items="$breadcrumbs" title="All Refer Contest" />
    <!-- Page Header Close -->

    <!-- Start::row-1 -->
    <div class="row">
        <div class="col-xl-12">
            <x-ui.card :cardClass="'overflow-hidden'" :hr_line="false" title="">
                <x-slot name="header">
                    <div class="card-title d-flex gap-2">
                        <x-form.dropdown label="Bulk Actions">
                            <li><a class="dropdown-item" href="#" id="active" data-id="offer">Active</a></li>
                            <li><a class="dropdown-item" href="#" id="disable" data-id="offer">Disable</a></li>
                        </x-form.dropdown>
                        <div>
                            <input class="form-control" type="text" id="search" placeholder="Search Here"
                                aria-label=".form-control-sm example">
                        </div>
                    </div>
                    {{-- <a href="{{route('admin.refercontest.create')}}" class="btn btn-primary btn-wave add-data">
                        <i class="ri-add-line me-1 align-middle"></i>
                        Add Contest
                    </a> --}}
                </x-slot>

                @php
                    $columns = [
                        ['checkbox' => false, 'class' => 'ps-4','label' => 'ID'],
                        ['label' => 'User'],
                        ['label' => 'Product'],
                        ['label' => 'Product Title'],
                        ['label' => 'Contact Info'],
                        ['label' => 'Delivery Address'],
                        ['label' => 'Current Status'],
                        ['label' => 'Submission Date'],
                        ['label' => 'Last Updated'],
                        ['label' => 'Action'],
                    ];
                @endphp

                <x-ui.table id="mytable" :columns="$columns"></x-ui.table>
            </x-ui.card>
        </div>
    </div>

<x-ui.modal id="update-modal" title="Update Product Delivery Status">
    <form id="update-form" method="POST" action="{{ route('admin.refercontest.updatestatus') }}">
        @csrf
        <input type="hidden" name="id" id="contest_id" >
    <div class="modal-body">
        <label for="status">Select Status</label>
        <select name="status" class="form-control">
            <option value="Proceed">Proceed</option>
            <option value="On The Way">On The Way</option>
            <option value="Delivered">Delivered</option>
        </select>
    </div>    

    @slot('footer')
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" id="submit-rej" class="btn btn-primary">Save Changes</button>
        </form>
    @endslot
</x-ui.modal>      
@endsection

@section('scripts')
    @include('layouts.components.common-script')

    <script>
        $(document).ready(function() {
            const table = new DataTableUtility('mytable', "{{ route('admin.refercontest.completed.data') }}", {
            }, [
                {
                    data: 'id'
                },{
                    data: 'name'
                },
                {
                    data: 'image',
                    render: function(data, type, row) {
                        let url= "{{ asset('uploads/contest')}}/"+data;
                         
                        return `<div class="d-flex">
                                <a href="`+url+ `" target="blank">
                                <span class="avatar avatar-xxl border p-1 bg-light">
                                    <img src="`+url + `" alt="" style="width:100px;">
                                </span>
                                </a>
                            </div>`;
                    }
                },
                
                {
                    data: 'title'
                },
                {
                    data: 'email',
                    render: function(data, type, row) {
                        return `Phone: `+row.phone+`<br/>Email: `+data;
                    }
                },
                {
                    data: 'address'
                },
                 {
                    data: 'status',
                    render: function(data, type, row) {
                        if(data == 'Pending'){
                            return `<span class="badge fw-semibold badge-pill bg-warning text-black fs-11">Pending</span>`;
                        }else if(data == 'Proceed'){
                            return `<span class="badge fw-semibold badge-pill bg-success text-white fs-11">Proceed</span>`;
                        }else {
                            return `<span class="badge fw-semibold badge-pill bg-success text-white fs-11">`+data+`</span>`;
                        }
                    }
                },                 {
                    data: 'created_at',
                    render: function (data, type, row) {
                        if (!data) return '';
                        const d = new Date(data);
                        return d.toLocaleDateString('en-GB', {  // you can change locale
                            year: 'numeric',
                            month: 'short',
                            day: '2-digit',
                            hour: '2-digit',
                            minute: '2-digit'
                        });
                    }
                },                 {
                    data: 'updated_at',
                    render: function(data, type, row) {
                        if (!data) return '';
                        const d = new Date(data);
                        return d.toLocaleDateString('en-GB', {  // you can change locale
                            year: 'numeric',
                            month: 'short',
                            day: '2-digit',
                            hour: '2-digit',
                            minute: '2-digit'
                        });
                    }
                },
                {
                    data: null,
                    orderable: false,
                    render: function(data, type, row) {
                        return `
                            <a href="#" class="btn btn-icon btn-sm btn-info-light btn-wave waves-effect waves-light update-contest" id="${row.id}">
                                <i class="ri-edit-line"></i>
                            </a>
                            <a href="javascript:void(0);" id="` + row.id + `" data-id="refer_contest_log" class="joblist-btn btn btn-icon btn-sm btn-primary2-light btn-wave waves-effect waves-light delete">
                                <i class="ri-delete-bin-line"></i>
                            </a>`;
                    }
                }
            ]);
            table.initialize();

        });
    
           $('body').on('click', '.update-contest', function() {
            const id = $(this).attr('id'); 
            if (id) {
                $('#contest_id').val(id);
                $("#update-modal").modal('show');
                
            } else {
                AjaxUtil.showToast('Invalid ID.', 'error');
            }
        })

    </script>
@endsection