@extends('admin.layout')

@section('content')
<style>
    .download-csv {  text-align:right; float:right; margin-top:12px}
    .date-picker-sec { text-align:left; float:right; margin-top:12px}
    .upload-csv-form1 .form-group {
        float: left;
        vertical-align: middle;
        margin-right: 20px;
    }
 .format-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }

    .format-table th, .format-table td {
        border: 1px solid #ddd;
        padding: 10px;
        text-align: left;
    }
   
</style>
<div class="search-list">
    <div class="content-wrapper search-result-list">  
        <section class="content-header">
            <h1> Data Addition <small></small> </h1>
            <ol class="breadcrumb">
                <li><a href="{{ URL::to('admin/dashboard/this_month')}}"><i class="fa fa-dashboard"></i> Dashboard </a></li>
                <li class="active">Data Addition</li>
            </ol>
        </section>
        <section class="content"> 
            <div class="row">
                <div class="col-md-12">
                    <div class="box box-info"> 
                        <div class="box-body">
                            <div class="row">
                                <div class="col-xs-12">
                                    <div class="">
                                        <div class="col-md-12">
                                            <div class="box-body">
                                                <div class="date-picker-sec">
                                                    <input type="text" name="from_date" id="from_date" value="" class="form-control" placeholder="Date range" readonly="" autocomplete="off">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                 
                    <!-- Table to display the data -->
                    <div class="box">
                        <div class="box-header">
                            <h3 class="box-title">Uploaded Data</h3>
                        </div>
                        <div class="box-body">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>TM Name</th>
                                        <th>TL Name</th>
                                        <th>Schedule</th>
                                        <th>Task</th>
                                        <th>Date</th>
                                        <!-- <th>Action</th> -->
                                    </tr>
                                </thead>
                                <tbody>
                                @if($data->isEmpty())
                                    <tr><td colspan="12" class="text-center">No data found</td></tr>
                                @else
                                    @foreach ($data as $item)
                                    
                                    <tr>
                                        <td>{{ $item->tm_name }}</td>
                                        <td>{{ $item->tl_name }}</td>
                                        <td>{{ $item->date }}</td>
                                        <td>{{ $item->task }}</td>
                                        <td>{{ $item->dynamic_date }}</td>
                                        <!-- <td>
                                            <a href="{{ route('dataAddition.edit', $item->id) }}" class="btn btn-info btn-xs"><i class="fa fa-pencil"></i> </a>
                                            <form action="{{ route('dataAddition.destroy', $item->id) }}" method="POST" style="display:inline;">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger btn-xs" onclick="return confirm('Are you sure you want to delete this item?')"><i class="fa fa-trash"></i></button>
                                            </form>
                                        </td> -->
                                    </tr>
                                    @endforeach
                                    @endif
                                </tbody>
                            </table>
                            
                            {!! $data->appends(request()->input())->links(); !!}
                        </div>
                    </div>

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

<div class="col-xs-12 text-right">
       
</div>

@endsection

@section("scripts")
<script>
    $(function () {
    $('#from_date').daterangepicker({
        opens: 'left',
        locale: { cancelLabel: 'Clear' },
        startDate: moment().subtract(1, 'month').startOf('month'),
        endDate: moment(),
        ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    },
    function (start, end, label) {
        fetchFilteredData(start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'));
    });

    function fetchFilteredData(startDate, endDate) {
        $.ajax({
            url: "{{ route('dataAddition.fetch') }}",
            type: "GET",
            data: { start_date: startDate, end_date: endDate },
            success: function (response) {
                let tableBody = $('tbody');
                tableBody.empty();

                if (response.data.length > 0) {
                    $.each(response.data, function (index, item) {
                        tableBody.append(`
                            <tr>
                                <td>${item.tm_name}</td>
                                <td>${item.tl_name}</td>
                                <td>${item.date}</td>
                                <td>${item.task}</td>
                                <td>${item.dynamic_date}</td>
                            </tr>
                        `);
                    });
                } else {
                    tableBody.html('<tr><td colspan="5" class="text-center">No data found</td></tr>');
                }
            }
        });
    }
});

</script>

@endsection