@extends('layouts.app', ['title' => 'Vincular Imagens'])

@section('css')
<style>
    /* Modern Card & Layout */
    .card-modern {
        border: none;
        border-radius: 1rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        background: #fff;
        transition: transform 0.2s;
    }
    
    .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
    }
    
    .page-title {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1f2937;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .btn-back {
        background: white;
        border: 1px solid #e5e7eb;
        color: #4b5563;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.2s;
        font-weight: 500;
        text-decoration: none;
    }
    
    .btn-back:hover {
        background: #f9fafb;
        color: #1f2937;
        border-color: #d1d5db;
        transform: translateX(-2px);
    }

    /* Table Modernization */
    .table-modern {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }
    .table-modern thead th {
        background-color: #f9fafb;
        color: #374151;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.05em;
        padding: 1rem;
        border-bottom: 1px solid #e5e7eb;
    }
    .table-modern tbody td {
        padding: 1rem;
        border-bottom: 1px solid #f3f4f6;
        vertical-align: middle;
        color: #4b5563;
    }
    .table-modern tbody tr:last-child td {
        border-bottom: none;
    }
    .table-modern tbody tr:hover td {
        background-color: #f9fafb;
    }

    .img-60 {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 0.5rem;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
</style>
@endsection

@section('content')

<div class="container-fluid px-4 py-4">
    <!-- Header -->
    <div class="page-header">
        <h1 class="page-title">
            <i class="ri-image-edit-line text-primary"></i>
            Vincular Imagens
        </h1>
        <a href="{{ route('produtos.index') }}" class="btn-back">
            <i class="ri-arrow-left-line"></i>
            Voltar
        </a>
    </div>

    <!-- Main Content -->
    <div class="card card-modern">
        <div class="card-body p-4">
            {!!Form::open()
            ->post()
            ->route('produtos.vincular-imagens')
            ->multipart()
            !!}
            
            <div class="table-responsive rounded-3 border">
                <table class="table table-modern mb-0">
                    <thead>
                        <tr>
                            <th width="100">Imagem</th>
                            <th>Produto para Vincular</th>
                            <th class="text-end" width="100">Ação</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($data as $f)
                        <tr>
                            <td>
                                <img src="{{ $f['img'] }}" class="img-60">
                                <input type="hidden" name="diretorio[]" value="{{ $f['diretorio'] }}">
                            </td>
                            <td>
                                <select required class="form-control produto_id" name="produto_id[]"></select>
                            </td>
                            <td class="text-end">
                                <button type="button" class="btn btn-icon btn-soft-danger btn-sm btn-delete-row" title="Remover">
                                    <i class="ri-delete-bin-line"></i>
                                </button>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="mt-4 text-end">
                <button type="submit" class="btn btn-success px-4 rounded-pill">
                    <i class="ri-save-line me-1"></i> Salvar Vinculações
                </button>
            </div>

            {!!Form::close()!!}
        </div>
    </div>
</div>
@endsection

@section('js')
<script type="text/javascript">
	$(".btn-delete-row").on("click", function (e) {
		e.preventDefault();

		swal({
			title: "Você está certo?",
			text: "Uma vez deletado, você não poderá recuperar esta imagem!",
			icon: "warning",
			buttons: true,
			buttons: ["Cancelar", "Excluir"],
			dangerMode: true,
		}).then((isConfirm) => {
			if (isConfirm) {
				$(this).closest('tr').remove()

			} else {
				swal("", "Este item está salvo!", "info");
			}
		});
	});

	$(".produto_id").select2({
        minimumInputLength: 2,
        language: "pt-BR",
        placeholder: "Digite para buscar o produto",
        width: "100%",
        ajax: {
            cache: true,
            url: path_url + "api/produtos",
            dataType: "json",
            data: function (params) {
                let empresa_id = $('#empresa_id').val()

                console.clear();

                var query = {
                    pesquisa: params.term,
                    empresa_id: empresa_id,
                    usuario_id: $('#usuario_id').val(),
                };
                // console.log(query)
                return query;
            },
            processResults: function (response) {
                var results = [];

                $.each(response, function (i, v) {
                    var o = {};
                    o.id = v.id;
                    if(v.codigo_variacao){
                        o.codigo_variacao = v.codigo_variacao
                    }

                    if(v.tipo_dimensao == 1){
                        o.espessura = v.espessura
                    }

                    if(v.altura){
                        o.altura = v.altura
                    }

                    o.text = v.nome
                    
                    o.value = v.id;
                    results.push(o);
                });
                return {
                    results: results,
                };
            },
        },
    });
</script>
@endsection