@extends('layouts.main-layout')

@section('content')
<style>
    #template_download{
        background-color: #fff;
        border: 1px solid #2c2e3e !important;
    }
    #filter{
        color: #008080;
    }
    #filter:hover{
        color: #fff !important;
        background-color: #008080 !important;
    }
</style>
{{-- @include('dataTable_items.dataTable_buttons_css')

<!--DATATABLE EXPORT BUTTONS JS -->
@include('dataTable_items.dataTable_buttons') --}}
<div class="row mt-5">
    <div class="col-lg-12">
        {{-- <div class="card card-statistics"> --}}
            <div class="card-body" style="background-color: #fff;">
                <div class=" table-responsive text-dark table-bordered"
                style="min-height: 500px; padding:20px;">
                <div class="row d-flex"
                style="margin-bottom: 20px; margin-right: 5px;">
                </div>
                <div class="row mb-3">
                    <div class="col-md-2 col-sm-4">
                        <label for="">Phone</label>
                        <input class="form-control" type="text" value="{{ $data['phone'] }}" name="phone" id="phone">
                    </div>
                    <div class="col-md-2 col-sm-4">
                        <label for="">Status</label>
                        <select class="form-select form-select-lg text-muted" name="status" id="status">
                            <option value="" selected disabled>-- Status --</option>
                            <option value="success" @if ($data['status'] == 'success')
                                {{ 'selected' }}
                            @endif>Success</option>
                            <option value="failed" @if ($data['status'] == 'failed')
                            {{ 'selected' }}
                        @endif>Failed</option>
                            <option value="picked" @if ($data['status'] == 'picked')
                            {{ 'selected' }}
                        @endif>Pending</option>
                        </select>
                    </div>
                    <div class="col-md-2 col-sm-4">
                        <label for="">Start Date</label>
                        <input class="form-control" type="date" value="{{ $data['start_date'] }}" name="start_date" id="start_date">
                    </div>
                    <div class="col-md-2 col-sm-4">
                        <label for="">End Date</label>
                        <input class="form-control" type="date" value="{{ $data['end_date'] }}" name="end_date" id="end_date">
                    </div>
                    <div class="col-md-3 col-sm-4 d-flex justify-content-center"
                    style="margin-top: 25px;">
                        <div class="mx-1">
                            <button class="btn btn-outline-success" id="filter">Filter</button>
                        </div>
                        <div class="mx-1">
                            <button class="btn btn-outline-danger" id="clear_filter">Clear Filter</button>
                        </div>
                    </div>
                </div>
                <div class="row mb-3" id="error_row">

                </div>
                    {!! $dataTable->table() !!}
                </div>
            </div>
        {{-- </div> --}}
    </div>
</div>

{{ $dataTable->scripts() }}

<script>
    $(document).ready(function () {
        $('#filter').click(function() {
            var phone = $('#phone').val();
            var start_date = $('#start_date').val();
            var end_date = $('#end_date').val();
            var status = $('#status').val();
            // console.log('Phone: ' + phone);
            // console.log('Start Date: ' + start_date);
            // console.log('End Date: ' + end_date);
            if (phone == '' && start_date == '' && end_date == '' && status == null) {
                $('#error_row').html(`
                <span class="alert alert-danger">All the input fields should not be empry</span>
                `)
            } else {
                window.location.href = "/admin/payments?phone="+phone+"&start_date="+start_date+"&end_date="+end_date+"&status="+status;
            }
        })
        $('#clear_filter').click(function() {
            window.location.href = '/admin/payments';
        })
    })
</script>

@endsection