@extends('admin.layouts.adminmaster')

@section('title', 'Appliance')

@section('content')

    
<div class="card mb-5">
    <div class="position-relative">
        <div class="card-header card-header d-flex justify-content-between"> 

            <a class="btn btn-primary w-auto ml-auto" href="#!" data-bs-toggle="modal" data-bs-target="#add-appliance-modal"><span class="align-middle">Add Appliance</span></a>

        </div>
        <div class="card-body">
           
            <div class="table-wrap" id="tableDiv">
                <div class="table-responsive">
                    <table id="base-style" class="table table-striped table-bordered align-middle w-100">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Class</th>
                                <th>Type</th>
                                <th>Manufacturer</th>
                                <th>Serial No</th> 
                                <th>Model</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>

                            @foreach($appliances as $key => $appliance)

                            <tr>
                                <td>{{ $key+1 }}</td>
                                <td>{{ $appliance->class }}</td>
                                <td>{{ $appliance->type }}</td>
                                <td>{{ $appliance->manufacturer }}</td>
                                <td>{{ $appliance->serial_no }}</td> 
                                <td>{{ $appliance->model }}</td> 
                                <td>{{ $appliance->status }}</td> 
                                <td>
                                    <div class="dropdown mt-4 mt-sm-0">
                                        <button class="btn btn-light btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="true">
                                            <i class="bx bx-dots-horizontal-rounded"></i>
                                        </button>
                                        <div class="dropdown-menu" data-popper-placement="bottom-end"> 

                                            <a class="dropdown-item cancel-link edit-check" href="#" data-id="{{ $appliance->id }}">Edit</a>

                                            <a class="dropdown-item cancel-link" href="{{ route('admin.del_appliance' , $appliance->id) }}" onclick="return confirm('Are you sure you want to delete this Appliance?');" >Delete</a> 
                                        </div>
                                    </div>
                                </td>
                            </tr>

                            @endforeach


                        </tbody>
                    </table>

                    {{ $appliances->links('admin.appliance.pagination') }}

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


<!-- add appliance model -->
<div class="modal fade" id="add-appliance-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">appliance</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form class="custom-form" id="appliance-form">
                   @csrf
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label class="form-label" for="class">Class</label>
                                <input type="text" class="form-control" placeholder="Enter Class" id="class" name="class" required />  
                               <div class="invalid-feedback" id="class-error"></div>

                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label class="form-label" for="type">Type</label>
                                <input type="text" class="form-control" placeholder="Enter Type" id="type" name="type" required />

                                 <div class="invalid-feedback" id="type-error"></div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label class="form-label" for="manufacturer">Manufacturer</label>
                                <input type="text" class="form-control" placeholder="Enter Manufacturer" id="manufacturer" name="manufacturer" required />
                                <div class="invalid-feedback" id="manufacturer-error"></div>
                            </div>
                        </div> 

                         <div class="col-md-12">
                            <div class="mb-3">
                                <label class="form-label" for="serial_no">Serial No</label>
                                <input type="text" class="form-control" placeholder="Enter Serial No" id="serial_no" name="serial_no" required />

                                 <div class="invalid-feedback" id="serial_no-error"></div>
                            </div>
                        </div>

                         <div class="col-md-12">
                            <div class="mb-3">
                                <label class="form-label" for="model">Model</label>
                                <input type="text" class="form-control" placeholder="Enter Model" id="model" name="model" required />

                                 <div class="invalid-feedback" id="type-error"></div>
                            </div>
                        </div>
 
                        
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary waves-effect waves-light" style="width: 120px;" data-bs-dismiss="modal">No</button>
                <button type="button" class="btn btn-primary" id="submit-btn">Save</button>
            </div>
        </div>
    </div>
</div>

