@extends('user.layouts.template')

@section('style')
   <style>
        /*------New Css for User Dashboard-----*/

.dataTables_wrapper{
    overflow: auto;
}

        /*---Data Tables----*/

        table.dataTable {
            position: relative;
            top: 10px;
            margin-bottom: 30px;
            font-size:14px!important;
            text-align: center;
        }

        table.dataTable tbody th,
        table.dataTable tbody td {
            padding: 15px 10px;
        }

        table.dataTable>thead>tr>th, table.dataTable>thead>tr>td {
    padding: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    text-align: center;
}
    /*----Checkbox styles---*/
    /* Hide the default checkbox */
    .custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    }

    /* Create custom checkmark */
    .custom-checkbox {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 16px;
    user-select: none;
    }

    /* Style the square box */
    .custom-checkbox .checkmark {
    position: absolute;
    left: 0;
    top: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
    border: 2px solid #ccc;
    border-radius: 4px;
    transition: background-color 0.2s;
    }

    /* On hover */
    .custom-checkbox:hover input ~ .checkmark {
    background-color: #f3f3f3;
    }

    /* When checkbox is checked */
    .custom-checkbox input:checked ~ .checkmark {
    background-color: #4caf50;
    border-color: #4caf50;
    }

    /* Add checkmark icon */
    .custom-checkbox .checkmark::after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    }

    /* Show checkmark when checked */
    .custom-checkbox input:checked ~ .checkmark::after {
    display: block;
    }
    /* End Checkbox styles */
    </style>
@endsection

@section('content')
<!-- Content Start -->
		 <div class="content__boxed">
                <div class="content__wrap">

                    <div id="page-titl">


                    </div>

                    <div class="row">
                        <div class="col-12">
                            <div class="page-title-box">
                                <div class="le-tit">

                                </div>

                                <div class="right-tit d-flex">
                                </div>



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

                    <div class="card p-2">
                        <div class="row mb-3">
                            <div class="col-12">
                                <div class="expexcel"></div>
                                <button class="btn btn-md btn-primary export" style="float: right;">Export</button>
                            </div>
                        </div>

                        <table id="property-list" class="display" style="width:100%">
                            <thead>
                               <tr>
                                 
                                  <th>Property Name</th>
                                  <th>Property ID</th>
                                  <th>City</th>
                                  <th>State</th>
                                  <th>Property Type</th>
                                  <th class="text-center">Action</th>
                               </tr>
                            </thead>
                            <tbody>

                            @foreach($properties as $property)
                                <tr>
                                    <td>{{ $property->name }}</td>
                                    <td>{{ $property->prop_id }}</td>
                                    <td>{{ $property->city }}</td>
                                    <td>{{ $property->state }}</td>
                                    <td>{{ $property->type }}</td>
                                    <td>
                                        <label class="custom-checkbox">
                                            <input type="checkbox" value="{{ $property->id }}">
                                            <span class="checkmark"></span>
                                        </label>
                                    </td>
                                </tr>
                                @endforeach
                              

                            </tbody>
                         </table>



                    </div>




                </div>
            </div>
            <!-- Content End -->
@endsection

@section('script')
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
        $(document).ready(function () {
        var myTable =  $('#property-list').DataTable({
              "paging": true,             // Enable pagination
              "searching": true,          // Enable search box
              "ordering": true,           // Enable sorting
              "info": true,               // Show table info
              "lengthMenu": [8, 10, 25],  // Page size options
              "pageLength": 8,            // Default page size
  
              "columnDefs": [
                 { "type": "date-dd-mmm-yyyy", "targets": 5 } // Apply date sorting on column index 2
              ]
           });

        var allPages = myTable.rows().nodes().to$();

        $('.export').click(function () {
            var id = $(this).data('id');
            var properties = Array();
            $('.expexcel').empty();

            $("td:eq(5) input[type=checkbox]:checked", allPages).each(function () {
                properties.push($(this).val());
            });

            $.ajax({
                url: '{{ route("exportPropertyExcel") }}',
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                },
                data: { properties:properties },
                success: function (response) {
                    console.log(response.message);
                    if (response.status) {
                        $('.expexcel').append('<a href="{{ asset("storage/app/public/properties/import/exportPropertyUpdate.xlsx") }}" download class="btn btn-sm"><button class="expbtn">Download</button></a>');
                        $('.expbtn').click();
                        $('.expexcel').empty();
                    }
                },
                error: function (xhr) {
                    console.log(xhr.responseText);
                }
            });
        });
        });
     </script>
@endsection