@extends('panel._theme_dashboard')

@section('content')
    <div class="container-fluid" style="margin-top: 10px;">
        <div class="row">
            <div class="col-12 mb-4">
                <h5>Configurações - Serviços</h5>
            </div>
            <div class="col-12 mb-2 text-end">
                <button type="button" class="btn bg-purple" data-bs-toggle="modal" data-bs-target="#serviceModal">
                    Adicionar
                </button>
            </div>
            <div class="col-12">
                <table class="table table-responsive">
                    <thead>
                    <tr>
                        <th>Serviço</th>
                        <th>Valor</th>
                        <th></th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($services as $service)
                        <tr>
                            <td>{{$service->service_name}}</td>
                            <td>R$ {{$service->service_value}}</td>
                            <td>
                                <i class="fal fa-pen" onclick="editService(
                                {{$service->service_id}},
                                '{{$service->service_name}}',
                                '{{$service->service_value}}',
                                )"></i>
                            </td>
                            <td>
                                <i class="fal fa-trash text-danger"
                                   onclick="deleteService({{$service->service_id}})"></i>
                            </td>
                        </tr>
                    @endforeach


                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="modal fade" id="serviceModal" tabindex="-1" role="dialog" aria-labelledby="serviceModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Serviço</h5>
                </div>
                <div class="modal-body">
                    <form method="post" action="{{route("configurations.services.save")}}" enctype="multipart/form-data"
                          id="form-service">
                        @csrf
                        <input type="hidden" name="service_id" id="service_id" value="">
                        <div class="row">
                            <div class="col-12 mb-2">
                                <label for="service_name">Nome do serviço</label>
                                <input type="text" class="form-control" id="service_name" name="service_name" required>
                            </div>
                            <div class="col-12 mb-2">
                                <label for="service_value">Valor do serviço</label>
                                <input type="tel" class="form-control" id="service_value" name="service_value"
                                       required>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" onclick="clearForms()" data-bs-dismiss="modal">
                        Cancelar
                    </button>
                    <button type="button" class="btn bg-purple send-form">Salvar</button>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" name="remove_service_path" id="remove_service_path"
           value="{{route("configurations.services.remove")}}">
@endsection
@section('customJS')
    <script src="{{asset("assets/js/panel/mobile/config-service.js")}}"></script>
@endsection