@extends('backend.layout.app')
@section('title', 'Edit System Complain')
@push('css')
    <link href="{{ asset('public/assets/backend/css/datatables.min.css') }}" rel="stylesheet">
@endpush
@section('main_menu', 'HOME')
@section('active_menu', 'Edit System Complain')
@section('link', route('admin.adminDashboard'))
@section('content')

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Update Complain</h3>
        </div>
        <div class="card-body">
            <form id="complain_update_form" class="form-horizontal">
                @csrf
                <div class="row">
                    <div class="col-md-12">
                        <div class="card card-info">
                            <div class="card-header">
                                <h3 class="card-title">Update Complain details</h3>
                            </div>
                            <div class="card-body"> <input type="hidden" name="complain_id" id="complain_id"
                                    value="{{ $complain->id }}">
                                <div class="form-group">
                                    <label>Problem Type:</label>
                                    <select class="form-control select2" name="problem_type" id="problem_type">
                                        <option selected="" disabled="">Please Select</option>
                                        @foreach (\App\ProblemTypeModel::all() as $data)
                                            <option value="{{ $data->id }}"
                                                {{ $complain->problem_type == $data->id ? 'selected' : '' }}>
                                                {{ $data->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <span id="problem_typeError" class="text-red error_field"></span>
                                </div>

                                <div class="form-group"> <label for="exampleInputEmail1">Problem Details</label>
                                    <textarea name="problem_details" id="description" class="form-control" data-gramm="false" wt-ignore-input="true">{{ $complain->description }}</textarea> <span id="problem_detailsError"
                                        class="text-red error_field"></span>
                                </div>

                                <div class="form-group">
                                    <label>Support Type:</label>
                                    <select class="form-control select2" name="support_type" id="support_type">
                                        <option selected="" disabled="">Please Select</option>
                                        @foreach (\App\SupportTypeModel::all() as $data)
                                            <option value="{{ $data->id }}"
                                                {{ $complain->support_type == $data->id ? 'selected' : '' }}>
                                                {{ $data->name }}</option>
                                        @endforeach
                                    </select>
                                    <span id="support_typeError" class="text-red error_field"></span>
                                </div>
                                <div class="form-group">
                                    <label>Problem Status:</label>
                                    <select class="form-control select2" name="problem_status" id="update_problem_status">
                                        <option value="0" {{ $complain->problem_status == 0 ? 'selected' : '' }}>
                                            Informed</option>
                                        <option value="1" {{ $complain->problem_status == 1 ? 'selected' : '' }}>
                                            In Progress</option>
                                        <option value="2" {{ $complain->problem_status == 2 ? 'selected' : '' }}>
                                            Solved</option>
                                    </select>
                                </div>

                                <div class="form-group">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="sell_device_checkbox"
                                            name="sell_device_checkbox" value="checked">
                                        <label class="form-check-label">Sell Device</label>
                                    </div>
                                </div>


                                <div class="row" x-data="handler()" id="sell_device" style="display:none">
                                    <div class="col">
                                        <table class="table table-bordered align-items-center table-sm">
                                            <thead class="thead-light">
                                                <tr>
                                                    <th>#</th>
                                                    <th>Device</th>
                                                    <th>Quantity</th>
                                                    <th>Selling price</th>
                                                    <th>Remove</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <template x-for="(field, index) in fields" :key="index">
                                                    <tr>
                                                        <td x-text="index + 1"></td>
                                                        <td>
                                                            <select class="form-control" name="device[]" x-model="field.txt1">
                                                                @foreach (technician_assign_device($complain->technician_id) as $data)
                                                                    <option value="{{ $data->device->id }}">
                                                                        {{ $data->device->device_name }} -
                                                                        {{ $data->device->device_model }}
                                                                        [{{ $data->quantity }} piece]
                                                                        [{{ $data->device->buy_price }}TK/piece]</option>
                                                                @endforeach

                                                            </select>
                                                        </td>
                                                        <td>
                                                            <input type="number" name="quantity[]" class="form-control"
                                                                required min="1" x-model="field.txt2">
                                                        </td>
                                                        <td>
                                                            <input type="number" name="price[]" class="form-control"
                                                                required min="1" x-model="field.txt3">
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-danger btn-small"
                                                                @click="removeField(index)">&times;
                                                            </button>
                                                        </td>
                                                    </tr>
                                                </template>
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <td colspan="4" class="text-right">
                                                        <button type="button" class="btn btn-info" @click="addNewField()">+
                                                            Add
                                                            Row</button>
                                                    </td>
                                                </tr>
                                            </tfoot>
                                        </table>
                                        <span id="deviceeError" class="text-red error_field"></span>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <button type="submit" class="btn btn-block btn-success"
                                        id="submit_button">Update</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

@endsection
@push('js')
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
    <script>
        // Update complain
        $('#complain_update_form').on('submit', function(event) {
            button_disable(true)
            event.preventDefault();
            error_clear()
            $.ajax({
                url: "{{ route('admin.update_system_complain') }}",
                type: "POST",
                data: $(this).serializeArray(),
                success: function(data) {
                    if (data.message == 'done') {
                        toastr.success('Complain updated Successfully', 'Added');
                        $('#update_complain_modal').modal('hide')
                        error_clear()
                        window.location.href = "{{ route('admin.all_system_complaiin') }}";
                    } else {
                        button_disable(false)
                        toastr.error(data.message, 'Error');
                    }
                },
                error: function(response) {
                    button_disable(false)
                    $('#deviceeError').text(response.responseJSON.errors.device);
                    $('#problem_typeError').text(response.responseJSON.errors.problem_type);
                    $('#problem_statusError').text(response.responseJSON.errors.problem_status);
                    $('#support_typeError').text(response.responseJSON.errors.support_type);
                }
            });
        });

        function error_clear() {
            // $('#dateError').text('');
            $('#problem_typeError').text('');
            $('#problem_statusError').text('');
            $('#support_typeError').text('')
        }

        $("#sell_device_checkbox").change(function() {
            if ($(this).prop('checked')) {
                $('#sell_device').show()
            } else {
                $('#sell_device').hide()
            }
        });


        function handler() {
            return {
                fields: [],
                addNewField() {
                    this.fields.push({
                        txt1: '',
                        txt2: '',
                        txt3: ''
                    });
                },
                removeField(index) {
                    this.fields.splice(index, 1);
                }
            }
        }


        function button_disable(command) {
            if (command == true) {
                $('#submit_button').attr('disabled', 'disabled');
            } else {
                $('#submit_button').removeAttr('disabled');
            }
        }
    </script>
@endpush