@extends('layouts.app')


@section('title', 'All Tags')

{{-- custom css --}}
@push('css')
@endpush

{{-- page connect --}}
@section('content')

<x-content-body>

    <x-breadcrumbs :breadcrumbs="$breadcrumbs" />

    <x-row-card>
        <x-slot:title>
            <h4 class="card-title">Manage Tags</h4>
            <a class="btn btn-primary btn-sm btn-rounded" data-bs-toggle="modal" data-bs-target="#addNewTagModal">
                Add Tag
            </a>
        </x-slot:title>

        <div class="table-responsive">
            <table id="tag-table" class="display">
                <thead>
                    <tr>
                        <th class="w-25">Name</th>
                        <th class="text-center">Type</th>
                        <th class="text-center">Used</th>
                        <th class="text-center">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($tags as $tag)
                    <tr>
                        <td>
                            {{ $tag['tag_name'] }}
                        </td>
                        <td class="text-center">
                          {{ $tag['tag_option'] ?? 'N/A' }}
                        </td>
                        <td class="text-center">
                          {{ 'N/A' }}
                        </td>
                        <td class="text-center">
                            <button data-url="{{ route('settings.tags.edit', ['tag' => $tag['id']]) }}"
                                class="btn btn-primary shadow btn-xs sharp me-1 edit-btn"><i class="fa fa-pencil"></i>
                            </button>
                            <button data-url="{{ route('settings.tags.destroy', ['tag' => $tag['id']]) }}"
                                class="btn btn-danger shadow btn-xs sharp me-1 deleteTagButton"><i
                                    class="fa-solid fa-trash"></i></button>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </x-row-card>


    <!-- Add new Tag Modal -->
    <div class="modal fade" id="addNewTagModal" tabindex="-1" aria-labelledby="addNewTag" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Add New Tag</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="add-tag-form">
                        <div class="mb-3">
                            <x-input-label for="tag" required="true" :value="__('Tag')" />
                            <x-text-input name="tag_name" placeholder="##POTENTIAL" />
                        </div>
                        <div class="mb-3">
                            <label for="" class="form-label">Select Option</label>
                            <select class="default-select form-control form-control-sm" name="tag_option" id="">
                                <option selected value="">Select </option>
                                <option value="contact">Contact </option>
                                <option value="property">Property </option>
                                <option value="task">Task</option>
                                <option value="transaction">Transaction</option>
                            </select>
                        </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary btn-sm">Add</button>
                </div>
                </form>
            </div>
        </div>
    </div>




    <!-- Edit Existing  Tag Modal -->
    <div class="modal fade" id="editExistTagModal" tabindex="-1" aria-labelledby="editExistTag" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Edit Tag</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="edit-tag-form">
                        @method('PUT')
                        <x-text-input type="hidden" name="id" id="id" />

                        <div class="mb-3">
                            <x-input-label for="tag" required="true" :value="__('Tag')" />
                            <x-text-input name="tag_name" placeholder="##POTENTIAL" id="tag_name" />

                        </div>
                        <div class="mb-3">
                            <label for="" class="form-label">Select Option</label>
                            <select class="form-control form-control-sm" name="tag_option" id="tag_option">
                                <option selected value="">Select </option>
                                <option value="contact">Contact </option>
                                <option value="property">Property </option>
                                <option value="task">Task</option>
                                <option value="transaction">Transaction</option>
                            </select>
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary btn-sm submit">Update</button>
                </div>
                </form>
            </div>
        </div>
    </div>
</x-content-body>
@endsection


{{-- custom js --}}
@push('js')
<script>
    
    let tagStoreRoute = @json(route('settings.tags.store'));
    let tagIndexRoute = @json(route('settings.tags.index'));
    </script> 
<script src="{{ asset('assets/js/custom/settings/tags.js') }}" ></script>
@endpush