@extends('partials.layout')

@section('content')
    <!-- Modal for service -->
    <div class="modal fade" id="exampleModalTwo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelTwo" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Inlocuieste produs</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="#" id="replace-product-form">
                        <input type="hidden" id="id" name="id" />
                        <input type="hidden" id="s_id" name="s_id" />
                        <input type="hidden" id="p_id" name="p_id" />

                        <div class="form-group">
                            <label for="new_series">Serie noua</label>
                            <input type="text" class="form-control" id="new_series" name="new_series" />
                        </div>

                        <div class="form-group">
                            <label for="new_price">Product price</label>
                            <input type="text" class="form-control" id="price" name="price" />
                        </div>

                        <div class="form-group">
                            <label for="state">Status</label>
                            <select class="form-control" name="status" id="status">
                                <option value="casat">Casat</option>
                                <option value="reparat">Reparat</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="state">AWB</label>
                            <input type="text" class="form-control" id="awb" name="awb" />
                        </div>

                        <div class="form-group">
                            <label for="price">Pret reparatie</label>
                            <input type="text" class="form-control" name="price_service" id="price-service" />
                        </div>

                        <div class="form-group">
                            <label>
                                Produs in garantie?
                                <input type="checkbox" id="is_guaranty" name="is_guaranty" />
                            </label>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="replace-service-prod">Inlocuieste produs</button>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <span class="filters-text"> Filtre</span>
        <form action="{{ route('filter') }}" method="get" class="filter-form">
            @csrf
            <div class="row filters">

                <div class="title col-sm-4">
                    {{--<div class="filter-group">--}}
                    {{--<label for="product_name" class="filter-label">NUME CLIENT</label>--}}
                    {{--<input type="text" name="client_name" class="filter-input" placeholder="ex: John Doe" required autocomplete="off"/>--}}
                    {{--</div>--}}
                    <div class="filter-group" style="margin-top: 15px;">
                        <label for="product_series" class="filter-label">SERIE PRODUS</label>
                        <input type="text" name="product_series" class="filter-input" />
                    </div>
                    <button type="submit" class="filter-button" name="apply_filter">Aplica filtru</button>
                </div>
            </div>
        </form>
    </div>

    <div class="panel">
        <div class="panel-heading">
            <h3 class="panel-title">Lista Produse</h3>
        </div>
        <div class="panel-body" style="overflow-x: auto;">
            <table class="table table-hover" >
                <thead>
                <tr>
                    <th>#</th>
                    <th>Numar Comanda</th>
                    <th>Produs</th>
                    <th>Data adaugare in service</th>
                    <th>Observatii</th>
                    <th>Status</th>
                    <th>Status dupa reparatie</th>
                    <th>Status garantie</th>
                    <th>Pret total reparatie</th>
                    <th>Problema comunicata de catre client</th>
                    <th>Actiuni</th>
                </tr>
                </thead>
                <tbody>
                @if($service)
                    @foreach($service as $s)
                    <tr>
                        <td></td>
                        <td>{{ $s->order_id }}</td>
                        <td>{{ $s->product }}</td>
                        <td>{{ $s->add_date }}</td>
                        <td>{{ $s->obs }}</td>
                        <td>{{ $s->status }}</td>
                        <td>{{ $s->reparation_status }}</td>
                        <td>{{ $s->is_guaranty ? 'Produs aflat in garantie' : 'Produsul nu este in garnatie' }}</td>
                        <td>{{ $s->price }}</td>
                        <td>{{ $s->client_problem }}</td>
                        <td>
                            @if($s->reparation_status == null)
                                <button id="replace-product" data-order-id="{{ $s->order_id }}" data-product-id="{{ $s->p_id }}" data-service="{{ $s->id }}" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalTwo">Inlocuieste produs</button>
                            @else

                            @endif
                        </td>
                    </tr>
                    @endforeach
                @endif
                </tbody>
            </table>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $('body').on('click', '#replace-product', function () {
                let id = $(this).data('order-id');
                let p_id = $(this).data('product-id');
                let s_id = $(this).data('service');

                $('#replace-product-form #id').val(id);
                $('#replace-product-form #p_id').val(p_id);
                $('#replace-product-form #s_id').val(s_id);
            });

            $('#replace-service-prod').click(function () {
                $.ajax({
                    method: 'post',
                    url: '{{ route('orders.add-to-pivot-prod') }}',
                    data: $('#replace-product-form').serialize(),
                    success: function (data) {
                        $('#replace-service-prod').trigger('reset');

                        $('#exampleModalTwo').modal('hide');
                    }
                });
            });
        });
    </script>
@endsection