@extends('maintenance.layout.layout')

@section('sync', 'active')

@section('content')
    <section class="content">
        <!-- Page Header -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <h1 style="font-weight: bold">Sync</h1>
                </div>
            </div>
        </section>

        <!-- Store Card -->
        {{-- <div class="card" style="max-width: 500px;">
        <div class="card-header">
            <h3 class="card-title">Data Integration and Updates</h3>
        </div>

        <div class="card-body">
            <h6 class="mb-3"style="font-family:'Gotham-Book';">Select Store:</h6>
            <div id="storeCheckboxesContainer"></div>
            <button type="button" class="btn mt-5" id="syncButton" style="background-color: #FEDD00; font-family: 'Gotham-Book';">Sync</button>

        </div>
    </div> --}}

        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Product Refresh</h3>
                    </div>
                    <div class="card-body" style="font-family: 'Gotham-Book';">
                        <p>
                            Refresh the product data from the provided source.
                        </p>
                        <button type="button" class="btn btn-warning text-dark" id="refreshProductButton"style="background-color: #FEDD00">Refresh</button>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Inventory Refresh</h3>
                    </div>
                    <div class="card-body" style="font-family: 'Gotham-Book';">
                        <p>
                            Refresh the inventory data from the provided source.
                        </p>
                        <button type="button" class="btn btn-warning text-dark" id="refreshInventoryButton"style="background-color: #FEDD00">Refresh</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <style>
        .form-inline {
            display: flex;
            align-items: center;
        }

        .form-control,
        .btn {
            height: 38px;
            margin-right: 10px;

        }

        #syncButton {
            padding: 0 15px;
        }
    </style>
@endsection

@section('javascript')
    <script src="{{ asset('js/sync.js') }}"></script>
@endsection