@extends('layouts.app')

@section('title', 'Deals Activities')

@section('content')
    <!-- [ page-header ] start -->
    <div class="page-header">
        <div class="page-header-left d-flex align-items-center">
            <div class="page-header-title">
                <h5 class="m-b-10">Deals</h5>
            </div>
            <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('index') }}">Home</a></li>
                <li class="breadcrumb-item">Deals Dashboard</li>
            </ul>
        </div>
        <div class="page-header-right ms-auto">
            <div class="page-header-right-items">
                <div class="d-flex d-md-none">
                    <a href="javascript:void(0)" class="page-header-right-close-toggle">
                        <i class="feather-arrow-left me-2"></i>
                        <span>Back</span>
                    </a>
                </div>
                <div class="d-flex align-items-center gap-2 page-header-right-items-wrapper">
                    <a href="javascript:void(0);" class="btn btn-icon btn-light-brand" data-bs-toggle="collapse"
                        data-bs-target="#collapseOne">
                        <i class="feather-bar-chart"></i>
                    </a>
                    <div class="dropdown">
                        <a class="btn btn-icon btn-light-brand" data-bs-toggle="dropdown" data-bs-offset="0, 10"
                            data-bs-auto-close="outside">
                            <i class="feather-eye"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end">
                            <a href="{{ route('deals') }}" class="dropdown-item ">
                                <i class="feather-list me-3"></i>
                                <span>Table View</span>
                            </a>
                            <a href="{{ route('deals-dashboard') }}" class="dropdown-item active">
                                <i class="feather-grid me-3"></i>
                                <span>Dashboard View</span>
                            </a>
                        </div>
                    </div>
                    <div class="dropdown">
                        <a class="btn btn-icon btn-light-brand" data-bs-toggle="dropdown" data-bs-offset="0, 10"
                            data-bs-auto-close="outside">
                            <i class="feather-paperclip"></i>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end">
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="bi bi-filetype-pdf me-3"></i>
                                <span>PDF</span>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="bi bi-filetype-csv me-3"></i>
                                <span>CSV</span>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="bi bi-filetype-xml me-3"></i>
                                <span>XML</span>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="bi bi-filetype-txt me-3"></i>
                                <span>Text</span>
                            </a>
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="bi bi-filetype-exe me-3"></i>
                                <span>Excel</span>
                            </a>
                            <div class="dropdown-divider"></div>
                            <a href="javascript:void(0);" class="dropdown-item">
                                <i class="bi bi-printer me-3"></i>
                                <span>Print</span>
                            </a>
                        </div>
                    </div>

                </div>
            </div>
            <div class="d-md-none d-flex align-items-center">
                <a href="javascript:void(0)" class="page-header-right-open-toggle">
                    <i class="feather-align-right fs-20"></i>
                </a>
            </div>
        </div>
    </div>
    <div id="collapseOne" class="accordion-collapse collapse page-header-collapse">
        <div class="accordion-body pb-2">
            <div class="row">
                <div class="col-xxl-3 col-md-6">
                    <div class="card stretch stretch-full">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="avatar-text avatar-xl rounded">
                                        <i class="feather-users"></i>
                                    </div>
                                    <a href="javascript:void(0);" class="fw-bold d-block">
                                        <span class="text-truncate-1-line">Total Customers</span>
                                        <span class="fs-24 fw-bolder d-block">26,595</span>
                                    </a>
                                </div>
                                <div class="badge bg-soft-success text-success">
                                    <i class="feather-arrow-up fs-10 me-1"></i>
                                    <span>36.85%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xxl-3 col-md-6">
                    <div class="card stretch stretch-full">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="avatar-text avatar-xl rounded">
                                        <i class="feather-user-check"></i>
                                    </div>
                                    <a href="javascript:void(0);" class="fw-bold d-block">
                                        <span class="text-truncate-1-line">Active Customers</span>
                                        <span class="fs-24 fw-bolder d-block">2,245</span>
                                    </a>
                                </div>
                                <div class="badge bg-soft-danger text-danger">
                                    <i class="feather-arrow-down fs-10 me-1"></i>
                                    <span>24.56%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xxl-3 col-md-6">
                    <div class="card stretch stretch-full">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="avatar-text avatar-xl rounded">
                                        <i class="feather-user-plus"></i>
                                    </div>
                                    <a href="javascript:void(0);" class="fw-bold d-block">
                                        <span class="text-truncate-1-line">New Customers</span>
                                        <span class="fs-24 fw-bolder d-block">1,254</span>
                                    </a>
                                </div>
                                <div class="badge bg-soft-success text-success">
                                    <i class="feather-arrow-up fs-10 me-1"></i>
                                    <span>33.29%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xxl-3 col-md-6">
                    <div class="card stretch stretch-full">
                        <div class="card-body">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center gap-3">
                                    <div class="avatar-text avatar-xl rounded">
                                        <i class="feather-user-minus"></i>
                                    </div>
                                    <a href="javascript:void(0);" class="fw-bold d-block">
                                        <span class="text-truncate-1-line">Inactive Customers</span>
                                        <span class="fs-24 fw-bolder d-block">4,586</span>
                                    </a>
                                </div>
                                <div class="badge bg-soft-danger text-danger">
                                    <i class="feather-arrow-down fs-10 me-1"></i>
                                    <span>42.47%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- [ page-header ] end -->
    <!-- [ Main Content ] start -->
    <div class="main-content">
        <div class="table-responsive">
            <table class="table">
                <thead>
                    <tr>
                        @foreach ($stages as $stage)
                            <th class="text-center" style="width: 230px; padding: 10px; border-left: 1px solid #ddd;">
                                <h5 class="stage-title text-truncate mb-0" style="cursor: grab;">
                                    {{ $stage->name }}
                                </h5>
                            </th>
                        @endforeach
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        @foreach ($stages as $stage)
                            <td class="sortable-column" id="stage-{{ $stage->id }}"
                                data-stage-id="{{ $stage->id }}" style="padding: 10px; border-left: 1px solid #ddd;">
                                <div class="deal-list">
                                    @foreach ($deals->get($stage->id, []) as $deal)
                                        <div class="card card-body mb-4 single-deal-item"
                                            data-deal-id="{{ $deal->id }}"
                                            style="margin-bottom: 10px; cursor: grab; transition: transform 0.3s ease-in-out;">
                                            <span class="side-stick"></span>
                                            <h5 class="deal-title text-truncate w-75 mb-1">{{ $deal->name }}
                                            </h5>
                                            <p class="fs-11 text-muted deal-date">
                                                {{ $deal->created_at->format('d M Y') }}
                                            </p>
                                            <div class="deal-content flex-grow-1">
                                                <p class="text-muted deal-inner-content text-truncate-3-line">
                                                    {{ $deal->deal_type }}
                                                </p>
                                            </div>
                                            <div class="d-flex align-items-center gap-1">
                                                <span class="avatar-text avatar-sm">
                                                    <i class="feather-star favourite-deal"></i>
                                                </span>
                                                <span class="avatar-text avatar-sm">
                                                    <i class="feather-trash-2 remove-deal"></i>
                                                </span>
                                                <span class="ms-auto avatar-text avatar-sm">
                                                    <i class="feather-more-vertical" style="cursor: pointer;"></i>
                                                </span>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </td>
                        @endforeach
                    </tr>
                </tbody>
            </table>
        </div>
    </div>



    <!-- [ Main Content ] end -->
@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.deal-list').forEach(function(list) {
                let sortable = new Sortable(list, {
                    group: 'shared',
                    animation: 150,
                    onEnd(evt) {
                        let dealId = evt.item.getAttribute('data-deal-id');

                        let newStageId = evt.item.closest('td').getAttribute('data-stage-id');

                        console.log("Deal ID:", dealId);
                        console.log("New Stage ID:", newStageId);

                        if (evt.from !== evt.to) {
                            fetch(`/deals/${dealId}/update-deal-stage`, {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-CSRF-TOKEN': document.querySelector(
                                            'meta[name="csrf-token"]').getAttribute(
                                            'content')
                                    },
                                    body: JSON.stringify({
                                        stage_id: newStageId
                                    })
                                })
                                .then(response => response.json())
                                .then(data => {
                                    console.log('Deal stage updated', data);
                                })
                                .catch(error => console.error('Error updating deal stage:', error));
                        }
                    }
                });
            });
        });
    </script>
@endsection