<!-- edit appliance model -->
<!-- Add/Edit appliance Modal -->
<div class="modal fade" id="edit-appliance-modal" tabindex="-1" aria-labelledby="editCompanyLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="editCompanyLabel">Edit appliance</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form class="custom-form" id="edit-appliance-form">
                    @csrf
                    @method('POST') <!-- Ensure the form uses POST method for update -->
                    <input type="hidden" id="edit-appliance-id" name="appliance_id">
                    <div class="mb-3">
                        <label class="form-label" for="edit-class">Class</label>
                        <input type="text" class="form-control" placeholder="Enter Class" id="edit-class" name="class" required />
                        <div class="invalid-feedback" id="edit-class-error"></div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="edit-type">Type</label>
                        <input type="text" class="form-control" placeholder="Enter Type" id="edit-type" name="type" required />
                        <div class="invalid-feedback" id="edit-type-error"></div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="edit-manufacturer">Manufacturer</label>
                        <input type="text" class="form-control" placeholder="Enter Manufacturer" id="edit-manufacturer" name="manufacturer" required />
                        <div class="invalid-feedback" id="edit-manufacturer-error"></div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="edit-serial_no">Serial No</label>
                        <input type="text" class="form-control" placeholder="Enter Serial No" id="edit-serial_no" name="serial_no" required />
                        <div class="invalid-feedback" id="edit-serial_no-error"></div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label" for="edit-model">Model</label>
                        <input type="text" class="form-control" placeholder="Enter Model" id="edit-model" name="model" required />
                        <div class="invalid-feedback" id="edit-model-error"></div>
                    </div>
                    
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="update-btn">Update Changes</button>
            </div>
        </div>
    </div>
</div>

             

@endsection

@section('specificscripts')
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>


<script>
    $(document).ready(function() {
        $('#submit-btn').on('click', function(e) {
            e.preventDefault(); // Prevent the default form submission

            // Get the form element and its data
            var form = $('#appliance-form'); 
            var url = "{{ route('admin.appliance_store') }}"; // Fixed syntax error
            var data = form.serialize();

            // Send AJAX request
            $.ajax({
                url: url,
                type: 'POST',
                data: data,
                success: function(response) {
                   
                    alert(response.message);

                    window.location.reload();
                    // $('#add-appliance-modal').modal('hide'); 
                    // form[0].reset();

                },
                error: function(response) {
                    // Check if validation errors are returned
                     if (response.status === 422) {
                        var errors = response.responseJSON.errors;
                        $.each(errors, function(key, value) {
                            $('#' + key).addClass('is-invalid');
                            $('#' + key + '-error').text(value[0]);
                        });
                    } else {
                        alert('An error occurred. Please try again.');
                    }
                    console.log(response.responseText);
                }
            });
        });
    });
</script>



<script>
    $(document).ready(function() {
        // Handle the edit button click
        $(document).on('click', '.edit-check', function(e) {
            e.preventDefault();
            var companyId = $(this).data('id');

            $.ajax({
                url: '{{ url("admin/appliance_edit") }}/' + companyId,
                type: 'GET',
                success: function(response) {
                    if (response.success) {
                        var appliance = response.data;
                        $('#edit-appliance-id').val(appliance.id);
                        $('#edit-class').val(appliance.class);
                        $('#edit-type').val(appliance.type);
                        $('#edit-manufacturer').val(appliance.manufacturer);
                        $('#edit-serial_no').val(appliance.serial_no);
                        $('#edit-model').val(appliance.model);  
                        $('#edit-appliance-modal').modal('show');
                    } else {
                        alert(response.message);
                    }
                },
                error: function() {
                    alert('Failed to fetch appliance data.');
                }
            });
        });

        // Handle the form submission for updating appliance details
        $('#update-btn').on('click', function(e) {
            e.preventDefault();

            var form = $('#edit-appliance-form');
            var companyId = $('#edit-appliance-id').val();
            var url = '{{ url("admin/appliance_update") }}/' + companyId;
            var data = form.serialize();

            // Clear previous error messages
            $('.invalid-feedback').text('');
            $('.form-control').removeClass('is-invalid');

            $.ajax({
                url: url,
                type: 'POST',
                data: data,
                success: function(response) {
                    if (response.success) {
                        alert(response.message);
                        $('#edit-appliance-modal').modal('hide');
                        // Optionally, refresh the table or page
                        window.location.reload();
                    } else {
                        alert(response.message);
                    }
                },
                error: function(response) {
                    if (response.status === 422) {
                        var errors = response.responseJSON.errors;
                        $.each(errors, function(key, value) {
                            $('#edit-' + key).addClass('is-invalid');
                            $('#edit-' + key + '-error').text(value[0]);
                        });
                    } else {
                        alert('An error occurred. Please try again.');
                    }
                    console.log(response.responseText);
                }
            });
        });
    });
 
</script>


<script>
    $("#base-style").DataTable();
</script>
@stop